第四章 CSS样式底子

发表于 2024-12-7 09:22:50

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有账号？立即注册

×

4.1 CSS概述

4.1.1.CSS的根本概念

它是以HTML为底子，设置网页的外观表现样式，在网页设计时采用css技术可以有效地对页面的结构、字体、颜色、背景和其他效果实现更加精确的控制。

4.1.2传统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的特点和优势

(1)页面的字体变得更漂亮，更容易编排。
(2)可以轻松控制页面的结构。
(3)可以在大多数浏览器上使用。
(4)以前一些必须通过图像转换才能实现的功能，如今只要用CSS就可以轻松实现，页面下载更快。
(5)可以使用一个CSS 文件控制整个网站的表现风格。只要修改该CSS 文件中相应的行就可以改变整个网站上页面的表现样式。

4.1.3.1.表现和内容分离

CSS通过定义HTML标记如何表现控制网页的格式，使得页面内容和表现分离，简化了网页格式设计，也使得对网页格式的修改更方便。

4.1.3.2.加强了网页的表现力

CSS样式属性提供了比 HTML更多的格式设计功能。比方，可以通过 CSS 样式去掉网页中超链接的下划线，甚至可以为文字添加阴影效果等。

4.1.3.3.使整个网站表现风格趋于统一

将CSS样式定义到样式表文件中，然后在多个网页中同时应用样式表文件中的样就可以确保多个网页具有一致的格式，而且可以随时更新样式表文件，实现自动更新多个页的格式功能，从而大大低落网站的开发与维护的成本。

4.1.4.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注释以字符 “/*”开始，以“*/”竣事

4.2 CSS语法底子

4.2.1.CSS根本语法

4.2.1.1.根本语法

选择器 {
属性: 值;
属性: 值;
}
颜色和背景
color：文本的颜色。
background-color：元素的背景颜色。
字体
font-size：字体巨细。
font-family：字体类型。
font-weight：字体粗细。
文本
text-align：文本对齐方式（左、中、右）。
line-height：行高。
边距和填充
margin：元素的外边距。
padding：元素的内边距。
边框
border：设置边框的宽度、样式和颜色。
4.2.2.CSS选择器类型

标记选择器：直接选择 HTML 标签。
p { color: blue; /* 设置段落文本颜色为蓝色 */ }

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>第四章——CSS样式基础</title>
</head>
<style>
h1{
color: aqua;
}
p{
color: blue;
}
.abc{
color: aquamarine;
}
</style>
<body>
<h1>CSS选择器</h1>
<p>这是P标记选择器</p>
<p class="abc">class选择器</p>
<h1 class="abc">同样适用</h1>
</body>
</html>

复制代码

类选择器：选择具有特定类的元素，前面加 . 符号。

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>类选择器示例</title>
<style>
/* 类选择器 */
.highlight {
background-color: yellow; /* 设置背景色为黄色 */
font-weight: bold; /* 设置字体加粗 */
}
.text-blue {
color: blue; /* 设置字体颜色为蓝色 */
}
</style>
</head>
<body>
<h1 class="highlight">欢迎使用类选择器示例</h1>
<p class="text-blue">这是一个蓝色的段落。</p>
<p class="highlight">这个段落也是高亮的。</p>
<p>这是一个普通的段落。</p>
</body>
</html>

复制代码

ID 选择器：选择特定 ID 的元素，前面加 # 符号。

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ID选择器示例</title>
<style>
/* ID选择器 */
#login-form {
border: 1px solid #ccc; /* 设置边框 */
padding: 20px; /* 设置内边距 */
width: 300px; /* 设置宽度 */
margin: auto; /* 居中对齐 */
}
#username {
width: 100%; /* 设置输入框宽度 */
padding: 10px; /* 设置内边距 */
}
#password {
width: 100%; /* 设置输入框宽度 */
padding: 10px; /* 设置内边距 */
}
#submit {
background-color: blue; /* 设置按钮背景色 */
color: white; /* 设置按钮字体颜色 */
border: none; /* 去掉边框 */
padding: 10px; /* 设置内边距 */
cursor: pointer; /* 设置鼠标样式 */
}
</style>
</head>
<body>
<div id="login-form">
<h2>登录页面</h2>
<label for="username">用户名:</label>
<input type="text" id="username" placeholder="请输入用户名">
<br>
<label for="password">密码:</label>
<input type="password" id="password" placeholder="请输入密码">
<br>
<button id="submit">提交</button>
</div>
</body>
</html>

