html-->木偶 css--->化妆 js--->跳舞
css:
1.什么是css？
层叠样式表；不能脱离html而单独存在。
2.基础语法
属性名和属性值之间使用冒号连接；多对属性之间使用分号连接；
最后一对属性可以不加分号
选择器{
width:100px;
height:100px;
color:red;
}
p{
width:100px;
height:100px;
color:blue;
}
注释：不能嵌套使用
/*注释内容*/
作用：html中注释作用一致
速记写法：
简写形式：
td{
border:1px solid red
}
border-top-width:1px;
border-top-style:solid;
border-top-color:red;
border-left-width
border-left-style
border-left-color
-->
border:width style color
内外边距：
盒子：
内容+内边距+边框+外边距
padding:10px;
-->
padding-top:10px;
padding-left:10px;
padding-right:10px;
padding-bottom:10px;
padding:10px; //上下左右
padding:10px 20px; //上下10px 左右20px
padding:10px 20px 30px; //上 左右 下
padding:10px 20px 30px 40px;//上 右 下 左
margin：同上3.如何将css作用在html上？
1.行内样式 style
2.内联样式 css
3.外部引入
创建一个以.css为后缀名的文件
建议： 先加载css，再加载html
@import url()：先去加载html再加载css
优先级： 行内样式>内联/外部引入
就近原则： 哪一个样式距离标签更近，谁的优先级就更高
4.选择器
标签选择器：根据标签名称选择一类元素
id选择器：根据元素的id属性选择一个元素 #value
类选择器：通过class属性来选择一类元素 .value
后代选择器：
>：选择当前元素的直接子元素
空格：选择当前元素的所有子元素（包含孙代元素）
兄弟选择器：
+：选择当前元素之后的一个兄弟
～：选择当前元素之后的所有兄弟
普遍选择器：*：所有
多选择器：
使用逗号连接多个选择器
div,p{} #one,.two{}
组合选择器：
直接将选择器拼接到一起使用
div.one{}
属性选择器：
根据元素的属性去选择一类元素
[id]:选择当前页面中具有id属性的元素
[class='one']:选择当前页面中具有class属性并且属性值为one的元素
[class~='one']:选择当前页面中具有class属性并且属性值之一为one的元素
[class^='o']:选择当前页面中具有class属性的并且class属性以o开头
[class$='o']:选择当前页面中具有class属性的并且class属性以o结尾
[class*='o']:选择当前页面中具有class属性的并且class属性值中包含o字符的伪类选择器：
:伪类名称
:first-child:选择当前元素作为父元素的第一个时
:last-child:最后一个孩子
:only-child:当前元素作为父元素的唯一一个孩子
:nth-child(number/odd/even):
:hover 当鼠标悬停在元素上时
:active: 当鼠标按下时触发
:link: 当未被点击时触发
:visited 被访问过之后触发书写顺序：link-->visited--〉hover-->active
伪元素选择器：
::伪元素名称
::first-letter：第一个字符
::first-line:选择第一行
::selection:当文字被选择时选择器优先级：
@important：优先级最高
行内样式：1000 id选择器：100
类/伪类/属性：10 元素/伪元素：1特性值：特性值越大，优先级越高
当特性值相同时，越靠下的优先级越高
!important;//不计入特性值中，优先级最高
5.盒模型：
盒子：内容区域+内边距+边框+外边距
分为两类：
标准盒模型（w3c盒子）：
默认都是标准盒子
box-sizing:content-box;
width=content
1.div的内容区域的宽度？
2.div的盒子宽度？
3.div在浏览器中所占据的空间的宽度？
边框盒模型（怪异盒子）：
box-sizing:border-box;
width=content+padding+border
6.布局：
默认文档流：从上到下，从左到右
1.display属性：改变盒子默认特性
inline：将块级元素转换为行内元素；block：将行内元素转换为块级元素
inline-block：将当前元素转换为兼具行内和块级特性的元素
display:
none;//元素的隐藏,隐藏元素所占据的空间
block;//元素的显示
visbility：
hidden：元素的隐藏，不隐藏元素所占据的空间（将元素的透明度设置为0）
visible；//元素的显示
2.浮动：
float：left：左浮动 right：右浮动 none：不浮动
元素浮动不会遮挡普通文本
浮动何时停止？
1.遇到父级元素边框的时候停止浮动
2.遇到其他浮动元素时
清除浮动：
clear:left right both
1.设置给浮动元素之后的块级元素1) 块元素脱离默认文档流
1. 默认宽度为0
2. 失去了对父元素支撑的能力 【伪元素】
2) 在浮动流中，多个同级别浮动元素在一行中显示，当这一行容纳不下，会自动换行
2.伪元素选择器
div::after{
clear:both;
display:block;
content:''
}
官方解释：
overflow：
超出元素部分如何设置
hidden:超出元素部分隐藏
scroll：超出元素部分以滚动条方式显示3.列级布局：行级布局和列级布局
先进行行级布局，再进行列级布局
4.定位布局：
position：
static：静态布局
absolute:绝对定位
1.脱离默认文档流
2.不保留定位前的空间
3.默认情况下，绝对定位的元素根据body的左上角进行定位
4.如果父级元素设置了定位属性时，子元素会根据父级元素的左上角进行定位
relative:相对定位
1.默认情况下，相对定位元素会根据元素本身的位置进行定位
2.不会脱离默认文档流
3.保留定位前的空间
fixed:固定定位
特点和绝对定位是类似
定位元素不会随着滚动条的滚动而滚动
sticky:粘性定位
定位前元素按照relative来定位
设置了配合属性后，到达设置的属性之后停止滚动
配合属性：left： top： right： bottom：
z-index: number
两个元素必须使用绝对定位属性
设置元素的层叠顺序，值越大，越靠上5.伸缩盒布局：
父元素：display:flex;
子元素：item的float属性自动失效；flex: 1;
外边距合并问题：
1.父子级之间
1.给父级元素添加边框属性
2.将本应该设置给子元素的外边距设置给父元素的内边距（注意父元素的盒模型）
3.给父子级设置浮动属性
4.给父子级添加position:absulute属性
5.给父子级元素设置display: inline-block;
6.给父级元素添加overflow: hidden;属性2.兄弟级
将本应该设置给两个元素的外边距设置给一个元素
计算规则：
1.当两个外边距均为正数时，取较大的一个
2.当两个外边距均为负数时，取较小的一个
3.当两个外边距一正一负时，直接相加即可7.文本样式
针对于盒子内容来进行修饰。具有可继承性
text-align:center; 定义行内内容（例如文字）如何相对它的块父元素对齐
vertical-align:middle; 调整行内元素的垂直排列
line-height:32px;
text-transform:
lowercase/
text-decoration-color
text-decoration-style：solid/dotted/dashed
text-decoration-line：underline/light-through/overline
text-decoration:underline/light-through/overline/none
overflow-x: overflow-y: overflow: visible/hidden/scroll颜色：
关键字：
rgb(r,g,b):0-255之间
rgba(r,g,b,a):0-255,a:透明度0-1；0:完全透明；1:完全不透明
16进制的颜色值 ：通过拾色器获取 #fff #ccc
尺寸：
width:50%;
px:绝对单位，像素，
em：相对单位 1em=16px
百分比：50%（相对单位）
字体：
针对于盒子内容来进行修饰。具有可继承性
font-family:'李氏字体','Microsoft YaHei','微软雅黑','宋体';
font-size:12px;
font-weight:normal/bold
font-style:normal/italic
color:#333;
font: font-size/line-height font-family;
font: 12px/1.5 Microsoft YaHei,Heiti SC,tahoma,arial,Hiragino Sans GB,sans-serif
网络字体:iconfont font-awesome
1\. 获取字体文件: woff、 eot、...
2\. 定义网络字体
@font-face {
font-family: "iconfont";
//字体文件
src: ""
}
3\. 使用
// 基础样式
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
}
// 特殊样式
.icon-aixin:before {
content: "\e8ab";
}8.其他规则：
display: block; inline; inline-bolck;
列表规则: list-style:none
表格规则
border-collapse:collapse; 当td添加边框，加在table上可以合并隔壁的边框
opacity:9.单位
绝对单位:10px
相对单位:
1em , em相对于当前元素的字体大小
1rem , rem相对于html元素选择器中设定的字体大小
颜色:
关键字 pink
十六进制 #ffffff #000 #f4f4f4
函数 rgb(114,141,153) => #8f8d98
函数 rgba(114,141,153,1)10. 背景色
background-image: url('图片地址') 背景图片
background-repeat : repeat/repeat-x/repeat-y/no-repeat 背景图片重复方式
background-origin : border-box/padding-box/content-box 背景铺设的起点
background-clip : border-box/padding-box/content-box 背景裁切的方式
background-size :contain;cover 图片大小
等比例 100px 200px
background-position :center 背景图片的位置
background-color 背景***ackground: url() #ccc no-repeat center; 速写11.定位布局
position: static; // 默认，静态
relative
相对点：该元素在文档流中初始的位置
是否脱离文档流：不脱离
最佳实践：一般不移动，作为相对点
absolute
相对点：距离它最近的父定位元素，如果没有父定位元素，那么就只能相对于浏览器视口
是否脱离文档流：
fixed
相对点：相对于视口，并且不会随着浏览器的滚动而滚动
是否脱离文档流：脱离
sticky
相对点：
是否脱离文档流：
当元素上的position的取值为relative absolute fixed sticky之一，我们就认为当前这个元素为定位元素。定位布局可以使用定位属性，比如 left、right、top、bottom。12.伸缩盒布局
作用：与浮动布局的作用类似，用于将一个容器中多个子元素【块元素】在一行中多列排列，常用于响应式布局（移动端）
概念：主轴：flex-direction定义，row - x; column - y
交叉轴：与主轴垂直的轴 y, x
1\. 子元素都是沿着主轴来排列的
2\. 一般建议给容器添加宽高，子元素在容器中排列
使用：
ul 容器:
display: flex; 让容器成为伸缩盒容器
flex-direction: row; 容器中子元素的排列方式，row-沿着x轴
flex-wrap: wrap;
justify-content: space-around;
li 子元素:
flex-basis 主轴中基准值，主轴是x轴，相等于width
flex-grow 主轴中剩余空间分配所占据份数
flex-shrink 主轴中如果有亏损，所占亏损的份数
flex 速写
ul { display: flex; }13. bootstrap : 栅格布局（栅格系统）
bootstrap3 浮动 bootstrap4 伸缩盒
14.动画：
动画轨迹--》元素
@keyframes run{
from{}
to{}
}
@keyframes run{
0%{}
50%{}
100%{}
}动画、过渡、变形: animation-* transition-* transform
动画设定:
animation-name animation-duration 10s 10000ms animation-delay 10s 10000ms animation-timing-function: linear/steps/ease/ease-in/... animation-direction : reverse; alternate； alternate-reverse animation-iteration-count: 4; infinite。 animation-fill-mode: forwards;backwards;both;
动画库
1\. 打开网页的时候可能一开始有白屏（*）
1) 加强服务器！
2) faster mini
1\. 图片压缩
2\. 图片合并（图标）
3\. cdn加速 : 将库【iconfont、】放到cdn服务器
2\. 使用
1\. 获取cdn连接
2\. 使用class
基础规则: animate__animated
特殊规则: animate__pulse
库太多！(html、css、js): 50个
iconfont、animate.css、bootstrap、jquery、vue、vuerouter、vuex、react、redux、redux-saga、reat-router、webpack、babel、webpack-server、axios、moment、lodash、....
3) 过渡
1\. 更加简单的动画，没有动画帧
2\. 需要触发（:hover）
transition-property 需要过渡的属性 all
transition-duration 持续时间 2s
transition-timing-function 时间曲线函数 linear steps() easy
transition-delay: 0s; 延迟时间
transition: property duration delay timing;
4) 变形
transform-origin: center top left
transform:
scale(2)
rotate(45deg) rotateX(45deg) rotateY(45deg) rotateZ(45deg)
skew() skewX() skewY()
translate() translateX() translateY()15. 响应式布局
1) pc端
1\. 类似于腾讯视频: 容器的宽度随着屏幕的分辨率大小的改变而改变
2\. 纯响应式(与mobile兼容): 完全兼容移动的设备
2) mobile端
手机型号不同，宽度不同
1\. 不要给容器【块元素】指定宽度，让他默认为100%
2\. 子元素【列元素】宽度使用相对单位,百分数
媒体查询技术
.products {
width: 990px;
margin: 0 auto;
}
.products > ul > li {
width: 19.5%;
height: 100px;
background-color: rebeccapurple;
}
@media screen and (min-width: 1300px) {
.prodmucts {
width: 1200px;
}
.products > ul > li {
width: 16.5%;
}
}
@media screen and (min-width: 1500px) {
.products {
width: 1400px;
}
.products > ul > li {
width: 14%;
}
}
前端 服务器端 css文件 css文件 「Content-Type:text/html」
16. less
1) 安装
npm install -g cnpm --registry=[https://registry.npm.taobao.org](https://registry.npm.taobao.org)
cnpm install -g less
less --version
京公网安备 11010502036488号