轻量级JS UI框架 —— CSS语法

内容纲要

@[toc]

尺寸单位

  • 页面元素样式描述首先需要定义的是组件大小
  • 为了使页面元素在不同分辨率下都能显示在恰当位置,需要了解组件尺寸单位实际物理像素点大小之间的关系:
    • 逻辑像素px:默认手机屏幕具有的逻辑宽度为720px,则100px在实际宽度为1440物理像素屏幕上实际渲染为200物理像素
    • %:表示组件占父组件尺寸的百分比

样式选择器

选择器样例描述
.class.container选择class="container"的组件
#id#titleid选择id="titleid"的组件
tagtext选择text组件
,.title, .content选择class="title"和class="content"的组件
.class tag.content text选择具有class="content"行为的text组件
<div id="containerId" class="container">
    <text id="titleId" class="title">标题</text>
    <div class="content">
        <text id="contentId">内容</text>
    </div>
</div>
div
{
    flex-direction: column;
}
.title
{
    font-size: 30px;
}
#contentId
{
    font-size: 20px;
}
.title, .content
{
    margin: 20px;
}
.container text
{
    color: #007dff;
}

选择器优先级

  • 内联样式 > id > class > tag
  • 组件样式的生命也可直接定义在.hml文件中
    <div class="container">
    <text style="color: red">Hello World</text>
    </div>

CSS伪类

  • 选择器中的特殊关键字,用于指定要选择元素的特殊状态
名称支持组件描述
:disabled支持disabled属性的组件表示disabled属性为true的元素
:focus支持focusable属性的组件表示获取focus时的元素
:active支持click事件的组件表示被用户激活的元素
:checkedinput[type="checkbox"、type="radio"]、switch表示checked属性为true的元素
  • 当点击按钮时背景变为蓝色
    <div class="container">
    <input type="button" class="button" value="Button"></input>
    </div>
    .button:active
    {
    background-color: blue;
    }

留下评论

您的电子邮箱地址不会被公开。