复制代码

伪类选择器：
hover：当鼠标悬停在元素上时应用样式。

cus：当元素得到焦点时应用样式（比方输入框）。
active：当元素被激活（比方用户点击按钮时）时应用样式。
first-child：选取某个元素的第一个子元素。
last-child：选取某个元素的最后一个子元素。
ink: 用于可以设置未被访问的链接的样式。
lang：设置具有lang属性的标记的样式。

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>伪类选择器示例</title>
<style type="text/css">
a:link{color: gray;text-decoration: none;}
a:visited{color: blue;text-decoration: none;}
a:hover{color: red;text-decoration: none;}
a:active{color: yellow;text-decoration: none;}
a::first-letter{font-weight: bold;font-family: "微软雅黑";font-size: larger;}
</style>
</head>
<body>
<p>伪类选择器</p>
<a href="http://www.baidu.com">百度一下</a>
</body>
</html>

复制代码

4.2.3.CSS选择器声明

4.2.3.1.集体生明

集体声明代码如下:
h3 ,h4,h5 ,p{ color:red;font-size:18px; }

4.2.3.2.全局声明

对于现实网站中的一些小型页面，比方弹出的小对话框和上传附件的小窗口等，希望这些页面中全部的标记都使用同一种CSS样式，但又不希望通过逐个加人集体声明列表的方式。这时可以使用全局声明符号“*”，代码如下:
*{
color : red ;
font-size : 18px
}

4.2.3.3派生选择器（上下文选择器）

另外，根据标记所在位置的上下文关系来定义样式，可以使标记更加简洁，派生选择器答应根据文档的上下文关系来确定某个标记的样式。通过合理地使用派生选择器，可以使CSS 代码变得更加整洁。比方，要让列表项<li>中的<stong>标记变为斜体字，而不是通常的粗体字，可以如许定义一个派生选择器:
li strong { font-style : italic ; font-weight : normal ; }
strong { font-weight : bold ; }
代码如下:
<p><strong>我是粗体字,不是斜体字,因为我不在列表当中,所以这个规则对我不起作用<strong></p>
<ol>
<li>< strong>我是斜体字,这是因为 stong 元素位于|i 标记内</ srong></li>
<li>我是正常的字体</li>
</ol>在上面的例子中，有两个 stong 标记，但只有i元素中的 suong 元素的样式为斜体字,而且无须为 strong 标记定义特别的class 或id，应用派生选择器，代码更加简洁

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>
</html>

复制代码

4.3.2.内部样式表

内部样式表写在HTML的<head></head>里面，只对所在的网页有效。使用<style></style>标记对来放置CSS规则

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“规定被链接文档的位置，只需要记着这个固定写法即可。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>导入外部样式表</title>
<style type="text/css">
@import url("4-5.css");
</style>
</head>
<body>
<h2>CSS标题</h2>
<p >这是正文内容······</p>
<h2>CSS标题</h2>
<p>通过style标签将外部样式表4-5.css链接到HTML文档中</p>
</body>
</html>

复制代码

4.4 CSS的属性单位

4.4.1 长度、百分比单位

长度单位通常由两个英文字母的缩写表示，且设置大部分属性时仅能使用正数，只有少数属性可以使用正、负数的设置。而且必须留意，若属性值设置为负数，且凌驾浏览器所能接受的范围，以至于无法支持时，浏览器将会选择比力靠近且能支持的数值，长度单位在设置时分别为以下两种不同的类型。

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.5.CSS继承与层叠

1.继承

<!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>
</html>

复制代码

2.层叠

<!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>
</html>

复制代码

4.6 元素类型

4.6.1.块级元素

“独占一行”

4.6.2.行级元素

行级元素也称内联元素，display 属性设置为inline将表现行级元素，元素前后没有换行符，行级元素没有高度和宽度，因此也就没有固定的形状，表现时只占据其内容的巨细超接、图像、范围（span）、表单元素等都是行级元素。

4.6.3.列表项元素

list-—item 属性值表示列表项目，其实质上也是块状表现，是一种特别的块状类型

4.6.4.隐蔽元素

