选择器
CSS的两个概念：
em：以页面中字体的宽度/高度为单位，1em为一个字体单位，0.5为半个字体单位
X%：以页面元素所处的盒子或默认设置的宽度/高度为100%，以X%来进行取值
层叠次序
当同一个 HTML 元素被不止一个样式定义时，会使用哪个样式呢？
一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的优先权。
- 浏览器缺省设置
- 外部样式表
- 内部样式表（位于 <head> 标签内部）
- 内联样式（在 HTML 元素内部）
因此，内联样式（在 HTML 元素内部）拥有最高的优先权，这意味着它将优先于以下的样式声明：<head> 标签中的样式声明，外部样式表中的样式声明，或者浏览器中的样式声明（缺省值）
中文字体
- Windows：Choose from “Microsoft YaHei” and “SimSun” 。bold and large text better to choose "Microsoft YaHei", if didn't installed, will replace by “SimSun”.
- OS X："Hiragino Sans GB"，if didn't installed, will replace by "STHeiti".
- iOS：Use default "STHeiti".
- Linux："WenQuanYi Micro Hei", if didn't installed, will replace by else.
- Android: Use default "Droid Sans".
英文字体
CSS 定义了 5 种通用字体系列：
- Serif 字体
- Sans-serif 字体
- Monospace 字体
- Cursive 字体
- Fantasy 字体
自定义字体样式
CSS3 @font-face_@font-face, css3属性详解 教程_w3cplus
CSS3 字体
@font-face
直接定义
p {}
body {}
p, body {}
派生选择
header p {}
id 选择(注意大小写)，唯一
#Wiki div {}
#Project p {}
类选择（class），非唯一
可以有 class="important most"，类选择使用 .important .most .important.most
.BlogTitle {}
.BlogTitle p {}
a.linkclass:hover {}
属性选择
input[type="text"] {}
input[type="button"] {}
链接的样式
链接的四种状态：
- a:link - 普通的、未被访问的链接
- a:visited - 用户已访问的链接
- a:hover - 鼠标指针位于链接的上方
- a:active - 链接被点击的时刻
网友评论