4.1 CSS概述
1.CSS的基本概念：CSS全称为“Cascading Style Sheet”，中文解释为“层叠样式表”，它是以HTML为基础，设置网页的外观显示样式，如字体、颜色、背景的控制及整体的布局等，还可以针对不同的浏览器设置不同的样式。它可以有效地对页面的布局、字体、颜色、背景和其他效果实现更加精确的控制。
2.传统 HTML的缺点
（1）：维护困难。为了修改某个特殊标记的格式，需要花费很多的时间，尤其对于整个网站而言，后期修改和维护的成本很高。
（2）：标记不足。HTML 自身的标记并不丰富，很多标记都是为网页内容服务的，而关于美工的标记，例如文字间距、段落缩进等，这些 HTML 中都很难找到。
（3）：网页过“胖”。由于对各种风格样式没有统一进行控制，用HTML编写的页面往往是体积过大，占用了很多宝贵的带宽。
（4）：定位困难。在整体页面布局时，HTML 对于各个模块的位置调整很困难。
3.CSS的特点和优势
特点：
（1）：页面的字体变得更漂亮，更容易编排。
（2）： 可以轻松控制页面的布局。
（3）： 可以在大多数浏览器上使用。
（4）：以前一些必须通过图像转换才能实现的功能，现在只要用 CSS 就可以轻松实现，页面下载更快。
（5）：可以使用一个 CSS 文件控制整个网站的显示风格。只要修改该 CSS 文件中相应的行，就可以改变整个网站上页面的显示样式。
优势：
（1）：表现和内容分离。CSS 通过定义 HTML 标记如何显示控制网页的格式，使得页面内容和表现分离，简化了网页格式设计，也使得对网页格式的修改更方便。
（2）：增强了网页的表现力。CSS 样式属性提供了比 HTML 更多的格式设计功能。例如，可以通过 CSS 样式去掉网页中超链接的下划线，甚至可以为文字添加阴影效果等。
（3）：使整个网站显示风格趋于统一。将 CSS 样式定义到样式表文件中，然后在多个网页中同时应用样式表文件中的样式就可以确保多个网页具有一致的格式，并且可以随时更新样式表文件，实现自动更新多个网页的格式功能，从而大大降低网站的开发与维护的成本。
4.CSS的编写规则
（1）：目录结构命名规则。存放 CSS 样式文件的目录一般命名为 style 或 css。
（2）：样式文件的命名规则。在项目初期，会把不同类别的样式放于不同的 CSS 文件，是为了 CSS 编写和调试的方便;在项目后期，为了网站性能上的考虑，会将不同的 CSS 文件整合到一个 CSS 文件中这个文件一般命名为 style.css 或 css.css。
（3）：选择器的命名规则。所有选择器必须由小写英文字母或下划线组成，必须以字母开头，不能为纯数字。样式名必须能够表示样式的大概含义 (禁止出现如 Divl，Div2 和 Style 等自名)。
（4）：CSS 代码注释。像其他语言一样，CSS 允许用户在源代码中嵌入注释。CSS 注释被浏览器忽略，不影响网页效果。注释有助于记住复杂的样式规则的作用、应用的范围等，便于样式规则的后期维护和应用。CSS注释以字符“/* ”开始，以字符“*/”结束。注释可以是单行，也可以是多行，并可以出现在 CSS 代码的任何地方。
（5）：CSS 代码注释。代码缩进可以保证 CSS 代码的清晰可读。在实际应用中，可以按一次 Tab 键来缩进选择器，按两次Tab键来缩进声明和结束大括号。这样的扑版规则便于查询，避免代码混乱。
| 页面功能 | 说明 | 页面功能 | 说明 |
| #container或#content | 容器，用于最外层 | #main | 页面主体 |
| #layout | 布 局 | #tag | 标签 |
| #hea，#header | 头部 | #msg | 提示信息 |
| #foot , #footer | 页脚部分 | #tips | 小技巧 |
| #nav | 主导航 | #vote | 投 票 |
| #subnav | 二级导航 | #friendlink | 友情连接 |
| #menu | 菜单 | #title | 标 题 |
| #copyright | 版权信息 | #siteinfo | 网站信息 |
| #branding | 商 标 | #siteinfoLegal | 法律声明 |
| #logo | 网站 LOGO | #siteinfoCredits | 信誉 |
| #joinus | 加人我们 |
4.2 CSS 语法基础
1.基本语法：selector { propertyl : valuel ; property2 : value2 ; property3 : value3 ; ... }
（1）： 选择器。选择器可以是 HTML标记名称或者属性的值，也可以是自定义的标识符。
（2）： 属性/属性值对。“属性:属性值”必须一一对应，属性与属性值之间必须用“：”连接，每个属性/属性值对之间用分号 (;) 隔开。
（3）：属性。在 CSS 中对属性命名与脚本语言中有一点不同，即属性名称的写法，在CSS 中，凡是属性名为两个或两个以上的单词构成时，单词之间以连词符号 (-) 分隔，例如背景颜色属性 background-color。
（4）：复合属性。在 CSS 中有些属性可以表示多个属性的值。如关于文字的设置，有font-family (字体)、font-size (字体大小)、font-style (字体风格)，这些可以用一个属性font 来表示。例如：
p{
font-style:italic;
font-size:20px;
font-family:黑体:
}
可以如下表示：
p{
font:italic 20px 黑体:
}
（5）：多个属性值。在 CSS 中有些属性可以设置多个属性值，用逗号 (,)分隔。
2.CSS选择器类型
（1）：标记选择器.标记选择器 (也可称为“元素选择器”) 即直接使用 HTML 标记名称作为选择器。它定义的样式作用于页面中所有与选择器同名的标记。
（2）： class 选择器.class选择器也叫“类”选择器，可以给指定的标签设置一个 class 属性和 class 值然后通过class 选择器找到对应的标签，为其设置 class 值，即添加 CSS 样式。使用 class 类选择器时，需要用英文 (.) 进行表示.
（3）：ID选择器.ID选择器用来对某个单一元素定义单独的样式。ID 选择器只能在 HTML页面中使用一次，针对性更强。定义ID选择器时，需要在id名称前加一个“#”。
（4）：伪类选择器。
| 伪类名 | 说明 |
| link | 用于可以设置未被访问的链接的样式 |
| visited | 用于设置已经被访问的链接的样式 |
| hover | 用于设置将鼠标悬浮在链接上的样式 |
| active | 用于设置鼠标点击链接时到鼠标松开时的样式 |
| focus | 用于设置用键盘将焦点放在链接上时的样式 |
| first-child | 设置第一个标记的样式 |
| lang | 设置具有 lang 属性的标记的样式 |
3.CSS选择器声明
（1）：集体声明。语法为：h3,h4,h5,p{color:red; font-size:18px;}
（2）：全局声明.语法为：
*{
color:red;
font-size:18px;
}
（3）：派生选择器(上下文选择器).语法为：
li strong{font-style:italic;font-weight:normal;}
strong{font-weight:bold;}
4.3 CSS引入方式
1.内联样式表(行内样式表):内联样式表的 CSS 规则写在首标记内，只对所在的标记有效，几乎任何一个 HTML标记上都可以设置 style 属性，属性值可以包含 CSS 规则的声明，不包含选择器。
语法为：<标记 style="属性1:属性值 1;属性 2:属性值 2;...">修饰的内容</标记>
语法说明:(1) 标记是指 HTML 标记，如 p，hl 和 body 等标记;(2) 标记的 style 定义的声明只对自身起作用;(3) style 属性的值可以包含多个声明，每一声明之间用“;”分隔；(4) 标记自身定义的 style 样式优先于其他所有样式定义。
2.内部样式表:内部样式表写在 HTML 的<head></head>里面，只对所在的网页有效。使用< style ></style>标记对来放置 CSS 规则。
语法为：<style type =" text/css" >
选择器 1{属性 1:属性值 1;属性 2:属性值 2;...}
选择器 2{属性 1:属性值 1;属性 2:属性值 2;...}
选择器 n{属性 1:属性值 1;属性 2:属性值 2;·..}
</style>
语法说明:style 标记是成对标记，有 1个 type 属性是指 style 元素以 CSS 的语法定义.选择器 1，...，选择器 n，可以定义n 个选择器，再定义声明部分。属性和属性值之间用冒号连接，“属性/属性值”对之间用分号分隔.
3.外部样式表:外部样式表是将 CSS 规则写在以 .css 为后的 CSS 文件里，在需要用到此样式的网页里引用该 CSS 文件。根据引用的方式不同可以分为链接外部样式表和导人外部样式表，它们形式上的区别在于链接外部样式表通过链接 link 标记，导人外部样式表必须在内部样式表内首行通过“@import url (外部样式文件);”来定义.
(1)链接外部样式表:链接式是将所有的样式放在一个或多个以“.css”为扩展名的外部样式表中，通过网页的<head></head 标签中使用link>标记将外部样式表文件链接到 HTML 文档中.
语法为：<link type="text/css" rel="stylesheet" href="外部样式表名.css">
注：rel="stvlesheet"规定当前文档与被链接文档之间的关系；type="text/cs"规定被链接文档的 MIME类型;href=”mystyle css"规定被链接文档的位置。
（2）导入外部样式表：导人式是将一个独立的CSS 文件导入HTML 文档中，其是在 HTML 文档< head>中应用<style>标签，并在< style>标签中的开头处用@ import 语句，即可导人外部样式表文件。
语法为：<style type = " text/css" >
@import url("CSS 文件路径");
</style>
注：导人样式表必须在 style 标记内开头的位置定义，可以同时导人多个外部样式表，每条语句必须以“;”结束。一般导人外部样式写在最前面，内部样式写在后面。 “@import”必须连续书写，即“@”和“import”之间不能留有任何空格。外部样式表的名称在书写时，必须是全称再加上后缀名“.css”，如“4-5.css”。 在加载页面时，<link>标签引用的 CSS 样式表将同时被加载，而“@ impot”引用的 CSS 样式表会等整个网页下结束后再被加载。
4.4 CSS的属性单位
1.长度、百分比单位：长度单位通常由两个英文字母的缩写表示，且设置大部分属性时仅能使用正数，只有少数属性可以使用正、负数的设置。并且可以分为相对类型和绝对类型。
| 长度单位 | 说明 |
| in | 英寸Inches (1 英寸 = 2.54 厘米) |
| cm | 厘米 Centimeters |
| mm | 毫米 Millimeters |
| pt | 点 Points (1点 = 1/72 英寸) |
| pc | 皮卡 Picas (1 皮卡 = 12 点) |
| 长度单位 | 说明 |
| em | 元素的字体高度 The height of the element's font |
| ex | 字母x的高度 The height of the letter " x" |
| px | 像素 Pixels |
| % | 百分比 Percentage |
注：百分比单位是一种常用的相对类型，通常的参考依据为 font-size 属性。百分比值总是相对于另一个值。下面的语句将 margin 属性的值设置为 font-size 的 200%: p{margin:200% :}
2.色彩单位
（1）用十六进制数方式表示色彩值：
| 色彩 | 色彩英文名称 | 十六进制代码 |
| 黑色 | black | #000000 |
| 蓝色 | blue | #0000ff |
| 棕色 | brown | #a52a2a |
| 青色 | cyan | #00ffff |
| 灰色 | gray | #808080 |
| 绿色 | green | #008000 |
| 乳白色 | ivory | #fffff0 |
| 橘黄色 | orange | #ffa500 |
| 粉红色 | pink | #ffc0cb |
| 红色 | red | #ff0000 |
| 白色 | white | #ffffff |
| 黄色 | yellow | #ffff00 |
| 深红色 | crimson | #cd061f |
| 黄绿色 | greenyellow | #0b6eff |
| 紫色 | purple | #800080 |
| 淡紫色 | lavender | #dbdbf8 |
(2)用色彩名称方式表示色彩值:
| 名称 | 颜色 |
| black | 纯黑 |
| blue | 浅蓝 |
| teal | 靛青 |
| red | 大红 |
| olive | 褐黄 |
| white | 壳白 |
| silver | 浅灰 |
| green | 深绿 |
| aqua | 天蓝 |
| purple | 深紫 |
| yellow | 明黄 |
| navy | 深蓝 |
| lime | 浅绿 |
| maroon | 深红 |
| fuchsia | 品红 |
| gray | 深灰 |
(3)使用 RGB (x，y，z) 函数表示:
x、y、Z、分别是红色、绿色、蓝色的值，x，Y，z属于[0，225]，亦可用百分比表示；对比rgba (x，y，z，a) 中 a是 alpha 通道设置透明度取值 0~1。
4.5 CSS 继承与层叠
CSS 继承即子标记会继承父标记的所有样式风格，并且可以在父标记样式风格的基础上再加以修改，产生新的样式，而子标记的样式风格完全不影响父标记，值得注意的是，并不是所有的属性都会自动传给子元素，有的属性不会继承父标记的属性值，例如边框属性就是非继承的。
CSS 继承的相关代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>继承关系演示</title>
<style>
h1{
color:blue;
text-decoration:underline;/*下划线*/
}
em{
color:red;
}
</style>
</head>
<body>
<h1>学习<em>Web开发</em>教程</h1>
<p>如果您有任何问题，欢迎联系我们</p>
</body>
</html>运行结果如下：
CSS层叠的代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS层叠</title>
<style type="text/css">
p{
color: green;
}
.red{
color: red;
}
.purple{
color: purple;
}
#line3{
color: blue;
}
</style>
</head>
<body>
<p>这是第1行文本</p>
<p class="red">这是第2行文本</p>
<p id="line3" class="red">这是第3行文本</p>
<p style="color: orange;" id="line3">这是第4行文本</p>
<p class="purple red">这是第5行文本</p>
</body>
</html>运行结果如下：
4.6 元素类型
1.块级元素：display 属性设置为 block 将显示块级元素，块级元素的宽度为 100%，而且后面隐藏附带有换行符，使块级元素始终占据一行，如<div>常常被称为块级元素，这意味着这些元素显示为一块内容，标题、段落、列表、表格、分区 div 和 body 等元素都是块级元素。
2.行级元素：行级元素也称内联元素，display 属性设置为 inline 将显示行级元素，元素前后没有换行符，行级元素没有高度和宽度，因此也就没有固定的形状，显示时只占据其内容的大小超链接、图像、范围 (span)、表单元素等都是行级元素。
3.列表项元素：list-item 属性值表示列表项目，其实质上也是块状显示，是一种特殊的块状类型，它加了缩进和项目符号。
4..隐藏元素 ：none 属性值表示隐藏并取消盒模型，所包含的内容不会被浏览器解析和显示。通过把display 设置为 none，该元素及其所有内容就不再显示，也不占用文档中的空间。
章节总结代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS样式基础</title>
<style>
/*全局声明*/
*{
font-family: fangsong;
}
/*集体声明*/
p,a{
font-size: 70px;
}
/*标记选择器*/
p{
color: #0000ff;
font-size: 20px;
}
/*class选择器*/
.class1{
color: #ff0000;
font-size: 30px;
font-family: Georgia, 'Times New Roman', Times, serif;
}
.class2{
color: #00ff00;
}
#id1{
color: #00aaff;
font-size: 40px;
}
#id2{
color: #aa00ff;
}
/* 伪类选择器*/
a:link{
color: #000000;
}
a:hover{
color: #00ff00;
}
a:visited{
color: #ff0000;
}
</style>
</head>
<body>
<p>这是第一段内容</p>
<p style="color:#000000">这是第二段内容</p>
<p class="class1">这是class1的内容</p>
<p class="class1">这是class1的第二段内容</p>
<p class="class2">这是class2的内容</p>
<p id1="id1">这是id1的内容</p>
<p class="class1" id="id2">这是id2的内容</p>
<a href="http://www.baidu.com/"></a>
</body>
</html>
运行结果如下：
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
