初识CSS
本章学习目标
(1) . 会使用CSS三种基本的选择器设置字体大小和颜色 【重点】
(2) . 会使用行内样式，内部样式表和外部样式表3种方式为HTML文档添加CSS样式【重点】
一、 CSS的基本语法
(一) 什么是CSS
CSS：层叠样式表（Cascading Style Sheet）
(二) 使用CSS的优势
(1) . 内容与表现分离
(2) . 网页的表现统一，容易修改
(3) . 丰富的样式，使得页面布局更加灵活
(4) . 减少网页的代码量，增加网页的浏览速度，节省网络带宽
(5) . 运用独立于页面的CSS，有利于网页被搜索引擎收录
(三) CSS的基本语法结构
1. 描述
CSS和HTML一样，都是浏览器能够解析的计算机语言。因此，CSS也有自己的语法规则和结构。
2. 语法
选择器 { 声明1;
声明2;
……
}
CSS语法规则有二部分组成，即选择器和声明。
声明必须放在大括号{}中，并且声明可以是一条或多条；
每条声明由一个属性和值组成，属性和值用冒号分开；
每条语句以英文分号结尾。
3. 案例演示
h1 {
font-size:12px;
color:#F00;
}
(四) 认识<style>标签
在HTML中通过使用<style>标签引入CSS样式。<style>标签用于为HTML文档定义样式信息。
<sytle>标签位于<head>标签中，type属性是必须的，其唯一值是“yk。
<style type="text/css">
h1{
font-size: 24px;
color: aqua;
}
</style>
二、 CSS选择器
选择器（selector）是CSS中非常重要的概念，所有HTML语言中的标签样式，都是通过不同的CSS选择器进行控制的，用户通过选择器，就可以对不同的HTML标签进行选择，并赋予各种样式声明。
在CSS中，有3种最基本的选择器，分别是标签选择器、类选择器和ID选择器，下面分别进行详细介绍。
(一) 标签选择器
1. 描述
一个HTML页面由很多的标签组成，如<h1><p><img/>等，CSS标签选择器就是用来声明这些标签的。因此，每种HTML标签的都可以作为相应的标签选择器的名称。
2. 语法
3. 演示案例
需求说明
<h3>标签中的字体颜色为绿色；
<p>标签的字体颜色为红色
二个标签的字符大小都是16px
实现效果
核心代码
<style type="text/css">
h3{color:#090;}
p{
font-size:16px;
color:red;
}
</style>
4. 经验说明
标签选择器是网页样式中经常用到的，通常用于直接设置页面中标签样式。如果相同的标签内容的样式一致，那么使用标签选择器就非常方便了。
(二) 类选择器
1. 描述
在标签选择器中看到，标签选择器一旦声明，那么页面中所有的该标签，都会相应的地发生变化，但是，如果希望其中某个标签不一样，仅依靠标签选择器还是不够的，这里需要引入类选择器。
2. 语法格式
类选择器的名称可以由用户自定义，属性和值跟标签选择器一样，必须符合CSS规范，类选择器的语法结构如下
设置了类选择器后，就要在HTML标签中应用类样式。使用标签的class属性引用类新式
<标签名 =”类名称”>
3. 案例演示
需求说明
将上例中，两个<P>标签中的文本分别显示不同的颜色，比如第二个<P>标签显示绿色，字体大小为20px
实现效果
核心代码
.green{
font-size: 20px;
color: #009900;
}
<p class="green">有勇气就会有奇迹。</p>
4. 经验说明
类选择器是网页中最常用的一种选择器，设置了一个类选择器，只要页面中某个标签中需要相同的样式，直接使用class属性调用即可以。类选择器同一个页面中可以频繁的使用，应用起来非常方便。
(三) ID选择器
1. 描述
ID选择器的使用方法与类选择器基本相同，不同之处在于ID选择器只能在HTML页面中使用一次，因此它的针对性很强。在HTML的标签中，只要在HTML中设置了id属性，就可以直接调用CSS中的ID选择器。
2. 语法格式
3. 案例演示
需求说明
设置二个id选择器，分别命名为first和second,first的字符16px,second的字体大小设置为24px
实现效果
核心代码
<style type="text/css">
#first{font-size:16px;}
#second{font-size:24px;}
</style>
<p id="first">北京欢迎你，有梦想谁都了不起！</p>
<p id="second">有勇气就会有奇迹。</p>
经验说明
id选择器与类选择器不同，同一个Id属性在同一个页面中只能使用一次，虽然这样，但是它在网页中也经常用到。
(四) 小结
(1) . 标签选择器直接应用于HTML标签
(2) . 类选择器可在页面中多次使用
(3) . ID选择器在同一个页面中只能使用一次
(五) 课堂练习
1. 制作《望庐山瀑布》
需求说明
使用标题标签和段落标签制作李白的诗《望庐山瀑布》，诗正文字体颜色为绿色，字体大小为14px。
实现效果
核心代码
<style type="text/css">
p{
font-size: 14px;
color: green;
}
</style>
2. 制作《水调歌头》
需求说明
标题颜色为红色，字体大小为18px；正文第一段字体大小为12px，字体颜色为红色，第二段字体颜色为黑色，字体大小为12px
实现效果
核心代码
<style type="text/css">
h1{
font-size: 18px;
color: red;
}
.part1{
font-size: 12px;
color: red;
}
.part2{
font-size: 12px;
color:black;
}
</style>
(六) 课后作业
1. 制作《如梦令》
需求说明
(1) . 使用标签选择器设置标题字体大小为20px
(2) . 页面中所有段落中的文本字体大小为16px
(3) . 使用类选择器设置正文和译文内容字体颜色为绿色
(4) . 使用ID选择器设置译文标题颜色为蓝色
实现效果
网友评论