1.什么是CSS?
CSS是层叠样式表或级联样式表。
三大特性:层叠性、继承性、优先级
A.相同的选择器设置相同的样式,此时一个样式就是覆盖另一个冲突的样式。层叠性主要解决样式冲突的问题。遵循的原则是就近原则,哪个样式离结构近就执行哪个样式。
B.继承的权重是0,如果该元素没有直接选中,不管父元素权重多高,子元素得到的权重都是0。
C.优先级 !important(无穷大)>行内样式(1000)>ID选择器(100)>类选择器(10)>标签选择器(1)
D.权重叠加:如果是复合选择器,则会有权重叠加,需要计算权重。
2.CSS选择器
选择器分为基础选择器和复合选择器两大类。
类选择器、属性选择器、伪类选择器,权重都是10;标签选择器和伪元素选择器为1。
基础选择器:标签选择器、类选择器、id选择器、通配符选择器
复合选择器:
后代选择器 ul li a
子元素选择器 ul>li
并集选择器 ul,ol
伪类选择器 未访问div:link 点击过div:visited 鼠标经过div:hover 鼠标按下没有弹起div:active
新增属性选择器:
A.input[value]{color:red}
必须是input但同时具有value这个属性,选择这个元素[ ]。
B.input[type="text"]{color:red}
属性选择器还可以选择属性=值的某些元素。
C.div[class^=kobe]{color:red}
选择class=kobe开头的这些元素。
D.div[class$=curry]{color:red}
选择class=curry结尾的这些元素。
E.div[class*="kd"]{color:red}
选择所有class=kd的这些元素,不管开头还是结尾。
新增结构伪类选择器:
A.ul li:first-child{color:red}
选择父元素中第一个子元素。
B.ul li:last-child{color:red}
选择父元素中最后一个子元素。
C.ul li:nth-child(2){color:red}
选择父元素中第2个子元素,
D.ul li:nth-child(n){color:red}
n选择所有子元素,也可以选择偶数even/2n或者奇数odd/2n+1。
n+3从第三个元素开始到最后;-n+3前三个。
E.nth-child和nth-of-type的区别?
nth-child对父元素里面所有的孩子排序选择,先找到第n个孩子,然后看看是否和选择器匹配。
nth-of-type对父元素里面所有子元素排序选择,先去匹配选择器,再根据选择器找到第n个孩子。
新增伪元素选择器:
A.在元素的内部前面插入内容div::before{content: "曼巴"}
B.在元素的内部后面插入内容div::after{content: "曼巴"}
3.CSS字体系列
A.字体系列 font-family: "微软雅黑"
B.字号大小 font-size: 12px
C.字体粗细 font-weight: bold或直接使用font-weight: 100~900
D.字体样式 font-style: normal/italic
字体复合属性 font: font-style font-weight font-size/line-height font-family
不能更换顺序,并且各个属性用空格隔开,不需要设置的属性可以省略,但必须保留font-size和font-family属性,否则font属性将不起作用。
4.CSS文本属性
A.字体颜色 font-color:
预定义颜色值(red) 十六进制(#fff) rgb(255,0,0)
B.文本对齐 text-align:
左对齐(left) 居中对齐(center) 右对齐(right)
C.文本装饰 text-decoration:
下划线(underline) 上划线(overline) 删除线(line-through)
D.文本缩进 text-indent: 10px/1em
E.行间距 line-height: 24px
5.CSS引入方式
内部样式
<style>
div {
color: red
}
</style>
行内样式
<div style="color:red;font-size:30px">库里</div>
外部样式
<link rel="stylesheet" href="style.css">6.Emmet语法
不仅能快速生成HTML结构也能生成CSS样式
A.生成标签直接输入标签名按Tab键即可,比如div+Tab键就可以生成<div></div>
B.如果想要生成多个相同标签,加上*就可以了,比如div*3就可快速生成三个div
C.如果有父子关系的标签就可以用>,比如ul>li就可以了
D.如果有兄弟关系的标签,用+就可以了,比如div+p
E.如果生成带有类名或者id名字的,直接写.kobe或者#kobe就可以了。
F.如果生成的div类名有顺序,可以用自增符号$,比如div{$}*8
G.如果想要在生成的标签内部写内容可以用{}表示,比如div{科比}*24
7.CSS的元素显示模式
块元素 <h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>
A.自己独占一行。
B.高度,宽度,外边距以及内边距都可以控制。
C.宽度默认是父级宽度的100%。
C.是一个容器及盒子,里边可以放行内以及块元素。
行内元素 <span>、<a>、<strong>、<i>、<b>
A.相邻行内元素在一行上,一行可以显示多个。
B.宽高直接设置是无效的。
C.默认宽度就是它本身的宽度。
D.行内元素只能容纳文本或其它行内元素。
行内块元素 <img>、<input>、<td>
A.相邻元素在一行上显示,一行可以显示多个。
B.默认宽度就是它本身内容的宽度。
C.高度,宽度,外边距以及内边距都可以控制。
显示模式的转换
A.转换为块元素 display: block
B.转换为行内块元素 display: inline-block
C.转换为行内块元素 display: inline
8.CSS的背景
A.背景颜色 background-color: red
背景颜色半透明 background: rgba(0,0,0,0.8)
B.背景图片 background-image: url(image/banner.png)
C.背景平铺 background-repeat: repeat | no-repeat | repeat-x | repeat-y
D.背景缩放 background-size: 100% 100%
E.背景位置 background-position: x y
x y 可以使用方位名词或精确单位
方位名词 top | center | bottom | left | center | right
1.如果指定的两个值都是方位名词,则两个值前后顺序无关,比如left top和top left效果一致。
2.如果只指定了一个方位名词,另一个值省略,则第二个值默认为居中对齐。
精确单位
1.如果参数值是精确坐标,那么第一个肯定是x坐标,第二个一定是y坐标。
2.如果只指定一个值,那该数值一定是x坐标,另一个默认垂直居中。
混合单位
如果是方位名词和精确单位混合使用,第一个是x坐标,第二个是y坐标。
F.背景固定 background-attachment: scroll | fixed
背景复合写法 background:背景颜色 背景图片地址 背景平铺 背景图片滚动 背景图片位置
<style>
div{
background: transparent url(image/kobe.png) no-repeat fixed center
}
</style>9.盒子模型
标准盒模型 总宽度 = width + margin(左右) + padding(左右) + border(左右)
怪异盒模型 总宽度 = width + margin(左右)（即width已经包含了padding和border值）
A.边框的复合写法 border: 1px solid red
B.表格的细线边框 border-collapse: collapse
C.内边距(padding) 盒子本身没有指定width,则此时padding不会撑开盒子宽度。
D.块级盒子水平对齐 margin: 0 auto(必须设置宽度)
E.嵌套块元素塌陷解决办法 可以为父元素设置 overflow: hidden
F.清除内外边距 *{margin: 0;padding: 0}
G.圆角边框 border-radius: 24px
该属性是一个简写属性,可以跟四个值,分别代表左上角、右上角、右下角、左下角。
分开写是这样的 border-top-left-radius: 30px
H.盒子阴影 box-shadow: 水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色 内/外部阴影
box-shadow: 24px 30px 35px 23px red inset(内阴影)
I.文字阴影 text-shadow: 10px 10px 10px yellow
J.box-sizing:border-box盒子大小为width
padding和border就不会撑大盒子(前提padding和border不会超过width)
K.calc函数 width:calc(100%-50px) 无论父元素怎么改变大小,子元素永远小50px
10.浮动
A.传统网页布局的三种方式: 标准流、浮动、定位
B.浮动 float: left/right
C.浮动的特性?
1.浮动元素会脱离标准流。
2.浮动的元素会一行内显示并且顶部对齐。
3.浮动的元素会具有块级元素的特性。
D.清除浮动的方法?
1.浮动元素后面加一个空标签设置为clear: both
2.给父元素添加overflow: hidden
3.使用伪元素清除浮动
<style>
div::after{
content:"";
display:block;
height:0;
clear:both;
visibility:hidden;
}
</style>11.ps切图
A.常见的图片格式有三种: gif、jpg、png
gif: 支持动画、只有全透明和不透明两种模式、只有256种颜色。
jpg: 采用有损压缩算法、体积较小、不支持透明、不支持动画。
png: 采用无损压缩算法、体积也相对较小、支持背景透明、不支持动画。
B.常用的切图方式: 图层切图、切片切图、ps插件切图
图层切图
右击图层→快速导出PNG。
很多情况下我们需要合并图层再导出。
1.选中需要的图层(按住shift键多选图层): 图层菜单→合并图层(ctrl+e)
2.右击→快速导出PNG。
切片切图
文件菜单→导出→存储为web设备所用格式(ctrl+alt+shift+s)→选择图片格式→存储→选中的切片
12.定位
position: static/relative/absolute/fixed/sticky
A.相对定位 relative
1.它是相对于自己原来的位置进行移动的。
2.不脱标,继续保留原来的位置。
B.绝对定位 absolute
1.如果祖先元素没有定位,则以游览器为准。
2.如果祖先元素有定位,则以最近一级祖先元素为参考点移动位置。
3.绝对定位不再占有原先的位置(脱标)。
4.绝对定位盒子水平居中的算法?
① left: 50%;让盒子的左侧移动到父级元素的水平中心位置。
② margin-left: -100px;让盒子向左移动在自身宽度的一半。
C.固定定位 fixed
1.以浏览器的可视窗口为参照点移动元素。
2.不在占有原先的位置(脱标)
D.粘性定位 sticky
1.以浏览器可视窗口为参照点移动元素。
2.占有原先的位置(不脱标)。
3.必须占有top、bottom、left、right其中一个才有效。
E.定位的特性?
1.行内元素添加绝对或者固定定位,可以直接设置宽度和高度。
2.块级元素添加绝对或者固定定位,如果不给宽度或者高度,默认大小是内容的大小。
F.定位叠放次序 z-index: 1
数值可以是正整数或负整数或0,默认是auto,数值越大盒子越靠上。
13.元素的显示与隐藏
A.隐藏之后不会占有原先的位置。
1. 显示 display: block
2. 隐藏 display: none
B.隐藏之后继续占有原先的位置。
1. 显示 visibility: visible
2. 隐藏 visibility: hidden
C.溢出 overflow
1.超出部分隐藏掉 hidden
2.不管有没有超出都显示滚动条 scroll
3.超出自动显示滚动条,不超出不会显示滚动条 auto
14.精灵图sprites
A.目的:为了有效地减少服务器接收和发送请求的次数,提高页面的加载速度。
B.原理：
1.精灵图主要针对小的背景图片使用,把多个背景图片整合到一张大的图片当中。
2.主要借助背景位置来实现 background-position
3.一般情况下精灵图里面的值都是负值(x轴右边是正值,左边是负值;y轴下边是正值,上边是负值)
15.CSS三角形的做法
<style>
普通三角形
div{
width: 0;height: 0;
border: 24px solid transparent;
border-top-color: red;
}
直角三角形
div{
width: 0;height: 0;
border-color: transparent red transparent transparent;
border-style: solid;
border-width: 100px 50px 0 0
}
上边框宽度调大,下边框设置为0
</style>16.用户界面
A.鼠标样式
cursor: pointer(小手) | move(移动) | text(文本) | not-allowed(禁止）
B.取消表单轮廓 outline: none
C.防止拖曳文本域 resize: none
D.移动端清除高亮 -webkit-tap-highlight-color: transparent
17.vertical-align属性应用
它只针对行内元素或者行内块元素有效。
vertical-align: top | middle | bottom
18.图片处理
A.解决图片底部空白缝隙
原因: 图片底部会有一个空白缝隙,原因是行内块元素会和文字基线对齐。
解决: A.给图片添加 vertical-align: top | middle | bottom B.给图片转块 display: block
B.图片模糊处理 filter:blur(24px)
17.省略号显示
<style>
单行
div{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
多行
div{
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
</style>18.过渡
<style>
div{
width: 100px;height: 100px;
transition: all 1s
}
div:hover{
width: 200px;height: 200px;
}
</style>19.2D转换
A.移动:translate
transform: translate(x,y)
transform: translateX(n)
transform: translateY(n)
让一个盒子水平垂直居中的办法?
<style>
div{
position: absolute;
top: 50%;left: 50%;
transform:translate(-50%,-50%)
}
</style>B.旋转:rotate
1.transform: rotate(24deg)
2.设置转换中心点 transform-origin: x y
x y默认转换的中心点是元素中心点(50% 50%)
还可以给x y设置像素或方位名词。
C.缩放:scale
transform: scale(x,y)
20.动画
<style>
@keyframes move{
from{
transform: translateX(0px)
}
to{
transform: translateX(1000px)
}
}
div{
width：100px;
height: 100px;
background-color: red;
animation: move 2s;
}
关键词from和to等同于0%和100%
</style>21.3D转换
透视 perspective: 200px 给父元素加可以看到3d效果。
子元素开启立体空间 transform-style: preserve-3d(给父加)
A.3D移动
transform: translateX(100px)
transform: translateY(100px)
transform: translateZ(100px)
transform: translate3d(x,y,z)
其中x,y,z分别指向移动的轴的方向的距离。
B.3D旋转
transform: rotateX(180deg)
transform: rotateY(180deg)
transform: rotateZ(180deg)
transform: rotate3d(x,y,z,deg) 了解即可
22.弹性盒子
开启弹性布局 display: flex
A.设置主轴方向 flex-direction:
row(左到右) | row-reverse(右到左) | column(上到下) | column-reverse(上到下)
B.设置主轴上子元素的排列方式 justify-content:
flex-start(从头部开始) | flex-end(从尾部开始) | center(居中) | space-around(平分剩余空间) |
space-between(先两边贴边,再平分剩余空间)
C.设置子元素是否换行 flex-wrap:
nowrap(不换行) | wrap(换行)
D.设置侧轴上子元素排列方式 align-items(单行):
flex-start(上到下) | flex-end(下到上) | center(居中) | stretch(默认拉伸)
E.设置侧轴上子元素排列方式 align-content(多行):
flex-start(从头部开始) | flex-end(从尾部开始) | center(居中) | space-around(平分剩余空间) |
space-between(先两边贴边,再平分剩余空间) stretch(设置子元素高度平分父元素高度)
F.子项flex属性
flex: 1定义子项目分配剩余空间,用flex来表示占多少份数。
G.order属性
order: -1定义项目排列顺序,数值越小排列越靠前,默认为0
23.渐变
线性渐变 background-image: linear-gradient(to top,red,yellow)
径向渐变 background-image: radial-gradient(circle, red 50%, yellow 50%)
24.px与em和rem区别
A.px是固定的像素,一旦设置了就无法因为适应页面大小而改变。
B.em相对于父元素的字体大小来说的。
C.rem相对于html元素字体大小来说的。
D.rem的优点就是可以通过修改html里面的字体来改变页面中元素的大小可以整体控制。
25.媒体查询
<style>
@media screen and (min-width: 300px) and (max-width: 500px) {
div{
background-color: red
}
}
</style>
媒体查询引入资源
<link rel="stylesheet" href="kobe.css" media="screen and (min-width: 200px)">26.less
less是css的一门扩展语言,也称为css预处理器。
优点:大大简化了css的编写,降低css维护成本,让我们用更少的代码做更多的事情。
less嵌套
<style>
.kobe{
width: 200px;
height: 200px;
子元素的样式直接写到父元素的里面就好了
.curry{
color: red;
如果有伪类、交集选择器、伪元素选择器,内层选择器需要加&
&:hover{
color:blue
}
}
}
</style>less运算
A.乘号(*)和除号(/)的写法。
B.运算符中间左右有个空格隔开 1px + 5
C.对于两个不同的单位之间的值运算,运算结果的值取第一个值的单位。
D.如果两个值之间有一个值有单位,则运算结果就取该单位。