文章目录

css

基本概念

cascading style sheet 层叠级联样式表

css优势：

1.变现与结构相分离

2.网页结构表现统一，可以实现复用

3.样式十分丰富

4.建议使用独立于html的css文件

5.利用SEO，容易被搜索引擎

css导入的三种方法：

行内内部外部

优先级：就近原则

选择器

基本选择器

1.标签选择器会选择到页面上所有这个标签的元素

<head>
    <style type="text/css">
        h1{
    
    
            color: bisque;
        }
        p{
    
    
            font-size: 20px;
        }
	</style>
</head>	
<body>
    <h1>css学习</h1>
    <h1>css学习</h1>
    <p>看视频学习</p>
</body>

2.类选择器可以多个标签归类

<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .one{
    
    
            color: azure;
        }
        .two{
    
    
            font-size: 20px;
        }
    </style>
</head>
<body>
    <h1 class="one">标题1</h1>
    <h1 class="one">标题1</h1>
    <h1 class="two">标题1</h1>
    <h5 class="one">标题5</h5>
</body>

3.id 选择器 id必须保证唯一

<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        #o{
    
    
            color: aquamarine;
        }
        #t{
    
    
            color: bisque;
        }
        #h{
    
    
            color: coral;
        }
    </style>
</head>
<body>
    <h1 id="o">标题1</h1>
    <h1 id="t">标题1</h1>
    <h5 id="h">标题5</h5>
</body>

优先级：id选择器>class选择器>标签选择器不遵循就近原则

层次选择器

	<body>
		<p>p1</p>
		<p class="a">p2</p>
		<p>p3</p>
		<ul>
			<li>
				<p>p4</p>
			</li>
			<li>
				<p>p5</p>
			</li>
			<li>
				<p>p6</p>
			</li>
		</ul>
		<p>p7</p>
		<p>p8</p>
	</body>

后代选择器：在某个元素后面的所有元素

/*后代选择器*/
body p{
    
    
    background-color: #F0FFFF;
}

子选择器：一代元素

/*子选择器*/
body>p{
    
    
    background-color: blue;
}

相邻兄弟选择器：同级且相邻的一个（向下）元素

/*相邻兄弟选择器*/
.a + p{
    
    
    background-color: blueviolet;
}

通用选择器：同级的所有在后面的元素

/*通用选择器*/
.a ~ p{
    
    
    background-color: #FF7F50;
}

结构伪类选择器

伪类：条件

<head>
	<meta charset="UTF-8">
	<title></title>
	<style type="text/css">
		/*ul第一个子元素*/
		ul li:first-child{
    
    
			background-color: #0000FF;
		}
		/*ul最后一个子元素*/
		ul li:last-child{
    
    
			background-color: #0000FF;
		}
		/*p的父元素中的第一个且为p元素*/
		p:nth-child(1){
    
    
			background-color: #8A2BE2;
		}
		/*p的父元素中第一个类型是p的元素*/
		p:nth-of-type(1){
    
    
			background-color: aqua;
		}
	</style>
</head>
<body>
	<h1>h1</h1>
	<p>p1</p>
	<p>p2</p>
	<p>p3</p>
	<ul>
		<li>li1</li>
		<li>li2</li>
		<li>li3</li>
	</ul>
	<p>p7</p>
	<p>p8</p>
</body>

属性选择器

结构：元素[]{} =绝对等于 *=包含 ^=以其开头 $=以其结尾

<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.demo a{
    
    
				float: left;
				text-decoration: none;
				display: block;
				width: 50px;
				height: 50px;
				line-height: 50px;
				background-color: #8A2BE2;
				margin-right: 5px;
				border-radius: 10px;
				text-align: center;
			}
			.demo a[id]{
    
    
				background-color: aqua;
			}
			.demo a[id="first"]{
    
    
				background-color: #F0FFFF;
			}
			.demo a[class*="link"]{
    
    
				background-color: antiquewhite;
			}
			.demo a[href^="img"]{
    
    
				background-color: #7FFFD4;
			}
			.demo a[href$="doc"]{
    
    
				background-color: #FF7F50;
			}
		</style>
	</head>
	<body>
		<p class="demo">
			<a href="http://www.baidu.com" class="link item " id="first">1</a>
			<a href="123.html" class="link item active" target="_blank" title="test">2</a>
			<a href="img/1.jpg" class="link item">3</a>
			<a href="img/1.html"  class="link item">4</a>
			<a href="img/1.png"  class="link item">5</a>
			<a href="abc" class="link item">6</a>
			<a href="/a.pdf" class="link item">7</a>
			<a href="/abc.pdf" class="link item">8</a>
			<a href="abc.doc" class="link item">9</a>
			<a href="abcd.doc"class="link item " id="last">10</a>
		</p>
	</body>

