表现层（CSS）

天宇阿

已于 2022-09-03 18:04:34 修改

阅读量573

点赞数

分类专栏： CSS 文章标签： css

于 2022-05-30 11:08:46 首次发布

本文链接：https://blog.csdn.net/zhao854116434/article/details/124941237

版权

文章目录

一、CSS概述
二、CSS选择器（重点+难点）
三、美化页面
四、盒子模型
五、浮动
六、定位
七、页面动画（特效效果）

学习视频来自于：秦疆（遇见狂神说）Bilibili地址
他的自学网站：kuangstudy

受了这么多苦，一定有什么是值得的

一、CSS概述

1.1 CSS在网页中的应用

Cascading Style Sheet：层叠级联样式表
CSS：表现（美化页面）
美化页面：字体、颜色、高度、宽度、背景图片、网页定位、网页浮动

1.2 CSS发展史

CSS1.0
CSS2.0 DIV（块） + CSS，HTML与CSS结构分离的思想，网页变的简单，SEO（搜索引擎优化，html关键字：meta、keywords、description）
CSS2.1 浮点、定位
CSS3.0 圆角、阴影

1.3 快速入门

html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 规范 <sryle>
		可以编写css的代码，每一个声明，最好使用分号结尾
		语法：
		选择器{
			声明1；
			声明2；
			声明3；
		}
		-->
		<!-- link：引入链接
		 rel：样式表
		 href：地址
		 -->
		<link rel="stylesheet" href="css/style.css"/>
	</head>
	<body>
		<h1>枯藤老树昏鸦</h1>
		<h1>大爷带着大妈</h1>
		<h1>时而俩 时而仨</h1>
	</body>
</html>

css

h1 {
	color: indianred;
}

1.4 css的优势

优势

内容和表现分离。
页面结构表现同一，可以实现复用。
样式十分的丰富。
建议使用独立于html的css文件。
利用SEO，容易被搜索引擎收录。

缺陷

语法不够强大（无法嵌套书写，导致模块化开发中需要书写很多重复的选择器）。
没有变量和合理的样式复用机制，使得逻辑上相关的属性值必须以字面量的形式重复输出，导致难以维护。
为了解决出现了缺陷出现了【css预处理器】的工具。

1.5 css的3种导入方式

内部样式

<style>
	h1 {
     
		color: green;
	}
</style>

外部样式

<link rel="stylesheet" href="css/style.css" />

行内样式

<h1 style="color: red;">一江春水向东流</h1>

优先级
行内样式>内部样式和外部样式（就近原则）

二、CSS选择器（重点+难点）

作用：选择页面上某一个或者某一类元素。

2.1 基本选择器

2.1.1 标签选择器

/* 
 标签名称{}
 */
h1 {
	color: green;
}

2.1.2 类选择器class

/* 
 .class名称{}
 */
.t1{
	color: blue;
}

2.1.3 id选择器（优先级最高）

/* 
 #id名称{}
 */
#i1{
	color: darksalmon;
}

2.1.4 优先级

id选择器>类选择器>标签选择器

2.1.5 全部代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 内部样式 -->
		<style>
			/* 
			 标签名称{}
			 */
			h1 {
     
				color: green;
			}
			h3{
     
				color: green;
			}
			p{
     
				color: green;
			}
			/* 
			 .class名称{}
			 */
			.t1{
     
				color: blue;
			}
			/* 
			 #id名称{}
			 */
			#i1{
     
				color: darksalmon;
			}
		</style>
	</head>
	<body>
		<h1 class="t1" id="i1">虞美人</h1>
		<h3 class="t1">李煜</