CSS学习

CSS学习

一、优先级

1、css样式优先级

​ 就近原则，行内样式>代码块>导入css

2、选择器优先级

​ id选择器>class选择器>标签选择器

二、高级选择器

1、层次选择器

/* 后代选择器*/
body c{
    background:red;
}

body标签后的p标签

/*子选择器*/
body>p{
    background:red
}

body的子标签中的p标签

/*相邻兄弟选择器*/
body+p
    background:red
}

body同级,对下方的一个p标签

/*通用
body~p{
    background:red
}

body同级,对下方的所有p标签

2、属性选择器

a[id]{
	background-color: #FF69B4;
}
a[id=xxx]{
	background-color: #FF69B4;
}
a[class*=xxx]{
	background-color: #FF69B4;
}
a[href^="www"]{
	background-color: #222222;
}

选择a标签中带有id属性的

id = xxx的

属性选择器中的符号

绝对等于 ：=

通配等于 ：*=

匹配开头 ：^=

匹配尾部：$=

三、字体文本样式

1、字体样式

使用font：风格–粗细-字体大小/字体行高-字体样式

font-weight：100-900或者bolder/lighter等

font-size：字体大小

font-family: 字体样式

color：颜色

font-style：oblique（斜体）

2、文本样式

颜色：

​ 单词/RGB/ RGBA

​ RGB：0~F RGBA ：0~255 rgba(0,255,255,1)

排版：

​ 居中：text-align: center;

​ 缩进：text-indent: 2em;

行高：

​ line-height行高与块的高度一直==居中

划线：

​ text-decoration: 设置划线位置

​ underline（下），line-through（中），overline（上）

对齐：

​ vertical-align: middle;（水平对齐）

伪类：

​ a标签中使用的样式

/* 鼠标悬浮状态 */
div[id=url1] a:hover{
	text-decoration: none;
	color: #315EFB;
}
/* 鼠标激活状态 */
div[id=url1] a:active{
	text-decoration: none;
	color: #ffaaff;
}
/* 鼠标点击后 */
div[id=url1] a:visited{
	text-decoration: none;
	color: #55ff7f;
}

去下划线：text-decoration: none;

阴影：text-shadow: 5px 5px 2px #222222;

​ box-shadow: 10px 10px 10px #000000;

​ 垂直偏移 水平便宜 阴影半径 颜色

四、表格样式

ui li

list-style: 设置列表的图标

五、盒子模型

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

margin:外边距

border：边框

padding：内边距

1、边框颜色

2、粗细

3、样式

solid 实线 dashed 虚线

居中：margin： 0 auto；

​ text-align: center

六、圆角边框以及阴影

radius：和边框长度相等为圆形

（左上 右上 右下 左下）

盒子阴影：

box-shadow：

七、浮动

display： inline-block;

行内块级元素

浮动：float 左右

clear: both;

八、父级边框塌陷

1、增加父级元素高度

代码中避免空div

2、在漂浮框后增加div

增加空div

设置clear：both（清除浮动）

若超过则失效

例子：

<div id="father">
			<div class="img1"><img src="recource/img/2052084.jpg"/></div>
			<div class="img2"><img src="recource/img/2049050.jpg"/></div>
			<div class="img3"><img src="recource/img/360wallpaper.jpg"/></div>
			<div class="img4">我是一段话</div>
			<!-- 修复父级边框塌陷 -->
			<div class="clear"></div>
			</div>

div{
	margin: 10px;
	padding: 5px;	
}
#father{
	border: 1px #000 solid;
}
.img1{
	border: 1px #F00 dashed;
	display: inline-block;
	float: left;
}
.img2{
	border: 1px #55557f dashed;
	display: inline-block;
	float: left;
	clear: both;
}
.img3{
	border: 1px #55ff00 dashed;
	display: inline-block;
	float: right;
}
.img4{
	border: 1px #0055ff dashed;
	display: inline-block;
	font-size: 14px;
	line-height: 24px;
	float: right;
	clear: both;
}
img{
	width: 200px;
}
.clear{
	clear: both;
	margin: 0;
	padding: 0;
}

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

3、增加overflow:hidden

避免使用，若长度超出则切除

4、增加一个伪类after（推荐）

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

写法复杂，但无副作用，

九、滚动条

当高度宽度超过上限时，使用overflow：scroll。

十、定位

1、相对定位

position: relative;

top，bottom，left，right（正数为反方向移动）

2、绝对定位

没有父级定位时相对于浏览器定位

在父级范围内移动

3、fixed 固定定位

在页面上固定一个地方

4、z-index和透明度

层级0-999

opacity透明度

filter: opacity(0.1) ;过滤器

十一、动画制作

h;
}

写法复杂，但无副作用，



## 九、滚动条

当高度宽度超过上限时，使用overflow：scroll。

## 十、定位

### 1、相对定位

position: relative;

top，bottom，left，right（正数为反方向移动）

### 2、绝对定位

没有父级定位时相对于浏览器定位

在父级范围内移动

### 3、fixed 固定定位

在页面上固定一个地方

### 4、z-index和透明度

层级0-999

opacity透明度

filter: opacity(0.1) ;过滤器

## 十一、动画制作