CSS+CSS3超详细教程

最新推荐文章于 2024-03-17 21:40:56 发布
最新推荐文章于 2024-03-17 21:40:56 发布
阅读量2.5k 收藏 16
点赞数 3
分类专栏： Java_Web 文章标签： css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liu_to_liu/article/details/116563541
版权

CCS+CSS3

1、CSS简介

  • CSS的主要使用场景就是没话网页，布局网页的。

1.1 HTML的局限性

在这里插入图片描述

1.2 CSS–网页的美容师

在这里插入图片描述

  • 总结
    在这里插入图片描述

1.3 CSS语法规范

在这里插入图片描述
在这里插入图片描述

1.4 CSS代码风格

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

1.5 引入CSS样式表

  • CSS样式的书写位置

1.5.1 行内式（内联样式）

在这里插入图片描述

<!-- 行内样式 -->
<h1 style="color:gray; font-size: 18px;">我在这里等你</h1>

1.5.2 内部样式表（内嵌样式表）

在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>CSS--网页的美容师</title>
		<!-- 内部样式 -->
		<style type="text/css">
			h1{
     
				color: green;
				font-size: 18px;
			}
		</style>
	</head>
	<body>
		<h1>我在这里等你</h1>
	</body>
</html>

1.5.3 外部样式表（外链式）

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

h1{
   
	color: pink;
	font-size: 20px;
}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>CSS--网页的美容师</title>
		<!-- 外部样式  真正实现结构与样式完全分离 实现CSS文件共享-->
		<link rel="stylesheet" type="text/css" href="./css/style.css">
	</head>
	<body>
		<h1>我在这里等你</h1>
	</body>
</html>

1.5.4 总结

在这里插入图片描述

2、CSS选择器

2.1 CSS选择器的作用

在这里插入图片描述

2.2 CSS选择器的分类

在这里插入图片描述

2.2.1 基础选择器

2.2.1.1 标签选择器

在这里插入图片描述
在这里插入图片描述

2.2.1.2 类选择器

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

2.2.1.2 类选择器-----多类名

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>CSS--网页的美容师</title>
		<style>
			/* 标签选择器:写上标签名 */
			p {
     
				color: green;
			}
			div {
     
				color: pink;
			}
			/* 类选择器:样式点定义 结构类（class）调用	开发最常用 */
			.red {
     
				color: red;
			}
			.font35 {
     
				font-size: 35px;
			}
			.big-boy {
     
				color: blue;
			}
		</style>
	</head>
	<body>
		<p class="red">男生</p>
		<p class="big-boy">男生</p>
		<p class="red font35">男生</p>
		<p>男生</p>
	</body>
</html>
2.2.1.3 id选择器

在这里插入图片描述
在这里插入图片描述

2.2.1.4 通配符选择器

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>CSS--网页的美容师</title>
		<style>
			/* 通配符 */
			* {
     
				color: red;
			}
			/* id选择器 */
			#pink {
     
				color: pink;
			}
		</style>
	</head>
	<body>
		<div id="pink">java语言</div>
		<div>我的</div>
		<span>我的</span>
		<ul>
			<li>我的</li>
		</ul>
	</body>
</html>
2.2.1.5 总结

在这里插入图片描述

2.2.2 复合选择器

2.2.2.1 后代选择器

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>CSS--网页的美容师</title>
		<style>
			/* 后代选择器 */
			ol li {
     
				color: pink;
			}
			ol li a {
     
				color: red;
			}
			.nav li a {
     
				color: yellow;
			}
		</style>
	</head>
	<body>
		<ol>
			<li>我是ol</li>
			<li>我是ol</li>
			<li>我是ol</li>
			<li><a href="#">我是超链接1</a></li>
		</ol>
		<ul>
			<li>我是ul</li>
			<li>我是ul</li>
			<li>我是ul</li>
			<li><a href="#">我是超链接2</a></li>
		</ul>
		<ul class="nav">
			<li>我是ul</li>
			<li>我是ul</li>
			<li>我是ul</li>
			<li><a href="#">我是超链接3</a></li>
		</ul>
	</body>
