初学CSS的笔记整理：
- CSS工作方式：浏览器在展现一个文档时，必须将文档内容和CSS结合起来，处理过程如下：
①浏览器先将标记语言和CSS转换成DOM<文档对象模型>结构，此时DOM代表电脑内存中的相应文档，因为它已经融合了文档内容和相应的样式表。
②然后浏览器把 DOM的内容展示出来。
2. 层叠和继承：
①层叠样式的优先级从高到低依次为：网页开发者定义的样式、网页阅读者定义的样式、浏览器的默认样式。
【注】:CSS 另外提供了一个!important关键字，用户可以通过使用这个关键字使自己定义的样式覆盖掉开发者定义的样式。
②对继承的元素来说，子元素自身的样式优先级高于从父级继承来的样式。
3. 选择器:
①类选择器：通过class属性定义，为元素指定类名，文档中的多个元素可以拥有同一个类名。
②id选择器：通过id属性定义，为元素制定id，每个ID在文档中必须是唯一。
③伪类选择器：加在选择器后面的用来指定元素状态的关键字。如:link, :visited, :hover, :checked, :focus..
语法格式：selector : pseudo-class {property: value}
④通用选择器：类似通配符，可以给所有可用元素添加样式。
语法格式：* { }
④优先级：id选择器 > 类选择器 > 标签选择器（tag selector）。
【注】：样式表中，类选择器以“.”开头；id选择器以"#"开头。
<p class="key" id="principal">
.key {
color: green;
}
#principal {
font-weight: bolder;
}
4. 文本样式：
font-size: 字体的大小；
line-height: 文本的行间距；
font-style:italic; 指定文本为斜体；
font-weight:bold; 指定文本加粗；
font-variant: small-caps; 指定文本为小型大写字母；
......
文字样式：
text-shadow： 给文字添加阴影；
work-break: 让文本自动换行；
word-wrap: 长单词和url自动换行；
Web Font与@font-face: 使用服务器端字体；
font-size-adjust: 修改字体种类而保持字体尺寸不变；
......
5. 内容：
①文本内容：在选择器的后面加上:before 或者 :after 。在声明中，指定 content 属性，并设置文本内容。
.ref:before {
font-weight: bold;
color: navy;
content: "Reference: ";
}
②图片内容：通过将content 属性值设置为某个图片的URL，可以将图片插到元素的前面或后面。
下面这条规则在所有类名包含glossary的a标签后面插入一个空格和一个图标：
a.glossary:after {content: " " url("../images/glossary-icon.gif");}
6. 列表：
使用list-style 属性来指定列表项标记的样式。
语法如下：
list-style: 简写属性。用于把所有用于列表的属性设置于一个声明中。
列表类型：ul {list-style-type : square}
列表项图像：ul li {list-style-image : url(xxx.gif)}
7. 盒模型：
当你的浏览器展现一个元素时，这个元素会占据一定的空间。这个空间由四部分组成：
内容(content)、内边距(padding)、边框(border)、外边距(margin)
中间是元素呈现内容的区域。这个区域的外面是内边距。再外面是边框。最外面的是外边距，外边距将该元素与其它元素分开。
边框样式：border属性给元素四周指定统一的边框。
盒模型相关博客推荐：《CSS盒子的浮动》《CSS盒子的定位》
8. 布局
①块级元素的width可以阻止内容从左到右撑满容器。
#main { width: 600px; margin: 0 auto; }
<div id="main"> 设置块级元素的 width 可以阻止它从左到右撑满容器。然后你就可以设置左右外边距为 auto 来使其水平居中。元素会占据你所指定的宽度，然后剩余的宽度会一分为二成为左右外边距。 唯一的问题是，当浏览器窗口比元素的宽度还要窄时，浏览器会显示一个水平滚动条来容纳页面。 </div>
②max- 替代 width：width 可以使浏览器更好地处理小窗口的情况，可以解决水平滚动条的问题。
③ box-sizing: border-box; 此元素的内边距和边框不再会增加它的宽度。
.simple { width: 500px; margin: 20px auto; box-sizing: border-box; } .fancy { width: 500px; margin: 20px auto; padding: 50px; border: solid blue 10px; box-sizing: border-box; }
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
} <div class="simple">
我们现在一样大小了！
</div>
<div class="fancy">
万岁！
</div>
④position：static(静态定位),relative(相对定位),fixed(固定定位),absolute(绝对定位，相对于它的父元素定位)
参考资料：《CSS-position》
⑤clear: 控制浮动
⑥clearfix: 清除浮动
.clearfix { overflow: auto; }
⑦float: 浮动布局，当某内容比非浮动的内容还要高或者低时需要。
⑧width: *%; 百分比宽度
⑨inline-block：简单来说就是将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link（a元素）inline-block属性值，使其既具有block的宽度高度特性又具有inline的同行特性。
⑩column: 实现文字的多列布局
.three-column { padding: 1em; -moz-column-count: 3; -moz-column-gap: 1em; -webkit-column-count: 3; -webkit-column-gap: 1em; column-count: 3; column-gap: 1em; }
布局相关博客推荐：《CSS固定宽度布局》《CSS变化宽度布局》
9. 媒体查询语法：
<!-- link元素中的CSS媒体查询 -->
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />
<!-- 样式表中的CSS媒体查询 -->
<style>
@media (max-width: 600px) {
.facet_sidebar {
display: none;
}
}
</style>
CSS媒体查询可以用于实现响应式设计，响应式设计可以随所显示的屏幕大小而改变。
一些常见的媒介类型：
媒体相关博客推荐：《CSS媒体查询创建响应式网站》
posted on
