文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

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

2024-04-02 19:55

关注

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

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     807人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     351人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     314人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     433人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     221人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