</html>
2.2.2.2 子选择器

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>CSS--网页的美容师</title>
		<style>
			/* 子代选择器 */
			.nav>a {
     
				color: red;
			}
		</style>
	</head>
	<body>
		<div class="nav">
			<a href="#">AAAA</a>
			<p>
				<a href="#">BBBB</a>
			</p>
		</div>
	</body>
</html>
2.2.2.3 并集选择器

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>CSS--网页的美容师</title>
		<style>
			/* 并集选择器 */
			/* div,p {
				color: red;
			} */
			div, p, .pig li {
     
				color: pink;
			}
		</style>
	</head>
	<body>
		<div>熊大</div>
		<p>熊二</p>
		<span>光头强</span>
		<ul class="pig">
			<li>小猪佩琪</li>
			<li>AAAAA</li>
			<li>BBBBB</li>
		</ul>
	</body>
</html>
2.2.2.4 伪类选择器

在这里插入图片描述

2.2.2.4.1 链接伪类

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

2.2.2.4.2 :focus 伪类选择器

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>CSS--网页的美容师</title>
		<style>
			a {
     
				color: #333;
				text-decoration: none;
			}
			/* 链接伪类 */
			/* a:link 未访问的链接  */
			a:link {
      
				color: #333;
			}
			/* a:visited 已访问过的链接 */
			a:visited {
     
				color: orange;
			}
			/* a:hover 经过的链接 */
			a:hover {
     
				color: red;
				text-decoration: underline;
			}
			/* a:active 按下链接 */
			a:active {
     
				color: green;
			}
			/* :focus伪类选择器 */
			input:focus {
     
				background-color: pink;
			}
		</style>
	</head>
	<body>
		<a href="#">小猪佩奇</a> <br>
		<input type="text">
		<input type="text">
		<input type="text">
	</body>
</html>
2.2.2.5 总结

在这里插入图片描述

2.2.3 CSS3新增选择器

在这里插入图片描述

2.2.3.1 属性选择器

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>CSS--网页的美容师</title>
		<style>
			/* E[att] */
			input[value] {
     
				color: pink;
			}
			/* E[att="val"] */
			input[type=password] {
     
				background-color: red;
			}
			/* E[att^="val"] */
			div[class^=icon] {
     
				color: aqua;
			}
			/* E[att$="val"] */
			section[class$="data"] {
     
				color: blue;
			}
		</style>
	</head>
	<body>
		<input type="text" value="请输入用户名">
		<input type="text" >
		<input type="password" >
		<div class="icon1">小图标1</div>
		<div class="icon2">小图标2</div>
		<div class="icon3">小图标3</div>
		<div class="icon4">小图标4</div>
		<section class="icon1-data">我是安其拉</section>
		<section class="icon2-data">我是哥斯拉</section>
		<section class="icon3-ico">哪我是谁</section>
	</body>
</html>
2.2.3.2 结构伪类选择器

在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>CSS--网页的美容师</title>
		<style>
			/* E:first-child */
			ul :first-child {
     
				background-color: pink;
			}
			/* E:last-child */
			ul li:last-child {
     
				background-color: blue;
			}
			/* E:nth-child(n) */
			ul li:nth-child(2) {
     
				background-color: antiquewhite;
			}
			/* n为关键字 所有偶数行变色 even等价于2n*/
			ul li:nth-child(even) {
     
				background-color: aqua;
			}
			/* n为关键字 所有奇数行变色 odd等价于2n+1*/
			ul li:nth-child(odd) {
     
				color:red;
			}
			/* n为公式 nth:child(n) 从0开始 每次加1 往后面计算 这里面必须是n 不能是其他的字母 */
			ol li:nth-child(n) {
     
				background-color: pink;
			}
			/* n+5 :从第5个开始(包括第5个)到最后 */
			ol li:nth-child(n+5) {
     
				color: yellow;
			}
		</style>
	</head>
	<body>
		<ul>
			<li>我是第1个孩子</li>
			<li>我是第2个孩子</li>
			<li>我是第3个孩子</li>
			<li>我是第4个孩子</li>
			<li>我是第5个孩子</li>
			<li>我是第6个孩子</li>
			<li>我是第7个孩子</li>
			<li>我是第8个孩子</li>
		</ul>
		<ol>
			<li>我是第1个孩子</li>
			<li>我是第2个孩子</li>
			<li>我是第3个孩子</li>
			<li>我是第4个孩子</li>
			<li>我是第5个孩子</li>
			<li>我是第6个孩子</li>
			<li>我是第7个孩子</li>
			<li>我是第8个孩子</li>
		</ol>
	</body>
