CSS 学习

2016-10-15 本文已影响0人晚期少女

选择器

CSS的两个概念：
em：以页面中字体的宽度/高度为单位，1em为一个字体单位，0.5为半个字体单位
X%：以页面元素所处的盒子或默认设置的宽度/高度为100%，以X%来进行取值

层叠次序

当同一个 HTML 元素被不止一个样式定义时，会使用哪个样式呢？

一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的优先权。

因此，内联样式（在 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 种通用字体系列：

自定义字体样式

直接定义

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"] {}

链接的样式

链接的四种状态：