我们专注攀枝花网站设计 攀枝花网站制作 攀枝花网站建设
成都网站建设公司服务热线:400-028-6601

网站建设知识

十年网站开发经验 + 多家企业客户 + 靠谱的建站团队

量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决

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

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

创新互联一直秉承“诚信做人,踏实做事”的原则,不欺瞒客户,是我们最起码的底线! 以服务为基础,以质量求生存,以技术求发展,成交一个客户多一个朋友!为您提供做网站、网站建设、成都网页设计、微信平台小程序开发、成都网站开发、成都网站制作、成都软件开发、手机APP定制开发是成都本地专业的网站建设和网站设计公司,等你一起来见证!

    常见属性

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层叠样式表常见属性有哪些”这篇文章对大家有帮助,同时也希望大家多多支持创新互联,关注创新互联行业资讯频道,更多相关知识等着你来学习!


网页标题:CSS层叠样式表常见属性有哪些
URL链接:http://mswzjz.cn/article/ghpoos.html

其他资讯