通用CSS

2020-12-29 10:53 更新

CSS样式

目前平台只支持本文档中列出的CSS样式,如无特殊说明,样式属性的取值范围和规则与标准CSS一致。

所有组件默认为flex布局,以下为平台和浏览器默认值不一样的地方:

  1. {
  2. display:flex;
  3. flex-direction:column;
  4. box-sizing:border-box;
  5. position:relative;
  6. }
  • CSS选择器支持id、class、element。

  • 伪类样式支持active、disabled、focus、checked等。其中active为组件点击高亮状态样式,disabled为组件禁用状态,focus为输入框组件获取焦点状态,checked为组件选中状态。

  • 不支持继承。

  • 不支持通配规则*{},通配规则需要惊人的计算次数,严重影响效率。

  • 应尽量少的对标签进行选择,而应该使用class。如:#nav li{},应优化为给list-view标签加上nav_item的class,并定义.nav_item{}样式进行选择。

  • 不应用标签限定ID或者类选择符。如:ul#nav,应该简化为#nav。

  • 不支持使用后代选择器。后代选择器将降低选择器的权重值,计算开销是最高的。应尽量将选择器的深度降到最低,使用class来关联每一个标签元素。

通用样式

CSS 背景属性(Background)

  1. background //设置元素的背景,目前只支持background-color或background-image,不支持其它属性。
  2. background-color //设置元素的背景颜色。
  3. background-image //设置元素的背景图像。
  4. background-position //设置背景图像的起始位置。
  5. background-repeat //设置是否及如何重复背景图像。
  6. background-size //设置背景图片的尺寸。

CSS 边框属性(Border)

边框的样式只支持solid、dashed、dotted,暂不支持每个边单独设置不同边框样式。

  1. border //在一个声明中设置所有的边框属性。
  2. border-bottom //在一个声明中设置所有的下边框属性。
  3. border-bottom-color //设置下边框的颜色。
  4. border-bottom-style //设置下边框的样式。
  5. border-bottom-width //设置下边框的宽度。
  6. border-color //设置四条边框的颜色。
  7. border-left //在一个声明中设置所有的左边框属性。
  8. border-left-color //设置左边框的颜色。
  9. border-left-style //设置左边框的样式。
  10. border-left-width //设置左边框的宽度。
  11. border-right //在一个声明中设置所有的右边框属性。
  12. border-right-color //设置右边框的颜色。
  13. border-right-style //设置右边框的样式。
  14. border-right-width //设置右边框的宽度。
  15. border-style //设置四条边框的样式。目前只支持一个值写法。
  16. border-top //在一个声明中设置所有的上边框属性。
  17. border-top-color //设置上边框的颜色。
  18. border-top-style //设置上边框的样式。
  19. border-top-width //设置上边框的宽度。
  20. border-width //设置四条边框的宽度。
  21. border-radius //简写属性,设置所有四个 border-*-radius 属性。
  22. border-top-left-radius //定义边框左上角的形状。
  23. border-top-right-radius //定义边框右下角的形状。
  24. border-bottom-left-radius //定义边框左下角的形状。
  25. border-bottom-right-radius //定义边框右下角的形状。
  26. box-shadow //向方框添加阴影。只支持添加一个,spread和inset暂不支持。

Color 属性

  1. opacity //设置元素的不透明度。

CSS 尺寸属性(Dimension)

  1. height //设置元素高度。
  2. min-height //设置元素的最小高度。
  3. max-height //设置元素的最大高度。
  4. width //设置元素的宽度。
  5. min-width //设置元素的最小宽度。
  6. max-width //设置元素的最大宽度。

可伸缩框属性(Flexible Box)

  1. flex-flow //flex-direction 和 flex-wrap 属性的简写。
  2. flex-direction //指定了弹性子元素在父容器中的排列方向。默认值column。
  3. flex-wrap //指定弹性盒子的子元素换行方式。
  4. justify-content //应用在弹性容器上,把弹性项沿着弹性容器的主轴线(main axis)对齐。
  5. align-items //设置或检索弹性盒子元素在侧轴(纵轴)方向上的对齐方式。
  6. align-content //在弹性容器内的各项没有占用交叉轴上所有可用的空间时,对齐容器内的各项。
  7. align-self //设置弹性元素自身在侧轴(纵轴)方向上的对齐方式。
  8. flex //用于指定弹性子元素如何分配空间。flex-grow、flex-shrink、flex-basis属性的简写。
  9. flex-grow //定义弹性盒子元素的扩展比率。
  10. flex-shrink //定义弹性盒子元素的收缩比率。当元素为scroll-view的直接子节点时,默认值为0。
  11. flex-basis //定义弹性盒子元素的默认基准值。

CSS 外边距属性(Margin)

  1. margin //在一个声明中设置所有外边距属性。
  2. margin-bottom //设置元素的下外边距。
  3. margin-left //设置元素的左外边距。
  4. margin-right //设置元素的右外边距。
  5. margin-top //设置元素的上外边距。

CSS 内边距属性(Padding)

  1. padding //在一个声明中设置所有内边距属性。
  2. padding-bottom //设置元素的下内边距。
  3. padding-left //设置元素的左内边距。
  4. padding-right //设置元素的右内边距。
  5. padding-top //设置元素的上内边距。

CSS 定位属性(Positioning)

  1. display //规定元素的显示类型。只支持flex、none,默认值flex。
  2. position //规定元素的定位类型。只支持relative、absolute,默认值relative。
  3. bottom //设置定位元素下外边距边界与其包含块下边界之间的偏移。
  4. left //设置定位元素左外边距边界与其包含块左边界之间的偏移。
  5. right //设置定位元素右外边距边界与其包含块右边界之间的偏移。
  6. top //设置定位元素的上外边距边界与其包含块上边界之间的偏移。
  7. z-index //设置元素的堆叠顺序。
  8. visibility //设置元素是否显示。

2D/3D 转换属性(Transform)

  1. transform //向元素应用 2D 或 3D 转换。
  2. transform-origin //设置转换元素的位置。

过渡属性(Transition)

  1. transition //简写属性,用于在一个属性中设置四个过渡属性。
  2. transition-property //规定应用过渡的 CSS 属性的名称。
  3. transition-duration //定义过渡效果花费的时间。
  4. transition-timing-function //规定过渡效果的时间曲线。
  5. transition-delay //规定过渡效果何时开始。

文本样式

CSS 字体属性(Font)

  1. font-family //规定文本的字体系列。
  2. font-size //规定文本的字体尺寸。
  3. font-style //规定文本的字体样式。
  4. font-weight //规定字体的粗细。
  5. font-variant //规定是否以小型大写字母的字体显示文本。

CSS 文本属性(Text)

  1. color //设置文本的颜色。
  2. text-align //规定文本的水平对齐方式。
  3. line-height //设置行高。
  4. text-shadow //规定添加到文本的阴影效果。
  5. direction //设置文本方向。
  6. letter-spacing //设置字符间距。
  7. text-indent //设置文本中首行文本的缩进。
  8. text-decoration //规定添加到文本的装饰效果。只支持underline和line-through。
  9. text-overflow //规定当文本溢出包含元素时发生的事情。只支持clip和ellipsis。
  10. white-space //设置元素内的空白怎样处理。支持normal和nowrap。
  11. word-break //规定文本的换行规则。
  12. unicode-bidi //设置或返回文本是否被重写。
以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号