CSS3学习

夜漠夕

已于 2022-04-14 12:26:18 修改

阅读量668

点赞数 1

分类专栏： HTML5+CSS3+JS 文章标签： css3

于 2022-04-14 01:21:54 首次发布

本文链接：https://blog.csdn.net/panjj123/article/details/124131087

版权

HTML5+CSS3+JS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

CSS简介

全称：Cascde Style Sheet，层叠样式表
用于细粒度的调整html元素的样式或修饰
html负责框架架构
css负责样式修饰
js负责行为交互、动态效果

CSS常用的标记

块标记：div
内联标记：span

CSS的三种引入方式

除测试和引用外，基本只使用第三种引入方式
行内样式：使用标签的style属性，此属性任意标签都有，只能修饰自身所在标签，即使多个标签样式相同，也无法简化
- 该样式仅供当前标签使用
- 在body中标签里进行设置
页内样式：使用style标签，在标签中定义样式，只能修饰一个页面
- 该样式仅供当前页面使用
- 在head中的style标签中设置
使用外部文件：引入外部样式表文件
- 该样式可供当前项目中任意页面使用
- 在外部.css文件中设置
- 好处一：多个页面可使用相同的样式
- 好处二：样式和结构分离，提高了代码的优雅性

导入外部样式表文件

<link rel="stylesheet" type="text/css" href="css/index.css" />

CSS样式的语法

样式名称：样式值
多个不同的样式之间使用分号分隔

CSS的颜色机制

RGB颜色机制
- red、green和blue，任意一个颜色都是由这三种基本色搭配而成
- 每个基本色最多可选255份，进行调和搭配
- 函数表示法：rgb(255,255,255)、rgb(0,0,0) 、rgb(x,x,x,y)（最后一个参数为透明度）
十六进制表示法
- 由#和六位十六进制数组成
- 若任意两位都是重复数字，可以简写（#001122等价于#012）
英文表示法
- 用颜色对应的英文来表示颜色

CSS普通选择器

1. 标签选择器

直接使用标签名作为选择器

/* 标签选择器 */
td {
	color: blue;
	background-color: green;	
	font-weight: bold;
}

<!-- 九宫格 -->
<table border="1" cellspacing="0" cellpadding="10" bgcolor="antiquewhite">
	<tr>
		<td>1</td>
		<td>2</td>
		<td>3</td>
	</tr>
	<tr>
		<td>4</td>
		<td>5</td>
		<td>6</td>
	</tr>
	<tr>
		<td>7</td>
		<td>8</td>
		<td>9</td>
	</tr>
</table>

2. id选择器

id是一个标签的唯一标识符
用于修饰指定id的标签
使用#id值作为选择器

/* id选择器 */
#ulist {
	font-style: italic;
}

<!-- 无序列表 -->
<ul id="ulist">
	<li>学习要认真</li>
	<li>学习要努力</li>
	<li>学习要刻苦</li>
	<li>学习要有效</li>
</ul>

3. 类选择器

使用class属性设置标签的类
用于修饰某一类的标签
一个标签可以有多个类，使用空格分隔
使用.class值作为选择器

/* 类选择器 */
.c1 {
	font-family: 楷体;
}

<!-- 有序列表 -->
<p>把大象放进冰箱分几步?</p>
<ol>
	<li>打开冰箱</li>
	<li class="c1">把大象放进冰箱</li>
	<li>关上冰箱</li>
</ol>

4. 模糊选择器

也叫全选择器
一般不单独使用，通常结合高级选择器一起使用
使用*作为选择器

/* 模糊选择器 */
* {
	border: 1px solid #000;
}

CSS高级选择器

1. 子代选择器

a>b，选中某个元素的子元素

/* 子代选择器 */
div>ul>li {
	font-weight: bold;
}

<!-- 子代选择器实现对无序列表每行的样式进行设置 -->
<div>
	<ul>
		<li>春眠不觉晓</li>
		<li>处处闻啼鸟</li>
		<li>夜来风雨声</li>
		<li>花落知多少</li>
	</ul>
</div>

2. 后代选择器

a b，选中某个元素的后代元素
在表格中，我们常常不按照 [ thead、tbody、tfoot ] 格式来写，而是直接写出tbody中的内容，此时，用子代选择器无法实现预期的样式（除非加上tbody），需要用到后代选择器
若只用到了无序列表ul，下述代码中的选择器也可省略ul，改为div li

/* 后代选择器 */
div ul>li {
	font-weight: bold;
}

<!-- 后代选择器实现对列表每行的样式进行设置 -->
<div>
	<ul>
		<li>春眠不觉晓</li>
		<li>处处闻啼鸟</li>
		<li>夜来风雨声</li>
		<li>花落知多少</li>
	</ul>
