第四章 CSS样式基础
4.1 CSS概述
随着 HTML的发展，为了满足页面设计者的要求，HTML添加了很多显示功能，但是随着这些功能的增加，使得 HTML变得越来越杂乱，HTML,页面也越来越臃肿，CSS 便诞生了.C是用于简化HTML标签,把关于样式部分的内容提取出来，进行单独地控制，使物与式分离式开发。对页面布局等的控制也更加精确，同时能够实现内容和表现的分离使娓网站的设计风格趋向统一、维护更加容易,并且能够被多种浏览器支持。
4.1.1.CSS的基本概念
CSS全称为“cascading Style sheet”,中文解释为“层叠样式表”，它是以 HTML为营，设蛋网项输外观显示样式,如字体、颜色、背景的控制及整体的布局等，还可以针对不备设业不网的样式。在网资设计时采用CS技术，可以有效地对页面的布局、字体。环色，背景和其他效果实一真面的不同部分效果类现更加精确的控制。只要对相应的代码做一些简单的修改，既也可以改变同一个网站中不同网页的外观和格式。
4.1.2传统HTML的缺点
HTML标记是用来定义文档内容、比如通过，p和ahe等标记表达“这是标题”“这是段落”、“这是表格”等信息、而文档布局由浏览器完成。随着新的HTML标记(比如字体标记和颜色属性)添加到HTML规范中，要实现页面美工、文档内容清晰、立于文档表现层的站点变得越来越闲难。传统HTML的缺点主要体现在如下几方面。
4.1.2.1.维护困难
为了修改某个特殊标记的格式，需要花费很多的时间，尤其对于整个网站而言，后期修
改和维护的成本很高。
4.1.2.2.标记不足
HTML自身的标记并不丰富，很多标记都是为网页内容服务的，而关于美工的标记，例如文字间距、段落缩进等，这些HTML中都很难找到。
4.1.2.3.网页过“胖”
由于对各种风格样式没有统一进行控制，用HTML编写的页面往往是体积过大，占用了
很多宝贵的带宽。
4.1.2.4.定位困难
在整体页面布局时，HTML对于各个模块的位置调整很困难。
4.1.3.CSS的特点和优势
CSS 通过定义标记如何表现，对页面结构风格进行控制，分离文档的内容和表现，克服了传统 HTML的缺点。将CSS嵌人在页面中，通过浏览器解释执行，而且CSS文件是文本文件，只要理解 HTML都可以掌握它。其特点主要如下。
(1) 页面的字体变得更漂亮，更容易编排。
(2) 可以轻松控制页面的布局。
(3) 可以在大多数浏览器上使用。
(4) 以前一些必须通过图像转换才能实现的功能，现在只要用CSS就可以轻松实现
页面下载更快。
(5) 可以使用一个CSS 文件控制整个网站的显示风格。只要修改该CSS 文件中相应的行，就可以改变整个网站上页面的显示样式。
CSS可以称得上 Web 设计领域的一个突破，具有以下优势。
4.1.3.1.表现和内容分离
CSS通过定义HTML标记如何显示控制网页的格式，使得页面内容和表现分离，简化了网页格式设计，也使得对网页格式的修改更方便。
4.1.3.2.增强了网页的表现力
CSS样式属性提供了比HTML更多的格式设计功能。例如，可以通过CSS样式去掉网页中超链接的下划线，甚至可以为文字添加阴影效果等。
4.1.3.3.使整个网站显示风格趋于统一
将CSS样式定义到样式表文件中，然后在多个网页中同时应用样式表文件中的样武就可以确保多个网页具有一致的格式，并且可以随时更新样式表文件，实现自动更新多个网页的格式功能，从而大大降低网站的开发与维护的成本。
4.1.4.CSS的编写规则
利用 CSS样式设计虽然很强大，但是如果设计人员管理不当将导致样式混乱。本节绍学习CSS 编写中的一些技巧和规则。
4.1.4.1.目录结构命名规则
存放CSS样式文件的目录一般命名为style或css。
4.1.4.2.样式文件的命名规则
在项目初期，会把不同类别的样式放于不同的CSS文件，是为了CSS编写和调试的方便;在项目后期，为了网站性能上的考虑，会将不同的CSS文件整合到一个CSS文件中这个文件一般命名为 style.css或css.css。
4.1.4.3.选择器的命名规则
所有选择器必须由小写英文字母或下划线组成，必须以字母开头，不能为纯数字。设者要用有意义的单词或缩写组合来命名选择器，做到“见名知义”，这样就节省了查找样的时间。样式名必须能够表示样式的大概含义(禁止出现如 Divl、Div2 和 Style 等自名)。
4.1.4.4.CSS代码注释
像其他语言一样，CSS允许用户在源代码中嵌入注释。CSS注释被浏览器忽略，不影响网页效果。注释有助于记住复杂的样式规则的作用、应用的范围等，便于样式规则的后期维护和应用。CSS注释以字符“ / * ”开始，以字符“ * / ”结束。注释可以是单行，也可以多行，并可以出现在 CSS代码的任何地方。
4.1.4.5.CSS代码注释
代码缩进可以保证 CSS代码的清晰可读。在实际应用中，可以按一次Tab键来缩进选择按两次Tab键来缩进选择器，按两次Tab键来缩进声明和结束大括号。这样的排版规则便于查询，避免代码混乱。
4.2 CSS语法基础
CSS控制页面是通过CSS规则实现的，CSS规则由选择器和声明组成，声明由属性和属性值对组成。CSS提供了丰富的选择器类型，包括标记选择器、类选择器、id选择器及伪类选择器等，能够灵活地对整个页面、页面中的某个标记或一类标记进行样式设置。
4.2.1.CSS基本语法
CSS就是一个包含一个或多个规则的文本文件，CSS规则由两个主要的部分构成:选择器(Selector 选择器)和声明(Declaration)选择器通常是需要改变样式的 HTML 元素
声明由一个或多个属性与属性值对组成。属性是CSS的关键字，如font-family(字体)color(颜色)和border(边框)等，属性用于指定选择器某一方面的特性，而属性值则用于指定选择器的特性的具体特征。
4.2.1.1.基本语法
selector | propertyl ： valuel ： property2 ： value2 ： property3 ：value3 ；等等 }
选择器 { 属性1 ：属性值1 ： 属性2 ：属性值2 ：属性3 ：属性值3；等等 }
4.2.1.2.语法说明
(1) 选择器。选择器可以是HTML标记名称或者属性的值，也可以是自定义的标识符(2)属性/属性值对。“属性:属性值”必须一一对应，属性与属性值之间必须用“ ：”连接，每个属性/属性值对之间用分号( ；)隔开。
(3) 属性。在CSS中对属性命名与脚本语言中有一点不同，即属性名称的写法，在CSS中，凡是属性名为两个或两个以上的单词构成时，单词之间以连词符号(-)分隔，例如背景颜色属性 background-color;而在脚本语言中，对象属性则连写成 backgroundColor。在脚本语言中，属性由两个以上单词构成，则从第二个单词开始向后，所有单词首字母必须大写。
4.2.2.CSS选择器类型
css选择器主要有4种类理:标记选择器、class选择器、ID选择器及伪类选择器等。
4.2.2.1.标记选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>第四章 CSS样式基础</title>
<style>
p{ /*4.2.2.1.标记选择器*/
color: #0000ff;
font-size: 20px;
}
</style>
</head>
<body>
<p>这是第一段内容</p>
<p>这是第二段内容</p>
</body>
</html>
4.2.2.2.class选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>第四章 CSS样式基础</title>
<style>
p{ /*4.2.2.1.标记选择器*/
color: #0000ff;
font-size: 20px;
}
.class1{/*4.2.2.2.class选择器*/
color: #ff0000;
font-size: 30px;
}
.class2{
color: #00ff00;
}
</style>
</head>
<body>
<p>这是第一段内容</p>
<p>这是第二段内容</p>
<p class="class1">这是class1的第一段内容</p>
<p class="class1">这是class1的第二段内容</p>
<p class="class2">这是class2的内容</p>
</body>
</html>
4.2.2.3.ID选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>第四章 CSS样式基础</title>
<style>
#id1{/*4.2.2.3.ID选择器*/
color: #00aaff;
font-size: 40px;
}
</style>
</head>
<body>
<p id="id1"这是id1的内容></p>
</body>
</html>
4.2.2.4.伪类选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>第四章 CSS样式基础</title>
<style>
p{ /*4.2.2.1.标记选择器*/
color: #0000ff;
font-size: 20px;
}
a:hover{
color: #00ff00;
}
a:visited{
color: #ff0000;
}
</style>
</head>
<body>
<a href="http://www.baidu.com">百度一下</a>
</body>
</html>
4.2.3.CSS选择器声明
在声明各种CSS选择器时，如果某些选择器的风格是完全相同的，或者部分相同，都可以使用集体声明的方法，用”，“分割多个选择器
4.2.3.1.集体生明
p,a{
font-size: 70px;
}
4.2.3.2.全局声明
*{
font-family: fangsong;
}
4.2.3.3派生选择器（上下文选择器）
对于实际网站中的一些小型页面，例如弹出的小对话框和上传附件的小窗口等，希望这些页面中所有的标记都使用同一种CSS样式，但又不希望通过逐个加人集体声明列表的方式。这时可以利用全局声明符号“*”，代码如下:
*{
color : red ;
font-size : 18px
}
4.3 CSS引入方式
4.3.1.内联样式表（行内样式表）
内联样式表的CSS规则写在首标记内，只对所在的标记有效，几乎任何一个HTML记上都可以设置 style属性，属性值可以包含CSS规则的声明，不包含选择器。
4.3.1.1.基本语法
<标记 style=“属性 1:属性值 1;属性 2:属性值2;…">修饰的内容</标记>
4.3.1.2.语法说明
(1)标记是指 HTML标记，如p，hl 和 body 等标记;
(2)标记的 style 定义的声明只对自身起作用;
(3)style 属性的值可以包含多个声明，每一声明之间用“;”分隔;
(4)标记自身定义的 style 样式优先于其他所有样式定义。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>内联样式表</title>
<link rel="stylesheet" href="css/index.css" />
</head>
<body>
<p style="color: #ff0000;font-size: 20px;text-decoration: underline;">正文内容1</p>
<p style="color: #000000;font-size: italic;">正文内容2</p>
<p style="color: #ff00ff;font-size: 25px;font-weight: bold;">正文内容3</p>
<p>这段话没有内联样式</p>
</body>
<p align="center">Copyright ©2024 MortalTom</p>
</html>
4.3.2.内部样式表
内部样式表写在HTML的<head></head>里面，只对所在的网页有效。使用<style></style>标记对来放置CSS规则
4.3.2.1.基本语法
4.3.2.2.语法说明
4.3.3.外部样式表
4.3.3.1.链接外部样式表
语法中必须指定<link>标记的3个属性，其中href 是定义链接外部样式表文件的u可以是相对路径和绝对路径；r1是定义当前文档与被链接文档之间的关系，这里指定styleshet，表示被链接的文档是样式表文件；（ype 是定义链接文档的类型，这里类型指定为text/css，表示链接的外部文件为CSS样式表。
这里面涉及3个属性，rel="stylesheet"规定当前文档与被链接文档之间的关系。type="textcss"规定被链接文档的MIME 类型。href="mystyle.css“规定被链接文档的位置，只需要记住这个固定写法即可。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>链接外部样式表</title>
<link href="4-5.css" type="text/css" rel="stylesheet" />
</head>
<body>
<h2>CSS标题</h2>
<p >这是正文内容······</p>
<h2>CSS标题</h2>
<p>通过link标签将外部样式表4-5.css链接到HTML文档中</p>
</body>
</html>
4.3.3.2.导入外部样式表
语法中必须指定<link>标记的3个属性，其中href 是定义链接外部样式表文件的u可以是相对路径和绝对路径；r1是定义当前文档与被链接文档之间的关系，这里指定styleshet，表示被链接的文档是样式表文件；（ype 是定义链接文档的类型，这里类型指定为text/css，表示链接的外部文件为CSS样式表。
这里面涉及3个属性，rel="stylesheet"规定当前文档与被链接文档之间的关系。type="textcss"规定被链接文档的MIME 类型。href="mystyle.css“规定被链接文档的位置，只需要记住这个固定写法即可。
4.4 CSS的属性单位
4.4.1.长度、百分比单位
长度单位通常由两个英文字母的缩写表示，且设置大部分属性时仅能使用正数，只有少数属性可以使用正、负数的设置。而且必须注意，若属性值设置为负数，且超过浏览器所能接受的范围，以至于无法支持时，浏览器将会选择比较靠近且能支持的数值，长度单位在设置时分别为以下两种不同的类型。
4.4.1.1.相对类型
4.4.1.2.绝对类型
4.4.2.色彩单位
HTML网页和CSS样式都是按照RGB来设置颜色的。在HTML标记中只提供了两置色彩的方法：十六进制数和色彩英文名称。CSS则提供了三种定义色彩的方法：十六进制数、色彩英文名称、rgb函数和rgba函数。
4.4.2.1.用十六进制数方式表示色彩值
在HTML中，使用RGB 概念指定色彩时，前面是一个“#”号，再加上6个十六进制字表示，表示方法为：#RRGGBB，其中，前两个数字代表红光强度（Red），中间两个数代表绿光强度（Green），后两个数字代表蓝光强度（Blue），以上3个参数的取值范围00~f。参数必须是两位数，对于只有1位的参数，应在前面补0。这种方法共可表示256 256×256种色彩，即16M种色彩。而红色、绿色、黑色、白色的十六进制设置值分别#FFO000、#0OFF0O、#0000FF、#000000、#FFFFFF。
4.4.2.2.用色彩名称方式表示色彩值
4.4.2.3.使用RGB（x,y,z）函数表示
4.5.CSS继承与层叠
继承
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>第四章 CSS样式基础</title>
<link rel="stylesheet" href="css/index.css" />
</head>
<style>
h1{
color: blue;
text-decoration: underline;
}
em{
color: red;
}
</style>
<body>
<h1>学习<em>Web开发</em>教程</h1>
<p>有任何问题欢迎联系我们</p>
</body>
<p align="center">Copyright ©2024 MortalTom</p>
</html>
层叠
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>第四章 CSS样式基础</title>
<link rel="stylesheet" href="css/index.css" />
</head>
<style>
p{
color: green;
}
.red{
color: red;
}
.purple{
color: purple;
}
#line3{
color: blue;
}
</style>
<body>
<p>这是第一行文本</p>
<p class="red">这是第二行文本</p>
<p id="line3" class="red">这是第三行文本</p>
<p style="color: orange;" id="line3">这是第二、四行文本</p>
<p class="purple red">这是第五行文本</p>
</body>
<p align="center">Copyright ©2024 MortalTom</p>
</html> 
4.6 元素类型
4.6.1.块级元素
“独占一行”
4.6.2.行级元素
行级元素也称内联元素，display 属性设置为inline将显示行级元素，元素前后没有换行符，行级元素没有高度和宽度，因此也就没有固定的形状，显示时只占据其内容的大小超接、图像、范围（span）、表单元素等都是行级元素。
4.6.3.列表项元素
list-—item 属性值表示列表项目，其实质上也是块状显示，是一种特殊的块状类型
4.6.4.隐藏元素
none 属性值表示隐藏并取消盒模型，所包含的内容不会被浏览器解析和显示。通过把
display 设置为none，该元素及其所有内容就不再显示，也不占用文档中的空间。
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
