首页 > 代码库 > CSS学习笔记(二):特性

CSS学习笔记(二):特性

一、颜色特性

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"结尾

 

CSS学习笔记(二):特性