</html>
  • nth-child和nth-of-type的区别
    在这里插入图片描述
  • nth-child和nth-of-type的小结
    在这里插入图片描述
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>CSS--网页的美容师</title>
		<style>
			/* nth-child 会把所有的盒子都排列序号 */
			section div:nth-child(1){
     
				background-color: green;
			}
			/* nth-of-type 会把指定类型的盒子排列序号 */
			section div:nth-of-type(1){
     
				background-color: red;
			}
		</style>
	</head>
	<body>
		<section>
			<p>光头强</p>
			<div>熊1</div>
			<div>熊2</div>
		</section>
	</body>
</html>
2.2.3.3 伪元素选择器

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>CSS--网页的美容师</title>
		<style>
			div {
     
				width: 200px;
				height: 200px;
				background-color: pink;
			}
			
			div::before {
     
				display: inline-block;
				/* content必须写 */
				content: '我和';
				width: 30px;
				height: 40px;
				background-color: purple;
			}
			div::after {
     
				content: "【表情】";
			}
		</style>
	</head>
	<body>
		<div>你好</div>
	</body>
</html>
2.2.3.3 伪元素选择器----清除浮动

在这里插入图片描述

2.2.3.3.1 清除浮动的方法①-----直接设置父元素高度

在这里插入图片描述
在这里插入图片描述

2.2.3.3.2 清除浮动的方法②-----额外标签法

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

2.2.3.3.3 清除浮动的方法③-----单伪元素清除法

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

2.2.3.3.4 清除浮动的方法④-----双伪元素清除法

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

2.2.3.3.5 清除浮动的方法⑤-----overflow

在这里插入图片描述
在这里插入图片描述

2.2.3.3.6 清除浮动-----BFC

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>CSS--网页的美容师</title>
		<style>
			.father {
     
				/* 设置overflow: hidden后,father盒子就成了BFC */
				overflow: hidden;
				width: 300px;
				height: 300px;
				background-color: pink;
			}
			.son {
     
				width: 100px;
				height: 100px;
				background-color: purple;
				margin-top: 100px;
			}
		</style>
	</head>
	<body>
		<div class="father">
			<div class="son"></div>
		</div>
	</body>
</html>
2.2.3.4 兄弟选择器
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>JavaScript</title>
	<style>
		/* 相邻兄弟选择器 */
		#p_1+p {
   
			color: #FFC0CB;
		}
		/* 兄弟选择器 所有兄弟都会被选中 */
		#p_1~p {
   
			color: aqua;
		}
	</style>
</head>

<body>
	<p id="p_1">11</p>
	<p>22</p>
	<p>33</p>
</body>

</html>
2.2.3.5 过渡

在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>CSS--网页的美容师</title>
		<style>
			.box {
     
				width: 200px;
				height: 200px;
				background-color: pink;
				/* transition: height 2s ease 1s; */
				/* all 所有属性 */
				transition: all 2s;
			}
			.box:hover {
     
				height: 300px;
			}
		</style>
	</head>
	<body>
		<div class="box"></div>
	</body>
</html>

3、CSS字体属性

  • CSS Fonts（字体）属性用于定义字体系列、大小、粗细、和文字样式（如斜体）

3.1 字体系列----font-family

  • 如果有多个字体系列，先从第一个开始读取，如果有，则显示该字体系列，没有，依次往下读取，有则显示该字体
    在这里插入图片描述

3.2 字体大小----font-size

在这里插入图片描述

3.3 字体粗细----font-weight

在这里插入图片描述

3.4 字体样式----font-style

在这里插入图片描述

3.5 字体复合属性

在这里插入图片描述

