CSS

一、CSS的概念

CSS:层叠样式表

1. 作用:用来控制我们HTML标签的展示样式,使得标签的样式展示的更加丰富,就是用来解耦的
   我们学习了CSS以后 尽量不使用 HTML标签自带的属性 全部用CSS 去设置
   层叠性:多个多个样式控制一个标签,这几个样式对一个标签同时生效

2. CSS 跟HTML 配合使用的方式
   (1)内联样式: 将CSS 代码写在标签上 所有的标签都会有一个 style属性
   只能控制单个标签,且书写凌乱,不推荐使用.
   (2)内部方式:将style属性写在head标签内部 常用

		<style type="text/css">
			选择器{
				属性1:属性值;
				属性2:属性值
			}
		</style>

···
(3)外联样式：将CSS样式写在一个单独的文件中，这种方式最常用

二、常用标签

1.div标签

div标签是一个纯净的块标签，所谓的纯净，就是这个标签，不带有任何的样式（没有宽高，没有背景等）
块标签：这个标签会默认占据一行

2.层浮动

<!-- left  right浮动,让块标签可以一字排开 --> 
		  float:left;

<!-- 设置浮动后得清除浮动,这个div就是用来清除浮动的clear -->
		<div id="" style="clear: left;">	
		</div>

3.层溢出

overflow超出内容是否包裹

scroll(强行加滚动条)
visible(默认值溢出还是显示)
hidden(隐藏溢出部分)
auto(自动判断是否加滚动条)

4.span标签

span标签纯净的行标签，所谓的纯净，就是不带有任何样式
行标签：不会占据一行

5.块标签与行标签的区别与转换

1. 区别：行标签，不能设置宽高，以及上下间距 ，他的内容有多宽他就有多宽 设置左右间距有效
2. 转换：display

block(把行标签变成块标签)
none(隐藏一个块，他隐藏之后占的位置就不在了)
inline(把块标签变为行标签)
inline-block(把块标签，变成行标签，还能设置宽高，以及上下间距)

三、选择器

1. 选择器：用来选择一个或多个标签，进行样式的控制，为了提高CSS代码的复用性
2. 选择器的优先级：为了解决多个选择器，出现属性控制冲突时，听谁的
   内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器

1.id选择器

id选择器：一次选择一个标签

		<style type="text/css">
			#div1,#div2{
				width: 300px;
				height: 300px;
				border: 2px black solid;
				background-color: pink;
			}
		</style>

2.类选择器

class 选择器：一次可以选择多个标签

		<style type="text/css">
			.myClass{
				color: #FFC0CB;
				font-size: 150px;
				font-family: 楷体;
			}
		</style>

3.标签选择器

标签选择器：一次可以选择多个标签

		<style type="text/css">
			div,h1{
				color:#0000FF;
				font-size:19mm;
			}
		</style>

4.属性选择器

<style type="text/css">
			[id]{
				color: red;
			}
			div[id=div1]{
				color: aqua;
			}
		</style>

5.通配符选择器*

<style type="text/css">
			*{
				font-family:微软雅黑;	
				background: #FFC0CB;
			}
		</style>

6.伪类选择器

		<style type="text/css">
			链接状态
			a:link{
				color: #FF0000;
			}
			鼠标悬浮状态
			a:hover{
				color: palegreen;
			}
			按下鼠标的状态
			a:active{
				color: #FFFF00;
			}
			访问过后的状态
			a:visited{
				color: plum;
			}
		</style>

7.子选择器div >p

<style type="text/css">
			#div1>h1>b{
				color: yellow;
			}	
			#div2>h1,h2,h3{
				color: green;
			}
		</style>

8.后代选择器

<style type="text/css">
			#div1{
				color: antiquewhite;
			}
			#div1 div div{
				color: fuchsia;
			}
		</style>

9.相邻选择器

<style type="text/css">
			h1 +h2{//相邻一个
				color: red;
			}
			h1 ~h2{//相邻所有
				color: green;
			}
		</style>

四、CSS的常用属性

1.字体属性

font-family	设置字体
font-size字体大小	xx-small(极小),x-small(较小),small(小),mediun(标准),large(大)
font-style字体的样式	normal正常显示字体,italic斜体字,oblique歪斜体
font-weight字体的加粗	normal正常显示 bold粗体 bolder加粗 lighter细体 number数字型
text-shadow字体的阴影	（规定水平阴影、垂直阴影、模糊距离、以及阴影的颜色）
font-variant字体的变体(主要是英文字体)	normal正常字体 small-caps表示英文字母显示为小型的大写字母

2.背景属性

