如何在 HTML 中应用 CSS基础详解
接下来用这个 index.html 将在下文讲解中用到。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<h2>h2 tag</h2>
<div class="class1">class1</div>
<div class="class2">class2</div>
<div id="main">
<h2>h2 in main</h2>
</div>
</body>
</html>
如何在 HTML 中应用 CSS
我们可以通过三种方式对 HTML 的内容作修饰。
第一种是直接引用外部文件 (比如：index.css)。
<link rel="stylesheet" type="text/css" href="index.css">
第二种是在 HTML 文件头中嵌入 CSS 样式。
<style type="text/css">
h2{font-size: 100px;}
</style>
第三种是直接写入标签中。
<div style="font-size:20px">Font-Size</div>
综合起来，HTML 可以是这样的 (选择一种方法即可)。鉴于方便修改的缘故，通常选择第一种方法。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="index.css">
<style type="text/css">
h2{font-size: 100px;}
</style>
</head>
<body>
<h2>h2 tag</h2>
<div style="font-size:20px">Font-Size</div>
</body>
</html>
如何选择要修饰的内容
修饰某一个或多个标签、标签内容有三种方式：直接通过标签名修饰、通过唯一的 ID 修饰、通过 class 修饰。首先，考虑修饰单一的标签、ID 和 class。
h2{font-size:100px;} /* 通过标签 */
.class1{font-size:50px;} /* 通过 class */
#main{background:gray;} /* 通过 ID */
/* 内部元素以;分开，结尾可以不用; */
并列修饰(修饰多个)。
.class1,.class2,h2,div{font-size:100px;}
嵌套修饰(修饰子标签)，下面两者对于给出的 demo.html 具有相同效果。
#main h2{color: #980000;} /* main id 下的 h2 标签 */
div h2{color: #980000;} / * div 下的 h2 标签 */
对于嵌套的情况，可以是嵌套多层的、隔层的，并且可以标签名、ID、class 并用。
进阶：CSS样式的组织
对要实现的效果都胸有成竹之后，更多的考虑在于如何组织CSS。这里的组织指的是CSS的嵌套和分解，通过良好的组织达到较好的可读性和可维护性。这可以通过学习其他框架来提高这种组织的能力，比如 Bootstrap。通过学习Bootstrap至少可以让人发现两个值得关注的地方：元素的共性和特性的分解；元素嵌套关系的组织。
另外，为了保持与HTML尽量分离，通常是用元素的 class 来修饰元素，其次是标签名。class 里面样式的并列体现了样式的“分解”。
其他
- CSS 中用
/* */作为注释标记 - 修饰语句通过分号隔开
h2{font-size:100px;color:red;} - 查看 HTML 内容的 CSS 修饰：在浏览器中右键选择检查元素，可以实现查看、修改、添加
- Firefox 提供了 3D 查看效果来查看 HTML 的层结构
- 由于浏览器解析不同，需要考虑 CSS 样式的兼容性，为多个浏览器适配
- 考虑 CSS 之间是否会存在冲突。比如，通过标签设置为一种颜色，但是在另外的地方又通过 ID 设置为另外一种颜色。这可能使得修饰达不到预期的效果。
- CSS 样式的精简。通过适当的分解 CSS，通过并列嵌套等修饰内容，减少冗余的 CSS。
- CSS 一方面可以实现基本的对内容的修饰，也可以实现与用户的交互响应。
- 一个标签中的多个 class 通过空格来分开，比如
<div class="class1 class2></div>"。 - 子选择器
body > div > div > blockquote{ margin-left: 30px; }。 - 兄弟选择器
.post h1 + p:first-line{ font-variant: small-caps; },.post h1 ~ p{...}。 - 属性选择器
div[class*="post"]{color: #EEE;},input[type="text"]{width=200px;}。 - 伪元素
ul li:first-child{...},ul li:nth-child(2n+1){...},.clearfix:after{clear:both;},a:active{...},p:first-letter{...},.post > p:first-of-type:first-line{...},input:not([type="submit"]){...}, …。