CSS相关小结

最新推荐文章于 2022-06-11 14:18:39 发布

lixianwen007

最新推荐文章于 2022-06-11 14:18:39 发布

阅读量169

点赞数

分类专栏： CSS 文章标签： CSS

本文链接：https://blog.csdn.net/lixianwen007/article/details/102509611

版权

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

CSS相关总结

1.CSS概念

CSS全称为“层叠样式表 (Cascading Style Sheets)”，它主要是用于定义HTML内容在浏览器内的显示样式，比如文字大小、颜色、字体加粗等。

2.语法

注释：/注释内容/
选择器
规则

3.在html中如何应用css

属性内嵌：在元素中添加style属性，style属性值为css样式规则
内嵌：将样式添加到head标签中的style标签里
外部导入式：将样式定义在css文件中，通过link导入进来

4.样式层叠

决定某个样式规则是否可以胜出取决于三个要素
1）是否具有important声明（即是否加了！important）
2）选择器的权重
1000 定义在style属性中
100 id选择器
10 类选择器伪类选择器属性选择器
1 元素选择器伪元素选择器
3）选择器的顺序
当优先级相同时，后者覆盖前者（即就近原则，哪一个离选中的标签近，哪一个生效）

5.选择器

核心选择器

选择器	举例
标签选择器	div {}
id选择器	#one {}
class选择器	.second {}
逗号选择器	div,#one {}；ul,ol {}
组合选择器	div#one {}
普遍选择器	* 不单独使用

层次选择器

选择器	举例
子元素选择器	.nav > ul > li {}
后代选择器	.nav li {}
下一个兄弟选择器	.products > li.ios + *{}
之后所有兄弟选择器	.products > li.ios ~ *{}

属性选择器,过滤（表单元素）

举例	含义
selector[]	选取所有被选中的选项元素（下拉列表）
input[placeholder]	选取input属性中的placeholder元素
input[type=text]	选取input属性中的input元素
input[type^=t]	选取input属性中的input元素中前面带t的
input[type$=t]	选取input属性中的input元素中后面带t的
input[type*=t]	选取input属性中的input元素中带t的

伪类选择器,过滤器

与状态相关

举例	含义
a:link	a标签还未被访问
a :hover	光标悬浮到元素上
a :active	a标签激活
a:visited	a标签访问过

与子元素相关

举例	含义
:first-child	第一个子元素
:last-child	最后一个子元素
:nth-child(v)	选择一个子元素（v 可以为数字，公式，关键字）
:first-of-type	指定父元素的首个 p 元素
:last-of-type	指定父元素的最后 p 元素
:nth-of-type	指定父元素的第N个 p 元素

伪元素

举例	含义
::after	该伪元素定义在元素之后添加内容
::before	该伪元素定义在元素之前添加内容
::first-letter	该伪元素向文本的第一个字母添加特殊样式
::first-line	该伪元素向文本的首行添加特殊样式

6.规则

字体样式(可以被继承)

例如	含义
font-family:;	字体系列
font-size:12px;	字体大小
font-weight:(bold/normal/bolder/100~900)	字体粗细
font-style:(normal/italic)	是否开启斜体
line-height:2em;	行高【文本垂直居中】

网络字体
主要用于字体图标库（iconfont/fontawesome）
使用步骤：
1) 在iconfont网站中选择图标，加入项目，产生代码
2) 将产生的代码在html中通过link引用 http://(放产生的代码);
3) 应用css中定义好的类，来使用对应的图标

文本样式(可以被继承)

例如	含义
color:#333;	字体颜色
text-align:(center/left/right);	文本水平(居中，靠左，靠右)
text-decoration-line:(underline/line-through/overline/none) ;	规定文本修饰线条
text-decoration-style:(solid/dotted/double/dashed/wavy) ;	规定文本线条
text-decoration:none;	大多用于去掉链接中的下划线
text-indent:2em;	文本缩进
text-shadow:5px 5px 5px #ff0000;	文本添加阴影
text-wrap: normal;	规定文本换行规则

PS：文本添加阴影
第一个5px：表示背景距左的距离(相对于原文字）
第二个5px：表示背景距上方的距离（相对于原文字）
第一个5px：表示阴影的像素，为0与原文字相同

列表样式

举例	含义
list-style-type:(circle/square…);	列表类型（圆点，数字………)
list-style-image:url(“图片名”);	列表像图片
list-style-position	声明列表标志相对于列表项内容的位置
list-style:none;	列表无样式

盒子样式(盒子，块元素)

一个盒子的组成
外边距： margin
margin:10px; 上右下左
margin:0 10px; 上下为0，左右10px
margin:0 5px 10px; 上0，左右5px，下10px
margin:0 5px 10px 15px; 上右下左
边框： border
border-color;边框线颜色
border-style;边框线类型
border-width;边框宽度
border-radius：圆角半径
border:1px solid #ededed;【*】边框速写通用格式
&emsp**;内边距： padding**
参考外边距
内容：存放子元素或者内容的区域

盒子计算方式
1)box-sizing:content-box;内容盒子（传统盒子）
width = 内容宽
height = 内容高
所占的宽 = border + padding + width
所占的高 = border + padding + height
2)box-sizing:border-box;边框盒子（怪异盒子）
width = 边框以内所有的和
width = border + padding + 内容宽