background-color	背景颜色
background-image	背景图片
background-size	规定背景图片的尺寸
background-attachment	背景图片是否随着滚动条的移动而移动（scroll滚动，fixed固定不动）
background-repeat	是否重复铺平整个网页（no-repeat不重复）
background-position	背景图片的开始位置（值1 左右位置，值2 上下位置）

3.边框的设置

border-style边框的样式	none没有边框dotted点线dashed虚线solid实线double双实线
border-width边框的宽度	thin细边框medium中等边框thick粗边框，长度—数字
border-color边框的颜色
border-radius设置边框圆角	先把边框设置后在设置圆角
box-shadow边框阴影	x方向的偏移像素、y方向的偏移像素、模糊的像素值、阴影的颜色

4.CSS对文字的排版

letter-spacing来控制在浏览器中所显示的字符间的空格距离	normal正常显示,长度-可以使用负数,单位px像素
text-decoration为文字添加下划线，删除线等修饰	underline添加下划线 overline添加上划线 line-through添加删除线 blink添加闪烁效果 none没有任何修饰
text-align控制文本的排列和对齐方式	left左对齐 right右对齐 center居中对齐 justify两端对齐
line-height控制文本内容之间的间距	normal浏览器默认的行高
text-indent	用来控制每个段落的首行缩进的距离

5.页面定位：position

绝对定位:元素之间，不存在参照关系，所有 元素只参照起始位置
相对定位:页面元素的默认定位方式，一个元素的位置会参照上一个元素的位置

absolute绝对定位	设置间距top left right bottom
relative相对定位	设置间距margin-left margin-top margin-right margin-bottom

6.过渡动画transition

格式：transition:width 2s;(应用于宽度，时间2秒)
		transition-property:width;
		transition-duration:5s;过渡时长
		transition-delay:2s;延时过渡
		transition-timing-function:
				linear(匀速的过渡效果)
				ease(先慢后快再慢慢结束的过渡效果)
				ease-in(以慢速开始的过度效果)
				ease-out(以慢速结束的过渡效果)

7.transform动画

位移动画(左右位置，上下位置)	transform:translate(50px,100px);
旋转动画	transform:rotate(30deg);
缩放动画(宽度，高度)	transform:scale(2,4);
扭曲动画(绕X,Y轴翻转)	transform:skew(30deg,30deg);

8.自定义动画Animation

1.开启动画animation:myDH 5s;(myDH动画名，5s动画时间)
		2.自定义动画
		@keyframes myDH{
			from{
				//初始状态
			}
			to{
				//最终动态
			}
		}

9.内间距

padding：填充用来设置边框和其内部的元素之间的空白距离

上边距padding-top   下边距padding-bottom
		左边距padding-left    右边距padding-right

box-sizing:border-box;我们在设置内间距的时候，默认会撑大外框，加上这个属性，就不会了

10.设置鼠标指针样式

cursor:auto/crosshair/default/pointer/move/e-resize/ne-resize/nw-resize/n-resize/wait/text/help

cursor:pointer;设置鼠标变小手

1. 设置鼠标悬浮的效果

div:hover{
			
		}

2. 设置鼠标按下的效果

div:active{
			
		}

11.彩色图片变白

filter:grayscale(100%);
		filter:gray;

1. 浏览器的兼容问题，不同浏览器不同写法

1.IE 9 
		-ms-filter: grayscale(100%);
		-ms-filter: gray;
		2.Firefox
		-moz-filter:grayscale(100%);
		-moz-filter:gray;
		3.Safari and Chrome
		-webkit-filter:grayscale(100%);  
		-webkit-filter:gray;
		4.Opera
		-o-filter:grayscale(100%);
		-o-filter:gray;

12.其他属性

1. 字母大小写的转换

text-transform:uppercase

2. 透明度

		rgba a表示透明度
		opacity: 0.5;调整背景透明度 0----1 

3. 当多个块，为绝对定位后，可能重叠现象

z-index可以设置他们的重叠顺序，数值越大就在最上面

4. 显示元素与隐藏元素

visibility:visible显示元素
		visibility:hidden隐藏元素
		display:none; 隐藏之后，占的位置不在
		visibility:visible;隐藏之后，占的位置还在

5. 轮廓

		outline:#00ff00 dotted thick;

五、盒子模型

顺序排列，用于div设置显示方式为盒子模型给父布局设置，其子元素按父元素设置的效果排列。

1.设置盒子模型

 display: flex;

2.排列方式横向或竖向

flex-direction: row | row-reverse | column | column-reverse

3.按方向居开始,中间,末尾

justify-content:flex-start | flex-end | center;	

4.自动换行 或换列

flex-wrap:wrap;