</div>

3. 兄弟选择器

a~b，a+b
~表示选中某个元素的所有弟元素
+表示选中某个元素的紧邻的弟元素

/* 兄弟选择器(~) */
.c2~li {
	color: #0000FF;
}

<!-- 兄弟选择器设置整首古诗字体为蓝色 -->
<div>
	<ul>
		<li class="c2">春眠不觉晓</li>
		<li>处处闻啼鸟</li>
		<li>夜来风雨声</li>
		<li>花落知多少</li>
	</ul>
</div>

/* 兄弟选择器(+) */
.c3+li {
	color: #0000FF;
}

<!-- 兄弟选择器设置整首古诗第二句字体为蓝色 -->
<div>
	<ul>
		<li class="c3">春眠不觉晓</li>
		<li>处处闻啼鸟</li>
		<li>夜来风雨声</li>
		<li>花落知多少</li>
	</ul>
</div>

4. 并集选择器

a,b，表示选中a与b的并集

/* 并集选择器 */
#poem1>li,span {
	border: 5px dotted green;
}

<!-- 并集选择器实现古诗名和整首古诗边框样式 -->
<span>春晓</span>
<ul id="poem1">
	<li>春眠不觉晓</li>
	<li>处处闻啼鸟</li>
	<li>夜来风雨声</li>
	<li>花落知多少</li>
</ul>

5. 交集选择器

a.b，表示选中a与b的交集
a指标签名，b指类名

/* 交集选择器 */
span.c4 {
	font-weight: bold;
}
.c4 {
	color: blue;
}

<!-- 交集选择器实现对古诗名样式设置(字体加粗、字色为蓝) -->
<div>
	<span class="c4">春晓</span>
	<span>春眠不觉晓</span>
	<span>处处闻啼鸟</span>
	<span>夜来风雨声</span>
	<span>花落知多少</span>
</div>

伪类选择器

无需定义类名的类
:first-child：选中父元素的第一个子元素
:last-child：选中父元素的最后一个子元素
:nth-child(n)：选中父元素的第几个子元素

/* 伪类选择器(first-child) */
#poem1>span:first-child {
	display: none;
}

<!-- 伪类选择器将古诗名隐藏 -->
<div id="poem1">
	<span>春晓</span>
	<span>春眠不觉晓</span>
	<span>处处闻啼鸟</span>
	<span>夜来风雨声</span>
	<span>花落知多少</span>
</div>

/* 伪类选择器(last-child) */
#poem2>span:last-child {
	display: none;
}

<!-- 伪类选择器将古诗的最后一行隐藏 -->
<div id="poem2">
	<span>春晓</span>
	<span>春眠不觉晓</span>
	<span>处处闻啼鸟</span>
	<span>夜来风雨声</span>
	<span>花落知多少</span>
</div>

/* 伪类选择器(nth-child) */
#poem3>span:nth-child(2) {
	display: none;
}

<!-- 伪类选择器将古诗的第一行隐藏 -->
<div id="poem3">
	<span>春晓</span>
	<span>春眠不觉晓</span>
	<span>处处闻啼鸟</span>
	<span>夜来风雨声</span>
	<span>花落知多少</span>
</div>

超链接伪类选择器

超链接比较特殊，本身就有一定的样式，我们也可以通过伪类选择器对其样式进行修改
必须按照顺序设置样式[link、visited、hover、active]，不然有些样式设置可能不会生效
为了方便记忆超链接样式设置顺序，国外总结出一条准则：爱恨准则(love、hate)
link：默认样式
visited：访问之后的样式
hover：鼠标划过时的样式
active：激活后的样式(谷歌浏览器中按下即激活)

/* 超链接默认样式 */
a:link {
	/* 删除超链接的下划线 */
	text-decoration: none;
	/* 设置超链接的字色为绿色 */
	color: green;
}
			
/* 超链接访问后样式 */
a:visited {
	/* 设置超链接访问后字色为红色 */
	color: red;
}
			
/* 鼠标划过超链接时样式 */
a:hover {
	/* 设置鼠标滑过时超链接背景色为粉色 */
	background-color: pink;
	/* 设置鼠标滑过时超链接字体变大 */
	font-size: large;
}
			
/* 超链接激活时样式 */
a:active {
	/* 设置鼠标点击超链接后，超链接字色变蓝 */
	color: blue;
}

<a href="http://www.baidu.com">百度</a>

伪元素选择器

