一. 基础认知
1.1 CSS引入方式
1.1.1 内嵌式:CSS写在style标签中
- 提示:style标签虽然可以写在页面任意位置,但是通常约定写在head标签中
1.1.2 外联式:CSS写在一个单独的.CSS文件中 - 提示:需要通过link标签在网页中引入
<link rel="stylesheet" href=" "></link>
1.1.3 行内式:CSS写在标签的style属性中,不推荐使用
1.2 CSS书写顺序:顺序改变样式不会改变,但是会提高浏览器的加载速度
1)浮动/display
2)盒子模型:margin、border、padding 宽度高度背景色
3)文字样式
二. 基础选择器
1.1 标签选择器:以标签命名的选择器
结构:标签名{CSS属性名: 属性值;}
作用:通过标签名,找到页面中所有这类标签,设置样式
1.2 类选择器
结构:.类名{CSS属性名: 属性值;}
作用:通过类名,找到页面中所有这类标签,设置样式
注意:一个标签可以有多个类名,类名可以重复
1.3 id选择器
结构:#id属性值{CSS属性名: 属性值;}
作用:通过id属性值,找到页面中带有这个id属性值的标签,设置样式,一般配合js使用
注意:id属性值在一个页面中是唯一的,不可重复,一个标签只能有一个id属性值,一个id选择器只能选中一个标签
1.4 通配符选择器
结构:*{CSS属性名: 属性值;}
作用:找到页面中所有的标签,设置样式
三. 文字基本样式
1.1 字体大小:font-size:数字+px(谷歌浏览器的默认字体是16)
1.2 字体粗细:font-weight:normal(400),bold(700)
1.3 字体样式:font-style:italic(倾斜),normal(正常)
1.4 字体系列:font-family,默认字体为微软雅黑
1.5 font复合属性:style weight size/line-height family,可以实现连写(顺序固定),前两个可以胜省略
1.6 文本样式
1.6.1 文本缩进: text-indent
,一般首行缩进两个字符,数字+em(一个字的大小)
1.6.2 水平对齐方式:text-align
,取值有left、center、right,除文本外,其他标签元素要居中,需要设置元素的父亲元素。
1.6.3 文本修饰:text-decoration
,取值有underline、none、line-through(删除线)、overline(上划线)
1.7 行高:line-height
数字+px或者是当前font-size的倍数
四. 选择器进阶
1.1 后代选择器:空格
作用:选择所有相关的后代,包括儿子、孙子、重孙子…
语法:父选择器1 后代选择器2 {CSS}
1.2 子代选择器:>
作用:只选择儿子元素
1.3 并集选择器:,
作用:同时选择多组标签,设置相同的样式
语法:选择器1,选择器2 {CSS}
1.4 交集选择器
作用:找到页面中既能被选择器1选中,又能被选择器2选中的标签,设置样式(如果有标签选择器,必须写在最前面)。
语法:选择器1.选择器2
1.5 伪类选择器
作用:鼠标悬停在元素上的状态,设置样式
语法:选择器:hover {CSS}
1.6 Emmett语法:提速
五. 背景相关标签和属性
1.1 背景颜色:background-color
rgba()其中a是透明度,取值为0-1
1.2 背景图:background-image:url(' ')
1.3 背景平铺:background-repeat
取值 | 效果 |
---|---|
repeat | 水平和垂直方向都平铺 |
no-repeat | 不平铺 |
repeat-x | 沿着x轴平铺 |
repeat-y | 沿着y轴平铺 |
1.4 背景位置:background-position:水平方向位置 垂直方向位置
取值:left、right、center、top、bottom,也可以设置像素值
1.5 背景相关属性连写(不分顺序):color image repeat position
六. 元素显示模式**
1.1 块级元素:独占一行,可以设置宽高,div、p、h
1.2 行内元素:一行可以显示多个,不可以设置宽高,宽高默认由内容撑开,a、span
1.3 行内块元素:一行可以显示多个,可以设置宽高,input、text-area、img
1.4 显示模式转换
属性 | 效果 |
---|---|
display:block | 转换成块级元素 |
display:inline-block | 转换成行内块元素 |
display:inline | 转换成行内元素 |
七. CSS特性
1.1 继承性
特性:子元素默认继承父亲元素样式的特点,文字控制属性都可以继承,控制标签的都不能继承。
1.2 层叠性
特性:同一个标签可以设置不同的样式,若是设置了相同的样式,则最后的样式会生效。当样式冲突时,只有当选择器优先级相同时,才能通过层叠性判断结果。
1.3 优先级
特性:不同选择器具有不同的优先级,优先级高的选择器样式会覆盖优先级低选择器样式
优先级公式:继承<通配符选择器<标签选择器<类选择器<id选择器<行内样式<!imortant
八. 盒子模型基本知识
1.1 盒子:内容区域(content)、内边距区域(padding)、边框区域(border)、外边距区域(margin)构成。
1.2 border的属性:像素 线型 颜色,单方向的边框设置:border-方位词(left\right\top\botto)
1.3 padding属性:内边距设置从上边距开始顺时针设置,使用padding确定内容与边框的关系更灵活,而不是直接固定死标签的大小。
1.4 内减模式:设置border或者padding时盒子就会被撑大,为了解决这个问题,给盒子添加属性box-size:border-box
,浏览器会自动计算多于大小,自动在内容中减去。
1.5 清除默认样式:margin:0;padding:0
1.6 版心居中:网页的有效内容 margin:0 auto;
1.7 外边距折叠现象:
1.7.1 垂直布局的两个盒子:两个盒子分别设置上下margin时会合并而不是相加,最终两个盒子的距离取得是margin的最大值,所以一般只给一个盒子设置margin
1.7.2 互相嵌套的两个盒子,儿子的margin-top会作用在父亲上,导致父亲一起往下移动。
解决办法:给父元素设置padding-top或者设置overflow:hidden
九. CSS浮动
1.1 结构伪类基本用法
1.1.1结构伪类选择器:根据元素的结构关系查找元素
选择器 | 说明 |
---|---|
E:first-child{} | 匹配父元素中的第一个子元素 |
E:last-child{} | 匹配父元素中的最后一个子元素 |
E:nth-child(n){} | 匹配父元素中的第n个子元素 |
E:nth-last-child(n){} | 匹配父元素中的倒数第n个子元素 |
1.1.2 结构伪类公式:n可以是数字,也可以是公式
功能 | 公式 |
---|---|
偶数 | 2n、even |
奇数 | 2n+1、2n-1、odd |
找到前5个数 | -n+5 |
找到从第5个数往后 | n+5 |
1.1.3 伪元素:由CSS模拟出的标签效果,用来做装饰性的不重要的小图
伪元素 | 作用 |
---|---|
::before | 在父元素内容的最前添加一个伪元素 |
::after | 在父元素内容的最后添加一个伪元素 |
注意:必须设置content属性才能生效、伪元素默认是行内元素
1.2 浮动的作用
问题:当代码中的行内块标签或行内标签在写时换行,那么会产生一个空格的的距离
解决:使用float属性
1.3 浮动的特点
1)浮动元素会脱离标准流,但是里面的内容不会
2)浮动元素比标准流高半个级别,可以覆盖标准流中的元素
3)浮动元素是顶对齐,下一个浮动元素会在上一个浮动元素后面左右浮动
4)浮动后的标签具有行内块的特性
5)浮动后的元素不能通过text-align和margin:0 auto居中盒子
1.4 清除浮动:父子级标签,子级浮动,如果父级没有高度,那么后面的标准流盒子会受影响。
解决办法:
1)父级元素可以加高度的就加高度。
2)额外标签法:在父元素内容的最后添加一个块级元素,给添加的块级元素设置clear:both
3)单伪元素:用伪元素代替额外标签。在父元素标签中添加clearfix属性,然后添加CSS样式
.clearfix::afetr {
content:'';
display:block;
clear:both;
/*下面的可以不写,为了兼容性*/
height: 0;
visibility: hidden;
}
4)双伪标签:在父元素标签中添加clearfix属性,然后添加CSS样式
/*before:解决外边距塌陷问题*/
。clearfix::before,
.clearfix::after {
content: '';
display:table;
}
/*真正清除浮动的标签*/
.clearfix::after {
clear: both;
}
5)直接给父元素设置overflow:hidden
1.5 定位方式:通过CSS的position属性来设置
属性值 | 语义 |
---|---|
static | 静态定位 :按照标准流摆放位置 |
relative | 相对定位:相对于原来位置来说,原来位置保留,不影响其他盒子 |
absolute | 绝对定位:相对于祖先元素来说,没有祖先元素或者祖先元素没有定位,以浏览器为准;如果祖先元素有定位,则以最近一级的有定位的祖先元素为参考位置,原来的位置不保留 |
fixed | 固定定位:以浏览器的可视区域为准,跟父元素无关,不保留原先的位置,是一种特殊的绝对定位 |
定位盒子进行移动:
边偏移属性 | 描述 |
---|---|
top | 顶端偏移量,定义元素相对于其父元素上边线的距离 |
bottom | 底部偏移量,定义元素相对于其父元素下边线的距离 |
left | 左部偏移量,定义元素相对于其父元素左边线的距离 |
right | 右部偏移量,定义元素相对于其父元素右边线的距离 |
十、动画效果
1.1 属性过渡:从一个状态渐渐过渡到另外一个状态,一般与hover配用(谁做过渡给谁加)
transition:要过渡的属性 花费时间 运动曲线 何时开始
1)属性:想要变化的CSS属性,如果所有属性都变化过渡,写all
2)花费时间:单位是秒,必须写
3)运动曲线:默认是ease(逐渐慢下来),可以省略
其他属性:linear(匀速)、ease-in(加速)、ease-out(减速)、ease-in-out(先加速后减速)
4)何时开始:单位是秒,必须写,可以设置延迟触发的时间,默认是0,可以省略
1.2 2D转换
1.2.1 rotate 旋转:transform:rotate(xdeg)
重点:角度为正时是顺时针,负值是逆时针,旋转中心默认是元素中心点
1.2.2 设置旋转的中心点:transform-origin:x y
(x,y)是旋转的位置,带单位
1.2.3 scale 缩放:transform:scale(x,y)
,写倍数,不带单位,等比例缩放只写一个参数(宽度),不会影响其他的盒子
1.3 CSS3动画基本使用
1.3.1 制作动画的步骤:先定义动画,再调用
方式:1)使用keyframes定义动画
@keyframes 动画名称 {
0% {
样式;
}
100% {
样式;
}
}
0%是动画的开始,100%是动画的完成,也可以使用from-to来代替
2)调用动画:animation-name:动画名称、animatio-duration:持续时间
1.3.2 常见属性
属性 | 描述 |
---|---|
@keyframes | 规定动画 |
animation | 所有动画属性的简写,除了animation-play-style |
animation-那么 | 规定动画的名称,必要 |
animation-duration | 规定动画完成一个周期所花费的时间 |
animation-timing-function | 规定动画的速度曲线,默认是ease |
animation-delay | 规定动画何时开始,默认为0 |
animation-iteration-count | 规定动画被播放的次数,默认是1 |
animation-direction | 规定动画是否在下一周期逆向播放,“alternate” |
animation-play-state | 规定动画是否运行或暂停 |
animation-fill-mode | 规定动画结束后的状态,保持forwords,回到起始backwards |
1.4 3D转换:近大远小,后面的被遮挡
1.4.1 3D位移translate3d,比2D多了一个Z轴的变换,需要透视体现效果,将效果加在元素的父亲上。
1.4.2 透视 perspective:理解成3D物体在2D平面内投影
1)视距是人眼到屏幕的距离;
2)距离视觉点越近的在电脑平面成像越大,越远成像越小
1.4.3 3D旋转 rotate3d
1.4.4 3D呈现 transform-style:控制子元素是否开启三维立体效果
注意:代码写给父级,但受影响的是儿子