页面美化

字体样式

font标签中可以按顺序设置如下属性：

font-style
font-variant
font-weight
font-size/line-height
font-family

<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			/*font-family  字体样式
			font-size  字体大小
			font-style  字体风格
			font-weight  字体粗细
			color 字体颜色*/
            
            
			p{
     
     
				font:oblique bolder  20px  arial "微软雅黑" ;
			}
			/*p{
				font-family: arial "楷体";
				font-size: 20px;
				font-style: oblique;
				font-weight: 900;
				color: #FF7F50;
			}*/
		</style>
	</head>
<body>
	<p>
		一 莫高窟大门外，有一条河，过河有一溜空地，高高低低建着几座僧人圆寂塔。塔呈圆形，状近葫芦，外敷白色。从几座坍弛的来看，塔心竖一木桩，四周以黄泥塑成，基座垒以青砖。历来住持莫高窟的僧侣都不富裕，从这里也可找见证明。夕阳西下，朔风凛冽，这个破落的塔群... 
	</p>
	<p>
		王掌柜，常四爷，秦二爷，宋二爷…… 六十年的老茶馆，终究没有能抵挡得住那股浊气弥漫的年代。 见证了是非转变的王掌柜，终究没有逃脱恶霸流氓的欺辱。 一心实业救国的秦二爷，终究穷困潦倒无所获。 问心无愧的常四爷，孤独终生无人送终。 宋二爷爱鸟如命，却终被浊气所污。 这些个见证了六十年时代的更变，从大清受洋... 
	</p>
	<p>
		Just because someone doesn't love you the way you want them to,doesn't mean they don't love you with all they have.
	</p>
</body>

文本样式

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			p{
     
     
				color: #FF7F50;
				/*缩进两个字*/
				text-indent: 2em;
			}
			.t1{
     
     
				/*颜色设置  rgb()和rgba()      a表示透明度0-1*/
				/*color:rgb(0,255,255);*/
				color:rgba(0,255,255,0.1);
				/*文本位置*/
				text-align: center;
			}
			.en{
     
     
				background-color: #7FFFD4;
				height: 60px;
				/*行高设置,且可设置上下居中(行高=height)*/
				line-height: 60px;
			}
			.c1{
     
     
				/*上划线*/
				text-decoration: overline;
			}
			.c2{
     
     
				/*中划线*/
				text-decoration: line-through;
			}
			.c3{
     
     
				/*下划线*/
				text-decoration: underline;
			}
			a{
     
     
				/*去掉下划线*/
				text-decoration: none;
			}
			img{
     
     
				width: 50px;
				height: 50px;
			}
			s1,img{
     
     
				/*图片文字垂直居中*/
				vertical-align: middle;
			};
		</style>
	</head>
	<body>
		<p class="t1">文本</p>
		<p>
			一 莫高窟大门外，有一条河，过河有一溜空地，高高低低建着几座僧人圆寂塔。塔呈圆形，状近葫芦，外敷白色。从几座坍弛的来看，塔心竖一木桩，四周以黄泥塑成，基座垒以青砖。历来住持莫高窟的僧侣都不富裕，从这里也可找见证明。夕阳西下，朔风凛冽，这个破落的塔群... 
		</p>
		<p>
			王掌柜，常四爷，秦二爷，宋二爷…… 六十年的老茶馆，终究没有能抵挡得住那股浊气弥漫的年代。 见证了是非转变的王掌柜，终究没有逃脱恶霸流氓的欺辱。 一心实业救国的秦二爷，终究穷困潦倒无所获。 问心无愧的常四爷，孤独终生无人送终。 宋二爷爱鸟如命，却终被浊气所污。 这些个见证了六十年时代的更变，从大清受洋... 
		</p>
		<p class="en">
			Just because someone doesn't love you the way you want them to,doesn't mean they don't love you with all they have.
		</p>
		<a href="#">123</a>
		<p class="c1">12345</p>
		<p class="c2">12345</p>
		<p class="c3">12345</p>
		<p>
			<img src="img/n1.jpg"/>
			<span id="s1">
				1234567
			</span>
		</p>
	</body>