::before：在第一个子元素的前面，创建一个内联元素
::after：在最后一个子元素的后面，创建一个内联元素
若不小心把::写成:，谷歌浏览器能识别并正确处理，但不支持这么做

/* 在列表的头部插入元素 */
ul::before {
	content: "一年四季";
}

/* 在列表的尾部插入元素 */
ul::after {
	content: "ending";
}

/* 在列表项的头部插入元素 */
ul>li::before {
	content: "*";
}

/* 在列表项的尾部插入元素 */
ul>li::after {
	content: "*";
}

<ul>
	<li>春</li>
	<li>夏</li>
	<li>秋</li>
	<li>冬</li>
</ul>

盒模型(重点)

box-model，CSS认为每一个html元素都可以看做是一个盒子，进而对盒子进行尺寸和方位的修饰
盒模型一般指块元素；内联元素不能设置尺寸，其尺寸由其内容所决定
块元素占用的总空间为：内容区域+内边距+边框+外边距
默认尺寸是作用在内容区域上的
盒模型从里到外分为：内容区域、内边距、边框、外边距

1. 设置内容区域

常用内用区域样式：width、height、background-color

width: 300px;
height: 400px;
background-color: pink;

2. 设置外边距

通过margin样式设置盒模型外边距

/* 分开设置上下左右外边框 */
margin-left: 30px;
margin-right: 30px;
margin-top: 30px;
margin-bottom: 30px;

/* 上下左右全为30px */
margin: 30px;
	
/* 上下为30px 左右为40px */
margin: 30px 40px;
	
/* 上为30px 左右为40px 下为50px */
margin: 30px 40px 50px;
	
/* 上为30px 右为40px 下为40px 左为30px 顺时针 */
margin: 30px 40px 40px 30px;

3. 设置内边距

通过padding样式设置盒模型内边距

/* 分开设置上下左右外边框 */
padding-left: 30px;
padding-right: 30px;
padding-top: 30px;
padding-bottom: 30px;

/* 上下左右全为30px */
padding: 30px;
	
/* 上下为30px 左右为40px */
padding: 30px 40px;
	
/* 上为30px 左右为40px 下为50px */
padding: 30px 40px 50px;
	
/* 上为30px 右为40px 下为40px 左为30px 顺时针 */
padding: 30px 40px 40px 30px;

4. 设置边框

/* 四个边框设置相同，有以下两种写法 */
/* 1. 合起来设置 */
border: 30px solid transparent;

/* 2. 分开来设置 */
border-width: 30px;
border-style: solid;
border-color: transparent;

/* 四个边框设置不同，有以下两种写法 */
/* 1. 按边框来写 */
border-top: 30px solid transparent;
border-right: 40px dotted green;
border-bottom: 40px solid blue;
border-left: 30px solid red;

/* 2. 按样式来写 */
border-width: 30px 40px 40px 30px;
border-style: solid dotted solid solid;
border-color: transparent green blue red;

设置背景图

背景图与盒模型相关，没有块元素就无法设置背景图

设置网页中的图像元素

/* .css文件 */
.mybgp {
	/* 设置块元素基本样式 */
	width: 400px;
	height: 700px;
	border: 1px solid #000;
	background-color: pink;
	
	/* 块元素水平居中 第一个参数表示上边距 第二个参数表示 */
	margin: 30px auto;
	
	/* 设置内容元素溢出隐藏，不占任何空间 */
	overflow: hidden;
	/* 设置内容元素溢出后通过滚动条可以查看 */
	overflow-x: scroll;
}

.mybgp>img {
	/* 同时使用下述两个样式会导致图片失真变形 */
	
	/* 设置图片宽度为父容器的100% */
	/* width: 100%; */
	
	/* 设置图片高度为父容器的100% */
	height: 100%;
}

/* 设置块元素基本样式 */
<div class="mybgp">
	<img src="img/001.png" >
</div>

设置背景图

/* .css文件 */
.bgp {
	width: 800px;
	height: 400px;
	background-color: pink;
	margin: 0 auto;
	
	/* 设置背景图 */
	background-image: url(../img/001.png);
	
	/* 不平铺 */
	background-repeat: no-repeat;
	
	/* 设置背景图的大小 */
	background-size: auto 100%;
	
	/* 设置背景图位置 left right top bottm center */
	background-position: center center;
}

<!-- 网页设置背景图 -->
<div class="bgp"></div>

display样式

none：不显示，完全释放空间
inline：内联元素，无法设置尺寸
block：块元素，可以设置尺寸
inline-block：内联块状元素，在一行内显示，可以设置尺寸

