CSS
这是我参与「第四届青训营 」笔记创作活动的第3天。
CSS英文全称为Cascading Style Sheets，是用来指定文档如何展示给用户的一门语言，例如页面布局、网页样式都由CSS设计完成。
CSS组成
样式是 CSS 最小语法单元，每个样式包含两部分内容：选择器和声明（规则）块。
- 选择器： 用以选择我们将要用来添加样式的 HTML 元素，它可以告诉我们该样式将要作用于页面中的哪些对象
- 声明块： 所有声明被放置在一对大括号
{ }内，然后整体紧邻选择器的后面，一个声明块包含一个或多个声明，每条声明都包含一个 CSS 属性名称和一个值，以冒号分隔。 - 属性： 属性是一般是已经设置好的样式选项，由CSS提前规定，可以直观地表示属性所要设置样式的效果。
- 属性值： 属性值用来显示属性效果的参数，包括关键字、数值或单位。
p {
color: green;
font-weight: bold;
}
上述例子中p 是 CSS 中的选择器;
color 是属性，red 是属性值;
font-weight 是属性，bold 是属性值。
- 其含义是
p选择器指向的HTML元素字体颜色为红色，字体格式为粗体。
CSS的添加
我们首先需要在HTML 文档的相同目录下创建一个文件创建一个styles.css文件，在其中输入内容，例如：
h1 {
color: red;
}
然后在 HTML 文档中，<head> 语句模块里面加上下面的代码：
<link rel="stylesheet" href="styles.css">
在上述代码中，我们用属性rel让浏览器知道有CSS文档存在，并用属性href指定寻找CSS文件的位置。
index.html
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="styles.css">
<meta charset="utf-8">
<title>开始学习 CSS</title>
</head>
<body>
<h1>我是一级标题</h1>
<p>这是一个段落文本。在文本中有一个 <span>span element</span>
并且还有一个 <a href="http://example.com">链接</a>.</p>
<p class="special">这是第二段。包含了一个 <em>强调</em> 元素.</p>
<ul>
<li>项目 1</li>
<li class="special">项目二</li>
<li>项目 <em>三</em></li>
</ul>
</body>
</html>
styles.css
h1
{
color: red;
}
p
{
color: green;
}
li
{
color: green;
}
li.special{
color:orange;
font-weight:bold;
}
最终呈现下面的网页效果：
小结
通过今天的学习，我学会了CSS的基本组成，能够简单的实现用CSS进行页面设计。但CSS的内容还有很多，需要我今后不断地去学习了解，最终才能达到将HTML和CSS巧妙结合运用的目的。
