CSS3笔记整理
程序员文章站
2022-07-03 10:16:34
一、CSS入门1.什么是CSS【人靠衣装马靠鞍】层叠样式表(Cascading Style Sheets，缩写为 CSS），是一种样式表语言，用来描述HTML或XML文档的呈现。层叠：多个样式用于修饰一个页面元素样式表（声明块） {color:blue;}2.CSS语法选择器（之后加空格）{样式名：样式值；样式名：样式值；}3.CSS可读性1.加空白div {color: 'red';font-size:'...
一、CSS入门
1.什么是CSS
【人靠衣装马靠鞍】
层叠样式表(Cascading Style Sheets，缩写为 CSS）， 是一种样式表语言，用来描述HTML或XML文档的呈现。
层叠：
多个样式用于修饰一个页面元素
样式表（声明块） {
color:blue;
}
2.CSS语法
选择器（之后加空格）{
样式名：样式值；
样式名：样式值；
}
3.CSS可读性
1.加空白
div {
color: 'red';
font-size:'18px';
}
div {color:'red';font-size:'18px';}
2.加注释
/*注释*/
3.采用速写
padding:5px 10px 15px 20px;
等价于
padding-top:5px;
padding-right:10px;
padding-bottom:15px;
padding-left:20px;
4.选择器组
div {
color:'red';
}
.one {
color:'red';
}
.three {
color:'red';
}
等价于：
.one,.three {
color:'red';
}
<div class ='one'>1</div>
<div>2</div>
<div class='three'>3</div>
5.CSS样式如何用于html文件
1）外部link导入【外部样式表】
将样式从head标签中link标签引入
<link rel='stylesheet' href=''>
2）内部style标签【内部样式表】
<style>
</style>
3)标签内部style属性【内联样式表】
<div style='样式名：样式值；样式名：样式值；'></div>
4)@import引入
<style>
@import'./3-style.css';
</style>
@import‘样式表的路径’;
结论：
1.import会破坏优先级
2.优先级最高的是内联样式表
3.link和@import的区别
1）所属范围
link是一个标签，不仅仅可以导入样式表，还可以设置rel；
rel="stylesheet"代表导入外部样式表
@import是CSS语法，只能导入样式表
2）加载顺序
link标签导入的样式是在浏览器加载html文件（标签）的同时加载
@import导入的样式是在文档加载完毕之后再去加载
文档加载完毕之前的方式
window.onload = function{}
$(function(){})
3）兼容性
link是一个html标签，没有兼容性问题
@import存在兼容性问题，IE低版本无法使用
6.CSS工作原理
1.浏览器加载HTML文件
2.浏览器解析HTML文件
如果存在CSS文件，就加载CSS文件，然后解析CSS文件
3.将解析后的CSS文件创建成DOM树进行显示
二、CSS3选择器
1）基本选择器
1.标签选择器
div{}
含义：根据给定的标签名选取当前文件中所有具有该标签名的元素，设置属性
语法：
标签名 {
样式名：样式值；
样式名：样式值；
}
注意：
1.标签选择器可以选中当前文件中所有具有该标签名的元素，而不是某一个
2.不管具有该标签名的元素嵌套多少层，都可以被选中
3.只要是html标签，都可以被用作于标签选择器
2.类名选择器
.one {}
含义：根据给定的类名选取当前文件中所有具有该类名的元素，设置属性
语法：
.类名 {
样式名：样式值；
}
注意：
1.类名选择器的类名在同一文件中允许重复
2.类名选择器命名是有规范的
数字、字母、下划线
不能以数字开头
不能以其它标签名作为类名（.div\.p\.html）
3.同一个元素可以有多个类名
<div class='类名一'></div>
<div class='类名一 类名二'></div>
4.类名选择器使用需要在类名前加上'.'
3.id选择器
#one {}
含义：根据给定的id选取当前文件中具有该id的元素，设置属性
语法：
#id {
样式名：样式值；
}
注意：
1.在同一个文件中，id的取值是唯一的
2.同一个元素只能有一个id
3.在使用id选择器的时候，需要在id里面加上#，不能有&nbps
错误：# id {}
争取：#id {}
4.id选择器的命名规范与类名选择器一致
4.通配选择器
* {}
含义：选择当前文件中所有的标签，设置属性
语法：
* {
样式名：样式值；
}
注意：
用于初始化页面元素的样式
5.逗号选择器
div, .one {}
含义：给多个选择器同时选中的元素，设置属性
语法：
选择器一，选择器二，... {
样式名：样式值；
}
注意：
如果同一文件中有多个元素都需要设置同样的样式的时候，就可以使用逗号选择器【减少代码冗余】
功能 性能
6.组合选择器
div .one {}
2）层次选择器
1.子代选择器
div > .one {}
含义：
先选中具有标签名一的元素，再再该元素的第一代子元素中选中具有标签名二的元素，设置属性
语法：
标签名一 > 标签名二 {
样式名：样式值；
}
注意：
1.子代选择器只能选中第一代，如果出现嵌套关系，无法选中
2.在使用子代选择器的时候，要使用‘>’来连接
2.后代选择器
div .one {}
含义：
先选中具有标签名一的元素，再再该元素的所有子元素中选中具有标签名二的元素，设置属性
语法：
标签名一 标签名二 {
样式名：样式值；
}
注意：
1.在使用后代选择器的时候使用空格连接两个标签名
2.子元素不论被嵌套多少个，都可以被选中
3.标签名的取值不仅仅可以是标签，还可以是类名、id
3.兄弟选择器
1.相邻兄弟选择器
div + .one {}
含义：给指定选择器后面紧跟的那个选择器选中的标签设置属性
语法：
选择器一 + 选择器二 {
样式名：样式值；
}
注意：
选择指定选择器后面紧跟的那个标签，两个标签中间不能有其他元素
2.通用兄弟选择器
div ~ .one {}
含义：给指定选择器后面的选择器选中的所有标签设置属性
语法：
选择器一 ~ 选择器二 {
样式名：样式值；
}
3）属性选择器
[type]
[type=text]
<input type='text'>
<input type='password'>
[type='password']
[attr]
选中具有某个属性的元素，不论其属性值为多少
[attr=value]
选中具有某个属性值且值为value的元素
[attr^=value]
选中以某个属性开始的元素
最常用的地方
区分input选择框
4）伪类选择器
在其他选择器的后面使用：连接，实现特殊的效果
1.跟状态相关
:link /*未访问的链接
:hover
:active
:visited /*已访问的链接
：focus 聚焦状态
2.跟子元素相关
:first-child
:last-child
:nth-child(n)
n的取值：
数字
1.2.3.4.5.。。
英文字符
odd/even
5）伪元素选择器
::after {}
::before {}
1.用法：导航栏的侧边
2.清除浮动
选择器的优先级【级联】
1）！important;
在修改其他组件库的样式的时候使用
2）选择器的权重
1000
内联style
100
id选择器
10
类名选择器、属性选择器、伪类选择器
1
标签选择器、伪元素选择器
3）css代码顺序
谁离选中的页面元素更近谁生效【就近原则】
选择器继承
inherit 继承父元素的样式
initial 不继承
unset 不设定
三、样式规则
1）字体样式 font
color 字体颜色
font-style 字体样式
font-style: italic; 斜体
font-style: normal; 正常字体【默认】
font-weight 字体粗细
normal 正常字体【默认】
bold 粗体
lighter 更细的
100-900 数值越大，字体越粗
line-height 行高
取值等于该字体的包裹元素的高度
<div style='height:200px;'>123</div>
line-height:200px;//文字垂直居中
font-size 字体大小
浏览器默认字体大小位16px
font-family 字体族
字体族的名称
’微软雅黑‘
‘Microsoft YaHei’
serif 有衬线
sans-serif 无衬线
fangsong *文件
font
1.必须包含font-size、font-family
2.font-style、font-weight必须在font-size之前
3.font-family必须在最后
font:font-style font-weight font-size font-family;
webfont
@font-face
.ttf
1.下载ttf字体文件
2.将文件放到相对应的目录下（项目的目录）
3.通过@font-face引入
@font-face {
font-family: 'myfont';
src: url(./文件名.ttf);
}
4.使用字体
div {
font-family：myfont；
}
字体图标库
iconfont、fontawesome
2）文本样式 text
text-align 当前文本在元素中的对齐方式
left
center
right
justify
text-decoration 文本的线
underline 下划线
overline 上划线
line-through 删除线
text-transform 文本变形
capitalize 首字母大写
uppercase 全部大写
lowercase 小写
text-shadow 文本阴影
px x轴偏移量
px y轴偏移量
blur 模糊程度
color 阴影颜色
text-shadow: 10px 5px 5px #333;
3）列表样式
list-style：none；
4）单位
px、n%
1.颜色
1.关键字
red、black...
color：red；
2.十六进制颜色
#ededed
#333333 ==> #333
color：#333；
3.rgb函数
r red
g green
b blue
0-255
color：rgb(255,255,0);
4.rgba函数
r red
g green
b blue
0-255
a 颜色透明度
0-1
color：rgba（0，0，0，0.5）；
opacity：0；隐藏
5.渐变色
background-image: linear-gradient(to right,red,#ccc);
从左向右，从红色渐变到#ccc
2.尺寸
绝对单位
px
相对单位
em
等于父元素的fontsize
<div style='font-size:12px;'></div>
1em = 12px
2em = 24px
% 相对于父元素
5)文本的水平垂直居中、子元素在父元素中水平垂直居中
文本
水平：text-align：center;
垂直：line=height:父元素的高度；
标签
父元素
vertical-align: middle;
display:table-cell;
align-items:center;
子元素
display:inline-block;
如何消除a标签的默认样式？
text-decoration：none;
color:black;
cursor:default;
pointer
wait
help
...
rgba和opacity的区别
rgba会给父元素设置透明度，但是不会影响到子元素
cpacity会给父元素设置透明度，会影响到子元素
四、布局
1)默认文档流
1.元素在页面中显示的顺序根元素在代码中出现的顺序一致
2.块级元素独占一行空间
3.行内元素与其他元素共享一行空间
2）改变默认布局
1.float浮动布局
float:left/right;
特点：
1）使用了浮动的元素会失去对父元素的支撑
2）使用了浮动的元素的宽高由内容决定
3）使用了浮动的元素在网页中原本的位置由其他的块级元素替代
4）使用了浮动的元素会在一行从左向右排布，当前行宽度不够时，会自动换行
用法：使元素脱离文档流，向左或者向右移动
取值：
left/right
注意：
1.宽高由内容决定
2.使用了浮动的元素，原本的位置会被其它块级元素所替代
*清除浮动的方式：
1.浮动元素的父元素
.parent::after {
content：'';
clear:both;
display:block;
}
2.浮动元素的父元素
.parent {
overflow:hidden;
}
3.浮动元素的下一个相邻兄弟
.one {
content:'';
clear:both;
}
2.盒子模型
文档中的每个元素都可以被看作是一个矩形盒子
1）盒子属性
width
height
margin 外边距
盒子与其他盒子之间的距离
margin-top 上外边距
margin-right 右外边距
margin-bottom 下外边距
margin-left 左外边距
margin:10px; 上下左右都为10px
margin:5px 10px; 上下为5px，左右为10px
margin：5px 10px 15px；上为5px 左右为10px，下为15px
margin：5px 10px 15px 20px 上右下左
border 边框
border-width 边框线宽
px
border-style 边框样式
solid 实现
dotted 点状线
dashed 虚线
double 双实线
border-color 边框颜色
速写：
border: 1px solid #ccc;
padding 内边距
盒子边框与内容之间的距离
background-color 背景颜色
background-image 背景图片
background-repeat 背景图片重复的方式
no-repeat
repeat-x
repeat-y
background-size 背景图片尺寸
background-size: 100% 100%;
2）盒子组成
width,padding,border,margin
3）盒子分类
通过box-sizing可以设置盒子的类型
1.box-sizing:content-box;【内容盒子】【W3C标准盒子】
width = 内容width
所占的宽 = width +border +padding + margin
2.box-sizing:border-box;【边框盒子】【IE盒子】
width = 内容width +border + padding
3.定位布局
position
用法：
当一个元素悬挂在另一个元素之上时，一般采用定位布局
案例：
模态框、二级下拉菜单
特点：
1）元素可能会脱离文档流
2）可以使用left、right、top、bottom来描述元素的位置
3）
取值：
static 静态布局 【默认值】
relative 相对定位
1）不脱离文档流
2）参考点：相对于当前元素的原本位置
absolute 绝对定位
1）不脱离文档流
2）参考点：相对于当前元素的父定位元素，如果父元素中没有定位元素，则相对于浏览器视口
fixed 固定定位
1）脱离文档流
2）参考点：相对于浏览器视口
sticky 粘滞定位
1）不脱离文档流
2）参考点：相对于当前元素的父定位元素，如果父元素中没有定位元素，则相对于浏览器的视口
position：sticky；
top:100px;
拓展：1.网页中有两个嵌套关系的盒子，外层盒子和内层盒子之间有一定的距离，如何设置？
1.将子元素设置为相对定位
position：relative；
top：50px；
2.给父元素设置上内边距
padding-top: 50px;
box-sizing: border-box;
3.给子元素设置浮动
float：left；
margin-top：50px；
4.子元素设置绝对定位,父元素设置相对定位
子元素
position：absolute；
top：50px；
父元素
position：relative；
2）子元素在父元素中水平垂直居中？
1.父元素设置相对定位，子元素设置绝对定位
子元素
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
2.父元素设置相对定位，子元素设置绝对定位
子元素
left:50%;
top:50%;
margin-left: -当前元素宽度的一半;
margin-top: -但钱元素高度的一半;
3.设置display：table-cell；
4.伸缩盒布局
作用：响应式布局 --> 手机端开发
用法与浮动布局类似，都是将子元素在父元素中列/行排布
属性
display：flex; 将盒子设置为伸缩盒
flex-direction 主轴的方向
collumn 行布局 子元素会在y轴方向上排布
row 列布局 【默认值】，子元素会在x轴方向上排布
flex-wrap 设置换行
当所有子元素的宽/高超出父元素的宽/高的时候，设置换行
wrap 超出时换行
nowrap 超出时不换行 【默认值】
flex 速写
flex-basis 指定了 flex 元素在主轴方向上的初始大小
flex-grow 指定了flex容器中剩余空间的多少应该分配给项目（flex增长系数）
flex-shrink 指定了 flex 元素的收缩规则
align-items
center 在交叉轴上居中显示
justify-content
center 在主轴上居中显示
注意:
1.父元素需要在主轴方向上有固定的宽/高,供子元素分配
flex-basis
2.子元素的默认宽/高会在交叉轴上占满父元素
主轴为x轴的时候,子元素的默认高度会占满父元素
主轴为y轴的时候,子元素默认的宽度会占满父元素
六、动画
1）介绍
1.动画是CSS3新增，所以可能存在兼容性问题
2.动画是通过keyframes来定义
3.动画不需要任何js基础
2）语法
1.动画的定义
一定要写在style标签内部
在一个文件内可以同时定义多个动画
@keyframes 动画名称 {
from{
}//from是关键帧，动画的开始
to {
}//to是关键帧，动画的结束
}
==>等价于
@keyframes test {
0% {
}
25% {
}
50% {
}
75% {
}
100% {
}
}
使用百分数的好处，可以规定动画执行过程中某一个阶段的样式
2.动画的使用
极简形式
只要设置动画名称和动画时间即可让动画执行
在需要使用动画的元素上引用，在样式表内部
div {
margin:10px;
animation-name:test;
animation-duration:2s;
}
animation-name 动画名称
animation-name:test;
animation-duration 动画的运行时间
单位：秒
animation-delay: 2s; 动画的延迟
单位：秒
文件首次打开时多少秒再执行动画
animation-direction: 动画的方向
reverse ; 反方向
alternate ; 交替反转
animation-iteration-count: 动画执行的次数
infinite; 动画无限次播放
n n是一个整数，表示动画执行N次
animation-fill-mode: 动画结束时元素显示位置
backwards; 动画开始的位置【默认值】
forwards 动画结束的位置
animation-timing-function: 动画的速度曲线
linear ; 匀速
ease-in 先慢后快
ease-out 先快后慢
ease-in-out 先慢后快再慢
steps(n); n是一个整数，逐帧播放
animation-play-state:
running; 播放【默认值】
paused ; 暂停
animation速写
animation:
animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction
animation-fill-mode
animation-play-state
等价于
animation: move 5s linear infinite forwards;
参考文档：https://developer.mozilla.org/zh-CN/
本文地址：https://blog.csdn.net/yanxuanrende/article/details/107377689
下一篇： Linux下防御/减轻DDOS攻击的方法