/* .css文件 */
/* 设置无序列表样式 */
.c1 {
	/* 去除序号标记 */
	list-style-type: none;
	margin: 0;
	padding: 0;
	background-color: rgba(100,100,100,0.5);
}

/* 设置列表项为内联块状元素 */
.c1>li {
	display: inline-block;
}

/* 设置鼠标划过列表项时颜色改变 */
.c1>li:hover {
	background-color: #ccc;
}

/* 去除超链接的下划线 */
.c1>li>a {
	text-decoration: none;
}

<!-- display简单使用案例 -->
<ul class="c1">
	<li><a href="#">公司介绍</a></li>
	<li><a href="#">产品介绍</a></li>
	<li><a href="#">问题反馈</a></li>
	<li><a href="#">联系我们</a></li>
</ul>

浮动(重点)

破坏默认的文档流布局
默认文档流布局
- 块元素：从上向下排列
- 内联元素：从左向右排列
浮动元素需遵循浮动布局规则，规则如下
- 样式名：float
- 需要定义尺寸
- 按照定义的顺序进行排列
  - left：左浮动
  - right：右浮动
- 浮动元素会释放原占有空间
清除浮动
- 必须是一个块元素才能清除浮动
- 必须是浮动元素的兄弟元素，且在所有浮动元素之后
- 添加clear样式

/* .css文件 */
/* 设置浮动元素共有的样式 */
.f1,.f2,.f3 {
	/* 必须要设置浮动元素的尺寸 */
	width: 35px;
	height: 35px;
	text-align: center;
	font-size: larger;
	float: left;
}

/* 设置浮动元素的特有的样式 */
.f1 {
	background-color: red;
}
.f2 {
	background-color: green;
}
.f3 {
	background-color: blue;
}

/* 设置非浮动元素的样式 */
.f4 {
	width: 180px;
	height: 50px;
	text-align: center;
	font-size: larger;
	background-color: yellow;
}

/* 清除浮动 */
.clear {
	/* 清除浮动 */
	clear: both;
}

<!-- html结构设置 -->
<div class="f1">1</div>
<div class="f2">2</div>
<div class="f3">3</div>
<div class="clear"></div>
<div class="f4">4</div>

浮动的简单使用

列表中的元素为列表项，清除浮动需在列表项的最后进行，常规操作为在最后一个列表项的后面跟一个div块元素，进行清除浮动操作，但为了编码规范，一般使用after伪类选择器来进行清除浮动操作

/* .css文件 */
/* 设置无序列表样式 */
.c1 {
	/* 去除序号标记 */
	list-style-type: none;
	margin: 0;
	padding: 0;
	background-color: rgba(100,100,100,0.5);
}

/* 设置列表项为内联块状元素 */
.c1>li {
	display: inline-block;
}

/* 设置鼠标划过列表项时颜色改变 */
.c1>li:hover {
	background-color: #ccc;
}

/* 去除超链接的下划线 */
.c1>li>a {
	text-decoration: none;
}

/* 清除浮动 */
.c1::after {
	content: "";
	display: block;
	clear: both;
}

<!-- display简单使用案例 -->
<ul class="c1">
	<li><a href="#">公司介绍</a></li>
	<li><a href="#">产品介绍</a></li>
	<li><a href="#">问题反馈</a></li>
	<li><a href="#">联系我们</a></li>
</ul>

等分布局(以四等分为例)

将一个宽度为页面的80%，高度为400px的矩形块元素，进行四等分，间距为10px

第一种方法
- 思路：在矩形块元素的右边，添加一个宽度为10px的外边距，产生一个新的矩形块元素，对这个新矩形进行四等分，最后隐藏最右边添加的内边距
- 好处：任意CSS版本中都可以实现

/* 设置矩形块元素的样式 */
.rect {
	width: 80%;
	height: 400px;
	border: 1px solid black;
	margin: 100px auto;
	overflow: hidden;
}

/* 设置添加间距后的新矩形块元素的样式 */
.newrect {
	margin-right: -10px;
	height: 100%;
	background-color: rgba(0, 255, 0, 0.5);
}

/* 将新矩形块元素进行四等分 */
.newrect>.rectchild {
	width: 25%;
	height: 100%;
	float: left;
}

/* 设置四等分后每份的样式 */
.newrect .item {
	margin-right: 10px;
	height: 100%;
	background-color: pink;
}

<!-- html结构设置 -->
<div class="rect">
	<div class="newrect">
		<div class="rectchild">
			<div class="item"></div>
		</div>
		<div class="rectchild">
			<div class="item"></div>
		</div>
		<div class="rectchild">
			<div class="item"></div>
		</div>
		<div class="rectchild">
			<div class="item"></div>
		</div>
	</div>
