关于CSS层叠样式（颜色+边框+文本属性）

CSS相关常用属性

1. 颜色属性：

   1. color属性定义文本的颜色。
      1. 颜色值：
         1. rgb格式即由三元色按比例所调节的颜色值，r即red；g即green；b即blue。该值的取值在0-255之间。写法：{color：rgb (255,0,0);}
         2. rgba格式。a代表透明度取值范围0-1。写法：{color:rgba(2500,200,0,0.1)；}
         3. 十六进制写法，这种方法简单，可在PS界面调整颜色值，类似于：{color：#ff66oo;}
   2. 字体属性：
      1. font-size:  size的单位可以是px，%或者smaller即比父元素字体更小；inherit继承父元素字体大小；larger比父元素字体更大。
      2. font-family:  定义字体，格式：{font-family：“微软雅黑”，“宋体”}。字体样式不同的电脑可能装载不同的字体，写代码时，建议多写几个备用字体，用“，”隔开。
      3. font-weight;  字体粗细。其值包括：normal默认值;bold粗;bolder更粗;lighter更细;或者用百数表示即100-700之间的整百。normal=400，bold=700；
      4. font-style： 字体样式；italic斜体；oblique倾斜；inherit继承父元素样式；normal正常即默认值。
      5. font-variant: 该样式是针对英文，normal正常。small-caps 小型大写字母的字体。

2. 背景相关属性：

   1. 1. 背景图片：

background-image：url（图片路径）

                         2.  背景颜色：

background-color

 3.  背景重复：

background-repeat：repeat（重复铺满整个屏也是默认值）；repeat-x（沿x轴重复）；repeat-y（沿y轴方向重复）no-repeat(不重复)

 4.  背景位置：

background-position：

1. 1. 横向（left，center，right）
   2. 纵向（top,center,bottom）
   3. 用数值，单位px

注：简写方式：{background：背景颜色 Url(图像路径) 重复方式 位置}；用空格分开元素值。

 3. 文本相关属性：

1. 1. 1. 横向排列：text-align：left/center/right
      2. 文本行高：line-height: px/%。%是基于字体大小的百分比行高。px即为固定值的单位。
      3. 首行缩进：text-indent：%/px/inherit。%父元素的百分比，px即为固定值的单位，默认为0.inherit继承。
      4. 单词间距：word-spacing：normal/px/inherit
      5. 字符间距：letter-spacing:normal；length（设置具体数值，可设负值，单位px/em/cm/mm）
      6. 文本方向：direction：ltr（left to right);rtl(right to left);inherit.
      7. 文本大小写：text-transform:normal;capitalize(每个单词以大写字母开头);uppercase(定义仅大写字母);lowercase(定义仅小写字母);inherit

  4. 边框相关属性：

1. 1. 1. 边框风格：border-style
         1. 边框风格样式属性值；
         2. 单独定义某一方向的边框样式。
         • 边框风格样式属性值：none(无边框)   solid(直实线边框)  dashed(虚直线边框)  dotted(点状边框)  double(双线边框)  {不常用：inset边框，ridge胧状边框，groove凸槽边框  outset边框。此类边框依托border-color属性显示出不同的效果}
         • 单独定义某一方向的边框样式：border-top/bottom/left/right-style:上/下/左/右边框样式
      2. 边框宽度：border-width

border-top/bottom/left/right-width：上/下/左/右边框宽度

宽度的属性值：thin细边框  medium中等边框  thick粗边框  px固定值  inherit继承父元素值

 3.  边框颜色：border-color：

border-top/bottom/left/right-color：上/下/左/右边框颜色。

属性值：rgb/rgba/十六进制

注：属性值的四种情况：

1. 1. 一个值：表示上下左右一致。
   2. 两个值：上下，左右
   3. 三个值：上，左右，下
   4. 四个值：上，右，下，左；即由上顺时针方向
   • 简写方式：{border：风格样式  边框宽度  边框颜色；}

转载于:https://www.cnblogs.com/xsql/p/5985311.html