超链接伪类

在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。

在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。

<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			/*未访问*/
			a:link{
     
     
				color:#000000;
			}
			/*鼠标点击*/
			a:visited{
     
     
				color: #8A2BE2;
			}
			/*鼠标悬浮*/
			a:hover{
     
     
				color: #FF7F50;
			}
			/*激活以后*/
			a:active{
     
     
				color: #00FFFF;
			}
		</style>
		
	</head>
	<body>
		<a href="http://www.baidu.com">点击一下</a>
	</body>

阴影

<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
            /*text-shadow:水平向右 垂直向下 阴影宽度 阴影颜色*/
			p{
     
     
				text-shadow: 5px 5px 5px red;
			}
		</style>
	</head>
	<body>
		<p>
			王掌柜，常四爷，秦二爷，宋二爷
		</p>
	</body>

列表图标

/*square正方形
circle 空心圆
decimal 数字
none 去掉
*/
ul li{
	list-style: none;
}

背景

background 简写属性在一个声明中设置所有的背景属性。

可以设置如下属性：

background-color
background-position
background-size
background-repeat
background-origin
background-clip
background-attachment
background-image

如果不设置其中的某个值，也不会出问题，比如 background:#ff0000 url(‘smiley.gif’); 也是允许的。

通常建议使用这个属性，而不是分别使用单个属性。

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div{
     
     
				width: 500px;
				height: 500px;
				border: 1px solid black;
				/*background: red;*/
			}
			#d1{
     
     
				/*背景图片*/
				background-image: url("img/logos.jpg");
				/*背景图片是否重复*/
				background-repeat: no-repeat;
			}
			#d2{
     
     
				background:bisque url("img/logos.jpg") no-repeat 0px 0px ;
			}
			#d3{
     
     
				background-image: url("img/logos.jpg");
				background-repeat: repeat-x;
				/*背景颜色*/
				background-color: aquamarine;
				/*背景图片的位置*/
				background-position: 0px 100px;
			}
		</style>
	</head>
	<body>
		<div id="d1"></div>
		<div id="d2"></div>
		<div id="d3"></div>
	</body>

渐变

渐变详细解释：https://www.runoob.com/css3/css3-gradients.html

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
		    /*线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
		    径向渐变（Radial Gradients）- 由它们的中心定义*/
			#b{
     
     
				width: 200px ;
				height: 200px;
				background-image: linear-gradient(19deg, #FF3FEF 0%, #21DEFF 100%);
			}
		</style>
	</head>
	<body>
		<div id="b"></div>
	</body>

盒子模型

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Dw9RDpJH-1610535262984)(C:\Users\dell\AppData\Roaming\Typora\typora-user-images\image-20210112153229489.png)]

margin：外边距

border：边框

padding：内边距

边框

边框粗细

边框颜色

边框样式

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
     
     
				margin: 0;
				padding: 0;
			}
			#app{
     
     
				border: 1px  solid black ;
			}
			h4{
     
     
				background: bisque;
				text-align: center;
			}
			#n1:nth-of-type(1) input{
     
     
                /*背景颜色*/
				background: lavender;
                /*设置边框*/
				border: 2px solid rosybrown;
			}
			#n2:nth-of-type(2){
     
     
				background: lavender;
			}
			#n3:nth-of-type(3) input{
     
     
				background: lavender ;
				border: 3px dashed lawngreen;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<h4>会员登录</h4>
			<form>
				<div id="n1">
					<span>用户名</span>
					<input type="text" name="un" id="un"  />
				</div>
				<div id="n2">
					<span>密码</span>
					<input type="text" name="un" id="un"  />
				</div>
				<div id="n3">
					<span>邮箱</span>
					<input type="text" name="un" id="un"  />
				</div>
			</form>	
		</div>
	</body>