</div>

第二种方法
- 思路：通过calc()函数计算出每份的宽度x，设置每份的宽度为x+10px，最后使用伪类选择器隐藏最后一份的间距
- 好处：使用到了calc()函数，该函数只有在CSS3.0版本中才能使用，不需要额外嵌套div

/* 设置矩形块元素的样式 */
.rect {
	width: 80%;
	height: 400px;
	border: 1px solid black;
	margin: 100px auto;
	background-color: rgba(0, 255, 0, 0.5);
}

/* 设置四等分后每份的样式 */
.rectchild {
	width: calc((100% - 30px) / 4);
	height: 100%;
	margin-right: 10px;
	background-color: pink;
	float: left;
}

/* 单独设置最后一份的样式 */
.rectchild:last-child {
	margin-right: 0;
}

<!-- html结构设置 -->
<div class="rect">
	<div class="rectchild"></div>
	<div class="rectchild"></div>
	<div class="rectchild"></div>
	<div class="rectchild"></div>
</div>

定位(重点)

破坏默认的文档流布局，可以让一个元素定位到页面的任意位置
遵循定位规则
- 自定义位置
- 自定义定位方式
样式名：position
- 常用值：static、absolute、relative、fixed

1. 绝对定位

可以定位到页面的任意位置
参照物：从当前元素的父元素开始，向上查找到第一个非static定位的元素，该元素即为参照元素，如果找不到，则以body为参照

.rect1 {
	width: 800px;
	height: 400px;
	border: 1px solid black;
	background-color: green;
	position: absolute;
	left: 100px;
	top: 100px;
}

.rect2 {
	width: 80px;
	height: 40px;
	border: 1px solid black;
	background-color: pink;
	position: absolute;
	left: 100px;
	top: 100px;
}

<div class="rect1">
	<div class="rect2"></div>
</div>

2. 相对定位

可以定位到页面的任意位置
以未偏移之前，自身的位置为参照

.rect1 {
	width: 800px;
	height: 400px;
	border: 1px solid black;
	background-color: green;
	position: static;
}

.rect2 {
	width: 80px;
	height: 40px;
	border: 1px solid black;
	background-color: pink;
	position: relative;
	left: 100px;
	top: 100px;
}

<div class="rect1">
	<div class="rect2"></div>
</div>

3. 固定定位

可以定位到页面的任意位置
以视区（可视区域）为参照

.rect {
	width: 800px;
	height: 400px;
	background-color: pink;
	border: 1px solid black;
	/* 块元素固定在页面某一位置，即使翻滚页面，也不变位置 */
	position: fixed;
	left: 100px;
	top: 100px;
}

<div class="rect"></div>

4. 特殊情况

若块元素没有设置尺寸，可通过定位来设置其大小

.unnormal {
	background-color: red;
	position: absolute;
	top: 100px;
	right: 100px;
	bottom: 100px;
	left: 100px;
}

<div class="unnormal"></div>

CSS分区方法

表格
display样式
浮动
定位

圣杯布局

上、左、中、右、下

CSS常用样式

background-color
- 背景色
color
- 前景色
- transparent：完全透明
font-weight
- 字重：表示字体的粗细，值越大字越粗
- 常用值：normal、bold
text-decoration
- 文本描述
- 常用值：overline、underline、line-through、none
font-style
- 设置字体样式
- 常用值：italic(斜体)
font-family
- 设置元素的字体
- 常用值：楷体、宋体、隶书等
border
- 设置边框样式，可以同时设计线宽、线型和颜色
- 线型常用值：solid、dotted、dashed
border-collapse
- 边框折叠
- 只能用于表格中
text-align
- 设置文本水平对齐方式
- 常用值：left、center、right
font-size
- 设置文本字号
overflow
- overflow-x、overflow-y
- 常用值：hidden、scroll
margin: 30px auto;
- 第一个参数表示距离上部30px
- 第二个参数表示水平居中
background-image: url(img/001.png);
- 参数为图片的url路径
background-repeat
- 常用值：no-repeat、repeat-x、repeat-y、repeat
background-position
- 常用值：left、right、top、bottm、center、像素(坐标)、百分比
background-size
- background-size: auto 100%;
  - 第一个参数表示背景图的宽度
  - 第二个参数表示背景图的高度
- background-size: contain;：表示正好覆盖，宽度百分百显示
- background-size: cover;：表示正好填满，高度百分百显示
list-style-type
- 列表样式种类设置
- 常用值：circle、disc、none
float
- 常用值：left、right
clear
- 常用值：left、right、both
样式名：position
- 常用值：static、absolute、relative、fixed