背景
1)background-color：设置元素的背景颜色
2)background-image：把图片设置为背景
eg：background-image:url(“图片名”);
3)background-position：设置图片起始位置
eg：background-position:属性1 属性2;
属性1表示当前图片所处在视图中的位置
属性2right表示图片从哪里开始显示
属性1和属性2也可以用具体数值 px，%
4)background-repeat：设置背景图片是否及如何重复
repeat-x：沿x轴重复
repeat-y：沿y轴重复
no-repeat：不重复
5)background-attachment：背景图片是否固定或随着其余部分滚动
属性： fixed默认效果图片固定不滚动
6)background-size：规定背景图片尺寸
eg：background-size:10px 10px ;
7)background-origin：背景铺设的起点
border-box：边框下
padding-box：内边距下
content-box：内容下
8)background-clip：背景裁切方式
border-box：边框下
padding-box：内边距下
content-box：内容下

轮廓
1)outline-color:设置轮廓的颜色
2)outline-style:设置轮廓的样式：实线，虚线，双虚线，双实线…
3)outline-width:设置轮廓的宽度

7.布局

浮动布局

float：left/right
脱离文档流：
1) 宽度高度默认由内容决定
2) 原先所在位置就会被其他块元素抢占
3) 浮动元素在一行中依次排列，当一行无法容纳的时候会自动换行

应用：

1) 全部浮动（2+ 列）
				ul::after {
					display:block;
					content:"";
					clear:both;
				}
				ul> li {
					float:left;
					with:计算
				}

				<ul>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
				</ul>
2) 左侧浮动，右侧不浮动（2列）
				.content > .left{
					float:left;
					width:220px;
				}
				.content > .right {
					margin-left:230px;
				}

				<div class="content">
					<div class="left"></div>
					<div class="right"></div>
				</div>

定位布局

作用：当一个元素悬挂在其他元素之上，优先考虑定位布局
eg: 模态框、下拉菜单、二级菜单、固定宣传栏、网页聊天页面

用法：position:static/ relative / absolute / fixed /
static：默认静态布局，默认文档流中，非定位元素
relative：定位元素(相对定位)
1)没有脱离文档流
2) 参照点为当前元素原本的位置
absolute：定位元素(绝对定位)
1) 脱离了文档流
2) 参照距离当前元素最近的父定位元素，如果所有的父元素都没有定位元素，参照浏览器视口
fixed：定位元素(固定定位)
1) 脱离了文档流
2) 参照浏览器视口
sticky：定位元素(粘滞定位)
1) 不脱离文档流
2) relative 和 fixed 的结合
top:50px
当当前元素距离浏览器视口顶端为50px的时候，体现fixed的特点

伸缩盒布局

作用：使得子元素在父元素中分列显示，与float的作用类似。一般用于响应式布局（手机app中）

用法：
1)父元素在主轴上一定要有一个固定的宽/高
2) 子元素在交叉轴上默认宽/高占满父元素
如果主轴为x轴，那么资源的默认高度占满父元素
如果主轴为y轴，那么资源的默认宽度占满父元素
3)ul 伸缩盒
设置父元素为伸缩盒 (display:flex)
主轴（flex-direction）
主轴：默认情况下为x轴
交叉轴：默认情况下为y轴
伸缩盒自动换行（flex-wrap）
子元素宽度和大于父元素的时候是否换行
nowrap：默认值，不换行
wrap：换行
4)li 伸缩盒的元素
基础值
flex-basis 主轴上元素的基础值(宽/高)
对盈余空间的分配
flex-grow
对亏损空间的贡献
flex-shrink:
速写
flex: grow shrink basis;

8.动画

动画定义

@keyframes 动画名称{
	from {
	
	}
		to{

		}
}
=》
@keyframes 动画名称{
	10% {
					
	}
	20%{

	}
	...
	100%{

	}
}

动画应用

举例	含义
animation-name:;	动画名称
animation-duration:1s;	动画持续时间
animation-delay:1s;	动画的延迟
animation-direction:(reverse/alternate);	动画运动方向
animation-fill-mode:(forwards/backwards);	动画结束后保留哪个样式(最后一帧/第一帧)
animation-iteration-count:(4/infinite);	动画执行的次数(次数/重复)
animation-timing-function:(linear/steps);	动画执行的时间曲线
animation-play-state:(running/paused);	动画播放状态
animation: 4s linear 0s infinite alternate	速写形式

网络动画库
第三方动画库（animate.css）
封装了css3的通用的动画样式，专业
https://daneden.github.io/animate.css/
使用步骤：
1) 引入动画库
2) 为元素添加class

9.过渡效果（transition）

transition和animation的区别

transition必须要触发，一般使用:hover
transition不需要设置关键帧
简单的过渡效果使用transition，复杂的动画使用animation

举例	含义
transition-property:(width/width,background/all);	指定过渡的属性(指定一个属性/多个数属性/所有属性)
transition-duration	过渡持续的时间
transition-timing-function	过渡的时间曲线
transition-delay	过渡延迟
transition:property duration timing delay;	速写

10.变形(transform:)

举例	含义
scale(2)	变大
skewX(45deg)	沿x倾斜
skewY(45deg)	沿y倾斜
skew(45deg)	原点倾斜
rotate(45deg)	原点旋转
rotateX(45deg)	沿x旋转
rotateY(45deg)	沿y旋转
rotateZ(45deg)	沿z旋转
translateX(200px)	元素仅在水平x方向移动
translateY(300px)	元素仅在垂直y方向移动
translate(200px,300px)	元素在水平x方向移动200px，在垂直y方向移动300px