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