3.6 字体属性总结

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>CSS--网页的美容师</title>
		<style>
			body {
     
				font-size: 16px;
			}
			/* 标题标签比较特殊,需要单独指定文字大小 */
			h2 {
     
				font-size: 18px;
				font-weight: 400;
			}
			div {
     
				font-family: "微软雅黑";
				
			}
			/* 多个字体系列,依次读取,有则显示该字体 */
			span {
     
				font-family: Arial, "microsoft yahei","微软雅黑";
			}
			
			.bold {
     
				/* 后面不需要加单位 变粗：bold或700 正常：normal或400*/
				font-weight: 700;
			}
			em {
     
				/* 文字样式 */
				font-style: normal;
			}
			.div {
     
				/* font-style: italic;
				font-weight: 700;
				font-size: 16px;
				font-family: 'Microsoft YAHEI'; */
				/* 复合属性:简写的方式 */
				/* font: font-style font-weight font-size/line-height font-family */
				font: italic 700 16px 'Microsoft yahei';
			}
		</style>
	</head>
	<body>
		<h2>pink的秘密</h2>
		<div>我的</div>
		<em>我的</em>
		<span>我的</span>
		<ul>
			<li class="bold">我的</li>
		</ul>
		<div class="div">三生三世十里桃花，一心一意百行代码</div>
	</body>
</html>

4、CSS文本属性

  • CSS Text（文本）属性可定义文本的外观，比如文本的颜色、对齐文本、装饰文本、文本缩进、行间距等

4.1 文本颜色----color

在这里插入图片描述

4.2 对齐文本----text-align

在这里插入图片描述

4.3 装饰文本----text-decoration

在这里插入图片描述

4.4 文本缩进----text-indent

在这里插入图片描述

4.5 行间距----line-height

在这里插入图片描述

4.5.1 单行文字垂直居中

  • 文字的行高等于盒子的高度

4.5.2 单行文字垂直居中的原理

在这里插入图片描述

在这里插入图片描述

4.6 文本属性总结

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>CSS--网页的美容师</title>
		<style>
			h1 {
     
				/* 本质是让h1盒子里面的文字水平居中对齐 */
				text-align: center;
			}
			div {
     
				/* 下划线 */
				text-decoration: underline;
				/* 删除线 */
				text-decoration: line-through;
				/* 上划线 */
				text-decoration: overline;
			}
			a {
     
				/* 取消a默认的下划线 */
				text-decoration: none;
				color: black;
			}
			p {
     
				/* text-indent: 20px; */
				/* 没有指定文字大小,默认大小为16px 1em=16px */
				text-indent: 2em;
				line-height: 25px;
			}
			#cn {
     
				/* 没有给定文字大小,默认大小为16px */
				line-height: 26px;
				text-decoration: none;
			}
		</style>
	</head>
	<body>
		<h1>居中对齐的标题</h1>
		<div>粉红色的回忆</div>
		<a href="#">粉红色的回忆</a>
		<p>加客服解答卡缴费金额结</p>
		<p>加客服解答卡缴费金额结</p>
		<p>加客服解答卡缴费金额结</p>
		<div id="cn">中国人</div>
	</body>
</html>

5、CSS元素显示模式

在这里插入图片描述

5.1 块元素

在这里插入图片描述

5.2 行内元素

在这里插入图片描述

5.3 行内块元素

在这里插入图片描述

5.4 元素显示模式总结

在这里插入图片描述

5.5 元素显示模式转换

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>CSS--网页的美容师</title>
		<style>
			a {
     
				/* 行内元素转换为块元素 */
				display: block;
				width: 230px;
				height: 40px;
				background-color: #535759;
				font-size: 14px;
				/* 去掉下划线 */
				text-decoration: none;
				text-indent: 2em;
				/* 文字的行高等于盒子高度,实现文字居中显示 */
				line-height: 40px;
			}
			a:hover {
     
				background-color: #ff6f00;
			}
		</style>
	</head>
	<body>
		<a href="#">AA11</a>
		<a href="#">AA12</a>
		<a href="#">AA13</a>
		<a href="#">AA14</a>
		<a href="#">AA15</a>
		<a href="#">AA16</a>
		<a href="#">AA17</a>
		<a href="#">AA18</a>
	</body>
