CSS学习笔记
2016-12-09 本文已影响7人
qin7zhen
CSS样式表
当读到一个样式表时，浏览器会根据它来格式化 HTML 文档。
-
外部样式表
当样式应用于很多页面时，可以通过改变一个文件来改变多个页面的外观。
每个页面使用 <link> 标签链接到样式表。<link> 标签在（文档的）头部：
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
-
内部样式表
当单个文档需要特殊的样式时，可以使用 <style> 标签在文档头部定义内部样式表：
<head>
<style type="text/css">
hr {color: sienna;}
</style>
</head>
-
内联样式
当样式仅需要在一个元素上应用一次时，可以在相关的标签内使用样式（style）属性：
<p style="color: sienna; margin-left: 20px">
This is a paragraph
</p>
CSS语法
-
规则构成：选择器，一条或多条声明。
所有声明由一个花括号{}括起，由分号;将每个声明分开。
selector {declaration1; declaration2; ... declarationN }
-
声明：每条声明由一个属性和一个值组成，属性和值被冒号分开。
若值为若干单词，则要给值加引号。
selector {property: value}
-
选择器分组：同组的选择器可以分享相同的声明。
用逗号将需要分组的选择器分开。
selector1, selector2 {declaration}
-
继承：子元素从父元素继承属性。
子元素摆脱继承：为子元素创建特殊的规则，即可使其摆脱父元素的规则。
CSS选择器
-
派生选择器：根据文档的上下文关系来确定所选择的标签。
通过合理地使用派生选择器，我们可以使 HTML 代码变得更加整洁。
例如，只希望列表中的 strong 元素变为斜体字，而不是通常的粗体字：
li strong {
font-style: italic;
font-weight: normal;
}
-
id 选择器：为标有特定 id 的 HTML 元素指定特定的样式。
CSS文件中，以 "#" 来定义，且每个id 属性只能在每个 HTML 文档中出现一次。
例如，定义id="red"的元素的颜色为红色：
CSS代码：
#red {color:red;}
HTML代码：
<p id="red">这个段落是红色。</p>
-
类选择器：为特定类内的 HTML 元素指定特定的样式。
CSS文件中，类选择器以一个点号显示，且第一个字符不能使用数字。
例如，拥有 center 类的 HTML 元素均为居中。
CSS代码：
.center {text-align: center}
HTML代码：
<h1 class="center">This heading will be center-aligned</h1>
-
属性选择器：对带有指定属性的 HTML 元素设置样式。
-
[attribute]: 用于选取带有指定属性的元素。 -
[attribute=value]:用于选取带有指定属性和值的元素。 -
[attribute~=value]:用于选取属性值中包含指定词汇的元素。 -
[attribute|=value]:用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。 -
[attribute^=value]:匹配属性值以指定值开头的每个元素。 -
[attribute$=value]:匹配属性值以指定值结尾的每个元素。 -
[attribute*=value]:匹配属性值中包含指定值的每个元素。
-
伪元素
- 伪元素用于向某些选择器设置特殊效果。
- 伪元素
-
first-letter：向文本的第一个字母添加特殊样式。 -
first-line：向文本的首行添加特殊样式。 -
before：在元素之前添加内容。 -
after：在元素之后添加内容。
-
- 伪元素的使用方法：
selector:pseudo-element {property:value;}
Reference
w3school的CSS教程 http://www.w3school.com.cn/css/index.asp
