CSS层叠样式表常见属性有哪些

这篇文章主要介绍了CSS层叠样式表常见属性有哪些，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

    常见属性

1   颜色属性

   color属性定义文本的颜色

   color:green

   color:#ff6600

   color:#f60(简写式)

   color:rgb(255,255,255)    红(R).绿(G).蓝(B)每个的取值范围0-255

   color:rgba(255,255,255,1)    RGBA是代表Red(红色).Green(绿色).Blue(蓝色)和Alpha的(色彩空间)透明度

2   字体属性

2.1    font-size   字体大小

   font-size:14px

2.2   font-family   定义字体

   font-family:微软雅黑，serif;

   可以使用","隔开，以确保当字体不存在的时候直接使用下一个

2.3   font-weight   字体加粗

   nORMal(默认值).bold(粗).bolder(更粗).lighter(更细)

   100.200.300-900     400=normal，而700=bold

3   背景属性

3.1   背景颜色   background-color

3.2   背景图片   background-p_w_picpath

   background-p_w_picpath:url(图片路径)

   background-p_w_picpath:none

3.3   背景重复   background-repeat

   repeat   重复平铺满

   repeat-x   向X轴重复

   repeat-y   向Y轴重复

   no-repeat   不重复

3.4   背景位置   background-position

   横向(left,center,right)

   纵向(top,center,bottom)

3.5   简写方式

   background:背景颜色  url(图像)重复 位置

   background:#f60  url(p_w_picpaths/bg.jpg)no-repeat top center

4   文本属性

4.1   text-align   横向排列   left,center,right

4.2   line-height   文本行高

   %基于字体大小的百分比行高

   数值来设置固定值

4.3   text-indent   首行缩进

4.4   letter-spacing   字符间距

   normal   默认

   length   设置具体的数值（可以设置负值）

   inherit  继承

5   边框属性

5.1   边框风格   border-style

5.1.1   统一风格（简写风格）   border-style

5.1.2   单独定义某一方向的边框样式

   border-bottom-style   下边边框样式

   border-top-style   上边边框样式

   border-left-style   左边边框样式

   border-right-style   右边边框样式

5.1.3   边框风格样式的属性值

   none   无边框

   solid   直线边框

   dashed   虚线边框

   dotted   点线边框

   double   双线边框

   groove   凸槽边框

   ridge   垄状边框          依托border-color的属性值

   inset   inset边框

   outset   outset边框  

   inherit   继承

5.2   边框宽度   border-width

5.2.1   统一风格   border-width

5.2.2   单独风格

   border-top-width   上边边框宽度

   border-bottom-width   下边边框宽度

   border-left-width   左边边框宽度

   border-right-width   右边边框宽度

5.2.3   边框宽度的属性值

   thin   细边框

   medium   中等边框

   thick   粗边框

   px   固定值的边框

   inherit   继承

5.3边框颜色   border-color

5.3.1   统一风格   border-color

5.3.2   单独风格

   border-top-color   上边边框颜色

   border-bottom-color   下边边框颜色

   border-left-color   左边边框颜色

   border-right-color   右边边框颜色

5.3.3   属性值

   颜色值的名称   red.green

   RGB   rgb（255.255.0）

   RGBA   rgba（255.255.0.0.1）

   十六位进制   #ff0.#ff0000

   继承   inherit

5.3.4   属性值的四种情况

   一个值:border-color:（上.下.左.右）

   两个值:border-color:（上下）（左右）

   三个值:border-color:（上）（左右）（下）

   四个值:border-color:（上）（右）（下）（左）

5.3.5   简写方式   border:solid  2px  #f60

6   列表属性

6.1   标记的类型   list-style-tyle

   none   无标记

   disc   默认，标记是实心圆

   circle   标记是空心圆

   square   标记是实心方块

   decimal   标记是数字

   decimal-leading-zero   0开头的数字标记（01,02,03，等）

   lower-roman   小写罗马数字（i,ii,iii,iv,v等）

   upper-roman   大写罗马数字（I,II,III,IV,V等）

   lower-alpha   小写英文字母The  marker  is  lower-alpha（a,b,c,d,e,等）

   upper-alpha   大写英文字母The  marker  is  upper-alpha（A,B,C,D,E,等）

   lower-greek   小写希腊字母（alpha,beta,gamma,等）

   lower-latin   小写拉丁字母（a,b,c,d,e,等）

   upper-latin   大写拉丁字母（A,B,C,D,E,等）

   hebrew   传统的希伯来编号方式

   armenian   传统的亚美尼亚编号方式

   georgian   传统的乔治亚编号方式（an，ban，gan，等）

   cik-ideographic   简单的表意数字

   hiragana   标记是：a,i,u,e,o,ka,ki,等。（日文片假名）

   katakana   标记是：A,I,U,E,O,KA,KI,等。（日文片假名）

   hiragana-iroha   标记是：i,ro,ha,ni,ho,he,to,等。（日文片假名）

  katakana-iroha   标记是：I,RO,HA,NI,HO,HE,TO,等。（日文片假名）

6.2   标记的位置   list-style-position

   inside   列表项目标记放置在文本以内，且环绕文本根据标记对齐

   outside   默认值，保持标记位于文本的左侧，列表项目放置在文本以外，且环绕文本不根据标记对齐

   inherit   规定应该从父元素继承list-style-position属性的值

6.3   设置图像列表标记   list-style-p_w_picpath

   URL   图像的路径

   none   默认，无图形被显示

   inherit   规定应该从父元素继承list-style-p_w_picpath属性的值

6.4   简写方式   list-style

   list-style:square  inside  url('/i/arrow.jpg')

感谢你能够认真阅读完这篇文章，希望小编分享的“CSS层叠样式表常见属性有哪些”这篇文章对大家有帮助，同时也希望大家多多支持编程网，关注编程网JavaScript频道，更多相关知识等着你来学习!