内外边距

#app{
    
    
    border: 1px  solid black ;
    		/*上  右  下  左*/
    margin: 1px 2px 3px 4px;
    		/*上下  左右*/
    padding: 5px 10px;
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-da6BSPS3-1610535262985)(C:\Users\dell\AppData\Roaming\Typora\typora-user-images\image-20210112164223052.png)]

圆角

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#app{
     
     
				width: 100px;
				height: 50px;
				background-color: rosybrown;
                			/*左上  右上  右下  左下*/
				border-radius: 50px 50px 0 0;
			}
		</style>
	</head>
	<body>
		<div id="app"></div>
	</body>

盒子阴影

		/*水平方向 垂直方向 阴影距离 颜色*/
box-shadow: 10px 10px 100px red;

浮动

文档流

文档流处在网页最底层，它表示的是一个页面中的位置，我们所创建的元素都默认在文档流中。

块元素：独占一行，自上而下排列可以设置高度和宽度

内联元素：只占自身大小，默认从左向右设置高度和宽度无效，大小由内容撑开

display

	<head>
		<!--
        	描述：display  inline内联元素  block块元素  inline-block既是内联又是块元素  none不显示元素，并且不会在页面中继续占据位置
        -->
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#d1{
     
     
				width: 100px;
				height: 100px;
				border: 1px solid rosybrown;
				display: inline-block;
			}
			#s2{
     
     
				width: 100px;
				height: 100px;
				border: 1px solid rosybrown;
				display: block;
			}
		</style>
	</head>
	<body>
		<div id="d1">div</div>
		<span id="s2">span</span>
	</body>

float

有高度塌陷的问题

使用浮动从而脱离文档流

块元素脱离文档流，高度和宽度都被内容撑开

内联元素脱离文档流会变成块元素

浮动的元素不会挡住文字

