第四章 CSS样式基础

Q狄龙

已于 2024-10-06 20:16:21 修改

阅读量193

点赞数 6

文章标签： css 前端笔记学习方法

于 2024-10-06 19:49:18 首次发布

本文链接：https://blog.csdn.net/2301_78694366/article/details/142510581

版权

4.1 CSS概述

4.1.1.CSS的基本概念

1. 选择器（Selector）：用于指定HTML元素，决定样式应用在哪些元素上。常见选择器有：

元素选择器（如 p）：选择所有 <p> 元素。

类选择器（如 .class）：选择具有特定类的元素。

ID选择器（如 id）：选择具有特定ID的元素。

组合选择器（如 div > p）：选择父子关系等特定结构的元素。

4.1.2传统HTML的缺点

4.1.2.1.维护困难
4.1.2.2.标记不足
4.1.2.3.网页过“胖”
4.1.2.4.定位困难

4.1.3.CSS的特点和优势

4.1.3.1.表现和内容分离
4.1.3.2.增强了网页的表现力
4.1.3.3.使整个网站显示风格趋于统一

4.1.4.CSS的编写规则

4.1.4.1.目录结构命名规则
4.1.4.2.样式文件的命名规则
4.1.4.3.选择器的命名规则
4.1.4.4.CSS代码注释
4.1.4.5.CSS代码注释

4.2 CSS语法基础

4.2.1.CSS基本语法
4.2.1.1.基本语法
4.2.1.2.语法说明
4.2.2.CSS选择器类型


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

4.2.2.1.标记选择器
4.2.2.2.class选择器

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

4.2.2.3.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>

4.2.2.4.伪类选择器


<!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.集体生明
4.2.3.2.全局声明
4.2.3.3派生选择器（上下文选择器）

4.3 CSS引入方式

4.3.1.内联样式表（行内样式表）
4.3.1.1.基本语法
4.3.1.2.语法说明


<!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.内部样式表

4.3.2.1.基本语法

4.3.2.2.语法说明

4.3.3.外部样式表
4.3.3.1.链接外部样式表


<!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.导入外部样式表


<!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.1.1.相对类型
4.4.1.2.绝对类型
4.4.2.色彩单位
4.4.2.1.用十六进制数方式表示色彩值
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>


<!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.行级元素
4.6.3.列表项元素
4.6.4.隐藏元素

4.7习题


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