从零开始学习html（六）开始学习CSS，为网页添加样式

一、认识CSS样式

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>认识CSS样式</title>
 6 <style type="text/css">
 7 p{
 8    font-size:12px;/*设置文字字号*/
 9    color:red;/*设置文字颜色*/
10    font-weight:bold;/*设置字体加粗*/
11 }
12 </style>
13 </head>
14 <body>
15 <p>慕课网，超酷的互联网、IT技术免费学习平台，创新的网络一站式学习、实践体验；服务及时贴心，内容专业、有趣易学。专注服务互联网工程师快速成为技术高手！</p>
16 </body>
17 </html>

认识CSS样式

CSS全称为“层叠样式表 (Cascading Style Sheets)”，

它主要是用于定义HTML内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等。

如下列代码：

p{
   font-size:12px;
   color:red;
   font-weight:bold;
}

使用CSS样式的一个好处是通过定义某个样式，可以让不同网页位置的文字有着统一的字体、字号或者颜色等。

试一试：用css样式代码修改字体大小

在编辑器中的第8行修改

“font-size:12px;”为“font-size:20px;”

观察结果窗口的变化。

font-size:20px;后面的分号;不能忘记。

二、CSS样式的优势

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>CSS样式的优势</title>
 6 <style type="text/css">
 7 span{
 8    color:red;
 9 }
10 </style>
11 </head>
12 <body>
13     <p>慕课网，<span>超酷的互联网</span>、IT技术免费学习平台，创新的网络一站式学习、实践体验；<span>服务及时贴心</span>，内容专业、<span>有趣易学</span>。专注服务互联网工程师快速成为技术高手！</p>
14 </body>
15 </html>

CSS样式的优势

为什么使用css样式来设置网页的外观样式呢？编辑器中是一段文字，我们想把“超酷的互联网”、“服务及时贴心”、

“有趣易学”这三个短语的文本颜色设置为红色，这时就可以通过设置样式来设置，而且只需要编写一条css样式语句。

第一步：把这三个短语用<span></span>括起来。（见代码编辑器13行）

第二步：写入下列代码：（见代码编辑器7-8行）

span{
    color:red;
}

观察结果窗口文字的颜色是否变为红色了。

试一试：我们现在想把“超酷的互联网”、“服务及时贴心”、“有趣易学”这三个短语的文本颜色改为蓝色

在编辑器第8行，修改代码color:red;为color:blue;

不要忘记 color:blue;语句后的分号;

解释：


span{ color:blue;  font-size:20px; font-weight: bolder; }

span 不是固定的，可以换成任意的字母，只要能匹配统一就行

aqua 浅绿色 black 黑色 blue 蓝色 fuchsia 紫红色 gray 灰色 green 绿色 lime 绿黄色 maroon 栗色 navy 深蓝色 olive 橄榄色 purple 紫色 red 红色 silver 银白色 teal 蓝绿色 white 白色 yellow 黄色

三、CSS代码语法

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>CSS代码语法</title>
 6 <style type="text/css">
 7 p{
 8    font-size:12px
 9    color:red
10    font-weight:bold
11 }
12 </style>
13 </head>
14 <body>
15 <p>慕课网，超酷的互联网、IT技术免费学习平台，创新的网络一站式学习、实践体验；服务及时贴心，内容专业、有趣易学。专注服务互联网工程师快速成为技术高手！</p>
16 </body>
17 </html>

CSS代码语法

css 样式由选择符和声明组成，而声明又由属性和值组成，如下图所示：

选择符：又称选择器，指明网页中要应用样式规则的元素，如本例中是网页中所有的段（p）的文字将变成蓝色，而其他的元素（如ol）不会受到影响。

声明：在英文大括号“｛｝”中的的就是声明，属性和值之间用英文冒号“：”分隔。当有多条声明时，中间可以英文分号“;”分隔，如下所示：

p{font-size:12px;color:red;}

注意：

1、最后一条声明可以没有分号，但是为了以后修改方便，一般也加上分号。

2、为了使用样式更加容易阅读，可以将每条代码写在一个新行内，如下所示：

p{
   font-size:12px;
   color:red;
}

来试一试：补充css代码，使代码有效

观察代码编辑器中8-10行，css代码是不完整的，所以三条css代码都没有起到作用，请把代码补充完整。

代码是否把分号;丢掉了。

四、CSS注释代码

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>CSS注释代码</title>
 6 <style type="text/css">
 7 p{
 8    font-size:12px;
 9    color:red;
10 }
11 </style>
12 </head>
13 <body>
14 <p>慕课网，超酷的互联网、IT技术免费学习平台，创新的网络一站式学习、实践体验；服务及时贴心，内容专业、有趣易学。专注服务互联网工程师快速成为技术高手！</p>
15 </body>
16 </html>

CSS注释代码

就像在Html的注释一样，在CSS中也有注释语句：用/*注释语句*/来标明（Html中使用)。就像下面代码：

来试一试：为CSS样式代码添加注释语句，来标明代码作用

1、在编辑器中的第8行的font-size:12px;语句后面添加“设置文字字号为12px”注释。

2、在编辑器中的第9行的color:red;语句后面添加“设置文字颜色为红色”注释。

你写入的代码是否像下面的代码：

注释快捷键：Ctrl+/ : 快速注释当前行

shift + ctrl + / : 在当前位置快速添加 /**/ 符号

注释是编程好习惯，要成为优秀的软件工程师就必须养成良好的编程习惯；