一、颜色特性
1. 前景色:color
用种方式指定前景色,3种方式分别是rgb颜色,#16进制编码,颜色名称:
color: rgb(100,100,100); color: #ee3e80; color: DarkCyan
2. 背景色:background-color
3. 透明度:opacity,rgba
color: rgba(0,0,0,0.5); 或 opacity: 0.5;
4. HSL颜色和HSLA:
HSL颜色的三个属性值为色调(0~360),饱和度(百分数),明度(百分数)。HSLA比HSL多一个透明度(0~1)表示。
background-color:hsla(0,100%,100%,0,5)
二、字体
1. 字体选用: font-family
可以指定多种字体,用逗号隔开,以防止用户浏览器没有安装其中的某些字体。
font-family: Georgia, Times, serif;
2. 字体大小:font-size
字体大小有3种表示方式,分别是像素,百分数,EM值:
像素:px表示
百分数:百分数表示,100%表示16px
em值:1em等于一个字母m的宽度
3. 粗体:font-weight
使该文本以粗体显示,bold为粗体,normal为普通粗细。
font-weight: bold;
4. 斜体:font-style
使文本以斜体显示,italic为斜体,oblique为倾斜,normal为普通字体。
font-style: italic;
5. 大小写:text-transform
使文本以大小写显示,uppercase为大写,lowercase为小写,capitalize为首字母大写。
text-transform: uppercase;
6. 下划线和删除线:text-decoration
可选值为:none无,underline下划线,overline顶部实线,line-through删除线,blink文字闪烁
text-decoration: underline
7. 行间距:line-height
行间距表示的是字母的下缘线到下一行字母的上缘线的距离,一般用em值表示,这样可按用户调整的字母的大小而改变。
line-height:1.4em
除行间距外,还有字母间距letter-spacing和单词间距word-spacing。
8. 对齐方式:text-align
用于控制文本的对齐方式,可选值为:left,right,center,justify(两端对齐)
9. 垂直对齐:vertical-align
用于内联元素,可选值为:baseline,sub,super,top,text-top,middle,bottom,text-bottom
10. 文本缩进:text-indent
对首行文本进行缩进,单位可为px或em。
text-indent: -9999px;
缩进值可为负数,即将文本左移出了屏幕外。
11. 文字投影:text-shadow(CSS3特性)
文字投影要指定3个长度和1个颜色,第一个长度阴影在左右方向的位移,第二个长度阴影在上下方向的偏移,第三个长度为阴影的模糊程度,最后一个颜色为阴影的颜色
text-shadow: -1px -2px 7px #111111;
12. 首字母或首行文本: :first-letter, :first-line
:first-letter和:first-line并不是属性,应该称作为伪元素。在选择器的末尾指定伪元素,可以选定对象。
p.intro:first-letter{ font-size: 200%; } p.intro:first-line{ font-weight:bold; }
13. 链接样式: :link, :visited
:link和:visited是伪类。:link表示那些尚未访问过的链接的样式。:visited表示那些已经单击过的链接样式。
a:link { color: deeppink; } a:visited{ color: black; }
14. 相应用户: :hover, :active, :focus
这三个都是伪类。
:hover 表示光标放在元素上时生效,对触摸屏无效
:active 表示操作时生效,比如按钮按下或者链接被点击
:focus 表示元素拥有焦点时有效
input.submit:hover { background-color: #665544: } input.submit:active{ background-color: chocolate; }
三、特性选择器
p[class] 所有包含class特性的<p>元素 p[class=‘dog‘] class特性值为‘dog‘的<p>元素 p[class~=‘dog‘] class特性值是以空格隔开的单词列表,其中有一个为‘dog‘ p[attr^"d"] 特定的<p>元素,其中某个特性的值以"d"开头 p[attr*"do"] 特定的<p>元素,其中某个特性的值中包含"do" p[attr$"g"] 特定的<p>元素,其中某个特性以"g"结尾