`<head>
		<!--
        	描述：float    left左浮动   right右浮动   none默认在文档流中
        -->
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#d1{
     
     
				width: 100px;
				height: 100px;
				border: 1px solid rosybrown;
				float: left;
			}
			#d2{
     
     
				width: 150px;
				height: 150px;
				border: 1px solid rosybrown;
				float: left;
			}
			#d3{
     
     
				width: 200px;
				height: 200px;
				border: 1px solid rosybrown;
				float: right;
			}
			#s2{
     
     
				border: 1px solid rosybrown;
			}
		</style>
	</head>
	<body>
		<div id="b">
			<div id="d1"></div>
			<div id="d2"></div>
			<div id="d3"></div>
			<span id="s2">
				王掌柜，常四爷，秦二爷，宋二爷…… 六十年的老茶馆，终究没有能抵挡得住那股浊气弥漫的年代。 见证了是非转变的王掌柜，终究没有逃脱恶霸流氓的欺辱。 一心实业救国的秦二爷，终究穷困潦倒无所获。 问心无愧的常四爷，孤独终生无人送终。 宋二爷爱鸟如命，却终被浊气所污。 这些个见证了六十年时代的更变，从大清受洋... 
			</span>
		</div>
	</body>

清除浮动

clear:both清除两边浮动 left清除左边浮动 right清除右边浮动 none不清除浮动

#s2{
    
    
    border: 1px solid rosybrown;
    display: block;
    clear: both;
}

解决父元素高度塌陷问题

1.给父元素固定的高度

#father{
    
    
    border: 2px solid rosybrown;
    height: 300px;
}

2.在父元素的最后设置空的div

<div class="clear"></div>

.clear{
    clear: both;
    margin: 0;
    padding: 0;
}

3.使用overflow（visible不会对溢出内容做任何处理 hidden对溢出的内容修剪 scroll为父元素添加滚动条 auto根据需要添加滚动条）

#father{
    
    
    border: 2px solid rosybrown;
    overflow: hidden;
}

4.给父类使用after伪类（推荐）

#father:after{
    
    
    content: '';
    display: block;
    clear: both;
}

定位

相对定位

position: relative;

（距离右边）right、left、top、bottom

相对于元素原来的位置进行定位且元素不会脱离文档流，原位置仍然保留，使元素提升一个层级。

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#father{
     
     
				height: 40px;
				border: 1px solid red;
			}
			#d1{
     
     
				height: 10px;
				border: 1px solid greenyellow;
				background-color: #ADFF2F;
				position: relative;
				right: 5px;
			}
			#d2{
     
     
				height: 10px;
				border: 1px solid greenyellow;
				background-color: #BC8F8F;
				position: relative;
				left: -10px;
			}
			#d3{
     
     
				height: 10px;
				border: 1px solid greenyellow;
				background-color: aqua;
				position: relative;
				top: 10px;
			}
		</style>
	</head>
	<body>
		<div id="father">
			<div id="d1"></div>
			<div id="d2"></div>
			<div id="d3"></div>
		</div>
	</body>

绝对定位

position: absolute

会脱离文档流，即不会保留原来位置。

如果祖先元素都没有开启定位，则相对于浏览器定位，一般情况下父元素开启相对定位，会相对于父元素定位。

绝对定位会改变元素的性质，即块元素会成为内联元素，内联元素会成为块元素。

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#father{
     
     
				padding: 10px;
				border: 1px solid red;
				position: relative;
			}
			#d1{
     
     
				height: 30px;
				border: 1px solid greenyellow;
				background-color: #ADFF2F;
				position: absolute;
				left: 35px;
			}
			#d2{
     
     
				height: 30px;
				border: 1px solid greenyellow;
				background-color: #BC8F8F;
				position: absolute;
                /*距离父元素右边10px*/
				right: 10px;
			}
			#d3{
     
     
				height: 30px;
				border: 1px solid greenyellow;
				background-color: aqua;
			}
		</style>
	</head>
	<body>
		<div id="father">
			<div id="d1">d1</div>
			<div id="d2">d2</div>
			<div id="d3">d3</div>
		</div>
	</body>

固定定位

position: fixed;

永远相对于浏览器定位，不随滚动条滚动

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#father{
     
     
				height: 1000px;
				background-color: black;
			}
			#d1{
     
     
				width: 100px;
				height: 100px;
				background-color: #ADFF2F;
				position: absolute;
				right: 0px;
				bottom: 0px;
			}
			#d2{
     
     
				width: 50px;
				height: 50px;
				background-color: #00FFFF;
				position: fixed;
				right: 0px;
				bottom: 0px;
			}
		</style>
	</head>
	<body>
		<div id="father">
			<div id="d1">absolute</div>
			<div id="d2">fixed</div>
		</div>
	</body>

层级和透明度

z-index 没有开启定位的元素不能使用父元素层级再高也不能盖住子元素

opacity 透明度 0-1之间

( IE8及以下设置 filter: alpha(opacity=透明度) ) 透明度0-100

	<head>
		<meta charset="UTF-8">
		<title></title>
        <style type="text/css">
        	.box1{
     
     
        		width: 100px;
        		height: 100px;
        		background-color: wheat;
        		position: relative;
        		z-index: 2;
        		opacity: 0.5;
        	}
        	.box2{
     
     
        		width: 100px;
        		height: 100px;
        		background-color: darkblue;
        		position: absolute;
        		left: 70px;
        		z-index: 10;   /*可以设置层级,前提是开启定位*/
        		opacity: 0.6;
        	}
        	.box3{
     
     
        		width: 100px;
        		height: 100px;
        		background-color: cadetblue;
        		position: relative;
        		left: 50px;
        		top: -50px;
        		z-index: 20;               /* 父元素层级再高都不会盖住子元素*/
        		opacity: 0.6;
        	}
        	.box4{
     
     
        		width: 80px;
        		height: 90px;
        		background-color: black;
        		position: absolute;
        		z-index: 10;
        		opacity: 0.8;	
        	}
        </style>
	</head>
	<body>
		<div class="box1"></div>
		<div class="box2"></div>
		<div class="box3">
			<div class="box4">
			</div>
		</div>
	</body>

如有不对的地方欢迎指出，大家共同进步！

css知识小汇