CSS学习

css三种使用方式

1.内联样式:直接在标签上,通过style属性进行使用
2.内部样式:在head标签中,通过标签，使用样式
3.外部样式:在通过head标签中,使用标签,引入css文件，进行样式的使用

css标签	作用
font-family: “字体”;	字体
font-size: 50px;	字号
font-weight: 300;	粗细 : normal-普通 , bold-粗
text-indent: 2em;	缩进
text-decoration: underline;	下划线/none-去掉下划线
text-align: center;	文字左右居中
vertical-align: bottom;	文字垂直显示位置
line-height: 30px;	行高 ,如果文字只有一行,行高=高度,那么文字垂直居中
color: red;	颜色
width: 8px;	宽
height: 8px;	高
background-color:颜色;	背景色
background-image: url(图片链接);	背景图
background-repeat: no-repeat;	是否重复
background-size: cover;	覆盖
background-attachment: fixed;	背景固定
list-style: none;	去掉li标签前面的符号
overflow: hidden;	隐藏溢出部分
overflow: scroll;	设置滚动条:溢出部分滚动条查看
overflow: visible;	溢出部分可见
overflow: auto;	继承父元素的溢出处理方式
display: flex;	不换行
align-items: center;	水平
justify-content: space-between;	两端对齐,平均分布
z-index: 10;	数字越大显示在越上层

css特征

1.继承性:父元素的一些样式,会被其子元素继承
2.层叠性:一个元素可以有多个样式效果进行叠加
3.优先级:浏览器默认样式<标签的默认样式<[外部样式/内部样式/内联样式]
**外部样式/内部样式/内联样式:根据谁后写,谁优先

css选择器

1.标签选择器:根据标签名字，选择对应标签(当前页面html标签全选)
2.id选择器:根据标签id,选择标签(唯一，选出一个)
3.class选择器:根据标签class属性,选择标签(一个html页面,class可以重复,选出多个符合条件标签)
4.分类选择器: 元素选择器和class/id选择器一起使用
5.分组选择器:选择器1,选择器2,…选择器n
6.派生选择器:找子标签(内部第一层元素) 选择器>选择器{}
子孙(内部所有) 选择器 选择器{}
7.伪类选择器:

<style type="text/css">
/* 伪类选择器:hover,鼠标移到图片上,图片边框变为白色的2px */
	.box img:hover{
		border: 2px solid white;
		width: 363px;/* 修改宽高,符合元素所在区域大小 */
		height: 298px;
	}
	/* 伪类:focus,输入框获取焦点的时候,设置样式 */
	#ipt:focus{
		height: 30px;
	}	
	/* 伪类:link */
	a:link{
		text-decoration: none;/* 去掉文本下划线 */
		font-size: 40px;
		color: #FF0000;
	}
</style>

display:样式

1.块级元素:占据一整行,其它内容换行显示。可以设置width
2.行内元素:宽高由内容决定,剩下的区域可以显示其他元素。不支持width,height。比如:span,input
3.块级行内元素:具有块级元素的特征,但是不换行。可以设置width,height,比如:img.

css样式的display	作用
display:none;	隐藏标签
display:block;	设置为块级元素
display:inline;	设置为行内元素
display:inline-block;	设置为行内块级元素

css边框

盒子	作用
border:宽度px 样式 颜色;	边框
border-radius: 5px;	设置边框为圆角
border-collapse:collapse;	边框合并
border-spacing:0;	边框边距0
margin:上下px 左右px;	外边距
padding:上下px 左右px;	内边距

定位

定位:流定位,浮动定位,相对定位,决定定位,固定定位
1.流定位: 页面中块级元素从上到下依次显示,行内元素在一行中从左到右依次显示
2.浮动定位: 让元素脱离流定位,通过css中float属性设置元素浮动方向,浮动元素依旧在父元素内部，实现特殊定位

浮动标签	作用
overflow: hidden;	让包裹元素与内部元素高度匹配
float: left;	左浮动
float: right;	右浮动
clear: none/both;	none-不清除/both-清除两边浮动元素影响

3.相对定位: position:relative ,参考自己位置
4.绝对定位: position:absolute ,参考有相对定位的父元素,依次向上找,最终到html(body)
5.固定定位: position:fixed ,