初学CSS所以就以博客的形式记录下来，权当是个记事本了。
1.CSS语法
CSS规则由俩个主要部分构成：选择器，以及一条或多条声明
selector {declaration1;declaration2;… declarationN}
其中选择器通常是你需要改变的HTML元素，例如”p”或”h1”这些
每条声明由一个属性和一个值组成
其中属性(property)是希望您设置的样式属性。每个属性都有一个值。属性和值被冒号分开
selector {property: value}
具体实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
h1 {color: red}
p {color: green}
</style>
</head>
<body>
<h1>
我是red
</h1>
<p>
我是green
</p>
</body>
</html>2.CSS高级用法
(1)选择器的分组
我们可以对选择器进行分组，这样被分组的选择器就可以分享相同的声明了。用逗号将需要分组的选择器分开。在下面的例子中，我们对所有的标题元素分组，所有标题元素都是红色
h1,h2,h3,h4,h5,h6{
color: red
}
具体实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
h1,h2,h3,h4,h5,h6 {color: red;text-align: center}
</style>
</head>
<body>
<h1>
标题1
</h1>
<h2>
标题2
</h2>
<h3>
标题3
</h3>
</body>
</html>
(2)派生选择器
派生选择器允许我们根据文档的上下文来确定某个标签的样式。通过合理的使用派生选择器，我们可以使HTML页面变的更加整洁
假设我们希望链表中的strong元素变为红色
样式如下
li strong {
color: red
}
实例如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
li strong {color: red}
</style>
</head>
<body>
<ul>
<li><strong>我是红色</strong></li>
<li>我是正常</li>
</ul>
</body>
</html>(3)id选择器
id选择器可以为标有特定id的HTML元素指定特定的样式
id选择器以#来定义
下面的俩个id选择器，第一个可以定义元素颜色为红色，第二个定义元素为绿色
/#red {color: red;}
/#green {color: green}
makedown打不出’#’所以我在前面加了个’/’
具体实例演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
#red {color: red}
#green {color: green}
</style>
</head>
<body>
<p id="red">我是红色</p>
<p id="green">我是绿色</p>
</body>
</html>
(4)id选择器和派生器
现代布局中，id选择器常常用于建立派生选择器
sidebar p {
color: red
}
上面的样式只会应用于出现在id是sidebar的元素内的段落
具体实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
#red p{color: red}
</style>
</head>
<body>
<p id="red">我是红色么？</p>
<h1 id="red">我是什么颜色</h1>
<h1 id="red"><p>我是红色</p></p>
</body>
</html>(5)类选择器
在CSS中，类选择器以一个点号显示:
.center {text-align: center}
在上面例子中，所有拥有center类的HTML元素都为居中
具体实例如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.red {color: red}
</style>
</head>
<body>
<h1 class="red">我是红色</h1>
</body>
</html>
和id一样class也可被用作派生选择器
(6)外部样式表
实例如下
mystyle.css
h1 {color: red}style.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
<body>
<h1>我是红色</h1>
</body>
</html>