</html>

6、CSS背景

6.1 背景颜色

在这里插入图片描述

6.2 背景图片

在这里插入图片描述

6.3 背景平铺

在这里插入图片描述

  • 注意：背景图片会压在背景颜色上面

6.4 背景图片位置

在这里插入图片描述

6.4.1 参数是方位名词

在这里插入图片描述

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>CSS--网页的美容师</title>
    <style>
        div {
     
            width: 300px;
            height: 300px;
            /* 背景图片 */
            background-image: url(./images/logo.png);
            /* 背景平铺 */
            background-repeat: no-repeat;
            /* 背景颜色 */
            background-color: pink;
            /* 方位名词：right center 和 center right 效果是一样的 */
            /* background-position: center top; */
            /* 水平一定是靠右对齐 第二个参数省略 y轴是垂直居中显示的 */
            background-position: right;
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

6.4.2 参数是精确单位

在这里插入图片描述

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>CSS--网页的美容师</title>
    <style>
        div {
     
            width: 300px;
            height: 300px;
            background-color: pink;
            background-image: url(./images/logo.png);
            background-repeat: no-repeat;
            /* x:20px y:50px */
            /* background-position: 20px 50px; */
            /* x:20px y:默认为居中 */
            background-position: 20px;
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

6.4.3 参数是混合单位

在这里插入图片描述

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>CSS--网页的美容师</title>
    <style>
        div {
     
            width: 300px;
            height: 300px;
            background-color: pink;
            background-image: url(./images/logo.png);
            background-repeat: no-repeat;
            /* x:20px y:50px */
            /* background-position: 20px 50px; */
            /* x:20px y:默认为居中  等价于 x:20px y:center*/
            /* background-position: 20px; */
            /* x:center y:20px */
            background-position: center 20px;
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

6.5 背景图像固定（背景附着）

在这里插入图片描述

6.6 背景属性复合写法

在这里插入图片描述

body {
   
    /* background-image: url(./images/王者荣耀.jpg);
    background-repeat: no-repeat;
    background-position: center top; */
    /* 背景图像固定 */
    /* background-attachment: fixed;  */
    /* 背景属性复合写法 */
    background: #000 url(./images/王者荣耀.jpg) no-repeat fixed center top;
    color: #fff;
    font-size: 20px;
}

6.7 背景色半透明

在这里插入图片描述

  • opacity: 调整透明度的属性（0~1）

6.8 背景总结

在这里插入图片描述

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>CSS--网页的美容师</title>
    <style>
        .nav a {
     
            display: inline-block;
            width: 120px;
            height: 58px;
            background-color: pink;
            /* 文字水平居中 */
            text-align: center;
            /* 文字垂直居中 */
            line-height: 48px;
            color: #fff;
            text-decoration: none;
        }
        
        .nav .bg1 {
     
            background: url(./images/1.jpeg) no-repeat; 
        }
        /*鼠标经过谁谁变色，注意标签的选择范围*/
        /* 鼠标经过bg1时替换背景图片就行，所以用属性background-image实现即可 */
        .nav .bg1:hover {
     
            background-image: url(./images/11.jpeg);
        }
    </style>
</head>

<body>
    <div class="nav">
        <a href="#" class="bg1">五彩导航</a>
    </div>
</body>

6.9 图片模糊处理

在这里插入图片描述

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>CSS--网页的美容师</title>
    <style>
        img {
     
            /* blur是一个函数 小括号里面的数值越大 图片越模糊 注意数值要加px但闻 */
            filter: blur(15px);
        }
        /* 鼠标经过 图片不模糊 */
        
        img:hover {
     
            filter: blur(0);
        }
    </style>
</head>

<body>
    <img src="./images/1.jpeg" alt="">
</body>

</html>

7、CSS三大特性

7.1 层叠性

在这里插入图片描述

7.2 继承性

在这里插入图片描述

  • 行高的继承性
    在这里插入图片描述
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>CSS--网页的美容师</title>
    <style>
        body {
     
            color: pink;
            /* font: 12px/24px "Microsoft yahei"; */
            font: 12px/1.5 "Microsoft Yahei";
        }
        
        div {
     
            /* 子元素继承父元素body的行高1.5 */
            /* 这个1.5就是当前元素文字大小font-size的1.5倍，所以当前div的行高为14*1.5 = 21px*/
            font-size: 14px;
        }
        
        p {
     
            /* p元素的行高为 16*1.5 = 24px */
            font-size: 16px;
        }
        /* li没有指定文字大小，就会继承父类的行高：12*1.5 = 18px */
        li {
     
            color: red;
        }
    </style>
</head>

<body>
    <div>粉红的回忆</div>
    <p>你好啊</p>
    <ul>
        <li>哈哈</li>
    </ul>
</body>

</html>

7.3 优先级

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

  • 优先级注意点
    在这里插入图片描述
  • CSS权重的叠加
    1）复合选择器的元素标签会叠加
    2）权重叠加不会存在进位的问题
    在这里插入图片描述

8、CSS盒子模型

8.1 网页布局的本质

在这里插入图片描述

8.2 盒子模型（Box Model）组成

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

8.2.1 边框（border）

在这里插入图片描述

  • border-style常用的属性值：solid(实线)、dashed(虚线)、 dotted(点线)
8.2.1.1 边框----符合写法

在这里插入图片描述

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>CSS--网页的美容师</title>
    <style>
        div {
     
            width: 200px;
            height: 200px;
            /* border-top: 1px solid red;
            border-bottom: 1px solid blue;
            border-left: 1px solid blue;
            border-right: 1px solid blue; */
            border: 1px solid blue;
            /* 层叠性 */
            border-top: 1px solid red;
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>
8.2.1.2 细线边框（border-collapse）

在这里插入图片描述

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>CSS--网页的美容师</title>
    <style>
        /* 结构与样式相分离 */
        
        table {
     
            width: 500px;
            height: 249px;
        }
        
        th {
     
            height: 35px;
        }
        
        table,
        td,
        th {
     
            border: 1px solid pink;
            /* 合并相邻的边框 */
            border-collapse: collapse;
            font-size: 14px;
            text-align: center;
        }
    </style>
</head>

<body>
    <table>
        <thead>
            <tr>
                <th>排名</th>
                <th>关键词</th>
                <th>趋势</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>AA</td>
                <td>上升</td>
            </tr>
            <tr>
                <td>2</td>
                <td>BB</td>
                <td>稳定</td>
            </tr>
            <tr>
                <td>3</td>
                <td>CC</td>
                <td>下降</td>
            </tr>
        </tbody>
    </table>
</body>

</html>
8.2.1.3 边框会影响盒子大小

在这里插入图片描述

8.2.2 内边距（padding）

在这里插入图片描述

8.2.2.1 内边距复合写法

在这里插入图片描述

8.2.2.2 内边距会影响盒子大小

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

8.2.2.3 内边距不会影响盒子大小（特殊情况）
  • 盒子本身没有指定width/height属性，此时padding不会撑开盒子大小
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>CSS--网页的美容师</title>
    <style>
        h1 {
     
            /* 一旦给定了宽、高，都会影响盒子的大小 */
            /* width: 100%; */
            height: 200px;
            background-color: pink;
            /* 没有指定宽度，不会影响盒子的宽度，但会影响高度，在高度上会各增加30px */
            padding: 30px;
        }
        div {
     
            width: 300px;
            height: 100px;
            background-color: purple;
        }

        div p {
     
            /* 只要子盒子没有给定高度和宽度，即使父盒子有宽度和高度，也不会影响子盒子的大小 */
            padding: 30px;
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <h1></h1>
    <div>
        <p></p>
    </div>
</body>

</html>

8.2.3 外边距（margin）

在这里插入图片描述

8.2.3.1 块级盒子水平居中

在这里插入图片描述

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>CSS--网页的美容师</title>
    <style>
        .header {
     
            width: 900px;
            height: 200px;
            background-color: pink;
            margin: 0 auto;
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="header">
        <!-- span是行内元素，不会随父盒子居中对齐，需要给父盒子设置text-align:center,才能实现水平居中对齐 -->
        <span>文字</span>
    </div>

    <div>
        <!-- img是行内块元素,给父盒子设置text-align:center,也能实现水平居中 -->
        <img src="images/1.jpeg" alt="">
    </div>
</body>

</html>
8.2.3.2 相邻块元素垂直外边距的合并

在这里插入图片描述

8.2.3.3 嵌套块元素垂直外边距的塌陷

在这里插入图片描述

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>CSS--网页的美容师</title>
    <style>
        .father {
     
            width: 400px;
            height: 400px;
            background-color: purple;
            margin-top: 50px;
            /* 1、给父盒子添加边框，解决父子盒子塌陷问题 */
            /* border: 1px solid transparent; */
            /* 2、给父盒子添加内边距，解决父子盒子塌陷问题 */
            /* padding: 1px; */
            /* 3、给父盒子添加overflow: hidden，解决父子盒子塌陷问题 */
            overflow: hidden;
        }
        
        .son {
     
            width: 200px;
            height: 200px;
            background-color:
最低0.47元/天 解锁文章
Iliuhu
关注
  • 3
    点赞
  • 踩
  • 16
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS-初识CSS3（非常详细）
南劲竹的博客
09-05 1121
CSS的概念    Cascading Style Sheet  级联样式表    表现HTML或XHTML文件样式的计算机语言           包括对字体、颜色、边距、高度、宽度、背景图片、网页定位等设定 CSS的发展史       1996年CSS1.0  --&gt;   1998年5月CSS2.0   --&gt;    2004年CSS2.1    --&gt;   201...
CSS3 入门教程
Ifeng_iPhone的博客
09-28 917
css就是样式表，用来给html添加样式的html本身是素颜的，css就是化妆师，让我们html好看点。
CSS3使用教程
index0000001的博客
06-29 531
圆角边框的属性 css3边界图片 2.背景 3.渐变 线性渐变 径向渐变 4.文本效果 5.二D转换 6.过渡 7.动画 8.多列 9.弹性盒子 10.网络布局
CSS&CSS3基础教程
qq_47848696的博客
10-13 612
CSS、CSS3全套讲解
狂神说——CSS3最新教程快速入门通俗易懂
淡水瑜的博客
05-24 854
参考资料 文章目录1.CSS的简单介绍2.什么是CSS和发展史3.CSS的快速入门及优势4.四种css导入方式5.三种基本选择器（重要）6.层次选择器7.结构伪类选择器8.属性选择器（常用重要）9.CSS的作用及字体样式10.文本样式11.文本阴影和超链接伪类12.列表样式练习13.背景图像应用及渐变14.盒子模型及边框使用（重要）15.内外边距及div居中16.圆角边框及阴影和经验分享17.display（重要）和浮动18.overflow及父级边框塌陷问题19. 相对定位的使用及练习20.方块定位练习讲
CSS3详解
clover_page的博客
04-12 4493
CSS3详解 一、CSS3 1-1、基本概念 层叠样式表(Cascading Style Sheets)是一种用来表现HTML或XML等文件样式的计算机语言 CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。 CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力 1-2、发展历程 CSS1.0：网页基本样式 CSS2.0：DIV（块）+ CSS，提出HTML与CSS结构分离的思想，网页变得简单，
HTML5+CSS3网站设计基础教程_动手实践源代码
11-09
在"HTML5+CSS3网站设计基础教程_动手实践源代码"这个资源中，你将学习到以下关键知识点： 1. **HTML5新特性**：包括新的结构元素（如、、、、和），用于更好地组织网页内容；离线存储（AppCache）以提高离线访问...
HTML5+CSS3网站设计基础教程 源代码.7z
11-14
这个"HTML5+CSS3网站设计基础教程 源代码.7z"压缩包包含了学习这两项技术的全套源代码，对于初学者来说是一份极其宝贵的资源。 HTML5是超文本标记语言的第五个版本，它在HTML4的基础上做了大量改进和扩展，以适应...
《HTML5+CSS3网页设计案例教程》
06-17
HTML5是超文本标记语言的第五次重大修订，而CSS3则是层叠样式表的最新版本，它们一起为创建功能丰富、视觉效果出众的网页提供了强大工具。 HTML5是现代网页开发的基础，它的主要更新和改进包括： 1. 新增结构化...
HTML5+CSS3最新完整版教程
11-04
最新HTML5+CSS3，完整版经典教程。 PDF高清完整，带书签，可复制粘贴。 配套源代码，完整测试。
HTML5与CSS3基础教程（第八版）
01-18
万维网成功的根基，是一种基于文本的标记语言──HTML，它简单易学，并且能被任何带有基本Web浏览器的设备识读。每个网页都至少用一点儿HTML，否则也就不能称为网页了。 随着学习的深入细致，你会了解到，HTML用于定义内容的含义，而CSS用于定义内容和网页如何显示。HTML页面和CSS文件（样式表，stylesheet）都是文本文件，因此很容易编辑。在下面的“如何使用本书”一节，你将看到一些HTML和CSS的代码片段
(精品)html+css+javascript教程课件p.ppt
11-13
HTML是Web开发的基础，全称为超文本标记语言（Hyper Text Markup Language）。它的主要作用是在Web上传递信息，通过浏览器解析并展示内容，包括文字、图片、音频、视频以及链接等。HTML的历史可以追溯到HTML1.0，...
CSS3+HTML5+从入门到精通-PDF中文教程
08-22
本书将详细讲解HTML5的新标签、属性和API，以及CSS3的布局、选择器、动画和过渡等新特性，并通过实例教学，帮助读者掌握实际应用。同时，它也会覆盖一些实践中的最佳实践和技巧，比如如何优化网页性能，如何编写可...
CSS详细教程
m0_58851911的博客
01-17 7644
一.css3概述 1.什么是css cascading style sheets 层叠 样式 表 2.作用 html：搭建网页的结构，承载页面的数据 css:美化页面，修饰标签(亚洲4大邪术) 3.css和html属性的使用原则 html的属性只对当前标签有效，没有可重用性，导致没有可维护性 css 具备一定的代码重用性，提高了可维护性 但是css没有把重用性做到极致。使用scss可以做到极致 ...
CSS3手册
狡辉两门的博客
04-18 849
布局 浮动：做文字环绕效果 弹性盒：单行或单列布局 网格：多行多列布局 弹性盒 详细文档见MDN 弹性盒小游戏 生成弹性容器和弹性项目 **默认情况下，**弹性项目沿着主轴依次排列，侧轴拉伸 更改方向 通过flex-direction可更改主轴方向 主轴排列 通过justify-content属性，可以影响主轴的排列方式 侧轴排列 通过align-items属性，可以影响侧轴的排列方式 弹性项目伸缩 所谓伸缩，是指在主轴方向上，当弹性容器有额外空间时，是否需要拉伸，当空间不足时，是否需要压缩
【CSS3教程】CSS3基础&常用技巧&实例集合
weixin_34049032的博客
06-07 248
为什么80%的码农都做不了架构师？>>> ...
CSS3 知识点总结：详解篇
m0_57587753的博客
01-20 2256
CSS3 是 CSS2 的升级版本，它在 CSS2 的基础上，新增了很多强大的新功能，从而解决一些实际面临的问题。 CSS3 的新特性如下： ● 新增了更加实用的选择器，例如：动态伪类选择器、目标伪类选择器、伪元素选择器等等。 ● 新增了更好的视觉效果，例如：圆角、阴影、渐变等。 ● 新增了丰富的背景效果，例如：支持多个背景图片，同时新增了若干个背景相关的属性。 ● 新增了全新的布局方案 —— 弹性盒子。 ● 新增了 Web 字体，可以显示用户电脑上没有安装的字体。 ……
【Web开发】CSS教学(超详细,满满的干货)
最新发布
smile_sundays的博客
03-17 3362
CSS(Cascading Style Sheet)，层叠样式表,用于控制页面的样式.CSS能够对网页中元素位置的排版进行像素级精确控制,实现美化页面的效果.能够做到页面的样式和结构分离.CSS可以理解为化妆术.对页面的展进行"化妆"CSS前->CSS修饰后。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值