一、CSS的概述
1、什么是CSS
CSS（Cascading Style Sheets）指层叠样式表，也被称为CSS样式，主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（高度、边框样式、边距等）以及版面的布局等外观显示样式。
CSS能够使HTML页面更好看，CSS色系的搭配可以让用户更舒服，SCC+DIV布局更佳灵活，更容易绘制出用户需求的结构。
2、CSS样式规则
CSS在使用的时候需要遵循一定的规范。具体格式为：
选择器{属性1:属性值;属性2:属性值;...}
选择器用于指定CSS样式作用的HTML对象，花括号内是对该对象设置的具体样式。属性和属性值以键值对方式出现，使用冒号隔开，每个属性之间用分号隔开。
注意：
- CSS样式选择器严格区分大小写，“属性”和“属性值”不区分大小写。
- 多个属性之间必须用英文状态下的分号隔开，最后一个属性后的分号可以省略。
- 如果属性的值是由多个单词组成且中间包含空格，则必须为这个属性值加上英文状态下的引号，但是属性的值和单位之间不能出现空格。
- 在CSS代码中空格不被解析，可以用空格、Tab键、回车进行排版。
案例：
h1{
font-size:20px;
color:red;
}
二、HTML引入CSS的方式
1、行内样式
通过标签的style属性来进行样式的定义，这种方式不易于标签和样式的分离，只能在便签内使用，复用性极低，一般不建议使用。例如：
<span style="color=red;font_size:30px;">你好</span>
行内样式
2、内部样式
内部样式又称为内嵌式，是将CSS代码集中写在HTML文档的<head>头部标签中，并且使用<style>标签进行定义，可以利用选择器给多个标签设置样式，这种方式只对其所在的HTML 页面有效，可以对多出标签统一设置样式，复用性较低。例如：
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
font{
font-size: 30px;
color: red;
}
</style>
</head>
<body>
<font>你好</font>
<br />
<font>CSS</font>
</body>
</html>
内部样式
3、外部样式
外部样式又称为链入式，是将所有的样式放在一个或者多个以.css为扩展名的外部样式表文件中，通过<link>标签将样式连接到HTML文档中。这种方法的优点是同一个CSS样式表可以被不同的HTML页面链接使用，同时一个HTML页面也可以通过多个<link>标记链接多个CSS样式表。例如：
font{
font-size: 30px;
color: red;
}
<!--上面是外部样式表文件-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="cssDemo.css"/>
</head>
<body>
<font>你好</font>
<br />
<font>CSS</font>
</body>
</html>
外部样式
注意：
三种样式的使用有优先级：行内样式的优先级最高；内部样式和外部样式的优先级一样，谁最后解析显示谁。
三、CSS的选择器
我们定义过CSS样式后，需要将这些样式作用在HTML便签上，首先我们要找到该目标元素。在CSS中，执行这一任务的样式规则部分被称为选择器。
1、元素选择器
元素选择器是指用HTML标记名称作为选择器，按照标记名称分类，为页面中某一类标记指定统一的CSS样式。
元素选择器最大的优点是能快速为页面中同类型的标记统一样式，同时这也是他的缺点，不能设计差异化样式。
例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
font{
font-size: 30px;
color: red;
}
</style>
</head>
<body>
<font>你好</font>
<br />
<font>CSS</font>
</body>
</html>
2、ID选择器
ID选择器使用‘#’进行标识，后面紧跟id名，id名即为HTML元素的id属性，大多数HTML元素都可以定义id属性，元素的id值是唯一的，只能作用于文档的某一个具体的元素。
例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#test{
color: red;
font-size: 30px;
}
</style>
</head>
<body>
<font id="test">你好</font>
<br />
<font id="test">CSS</font>
</body>
</html>
3、类选择器
类选择器使用‘.’进行标识，后面紧跟类名，类名即为HTML元素的class属性，大多数HTML元素都可以定义class属性。类选择器最大的优势就是可以为元素对象定义单独或相同的样式。
例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.test{
color: red;
font-size: 30px;
}
</style>
</head>
<body>
<font class="test">你好</font>
<br />
<font class="test">CSS</font>
</body>
</html>
网友评论