CSS 层叠样式表 【样式】
作用: 修饰页面的
工作原理: 加载html,然后加载css,将html和css结合,创建DOM树,浏览器显示DOM
语法
声明
属性名:属性值
css中区分大小写,对大小写比较敏感
声明块:
将多个声明放在一个 {} 里面, 每个声明之间使用 ;分隔
{
color:red;
font-size:12px;
}
规则:
选择器 {
属性:属性值;
}
在html中使用css的3种方式
1、行内样式:
在html标签中使用style(核心属性)
style= "属性名: '属性值';...." //多个用分号隔开
缺点: 结构和样式没有分离
代码的复用率低
优点:优先级高
2、内联样式
将代码写在head标签中的style标签中
<style>
选择器 {
属性名: '属性值';
}
</style>
缺点:代码的复用率不高
优点:结构和样式可以分离
3、外部样式
在外部定义一个后缀名为.css的文件,在head中使用link标签引入
优点:结构和样式可以分离
复用率提高
-
CSS选择器
-
标签选择器
标签 { 属性名: 属性值 }
-
id选择器
#id名 { 属性名: 属性值 }
-
类选择器
.类名 { 属性名: 属性值 }
-
通配符选择器
* { 属性名: 属性值 }
-
子代选择器 【亲儿子】
标签 > 标签 { //这里的标签可以是其他选择器 属性名: 属性值 }
-
后代选择器 【子孙后代】
标签 标签 { //这里的标签可以是其他选择器 属性名: 属性值 }
-
相邻同胞选择器 【相邻的兄弟标签】
标签 + 标签 { //这里的标签可以是其他选择器 属性名: 属性值 }
-
一般同胞选择器 【所有的兄弟标签】
标签~ 标签 { //这里的标签可以是其他选择器 属性名: 属性值 }
-
逗号选择器 【同时选中几个不同的标签】
标签, 标签 { //这里的标签可以是其他选择器 属性名: 属性值 }
-
组合选择器 【层级的标签,eg:div里面的p标签】
div p { 属性名: 属性值 }
-
属性选择器
[attr] { 属性名: 属性值 } [atrr] 选中具有属性atrr的元素,不管属性的值为多少 [atrr=val] 选中具有atrr属性,并且值为val [atrr ^= val] 选中具有atrr属性,并且值以val开头 [atrr $= val] 选中具有atrr属性,并且值以val结尾 [atrr *= val] 选中具有atrr属性,并且值包含valable [atrr ~= val] 选中具有atrr属性,并且其中一个值为val
-
伪类选择器
伪类选择器 { 属性名: 属性值 } 子代元素相关的伪类选择器 选中ul的第一个孩子: ul:first-child { 规则; 规则; .... } 选中ul的最后一个孩子: ul:last-child { 规则; 规则; .... } ul:nth-child(参数) { 规则; 规则; .... } 参数的取值: 1.数字 2.关键字(odd=>奇数,even=>偶数) :hover : 鼠标经过元素时的状态 :link : 元素没有经过鼠标时的状态 :active : 鼠标点击元素的时候的元素的状态 (鼠标停留在元素上面,鼠标还未松开的时候) :visited: 鼠标点击过元素之后的状态
-
伪元素选择器
::after 选中之后不存在的元素 ::before 选中之前不存在的元素
-
示例:【结构】
<div>
<div class="header">
header
<div>
<ul>
<li class="headerone" nature="001">headerone</li>
<li nature="002">headertwo</li>
<li nature="003">headerthree</li>
</ul>
</div>
</div>
<div id="footer">
footer
<div class="footer-1">
footer-1
<div class="footer-2">
footer-2
</div>
</div>
</div>
<p>我是多余出来的</p>
<a href="#">我是一个链接</a>
</div>
【样式】
标签选择器
显示:所有的div标签宽高都为100px
div {
width: 200px;
height: 200px;
}
类选择器
显示:class="header"的div标签背景是红色
.header {
background-color: red;
}
id选择器
显示: id="footer"的div标签的背景是蓝色
#footer {
background-color: blue;
}
通配符选择器
显示:所有的标签的字体颜色为白色(除了后面被覆盖的)
* {
color: #fff;
}
相邻同胞选择器
显示:class="headerone"的li标签的相邻的第二个li的字体是加粗
.headerone + li {
font-weight: 700;
}
一般同胞选择器
显示:class="headerone"的li标签的兄弟li标签的字体都是加粗
.headerone ~ li {
font-style: italic;
}
子代选择器
显示:id="footer"的亲儿子div标签的字体是斜体
#footer > div {
font-size: 10px;
}
让孙子不要继承儿子的属性,不然就和后代选择器一一样了
.footer-2 {
font-size: initial;
}
后代选择器 后代只能是父子以及孙辈后的关系
显示:id="footer"的后代div标签的字体颜色的荧光蓝色
#footer div {
color: cyan;
}
逗号选择器
显示:id="footer"的div标签和p标签的字体大小都是20px(更大一点)
#footer, p {
font-size: 20px;
}
组合选择器 组合可以是父子也可以是同级或者任何关系
显示:div标签下面的p标签的字体颜色为绿色
div p {
color: green;
}
属性选择器
选择的是有nature这个属性的标签
显示:三个li标签都有下划线
[nature] {
text-decoration: underline;
}
选择的是属性值等于“001”的标签
显示:nature属性值为“001”的标签(第一个)字体大小为30px
[nature="001"] {
font-size: 30px;
}
选择的是属性值以“00”开头的标签
显示:三个li nature属性都是以“00”开头的
所以三个li的字体颜色都变成khaki
[nature^="00"] {
color: khaki;
}
选择的是nature属性值以“2”结束的标签
显示:nature属性值以“2”结尾的标签(第2个li)字体颜色为lawngreen
[nature$="2"] {
color: lawngreen;
}
选择的是nature属性值中包含“3”的标签 *=选中的仅仅是一个字母或者多个字母
显示:nature属性值中包含“3”的标签(第3个li)字体颜色为lightseagreen
[nature*="3"] {
color: lightseagreen;
}
选择的是nature属性值中有“003”的标签, ~= 选中的必须是一个单词(不能是一个字母)
显示:nature属性值中有一个单词是“003”的标签(第三个li)字体大小为25px
[nature~="003"] {
font-size: 25px;
}
伪类选择器
选择的是第一个li元素
显示:第一个li标签背景是白色
li:first-child {
background-color: #fff;
}
选择的是最后一个li元素
显示:最后一个li标签背景是白色
li:last-child {
background-color: #fff;
}
选择的是第2个li元素 括号内可以是n
显示:第2个li标签背景是粉色
li:nth-child(2) {
background-color: pink;
}
元素没有被点击过
显示:a标签的下划线没有了
a:link {
text-decoration: none;
}
元素还没有被点击时
显示:鼠标移动到元素上还没有点击的时候a标签的字体变为30px
a:hover {
font-size: 30px;
}
元素正在被点击
显示:元素正在被点击的时候,a标签的字体颜色变为橙色
a:active {
color: coral;
}
元素被点击之后
显示:
a:visited {
color: red;
}
上述代码的结果
· a标签:
选择器优先级
1.权重(特性值)
继承 < 通配符选择器 <标签选择器 < 类、伪类、属性选择器 < id选择器 < 行内样式
2.后面的样式会覆盖前面的样式
3.!important [最大]
-
单位
颜色
关键字 red、pink、teal 十六进制的值 #ffffff,#cccccc,#ff0000 rgb函数 rgb(0,0,0),rgb(0~255,0~255,0~255) rgba函数 rgba(0~255,0~255,0~255,0~1)
长度
绝对单位 px 像素 相对单位 em 相对于当前元素的字体大小 div font-size:12px 1em = 12px width:10em rem 相对于html上的字体大小 div html:10px 1rem = 10px 10rem = 100px
-
样式
1、文本相关的样式(可以被继承)
color 给文本指定颜色(关键字、十六进制的值、rgb、rgba)
font-family 给文本设置字体(字体栈、字体族)
serif 有衬线的字体,笔画结尾有特殊的装饰线或衬线 sans-serif 无衬线的字体,笔画结尾是平滑的字体 monospace 等宽字体,用于代码,字体中每个字宽度相同 cursive 草书,这种字体有的有连笔,有的还有特殊的斜体效果。 fantasy 梦幻装饰字体 ,具有特殊艺术效果的字体 网络字体: @font-face { font-family: myfont; src: url(./FZZJ-HGXSJW.TTF) } p { font-family: myfont; }
font-style 用于打开和关闭斜体
normal 【默认】正常字体,关闭斜体 italic 斜体 oblique 模拟斜体
font-weight 字体的粗细程度
normal 【默认】正常,400 bold 加粗字体,700 lighter 设置当前元素字体比父元素更细 bolder 设置当前元素字体比父元素更粗 100–900 数值类型的粗细程度(值越大字体越粗)
text-align 文本的排列方式
left 左对齐 center 居中 right 右对齐
text-transform 允许字体变形
none 防止任何改变 uppercase 将文本转换为大写 lowercase 将文本转换为小写 capitalize 将所有单词第一个字母转换为大写 full-width 转换为类似于一个等宽字体
text-decoration(line style color)
text-decoration-line none 取消所有文本修饰 underline 为文本添加下划线 overline 为文本添加上划线 line-through 为文本添加删除线 text-decoration-style solid(实线) wavy(波浪线) dashed(虚线) dotted(点状线) double(双实线) text-decoration-color 关键字、十六进制的值、rgb函数、rgba函数 text-shadow(h-shadow v-shadow blur color) 文本的阴影 none 取消所有阴影 h-shadow 必需。水平阴影的位置。允许负值 v-shadow 必需。垂直阴影的位置。允许负值 blur 可选。模糊的距离 color 可选。阴影的颜色。参阅 CSS 颜色值
字体图表库
iconfont
2、列表样式(可以被继承)
list-style
list-style-type 列表的类型
none 没有类型 disc 一个实心的小黑圆圈 circle 一个空心的小圆圈 square 一个块 decimal 数字 lower-roman 小写罗马数字 upper-roman 大写罗马数字 decimal-leading-zero 十进制的值
list-style-image
none 没有图片 url() 图片的路径
list-style-position
outside [默认值]显示在主块的外部 inside 显示在主块的内部
3、其他样式
cursor 调整光标悬浮到链接上的时候光标的形状
url 需使用的自定义光标的 URL。注释:请在此列表的末端始终定义一种普通的光标,以防没有由 URL 定义的可用光标。鼠标样式栈 url('./images/zhankai.png'), help default 默认光标(通常是一个箭头) auto 默认。浏览器设置的光标 pointer 手型 crosshair十字交叉 wait 等待 help 帮助 move 移动 text 文本
line-height 行高
给元素设置行高等于盒子的高度,那么盒子中的文本将垂直居中
outline 环绕边框
类似于盒子的边框,但是不占空间
dispaly 控制盒子的显示方式
inline 行内显示,宽高无效(行内元素) block 块级显示,宽高有效(块级元素) inline-block 行内显示同时宽高有效(行内块) none 不显示,不占据屏幕空间(隐藏)
visibility 显示于隐藏
hidden 隐藏,占据屏幕的空间 visible 显示
opacity 不透明度 0~1之间的值
overflow 溢出部分的处理
hidden 超出内容隐藏 auto 超出产生滚动条 scroll 滚动条
4、盒子相关的样式
每一个元素都是一个盒子
width 宽度
height 高度
padding 内边距
padding-top 内上边距 padding-right 内右边距 padding-bottom 内下边距 padding-left 内左边距 简写顺序 padding: 上 右 下 左 【 顺时针】
margin 外边距
margin-top 外上边距 margin-right 外右边距 margin-bottom 外下边距 margin-left 外左边距 简写顺序 margin: 上 右 下 左 【 顺时针】
border 边框
border-width 为元素指定边框的宽度
单位 px、em
border-style 为元素指定边框样式
none 不设置 hidden 隐藏 dotted 显示一系列的点 dashed 显示一系列小线段 solid 显示一条单一的实心直线 double 显示两条实心直线 groove 边框雕刻效果(与ridge相反) ridge 与groove相反 inset 嵌入式边界框(与outset相反) outset 突出的边界框
border-color 为元素指定边框颜色
关键字、十六进制、rgb函数、rgba函数
border-radius 为元素指定圆角
当 border-radius 的值等于元素宽度的一半,则元素是一个圆形 简写顺序: border-radius: 左上 右上 右下 左下
background 为元素设置背景
background-color 为元素设置一种颜色 background-image 为元素设置一个背景图片 background-size 设置背景的大小 background-repeat 设置背景图片的重复方式 background-origin 设定背景的起始点 background-clip 设定背景的覆盖范围 background-attachment 设置背景图片的固定点 background-position 设置为背景图像初始位置,可以实现图片精灵 简写: background:color image position/size repeat origin clip attachment
-
布局
1、浮动
float
(如果一个元素添加float属性,那么这个元素就会成为一个浮动元素)left 向左浮动 right 向右浮动 none 不浮动 inherit 浮动方式继承父元素
浮动元素的特点
当一个元素是浮动元素的时候,他会失去对父元素的支撑
清除浮动
给父元素添加 ovreflow: hidden 额外标签法:在最后一个浮动标签的后买你新添加一个标签,然后设置 clear: both (必须要有content)(我通常用::after来设置这个新标签) 使用伪元素 单伪元素方法、双伪元素方法 ::after 进行设置 伪元素:clearfix 给父元素添加浮动
2、定位(position)
position
static 静态(默认) 【非定位元素】
relative 相对定位 【定位元素】
相对的是元素原先的位置 不脱离文档流 可以覆盖在其他元素上
absolute 绝对定位 【定位元素】
相对的是距离它最近的父定位元素的位置 如果没有父定位元素,那么它相对于浏览器视口 脱离文档流
fixed 固定定位 【定位元素】
相对于浏览器视口 脱离文档流 不会随着浏览器的滚动而滚动
sticky 粘滞定位 【定位元素】
不脱离文档流 使用top/right/bottom/lef设置一个过渡点 当超过这个过渡点的时候就会体现fixed固定在页面上
脱离文档流的特点:默认宽度由内容决定,不占据原先的位置(原先的位置被其他元素抢占)
只有定位元素才可以使用top、right、botoom、left、z-index
flex布局(伸缩盒布局)
1.比较:
传统布局
兼容性好
布局繁琐
局限性,不能在移动端很好的布局
flex弹性布局(伸缩盒布局)
操作方便,布局及为简单,移动端应用很广泛
PC端浏览器支持情况较差
IE11或更低版本,不支持或部分支持
2.原理
任何一个容器都可以指定为flex布局
采用Flex布局的元素,称为Flex容器,他的所有子元素称为Flex项目
容器默认存在两根轴:水平的主轴和垂直的交叉轴
当我们为父盒子设为flex布局后,子元素的float、clear属性即将失效
给父元素设置display:flex,达到控制子元素的目的
3.常见父项(容器)属性
flex-direction:设置主轴的方向
row(默认值):主轴为水平方向,起点在左端
row-reverse:主轴为水平方向,起点在右端
column:主轴为垂直方向,起点在上沿
column-reverse:主轴为垂直方向,起点在下沿
justify-content:设置主轴上的子元素排列方式
flex-start:左对齐
flex-end:右对齐
center:居中
space-between:两端对齐,项目之间的间隔都相等
space-around:每个项目两侧间隔相等,
所以,项目之间间隔比项目与边框的间隔大一倍
flex-wrap:设置子元素是否换行
nowrap(默认):不换行
wrap:换行,第一行在上方
wrap-reverse:换行,第一行在下方
align-content:设置侧轴上的子元素的排列方式(多行)
flex-start:与交叉轴的起点对齐
flex-end:与交叉轴的终点对齐
center:与交叉轴的中点对齐
space-between:与交叉轴两端对齐,轴线之间平均分布
space-around:每根轴线两侧的间隔都相等,所以,轴线之间的间隔比轴线与边框的间隔大一倍
stretch(默认值)
align-item:设置侧轴上的子元素排列方式(单行)
flex-start:交叉轴的起点对齐
flex-end:交叉轴的终点对齐
center:交叉轴的中点对齐
baseline:项目的第一行文字的基线对齐
stretch(默认值):如果项目没设置高度或设auto,将占满整个容器
flex-flow:复合属性,相当于同时设置了flex-direction和flex-wrap
flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap
4.项目的属性
order
该属性定义了项目的排列顺序,数值越小,排列越靠前,默认0
flex-grow
该属性定义了项目的放大比例,默认0,即如果存在剩余空间,也不放大
flex-shrink
该属性定义了项目的缩小比例,默认为1,即如果剩余空间不足,该项目将缩小
flex-basis
该属性定义了在分配多余空间之前,项目占据的主轴空间
flex
flex-grow、flex-shrink、flex-basis的速写形式
- css动画
定义动画:
使用@keyframes 定义动画
关键帧可以使用关键字from~to
也可以使用0%~100%
配置动画
animation-name 动画的名字
@keyframes定义的动画的名字
animation-duration 动画持续的时间
单位 s、ms,默认为0s
animation-iteration-count 动画迭代次数
数字、infinite(无限循环)
animation-delay 动画延迟执行时间
animation-direction 动画方向
normal (默认)动画按照正常顺序执行
reverse 最后一帧作为第一帧
alternate 顺序交替反转
animation-timing-function 动画的速度曲线
ease (默认)先快后慢
linear 线性,匀速
ease-in 先慢后快
ease-out 先快后慢
ease-in-out 先慢后快再慢
第三动画库
1.安装
先把源码下载到本地
2.使用
<div class= 'animate__animated animate__rotateOut'>hello</div>
- css过渡
transition
transition-property 过渡属性
transition-duration 持续时间
transition-timing-function 时间曲线
transition-delay 过渡延迟
transition的速写形式:过渡属性,持续时间,时间曲线,过渡延迟
过渡和动画的区别
1.过渡需要触发
2.不是所有属性都能过渡
- css变形
transform 属性
旋转
rotateX (angle)
绕X轴旋转,例如单杠运动 30deg
rotateY ( angle )
绕Y轴旋转,例如钢管舞运动
rotateZ ( angle )
绕Z轴旋转,例如旋转盘。
rotate ( angle )
与rotateZ()一致。
倾斜
skew(x,y)
skewX(deg)
skewY(deg)
缩放
scale(x,y)