一文搞定CSS（附思维导图下载）_css思维导图文件下载-CSDN博客

本文链接：https://blog.csdn.net/happygjcd/article/details/103931020

思维导图

链接：https://pan.baidu.com/s/10q4XQIc5VH2uhreujVf3Kg
提取码：djjq

知识点概要

选择器
元素选择器 标签名{}
class选择器 标签名.classname{}
id   选择器 #idname{}
层次选择器
后代选择器div p{}
子代选择器div>p{}
相邻选择器a+b{}
兄弟选择器a~b{}
群组选择器p,span,li{}
全局选择器*{}
选择器优先级
id选择器 > class 选择器 > 元素选择器
链接样式
<a href=”” target=”_blank(打开空白网页)/_self(在原有网页上打开)”title=”鼠标移动在上显示的内容”></a>
a:link{} 未访问过的链接
a:visited{} 访问过的链接
a:hover{} 鼠标移动上时的变化
a:active{} 鼠标点击的一瞬间变化
链接属性text-decoration=none(无下划线)/underline(有下划线)/overline(上划线)
/line-through/blink/none

文本属性
{
字体: font-family=微软雅黑/宋体/新宋体/隶书
粗细font-weight:bold(粗)/normal(细)/100(自定义);
大小font-size:20px/20%;
风格font-style:italic/normal;
小型大写字母:font-variant=small-caps;
文本对齐方式: text-align（只用于块级元素）:left/center/right;
文本首行缩进 :text-indent:2em			
文本线text-decoration（可用于所有元素）:underline(有下划线)/none(无下划线)
/overline/line-through/blink(闪烁)/
字符间距letter-spacing:1em;
词间距word-spacing:1em;
行高line-height:1px/1em/100%;
字母转换text-transfrom:capitalize/uppercase/
lowercase/none;
元素内容的垂直属性:vertical-align;
}


