css(前端三要素之一)
1.介绍
作用:修饰页面的
css:层叠样式表
层叠:多个样式用于同一个元素
样式:color font-size
表:css代码,css文件
选择器 样式 布局
工作原理:加载html,然后加载css,将html和css结合,创建DOM树,浏览器显示DOM
DOM:文档对象模型,树形结构, 元素、属性、文本称之为节点
2.语法
声明
属性名:属性值
css中区分大小写,对大小写比较敏感
声明块
将多个声明放在一个 { } 里面,每个声明之间使用;分隔
{
color:red;
font-size:12px;
}
规则
选择器{
color:red;
}
注释: /*注释内容*/ 快捷键 ctrl+/
作用:1.记录你的编程思路
2.便于后期代码的维护
空白:可以在css代码中添加一些空白(空格 回车),提高代码的可读性
color:red;
font-size:12px;
速写形式:
font
font-size
font-weight
padding: 1px 2px 3px 4px; 顺时针(上右下左)
padding-top
padding-left
padding-right
padding-bottom
margin
如何在html中使用css
1)行内样式
将样式写在元素的style属性中
<div style='color:red;font-size:22px;'>
缺点:结构和样式没有分离
代码的复用率低
优点:优先级高
2)内联样式
将代码写在head标签中的style标签中
<style>
选择器 {
color:red,
font-size:19px;
}
</style>
缺点:代码的复用率不高
优点:结构和样式可以分离
3)外部样式
在外部定义一个后缀名为.css的文件,在head中使用link标签引入
优点:结构和样式分离
复用率提高
选择器+规则(样式)+布局+动画
3.css选择器
作用:选择元素
核心选择器
1)标签选择器
div{
规则;
规则;
...
}
选中标签为div的所有样式
2)id选择器
#id{
规则;
规则;
...
}
3)类选择器
.class{
规则;
规则;
...
}
4)普遍选择器
*
层次选择器
1)后代选择器
ul li{
规则;
规则;
...
}
选中ul下面的所有li
2)子代选择器
.bottom>p{
规则;
规则;
...
}
选中class为bottom的直接子元素p
3)相邻同胞选择器
.jiangsu+li{
规则;
规则;
...
}
选中class为江苏这个元素的下一个兄弟元素
4)一般同胞选择器
.jiangsu~li{
规则;
规则;
...
}
选中class为江苏的所有兄弟元素
多选择器
1)逗号选择器
h1,h2,h3,.test{
规则;
规则;
...
}
选中h1、h2、h3、class为test的元素
2)组合选择器
a.baidu{
规则;
规则;
...
}
选中class为baidu的a标签
属性选择器
[atrr] 选中具有属性atrr的元素,不管属性的值为多少
[atrr=val] 选中具有atrr属性,并且值为val
[atrr ^= val] 选中具有atrr属性,并且值以val开头
[atrr $= val] 选中具有atrr属性,并且值以val结尾
[atrr *= val] 选中具有atrr属性,并且值包含val
[atrr ~= val] 选中具有atrr属性,并且其中一个值为val
伪类选择器
子代元素相关的伪类选择器
ul:first-child{
规则;
规则;
...
}
选中ul的第一个孩子
ul:last-child{
规则;
规则;
...
}
选中ul的最后一个孩子
ul:nth-child(参数){
规则;
规则;
...
}
参数的取值:
1.数字
2.关键字(odd=>奇数 even=>偶数)
选中ul的参数值的孩子
元素状态相关的伪类选择器
:hover 鼠标悬停在上面时
:link
:visited
伪元素选择器
::after 选中之后不存在的元素
::before 选中之前不存在的元素
4.优先级
1)权重(特性值) 比较权重
2)权重一样的话,后面的样式会覆盖前面的样式
3) !important
通过4个特性值来量化一个选择器
Thousands
声明在元素的style属性中。特性值记为1000
Hundreds
包含在一个选择器中的所有ID选择器,特性值记为100
Tens
包含在一个选择器中的所有类选择器,属性选择器,伪类选择器,特性值记为10
Ones
包含在一个选择器中的所有元素选择器,伪元素选择器,特性值记为1
5.继承
CSS中有些规则将会默认被子元素继承,有些则不会。
可继承属性:font系列属性、文本系列属性、列表系列属性、cursor、visibility等
不可继承属性:margin、padding、border等
CSS提供了三个特殊的值用来处理继承
inherit 继承父元素的样式
initial 不继承。应用浏览器的默认样式
unset 不设定,表现该规则本来特性,即如果该规则具有继承属性则继承,否则不继承。
6.单位
颜色
关键字 red、pink、teal
十六进制的值 #ffffff(白) #cccccc(灰色) #ff0000(红色) #fff
rgb函数 rgb(0,0,0)白 rgb(0~255,0~255,0~255)
rgba函数 rgba(0~255,0~255,0~255,0~1)
hsl函数
hsla函数
长度
绝对单位
px 像素
相对单位
em 相对于当前元素的字体大小
div font-size:12px 1em=12px width=10em
rem 相对于html上的字体大小
div html:10px 1rem=10px
%
选择器+样式(文本相关、字体、盒子、表格样式、列表样式)
7.文本相关的样式
文字相关的样式(可以被继承)
color 给文本指定颜色(关键字、十六进制的值、rgb函数、rgba函数)
font-family 给文本设置字体(字体栈、字体族)
serif 有衬线的字体,笔画结尾有特殊的装饰线或衬线
sans-serif 无衬线的字体,笔画结尾是平滑的字体
monospace 等宽字体,用于代码,字体中每个字宽度相同
cursive 草书,这种字体有的有连笔,有的还有特殊的斜体效果。
fantasy 梦幻装饰字体 ,具有特殊艺术效果的字体
网络字体
@font-face{
font-family: myfont;
src: url(./FZYangNSXSJW.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
8.列表样式
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 显示在主块的内部
9.其他样式
cursor 调整光标悬浮到链接上的时候光标的形状
url 需使用的自定义光标的 URL。注释:请在此列表的末端始终定义一种普通的光标,以防没有由 URL 定义的可用光标。鼠标样式栈 url('./images/zhankai.png'), help
default 默认光标(通常是一个箭头)
auto 默认。浏览器设置的光标
pointer 手型
crosshair 十字交叉
wait 等待
help 帮助
move 移动
text 文本
line-height 设置文本的行高
给元素设置行高=盒子的高度,那么盒子中的文本将垂直居中
一般用相对单位
outline 环绕边框
类似于盒子的边框,但是不占空间
display 控制盒子的显示方式
inline 行内显示,宽高无效(行内元素)
block 块级显示,宽高有效(块级元素)
inline-block 行内显示同时宽高有效(行内块)
none 不显示,不占据屏幕空间(隐藏)
visibility 显示与隐藏
hidden 隐藏,占据屏幕的空间
visible 显示
opacity 透明度 0~1之间的值
overflow 溢出部分的处理
hidden 超出内容隐藏
auto 超出产生滚动条
scroll 滚动条
10.盒子相关的样式
每一个元素都是一个盒子
width 宽度
height 高度
padding 内边距
padding-top
padding-right
padding-bottom
padding-left
margin 外边距
margin-top
margin-right
margin-bottom
margin-left
border 边框
border-width 为元素指定边框的宽度
关键字 thin、medium、thick
单位 px、em
border-style 为元素指定边框样式
none 不设置
hidden 隐藏
dotted 显示一系列的点
dashed 显示一系列小线段
solid 显示一条单一的实心直线
double 显示两条实心直线
groove 边框雕刻效果(与ridge相反)
ridge 与groove相反
inset 嵌入式边界框(与outset相反)
outset 突出的边界框
…
border-color 为元素指定边框颜色
关键字 十六进制 RGB HSL RGBA HSLA
border-radius 为元素指定圆角
background 为元素设置背景
background-color 为元素设置一种颜色
关键字 十六进制 RGB HSL RGBA HSLA
background-image 为元素设置一个背景图片
none
url
background-size 设置背景的大小
cover 背景铺满整个屏幕,(尽量不要使用大图覆盖小范围)
把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。按照背景定位区域的最大边扩展。
contain 把图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。按照背景定位区域的最小边扩展,如果不重复,可能背景定位区域有一部分没有背景图片。
百分比
绝对值
background-repeat 设置背景图片的重复方式
repeat 为了覆盖整个背景范围,背景图片尽可能多的重复,在背景边缘切割(clipping)最后一个图片以使用整个背景范围。
repeat-x x方向平铺一行
repeat-y y方向平铺一行
no-repeat 不重复
background-origin 设定背景的起始点
padding-box 默认,背景图片从内边距的外边缘开始绘制
border-box 背景图片从边框的外边缘开始绘制
content-box 背景图片从内容区开始绘制
background-clip 设定背景的覆盖范围
border-box 默认,背景位于边框以内
padding-box 背景位于内边距以内
content-box 背景位于内容区
background-attachment 设置背景图片的固定点
scroll 默认值,背景图像会随着页面其余部分的滚动而移动,背景固定在自身元素上,背景图相对于元素固定,背景随页面滚动而移动,即背景和元素绑定。
fixed 背景图相对于视口固定,所以随页面滚动背景不动,相当于背景被设置在了视口区上。
background-position 设置为背景图像初始位置,可以实现图片精灵
background 背景设置的速记写法
11.盒子模型
所有的元素都可以看作一个盒子
1)内容盒子(w3c盒子、标准盒子)
box-sizing:content-box
width=内容的宽度
2)边框盒子(怪异盒子、IE盒子)
box-sizing:border-box
width=内容+padding+border
12.元素的默认样式
body 默认有一个外边距
a
p
h1~h6
ul
13.表格样式
border-collapse 指定表格的边框是合并还是分开
separate 【默认值】分开模式,表示相邻的两个格子都有独立边框
collapse 合并模式,表示相邻的两个格子共享边框
caption-side 指定caption坐落在表格的哪个位置上
top 标题位于表格的上方
bottom 标题位于表格的下方
left 标题位于表格的左侧
right 标题位于表格的右侧
14.布局
1)默认文档流
1)元素显示的顺序和代码的顺序是一致的
2)块级元素独占一行空间,默认宽度为父元素的100%,高度由内容或者子元素决定
3)行内元素共享一行空间,默认宽高都由内容决定
2)浮动布局
float(如果一个元素添加float属性,那么这个元素就会成为一个浮动元素)
left 向左浮动
right 向右浮动
none 不浮动
inherit 浮动方式继承父元素
浮动元素的特点:
1)当一个元素是浮动元素的时候,他会失去对父元素的支撑
2)清除浮动
a.给父元素添加overflow:hidden
b.使用伪元素,给伪元素添加clear:both
3)脱离文档流
3)定位布局
position
static 静态(默认) 非定位元素
relative 相对定位 定位元素
相对的是元素原先的位置,
不脱离文档流(还占据原先的位置),宽度默认还是100%,
可以覆盖在其他元素上
absolute 绝对定位 定位元素
相对的是距离它最近的父定位元素的位置,如果没有父定位元素,那么它相对于浏览器视口
脱离文档流
fixed 固定定位 定位元素
相对于浏览器视口
脱离文档流
不会随着浏览器的滚动而滚动
sticky 粘滞定位 定位元素
不脱离文档流
使用top/right/bottom/left设置一个过渡点,当超过这个过渡点的时候,就会体现fixed固定在页面上
只有定位元素才可以使用top、right、bottom、left、z-index默认值为0
脱离文档流的特点:默认宽度由内容决定,不占据原先的位置(原先的位置被其他元素抢占)
4) 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-around 两端对齐,项目之间的间隔都相等
space-between 每个项目两侧间隔相等
所以,项目之间间隔比项目与边框的间隔大一倍
flex-wrap:设置子元素是否换行
nowrap(默认): 不换行
wrap: 换行,第一行在上方
wrap-reverse: 换行,第一行在下方
align-content:设置侧轴上的子元素的排列方式(多行)
flex-start: 与交叉轴的起点对齐
flex-end: 与交叉轴的终点对齐
center: 与交叉轴的中点对齐
space-between:与交叉轴两端对齐,轴线之间平均分布
space-around: 每根轴线两侧的间隔都相等,所以,轴线之间的间隔比轴线与边框的间隔大一倍
stretch(默认值)
align-items:设置侧轴上的子元素的排列方式(单行)
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的速写形式
15.css动画
定义动画:使用@keyframes 定义动画,关键帧可以使用关键字from~to,也可以使用0%~100%
配置动画:
animation-name 动画的名字
@keyframes定义的动画的名字
animation-duration 动画持续的时间
单位 s、ms 默认0s
animation-iteration-count 动画迭代次数
数字 默认值为1,可以为小数,不可以为负数
infinite(无限循环)
animation-delay 动画延迟执行时间
animation-direction 动画方向
normal (默认)动画按照正常顺序执行
reverse 反转 最后一帧作为第一帧
alternate 顺序交替反转
alternate-reverse
animation-fill-mode 动画填充模式
none 默认
forwards 在动画结束后,目标将保留在执行期间所遇到的最后一个关键帧所设置的计算值
backwards 在延迟时间内,目标将保留在执行期间所遇到的第一个关键帧所设置的计算值。
both 向前和向后填充模式都被应用。
animation-timing-function 动画的速度曲线
ease (默认)先快后慢
linear 线性,匀速
ease-in 先慢后快
ease-out 先快后慢
ease-in-out 先慢后快再慢
第三动画库
1.安装
先把源码下载到本地库
2.使用
<div class="box animate__animated animate__swing">hello</div>
16.css过渡
div {
transition: <property> <duration> <timing-function> <delay>;
}
transition
transition-property 过渡属性
transition-duration 持续时间
transition- timing-function 时间曲线
transition-delay 过渡延迟
transition 速写形式
过渡和动画的区别:
1.过渡需要触发
2.不是所有的属性都可以过渡
17.css变形
transform 属性
rotate(旋转)
rotateX (angle)
绕X轴旋转,例如单杠运动 30deg
rotateY (angle)
绕Y轴旋转,例如钢管舞运动
rotateZ (angle)
绕Z轴旋转,例如旋转盘。
rotate (angle)
与rotateZ()一致。
skew(倾斜)
skewX(deg)
skewY(deg)
skew(x,y)
scale(缩放)
scale(x,y) 隐藏元素scale(0,0)不占据空间
translate(移动)
translate(x,y)