前端之CSS开始
CSS
html对应网页的结构，CSS则对应网页的样式和布局 —— 例如，更改内容的字体，颜色，大小和间距，将其拆分为多个列，或添加动画和其他装饰功能。
CSS 语法
选择器 {
属性:值;
}
selector {
property:value;
}
注意：选择器和声明都可以有多个（声明即 属性:值 ）。
<style>
p {
font-size: 3em;
}
</style>
宽高都变成了普通字体的三倍。
为HTML添加css
1.外部样式表
位置：在HTML文档的head标签内引入css文件
<link rel="stylesheet" href="路径（最好用相对路径）">
2.内部样式表
位置：直接放入head标签内的style标签里
<html lang="zh-Hans">
<head>
<title>css起步</title>
<style>
header p {
font-size: 3em;
}
</style>
</head>
</html>
3.内联样式
在对应元素内用style属性进行设置
<style>
<article>
<h2 style="color: blue; font-size: 2.5em;">好句积累</h2>
<ol start="a" style="color: red;">
<li>
一切命运的馈赠早已明码标价。
</li>
<li>
世间至理，等价交换。
</li>
<li>
一个教育家，即使是最蹩脚的教育家也绝不会让自己的学生收到半点伤害。
</li>
<li>
作为一教育家，我相信我的学生一定会是个好孩子。
</li>
</ol>
<p style="color: blue; margin-left: 350px;">
—— 一只爱吃萝卜的小兔子的积累
</p>
</article>
</style>
样式化 HTML 元素（改变元素样式）
取消列表元素的默认样式
选中元素，使用下面的命令，取消默认样式的样式表
<style>
li {
list-style-type: none;
}
</style>
元素选择器
即直接匹配 HTML 元素的选择器（空格是后代选择器）
style：
<style>
main article h2{
color: rgb(255, 1, 1);
}
main article p, main article ul li{
color: rgb(62, 230, 62);
}
</style>
<main>
<article>
<h2>I am a level one heading</h2>
<p>This is a paragraph of text. In the text is a span element and also a <a href="http://example.com/" target="_blank"><strong>link</strong></a>.</p>
<p>This is the second paragraph. It contains an <strong>emphasized</strong> element.</p>
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item <em>3</em></li>
</ul>
</article>
</main>
类选择器
元素选择器会导致指定范围内的元素都一个样，也就是说元素选择器会改变一类元素样式。
如要指定某一个元素的样式，写个样式类，然后再给对应元素加上类选择器。
<style>
.one{
color:red;
font-size: 1.2em;
}
</style>
<ul>
<li>item 1</li>
<li class="one">item 2</li>
<li>item
<em>3</em>
</li>
</ul>
id选择器
文档内部的id都是唯一的。
<style>
#only {
/* 斜体 紫色 */
font-style: italic;
color: purple;
}
</style>
<p id="only">id 选择器</p>
选择器（符）种类
后代选择器——空格
在任意两个选择器之间加上空格。
<style>
/* 指定header标签内的p元素的样式 */
header p {
font-size: 3em;
}
/* 爷 父 孙 */
main article h2 {
color: rgb(255, 1, 1);
}
main article p,
main article ul li {
color: rgb(62, 230, 62);
}
</style>
子元素选择器——大于号
只能选亲儿子（孙子都不行）
<style>
/*
父>子
*/
main > article{
color: rgb(62, 230, 62);
}
</style>
相邻兄弟选择器——加号
选择紧接在第一个元素后的元素，而且二者有相同的父元素。（亲兄弟，不可以是堂兄弟）
既要相邻，又要有同一个爸爸
<style>
h1 + small{
color: rgb(73, 203, 255);
}
</style>
<header>
<h1>css起步</h1>
<small>作者：一只爱吃萝卜的小兔子</small>
</header>
<footer>
<small>© 一只爱吃萝卜的小兔子</small>
</footer>
如果把 h + 去掉，红框内的都会变为蓝色。
后续选择器——波浪线
选取所有指定元素之后的相邻兄弟元素（同级）。
<style>
ul~p{
background-color: yellow;
}
</style>
<ul>
<li>item 1</li>
<li class="one">item 2</li>
<li>item<em>3</em>
</li>
<li class="two">item 4</li>
</ul>
<p class="two">类选择器和元素选择器一起使用,对该元素中含有指定类的部分指定样式</p>
<p id="only">id 选择器</p>
根据标签的状态确定样式,
未访问的、访问过的、被鼠标悬停的（、被键盘定位的），亦或是正在被点击当中的状态，上一次点击的
<style>
/* 没有被访问过的 绿色*/
a:link{
color: green;
}
/* 访问过的 黄色*/
a:visited{
color: yellow;
}
/* 鼠标悬停的 取消修饰，字体改为黑色*/
a:hover{
text-decoration: none;
font-size: 1.2em;
}
/* 点击时 字体恢复原来大小 */
a:active{
font-size: 1em;
}
/* 上一次点击的————只在a标签中生效 */
a:focus{
color: red;
}
</style>
网页链接改变样式的时候，最好保持下划线，方便用户辨认。
网页实例
组合选择器
类选择器和元素选择器
定义一类样式，对该元素中含有指定类的部分指定样式
- 只有类选择器的情况下
<style>
.two{
font-size: 1.2em;
color: rgb(0, 59, 253);
}
</style>
<ul>
<li>item 1</li>
<li class="one">item 2</li>
<li>item<em>3</em></li>
<li class="two">item 4</li>
</ul>
<p class="two">p class="two"</p>
- 类选择器和元素选择器一起使用时：
<style>
li.two{
font-size: 1.2em;
color: rgb(0, 59, 253);
}
</style>
<ul>
<li>item 1</li>
<li class="one">item 2</li>
<li>item<em>3</em></li>
<li class="two">item 4</li>
</ul>
<p class="two">p class="two"</p>
选择器和选择符
<style>
body main article ul > li.two {
font-size: 1.2em;
color: rgb(0, 59, 253);
}
</style>
网页实例（Ctrl+U查看原码）