CSS学习笔记（二）：特性

标签：阴影   开头   color   cin   css   第一个   焦点   put   dog   

一、颜色特性

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[class=‘dog‘] class特性值为‘dog‘的
元素
p[class~=‘dog‘] class特性值是以空格隔开的单词列表，其中有一个为‘dog‘
p[attr^"d"]  特定的
元素，其中某个特性的值以"d"开头
p[attr*"do"]  特定的
元素，其中某个特性的值中包含"do"
p[attr$"g"]  特定的
元素，其中某个特性以"g"结尾

CSS学习笔记（二）：特性

标签：阴影   开头   color   cin   css   第一个   焦点   put   dog   

原文地址：http://www.cnblogs.com/ghenry/p/7137022.html