div盒子属性
div{
/*宽度和高度只有块级元素，和<img>等替换元素可以设置，
行内样式如<span>不可设置*/
盒子宽度width:1px/%/auto
盒子高度height:1px;
/*以下4个属性有兼容性问题,IE浏览器不显示*/
盒子最大宽度max-width:1px;
盒子最小宽度min-width:1px
盒子最大高度max-height:1px;
盒子最小高度min-height:1px
/*如果同时设置max-height和min-height，
且max-height的值小于min-height的值，
那么显示的是max-height的值*/
盒子背景
简写background:blue no-repeat 1px center fix(不分顺序)
背景色background-color:blue;默认值是transparent(设置透明色）
背景图片background-img:url(“图片地址”)
/*背景图片默认会在水平和垂直方向上重复，
并且还会显示在左上方*/
平埔background-repeat:no-repeat/repeat-x/repeat-y;
背景大小background-size:1px;
背景位置background-position=1%;
盒子边框
/*使用border简写属性的顺序一般是宽度，样式，颜色*/
border:1px solid(实线)/dashed(点线)/double(双线)/dotted(点线) red; 设置简易边框
border-width:1px; 边框宽度
border-style:solid(实线)/dashed(点线)/double(双线)/dotted(点线); 边框线
border-color:red; 边框颜色
border-top:1px solid(实线)/dashed(点线)/double(双线)/dotted(点线) red; 上边框
border-bottom:1px solid(实线)/dashed(点线)/double(双线)/dotted(点线) red; 下边框
border-left:1px solid(实线)/dashed(点线)/double(双线)/dotted(点线) red; 左边框
border-right:1px solid(实线)/dashed(点线)/double(双线)/dotted(点线) red; 右边框

盒子模型

内边距
padding:值一，值二，值三，值四（分别为上右下左）
padding:值一（四个方向都为值一）
padding:值一，值二，值三（上为值一，左右为值二，下为值三）
padding:值一，值二，（上下为值一，左右为值二）
padding-top:
padding-bottom:
padding-left:
padding-right:
外边距（设置元素与元素之间的距离）
margin设置为auto会设置为居中显示
margin:简写方式和padding一样，但是他可以设置为负数
margin-top:
margin-bottom:
margin-left:
margin-right:
padding内边距会撑大盒子
margin 外边距会越过外层盒子

盒子定位（多看视频多练习）
z-index设置层叠属性
.blockL:nth-child(n)
position:relative(相对定位)/absolute(绝对定位)/fixed(固定定位);
相对定位:相对于自身位置
绝对定位:相对于浏览器位置
固定定位:固定不动
盒子浮动（重难点）
float:left(左浮动)/right(右浮动);盒子往上飘 下方的元素上移
清除浮动
overfloat:visible/hidden/scroll/auto
visible是默认的值,hidden会直接把溢出的元素裁剪，
scroll和auto都会显示滚动条，auto在内容溢出时才显示,scroll不溢出也会显示，但是滚动条被禁用
clear:both,None,left,right
内联(行内)元素和块级元素
内联元素无法设置边距宽高
块级元素会自动霸占一行位置
内联元素转块级元素display:block;
块级元素转内联元素display:inline;
隐藏且隐藏元素不会占用浏览器空间:display:none
隐藏且隐藏元素会占用空间:visibility:hidden
css列表的设置
list-style-type:none,disc(默认),circle,square.
 decimal(标记是数字),upper-roman,lower-roman,low-alpha
list-style-image:url(name)
list-style-position:outsize/*是默认值，第二行以文本对齐*/
inside/*第二行以图标对齐*/
/*css列表简写*/
list:url(urlname) square outside
/*书写不分顺序，但是url会覆盖square*/

一.CSS选择的艺术

CSS基础语法

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        p{
            font-size: 20px;
            color: red;}
        h2,h3{
            color: blue;
             font-family: 隶书}
             /*CSS注释*/
             /*font-family是设置字体样式*/
    </style>
</head>
<body>
    <h2>我是h2，我的字体是蓝色</h2>
    <div style="color: red;font-size: 20px">我是div里面的文字，我的大小是20px，颜色是红色</div>
    <h3>我是h3，我的字体是蓝色</h3>
    <p>我是p的文字，我的大小是20px，颜色是红色</p>
</body>
</html>

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

<!--内部样式表-->
<style type="text/css">
/*在这里加上HTML注释的原因是防止浏览器版本太低，
不识别style标签，使得下面的CSS源代码显示出去*/
<!--
	p{color:"red"}
	-->
</style>
<!--行内样式-->
<p style="color:'red'">内容</p>
<!--link外部样式，必须放在head标签里面，
不能放在style标签里面-->
<link rel="stylesheet" type="text/css" href="css.css">
<!--@import导入式，必须放在style标签里面，一般放在style的最前面-->
<!--第一种写法-->
<style type="text/css">
        @import url(css.css)
</style>
<!--第二种写法-->
<style type="text/css">
        @import 'css.css'
</style>

CSS选择器

类选择器

先写出HTML里面的东西
在设置类选择器的属性
设置标签.类选择器的属性
同一个元素可以使用多个类选择器，这些选择器之间使用空格隔开

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		.red{
			color: red;
		}
		/*设置下划线*/
		div.red{
			text-decoration: underline;
		}
	</style>
</head>
<body>
	<div class="red">我是div1里面的文字</div>
	<div>我是div2里面的文字</div>
	<p class="red">我是p里面的文字</p>
</body>
</html>

在这里插入图片描述

id选择器

id选择器不同于类选择器，他就像身份证一样（id），每个标签只能设置一个id选择器，而且id选择器不能多次使用。
id选择器用#来定义，他的使用和类选择器的语法基本相同，这里不再累述

#red{color:'red'}

<p id='red'>内容</p>

群组选择器

.special,p.special,#red,h1,h2,h3{color:'red';}

全局选择器

*{font-size:'50px';}

后代选择器

后代选择器可以多层
后代选择器使用空格分开

p h1 em{font-size:'30px';}/*p标签中的h1标签中的em标签*/
#p1 em{font-size:'20;px';}/*id为p1的em标签*/
.p1 h1 em{color:'red';}/*p1类选择器的h1中的em*/

伪类

使用格式：选择器（可多个）：link{color:red;}
例如：
p h1:link{color:red;}
p.red:link{color:red;}
伪类选择器：:link(未访问的链接），:visited(已访问的链接)，:hover(鼠标悬停状态)，:active(激活状态,点击鼠标后松开鼠标前)
设置顺序时：link>visited>hover>active

实践：

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		p a:link{color: blue;}
		p a:visited{color: red}
		p a:hover{color: gray}
		p a:active{color: yellow}
	</style>
</head>
<body>
	<p><a href="http://www.baidu.com" target="_blank">打开网页</a></p>
</body>
</html>

CSS继承与层叠样式表

CSS继承：在CSS里面给父元素设置样式，子元素可以继承部分属性，一般font-size,color这些是可以继承的
层叠样式表：在CSS里面可以对同一个标签设置多个属性，若这些属性没有冲突，那么会叠加，有冲突，就使用就近原则。

CSS选择器优先级

!important优先级最高，使用方法<div color:red !important>
权值相同：使用就近原则
权值不同：根据权值判断，哪个权值加起来高，优先级就高
CSS方法优先级：行内样式>内部样式>外部样式
样式表优先级：行内选择器（权值为1000）> id选择器（权值为100） > 类选择器和伪类（权值为10） > 标签选择器（权值为1）> 通配符选择器（权值为0）
在同类选择器里面，后定义的会生效（就近原则）
统计不同选择器的个数，把他的选择器的个数乘上相应的权值就是总权值。

CSS命名规范

可以使用英文，数字，以及’-'和‘_’命名
'-‘和’_'和数字不能放在最前头
可以使用连字符命名法，驼峰命名法等等，总之命令要有意义。

二、CSS文本样式

font-family可以设置文本字体样式
font-size设置字体大小
font-color设置字体颜色
font-weight设置文字粗细
font-style设置文字大小

font-family字体集常见有Sans Serif和Serif，Serif字体的边缘有修饰，而Sans Serif没有
font-family里面多种字体之间使用逗号分隔，如果是英文里面有空格或者是中文要使用双引号括起来，不用单引号
当引号嵌套时，外部的引号使用双引号，内部的引号使用单引号

实操

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		h1{font-family: "隶书",serif}
	</style>
<body>
	<h1>标题的字体属性是宋体，备选字体集为serif</h1>
	<!--如果系统不支持隶书就用宋体，否则使用浏览器默认字体-->
	<p style="font-family: '隶书','宋体'">段落的字体</p>
</body>
</html>

在这里插入图片描述

font-size里面有绝对大小和相对大小，绝对大小里面有常见的长度单位，比较少用，用到比较多的是相对大小px,%,px像素是会随着电脑的分辨率改变而改变的

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>font-size</title>
	<style type="text/css">
		h3{font-family: "隶书";
			font-size: 200%}
		.em{font-family: "微软雅黑";
			font-size:150%;}
		a{font-size: 150%}
	</style>
</head>
<body>
	<div>
		<h3>属性为隶书，大小是父元素的2倍</h3>
		<p class="em">
			<a href="#">链接标签中的字体是父元素的1.5倍</a>
			，段落标签中的字体是其父元素的1.5倍
		</p>
	</div>
</body>
</html>

在这里插入图片描述

font-color定义字体颜色，一共有三种方法，颜色/rgb格式/16进制（以#开头）
font-wight定义文字粗细
font-size:normal/blod/bloder/lighter/100~900,默认值是normal,400等同于normal，700等同于bold
font-style:normal/italic(斜体)
font-variant:normal/small-caps字体变形
简写font属性，这里需要看视频2-16

文本水平对齐方式(text-align属性)

text-align:left/right/center/justify
注意：

该元素只对<p>标签等块级元素有效，对<img>无效，需要这样使用<p text-align:right><img src="路径"/></p>
text-align可以继承，比如我在body标签里面设置了居中，那么他下面的标签也会居中

行高设置(line-height)

可以使用px,也可以使用em和%
行高继承时继承的是最后的计算值，不是em的值
练习

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<style type="text/css">
		p{font-family: "隶书";
		  text-indent: 2em;}
		.p1{color: orange;
		    line-height: 20px;}
		.p2{color: green;
		    line-height: 1.5em}
		.p3{color: red;
		    line-height: 200%}
	</style>
	<title></title>
</head>
<body>
	<div>
		<h2>1.《三体》</h2>
		<p class="p1">《三体》是优秀的科幻作品，由《三体》、《三体Ⅱ·黑暗森林》、《三体Ⅲ·死神永生》组成，第一部于2006年5月起在《科幻世界》杂志上连载，第二部于2008年5月首次出版，第三部则于2010年11月出版</p>
	</div>
	<div>
		<h2>2.《盗墓笔记》</h2>
		<p class="p2">
			盗墓笔记是南派三叔的作品，盗墓笔记捌：大结局（上、下）》于2011年12月19日上市，至此《盗墓笔记》系列完结，共出版实体书九本。《盗墓笔记》系列是南派三叔的代表作，其堪称近年来中国出版界的经典之作，获得百万读者狂热追捧。南派三叔也凭此作名满天下，跻身中国超级畅销书作家行列。
		</p>
	</div>
	<div>
		<h2>《福尔摩斯》</h2>
		<p class="p3">
			本套书分为上中下三卷，夏洛克·福尔摩斯（Sherlock·Holmes）是由19世纪末的英国侦探小说家阿瑟·柯南·道尔所塑造的一个才华横溢的虚构侦探。福尔摩斯自称是名刑侦顾问，也就是说当其他警探或私家侦探遇到困难时常向他求救。福尔摩斯常能够足不出户就可以解决很多疑难问题，但大部分故事都集中讲述些比较困难、需福尔摩斯出门调查的案子
		</p>
	</div>
</body>
</html>

在这里插入图片描述
vertical-align设置元素内容的垂直方式

CSS文本样式综合练习

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>文本样式</title>
	<style type="text/css">
		div{color: red;
		    line-height: 2em;
		    text-indent: 2em;}
		span{color: green;
		 	 text-transform: uppercase;
		 	 word-spacing: 0.5em;
		 	 text-decoration: underline;}
	</style>
</head>
<body>
	<div>
		HTML是超文本标记语言，是<span>HyperText Markup Language</span>
		的缩写，是一种规范一种标准。通过标记语言来显示网页中的各个部分
	</div>
</body>
</html>

在这里插入图片描述

三.CSS盒子

CSS盒子属性

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>元素的宽度</title>
	<style type="text/css">
		p{background-color: yellow;height: 200px;}
		div{background-color: pink;
		    height: 600px;
		    width: 600px}
		.p1{width: 30%;
		    height: 30%;}
		.p2{max-width: 30%;
		    max-height: 30%;}
		.p3{min-height: 200px;
		    max-width: 300px}
	</style>
</head>
<body>
	<div>
		<p class="p1">第一个p标签是父元素宽，高的30%</p>
		<p class="p2">第二个p标签的最大宽度是父元素的30%，最大高度是父元素的30%</p>	
		<p class="p3">第三个p标签的最小宽度是200px，最大宽度是300px</p>
	</div>		
</body>
</html>

在这里插入图片描述

css的border属性

<!DOCTYPE html>
<html>
<head>
	<title>border属性</title>
	<style type="text/css">
		li{width: 200px;height: 50px;}
		.li1{border-top:2px red solid}
		.li2{border-right: 2px green dotted}
		.li3{border-bottom: 2px blue dashed}
		.li4{border-left: 3px purple double}
		.li5{border: 2px orange solid;}
	</style>
</head>
<body>
	<li class="li1">第一个li</li>
	<li class="li2">第二个li</li>	
	<li class="li3">第三个li</li>
	<li class="li4">第四个li</li>
	<li class="li5">第五个li</li>		
</body>
</html>

盒子模型计算

在这里插入图片描述

浮动

浮动元素会脱离网页文档，与其他元素发生重叠，但是不会与文字内容发生重叠，

overfloat

通过overfloat可以设置溢出时如何处理,hidden是内容直接裁剪掉（很暴力），,visible(默认),溢出就溢出呗，我什么也不干。scroll：内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容

<!DOCTYPE html>
<html>
<head>
	<title>float</title>
	<style type="text/css">
		.div1{
			width: 100px;
			height: 100px;
			background: red;
			float: left;
		}
		.div2{
			width: 300px;
			height: 300px;
			background: blue;
			float: right;
		}
		.div3{
			width: 100px;
			height: 300px;
			background: green;
			float: inherit;
		}
	</style>
</head>
<body>
	<div class="div1"></div>
	<div class="div2">
	<div class="div3"></div>
	</div>
</body>
</html>

清除浮动

clear:all/right/left/none
clear 属性。clear 属性的值可以是 left、right、both 或 none，它表示框的哪些边不应该挨着浮动框。
https://www.w3school.com.cn/css/css_positioning_floating.asp

CSS定位position属性

position:relative/absolute（用的最多）/static/fixed
可以使用top,right,left.bottom,z-index进行定位
static是自然定位模型,
relative是相对定位模型，
相对定位的元素不会离开常规流
absolute是绝对定位模型.
fixed是固定定位模型,不会随着滚动条的滚动而滚动
sticky是磁铁模型

在工作中通常子元素设置为absolute，而父元素设置为relative，ltrl如果都为0，它将定位到祖先元素的各边，衍生出一个居中妙计
绝对定位于相对定位的区别：相对定位是“相对于”元素在文档中的初始位置，而绝对定位是“相对于”最近的已定位祖先元素，如果不存在已定位的祖先元素，那么“相对于”最初的包含块。

如下

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Document</title>
	<style type="text/css">
		.per{
			width: 300px;
			height: 300px;
			background: red;
			margin-left: 200px;
			margin-top: 200px;
			position: relative;
		}

		.son{
			width: 100px;
			height: 100px;
			background: blue;
			position: absolute;
			left: 0;
			right: 0;
			bottom: 0;
			top:0;
			margin: auto;
		}
	</style>
</head>
<body>
	<div class="per">
		<div class="son"></div>
	</div>
</body>
</html>

显示如下
在这里插入图片描述

div居中妙计

.item{
            background-color: aquamarine;
            color: black;
            width: 300px;
            height: 80px;
            position: fixed;
            left: 50%;
            top: 50%;
            margin-top: -80px;
            margin-left: -150px;
        }