四、开始使用CSS

HTML、CSS基础课程系列 CSS

开始使用CSS

CSS简介

CSS(Cascading Style Sheets)层叠样式表,是您应该在学习HTML之后开始学习的第二种技术,HTML定义页面的内容和结构,而CSS用于装饰美化这些内容和结构,例如,您可以用CSS来修改文本的字体、颜色、大小和间距,添加动画等。

CSS格式

css的规则影响Web浏览器的显示方式,CSS的规则由以下格式组成:

  • 一组属性,属性和其值直接影响HTML内容的显示方式,以keyvalue键值对的形式。
  • 一个选择器,帮助您要选择的元素(或多个)。

快速示例

上述描述可能有点抽象,下面我们通过一个快速的例子来看:

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS sample experiment</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Hello World</h1>
</body>
</html>

下面是CSS示例,对于h1标签生效的规则:

1
2
3
4
5
h1{
color:blue;
background-color:yellow;
border:1px solid black;
}

css的规则以h1选择器开始,意味着它将整个属性值应用于所有的<h1>元素,它包含三个属性和值:

  • color:blue;,将文本颜色设置为蓝色。
  • background-color:yellow;,将背景颜色设置为黄色。
  • border:1px solid black;,设置边框为1像素,实心,并且颜色是黑色的。

那么,在Web浏览器中,上面的代码将会产生如下显示:

样式生效了,是不是很简单!

CSS书写位置

在上面我们用了一个简单的例子来达到修改样式的目的,当然css书写位置有几种:

  1. 内嵌样式:在一个标签内部的style属性中包含CSS的声明。

    1
    <h1 style="border:1px solid black;">Hello World</h1>
  2. 内部样式:在html文档的head标签包含一个style标签,里面进行CSS的书写。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>CSS sample experiment</title>
    <style type="text/css">
    h1{
    border:1px solid black;
    }
    </style>
    </head>
    <body>
    <h1>Hello World</h1>
    </body>
    </html>
  3. 外部样式:如上面的例子一样,将CSS写入进一个带有.css扩展名的单独文件中,然后通过link标签引入它。

    1
    <link rel="stylesheet" type="text/css" href="style.css">

上面的书写位置推荐大家使用外部样式,这样可以达到html和css分离的效果。
尽量不要使用内嵌样式,这对于维护很糟糕(您可能需要每个文档多次更新相同的信息),而且会把html和css的信息进行混合,使CSS的代码难以阅读和理解。

CSS语法规则

css最基本的概念就分为属性,属性和值一起配对叫做css声明 ,一个花括号里面可能会有很多css声明,他们和选择器一起组成了css的规则。

CSS的注释

css的注释是以/*开头,以*/结束,中间的任何字符都不会被解析,例子:

1
2
3
body{
font-size:20px; /* 给body元素添加字体大小为20像素 */
}

CSS选择器

上面的例子我们全部使用的是标签选择器来举例,下面我们介绍一些常用的选择器:

  • 基础选择器,又叫简单选择器,可以根据元素类型匹配一个或多个元素。有标签、id、class等。
  • 伪类选择器,匹配元素在某个状态时存在的一个或多个元素。如鼠标悬浮、获得焦点等。
  • 伪元素选择器,匹配与元素相关的特定位置内容的一个或多个部分。如元素之前或之后生成的内容。
  • 属性选择器,根据元素的属性/属性值匹配一个或多个元素。
  • 关系选择器,这些不是完全的选择器,只是将上述选择器一个或多个组合在一起使用,如父子选择器,后代选择器等。

基础选择器

标签选择器

标签选择器也叫元素选择器,这是对于HTML元素最简单的一种选择器,直接写标签名加上CSS声明就行了:

1
2
3
p{
font-weight:bold; /* 给所有的p标签 字体加粗 */
}

id选择器

id选择器由一个#号后面跟上id属性的值组成,任何元素都可以设置唯一的id属性,这是最有效的选择单个元素的办法。例子:

1
2
<p id="hello">hello world</p>
<p id="hi">Hi,Good morning!</p>

1
2
3
4
5
6
#hello{
font-family:'微软雅黑'; /* 设置字体集为 微软雅黑*/
}
#hi{
text-algin:center; /* 设置该元素内的文本 水平位置居中 */
}

重要提示,html文档中的id值必须是唯一的,重复的id值会导致浏览器的未知行为。

class选择器

class选择器又叫类选择器,它是由一个点.和类名组成,值得注意的是,不同的元素可以有相同的class,同一个元素也可以有多个class的值,以空格分开:

1
2
3
4
5
6
<ul>
<li class="first item">HTML</li>
<li class="second item">CSS</li>
<li class="third">JAVASCRIPT</li>
</ul>
<a href="#" class="item">item</a>
1
2
3
4
5
6
7
8
.first{
font-family:'黑体';
font-size:24px;
}
.item{
text-decoration: none; /* 去除下划线 */
color:green;
}

这样将会造成如下输出:

通配符选择器

在很多语言都有通配符,也就是这个符号*,在CSS里面它代表匹配所有的标签或元素。由于很少有样式作用于页面的所有元素,所以它常常和其他选择器组合使用。

提示,使用通配符选择器要小心,因为他匹配所有的元素,在大型页面中它可能会对性能造成明显的影响,导致网页速度比预期慢,所以,尽量少用。

关系选择器

关系选择器,又叫组合选择器,下面我们介绍常用的三种关系:

  • 子选择器,使用>符号,匹配该元素的直接子元素。
  • 后代选择器,使用空格符号,匹配该元素的所有后代元素。(包含直接后代,孙子等。)
  • 分组选择器,使用,符号,表示前一个和后一个选择器都适用于该css规则。
1
2
3
4
5
6
7
8
9
10
div > span{
color:red; /* 设置div下的直接子元素:span标签里面的文本颜色为红色 */
}
div span{
font-size:24px; /* 设置div下的所有span标签里面的字体大小为24像素 */
}
span,a{
font-weight:bold; /* 设置字体加粗,适用于span标签和a标签 */
}

伪类选择器

伪类选择器是在选择器后面加上冒号:,指定当它处于特定状态时才对所选元素进行样式化,下面介绍两种常用的伪类选择器:

  • :hover,鼠标悬浮触发。
  • :focus,鼠标焦点触发。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
h1{
width:200px;
height:30px;
}
/* 当鼠标悬浮到h1元素上时,字体颜色变成白色,背景色变成黑色 */
h1:hover{
color:white;
background-color:black;
}
/* 当在input元素上获得鼠标焦点时 触发 */
input:focus{
box-shadow:0 0 3px black; /* 添加一些阴影 */
}

小结

这节课我们学习了css的语法规则,以及它的常用选择器。下节课程我们会继续学习css的常见属性以及一些小技巧!

作业

①. 测试CSS的书写位置。

②. 测试这节课学习的所有选择器。

③. 使用html标签和今天学习的css内容制作一份简历,要求使用外部样式。

教材编写 myxxqy@gmail.com 张超
2017.07.04