none 属性值表示隐蔽并取消盒模型，所包含的内容不会被浏览器解析和表现。通过把
display 设置为none，该元素及其全部内容就不再表现，也不占用文档中的空间。
综合案例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>开平碉楼</title>
<link rel="stylesheet" href="css/index.css" />
</head>
<body>
<div id="content">
<h2 class="biaoti">开平碉楼申遗大事记</h2>
<hr color="#D3B175" size="5"/>
<img src="img/four4.jpg"/>
<p class="tx1">2000年，开平成立申遗小组</p>
<p>2000年2月，从国务院信访局到开平挂市委常委职务的李玫同志在香港侨团团拜会上向
耀坤、吴荣治等侨领首次提出将开平碉楼申报为世界文化遗产。
2000年10月30日,开平市成立"开平碉楼"申报世界文化遗产领导小组。领导小组下设办公室,分整治组、资料组、宣传组。</p>
<p class="tx1">2001年,省申遗领导小组成立</p>
<p>2001年4月30日,开平市市长办公会议研究将开平碉楼申遗项目名称定为"开平碉楼与民居。
2001年6月19日,申遗办谭伟强、张健文、邝积康3位负责人赴北京,在李玫同志的陪同下拜访了
中国国际古远遗址理事会秘书长郭旗、清华大学教授陈志华,就中遗的有关事宜进行会谈。
2001年3月至6月,开平市开展"开平碉楼"的普查工作,并请上海同济大学、华南理工大学专家对 33 座碉楼测绘了立面图、剖面图、平面图和细部特征图。
2001年6月,江门市成立了以时任市长雷于蓝为组长的江门市申报世界文化遗产领导小组。
2001年7月11日至17日,清华大学陈志华、楼庆西、李秋香教授,五邑大学张国雄、梅伟强教授,
深入到三埠、长沙、沙冈、塘口、蚬冈、百合、月山、赤坎、大沙等镇(办事处)对碉楼与民居进行了认真细致的考察。
开平市政府特聘几位专家为"开平碉楼与民居"申报世界文化遗产工作高级顾问。
2001年9月6日至7日,时任副省长的李兰芳到江门市视察楼,对开平碉楼申遗工作给予了充分的肯定,并表示省政府对此将大力支持。
2001年9月12日,联合国世界遗产评估机构--国际古迹遗址理事会总协调员亨利博士考察开平碉楼,对开平碉楼的价值和开平乃至广东的文物保护工作表示了充分的肯定。
2001年11月,广东省成立申报世界文化遗产领导小组及其办公室。
2001年,开平籍旅港同胞、恒生银行董事长利国伟爵士就开平碉楼申报事宜专门写信给时任国
务院总理的朱镕基。
</p>
<p class="tx1">>2004年,世遗中心受理开平申遗<</p>
<p>2004年4月10日至11日,联合国世界遗产专家乔拉·索拉先生及夫人、以色列文物专家阿里·拉哈米莫夫先生及夫人,
中国国际古迹遗址理事会秘书长郭旗先生,澳门文化局文化财产厅陈泽成厅长的陪同下到开平考察碉楼。
2004年5月,任仲夷同志致函省委书记张德江,请德江同志向中央汇报开平碉楼申报世界文化
遗产工作。
2004年5月17日,张德江同志在开平市委、市政府《关于请张德江书记向中央汇报开平碉楼申报世界遗产工作的请示》中批示:
我赞成和支持开平碉楼申报世界文化遗产。
2004年6月,开平市被中国建筑学会授予"中国碉楼之乡"的称号。
2004年7月2日,中国100多个申遗"预备清单"中已有5个申报项目被世界遗产中心受理,分别是澳门历史建筑群、开平碉楼、殷墟、
福建土楼和红河哈尼梯田。
2004年10月28日,蚬冈镇锦江里昇峰楼业主旅加华侨胡黄患英(乳名:黄滚盛)女士及其兄长黄雄畅先生
在梁金山世外豪园酒店正式将他们的碉楼无偿委托给开平人民政府管理。
</p>
<p class="tx1">>2005年,申报名称变更</p>
<p>2005年4月21日,由清华大学建筑学院与开平市申遗办合作开展的第二次全市性碉楼普查工作于圆满完成。
本次碉楼普查从2005年3月16日开始,历时 13 个月。第二次碉楼普查深入到全市每条村庄逐幢碉楼进行登记、拍照、调查核实,拍摄2万多张图片,采集到一些珍贵的、鲜为人知的历史
2005年9月18日,联合国世界遗产协调员乔拉先生、建筑规划师阿里先生来到开平,指导开平碉楼申报世界文化遗产工作。资料。
2005年9月24日,由省人民政府主办,省文化厅、江门市人民政府、开平市人民政府承办的户条省开平确接中报世界文化进产动员大会在省博物馆门前隆重举行。
2005年11月,开平网接中报世界文化遗产的项目名称由"开平楼与民居"变为"开平明楼与村落”,被大地延伸了开平碉接的文化内涵和历史价值,
更有利于中报世界文化遗产。
2005年12月5日,北京大学世界遗产中心沈文权博士,中国古文物保护专家张忠平女士(郭棉夫人)抵这开平,着手开展修改北大制订的开平碉楼文化遗产保护规划,
为适应申报的需要,该规划将改名为《开平碉楼与村落保护管理规划》,并对相关内容进行增补。
</p>
<p class="tx1">2006年,世遗专家评估开平申遗</p>
<p>2006年1月11日,国家文物局局长单霁翔正式签署英文中报文本。
2006年1月,国务院正式批准"开平碉楼与村落"作为2007年代表中国向联合国中报世界文化道产的项目,
英文中报文本已被联合国教科文组织确认合格接收。
2006年3月2日至3日,联合国教科文组织专家乔拉·索拉先生和阿里先生按原计划来到开考察”中遗”准备工作。
2006年4月3日下午,国家文物局、省政府、江门和开平市委、市政府在开平市行政大楼召开了开平碉楼与村落申报世界文化遗产工作会议,
研究申遗工作进入第二个重要环节--环境整治阶段存在的问题,提出下一步工作意见。
2006年5月9日,黄华华省长在江门市委书记陈继兴、市长王南健的陪同下到江门市检查指导
开平碉楼与村落申遗工作。
2006年8月21日至22日,经业主方其祥、方其赏、方其锦授权,塘口镇自力村三座尘封了大半
个世纪的居庐--叶生居庐、官生居庐、澜生居庐被依次打开,并发现大量珍贵文物。2006年8月27 日至28日,
著名歌唱家维文与中央电视台摄制组一行10 多人来到开平,拍摄开平碉楼与村落申报世界文化遗产主题曲-《碉楼颂》音乐电视。2006年9月,
中国华侨出版社出版了两本关于开平碉楼与村落的学术著作,总结开平碉楼与村落研究所取得的丰硕成果,支持开平碉楼与村落申报世界文化遗产。
2006年9月15日,开平市举行"共同的心愿--全力支持开平碉楼与村落中报世界文化遭产为主题的申遗文艺晚会,世遗评估专家卢光裕先生、
副省长雷于蓝、国家文物局有关领导观看了晚会。晚会趟束时,共收到来自社会各界的捐款1480多万元,其中,著名侨领吴荣治先生及夫人捐款 100 万元。
2006年9月15至18日,受联合国教科文组织世界遗产中心的委派,"世遗"评估专家卢光裕先生到江门市对开平碉楼与村落进行评估。
</p>
<p class="tx1">2007年，申遗成功</p>
<p>2007年1月,开平碉楼与村落中遗项目顺利通过国际古迹遺址(ICOMOS)委员会执会
2007年6月20日,开平市赴新西兰、澳大利亚中遗代表团一行30多人經香港转机后抵达断会在巴黎召开的专家会议的评审。
2007年6月22日,中国政府代表团飞赴新西兰,出席世界道产委员会第31届大会,为开平碉楼与村落申遗助威。
2007年6月底,开平碉楼与村落中遗项目顺利通过在新西兰召开的第31届世界过产大会的表决,正式列入《世界遗产名录》。
</p>
<p id="t1">来源：开平碉楼</p>
</div>
</body>
</html>

复制代码

*{
width:1024px;
margin-left:auto;
margin-right: auto;
}
.biaoti{
font-family: "微软雅黑";
text-align: center;
}
#content{
text-indent: 2em;
font-size: 18px;
}
.tx1{
font-weight: bold;
font-family: "黑体";
font-size: 24px;
color: #8b4513;
background-color: D3B175;
line-height: 200%;
}
#t1{
color: #333;
text-align: right;
}

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

继续阅读请点击广告

第四章 CSS样式底子

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

浏览过的版块

大连密封材料

第四章 CSS样式底子

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

浏览过的版块

大连密封材料

登录参与点评抽奖加入IT实名职场社区