选择器
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 - 链接被点击的时刻