CSS常用文档
-
CSS官方文档地址
-
CSS推荐文档地址
-
查询CSS是否可用
45(掌握)认识CSS-CSS的发展
1.认识CSS
-
CSS表示层叠样式表(cascading style sheet)又称为串样式列表,级联样式表,串接样式表,阶层式样式表,是为网页添加样式的代码
2.CSS的历史
-
总结
CSS的出现是为了美化HTML的,并且让结构(HTML)与样式(css)分离
-
美化方式一:给HTML添加各种各样的样式(颜色,字体,大小,下划线)
-
美化方式二:对HTML进行布局,按照某种结构显示(CS进行布局-浮动,flex,grid)
-
46(掌握)三种CSS的编写样式
1.CSS如何编写?
-
语法规则:属性+属性值
-
声明,一个单独的CSS规则,如color:red,用来指定添加的CSS样式
-
属性名(property name),要添加的CSS规则的名称
-
属性值(property value),要添加的CSS规则的值
-
2.如何将CSS样式应用到元素上?
-
CSS提供了3种方法
-
内联样式(inline style)
-
内部样式表(internal style sheet),文档样式表,内嵌样式表
-
外部样式表(external style sheet)
-
-
内联样式
-
内联样式=内行样式
-
-
CSS样式之间用 分号; 隔开, 每条CSS样式后面都加上分号
-
内部样式表
-
将CSS放在HTML<head>元素的<style>元素中
-
-
外部样式表
-
指将CSS编写在一个独立的文件中,通过<link>元素引进来
-
使用外部样式表的2个步骤
-
第一步:将CSS样式在一个独立的css文件中编写(后缀名为.css)
-
第二部:通过<link>元素引进来
-
-
-
-
@import
可以在style元素或者CSS文件中使用@import导入其他的CSS文件
-
-
注意:
-
-
编写代码的时候,注意是否有空格和圆点
-
-
-
css文档中,[style.css]文档中的.title和[text.css]中h1前面没有圆点的区别?
-
47(掌握)CSS的注释和建议
1.CSS的注释
CSS的注释在<head>中的<style>元素里
-
CSS的注释为/* 注释内容*/
-
-
html的注释为<!--注释内容->
48(理解)常见的CSS和学习文档推荐
1.必须掌握的CSS属性
(开发中90+%的时间写的都是这些属性)
2.CSS属性的官方文档
-
CSS官方文档地址
-
CSS推荐文档地址
-
查询CSS是否可用
3.目前需要掌握的CSS属性
49(掌握)CSS常见的5个属性
1.CSS属性-background-color
-
决定背景色
2.CSS属性-color
-
color属性用来设置文本内容的前景色
-
文字/装饰线/边框/外轮廓等的颜色
-
50(掌握)综合案例
案例-星球介绍
51(掌握)知识补充-link元素的使用
1.link元素
-
link元素时外部资源链接元素,规范了文档与外部资源的关系
-
link元素通常是在head元素中
-
-
最常用的链接时样式表(CSS)
-
还可以用来创建站点图标(比如:"favicon 图标)
-
-
link最常见的属性
-
href:指定被链接资源的URL(可以使绝对的,也可以是相对的)
-
rel:指定链接类型
-
icon:站点图标
-
stylesheet:CSS样式
-
常见的链接类型
-
-
52(了解)进制的由来和其他进制表示
1.认识进制
-
进制:当数字达到某个值时进一位(比如从1位变成2位)
-
数到9的时候,用一位已经表示不了了,就进一位变成2位
-
二进制,八进制,十六进制
53(掌握)CSS的颜色各种表示方法
1.CSS颜色的表示方法
-
颜色关键字(color keywords)
-
不区分大小写,表示一个具体的颜色
-
-
RGB颜色
-
RGB是一种色彩空间,通过R(red,红色),G(green,绿色),B(blue,蓝色)三原色通过不同比例组成不同的颜色
-
RGB各个原色的取值范围是0~255
-
2.RGB的表示方法
-
RGB可以通过前缀的十六进制和函数(rgb() ,rgba())标记表示
-
方式一:十六进制符号:#RRGGBB[AA]
-
-
R(红),G(绿),B(蓝)和A(alpha)是十六进制字符(0-9,A-F),A是可选的
-
比如: #ff0000=#ff0000ff
-
-
-
方式二:十六进制符号:RGB[A]
-
R(红),G(绿),B(蓝)和A(alpha)是十六进制字符(0-9,A-F)
-
三位数符号(#RGB)是六位数形式(#RRGGBB)的缩写版
-
比如:#f09=#ff0099,都表示同一种颜色
-
-
-
-
四位数符号(#RGBA)是八位数形式(#RRGGBBAA)的缩写版
-
比如:#0f38=#00ff3388,都表示同一种颜色
-
-
53-1(掌握)chrome开发工具的使用
1.chrome浏览器开发者工具
-
打开调试工具
-
方式一:右键-检查
-
方式二:快捷键-F12
-
53-2(理解)浏览器的渲染流程
1.浏览器的渲染流程
55(了解)CSS文本属性-字体属性-选择器
56(掌握)文本属性-text-decoration
1.CSS属性-text-decoration(常用)
-
设置文字的装饰线
-
常见取值:
-
none:无任何装饰线
-
可以去除a元素默认的下划线
-
-
underline:下划线
-
overline:上划线
-
line-through:中划线(删除线)
-
56.-1(了解)文本属性-text-transform
1.text-transform
-
text-transform:用于设置文字的大小转换
-
常见值:
-
capitalize:使首字母大写,每个单词的首字符变成大写
-
uppercase:大写字母,每个单词的所有字符变为大写
-
lowercase:小写字母,每个单词的所有字符变为小写
-
none:没有任何影响
-
2.text-indent
-
用于设置第一行内容的缩进
-
刚好是缩进2个文字
可以设置成px或者em
57(掌握)文本属性-text-align基本使用
1.text-align
-
text-align直接翻译就是设置文本的对齐方式
-
MDN:定义行内内容 (例如文本) 如何相对它的块父元素对齐
-
常用的值
-
left:左对齐
-
right:右对齐
-
center:正中间显示
-
justify:两端对齐
-
58(掌握)文本属性-text-align本质
-
text-align只针对行内级元素有效,所以在练习中,绿色背景无法在红色背景中居中,绿色背景的代码中<div>属于块级元素,需要把它改为行内级元素才行
-
把块级元素改为行内元素的2种方式
59(了解)文本属性-text-align-justity
-
text-align-justity文本居中(但是对最后一行无效)
-
如何对最后一行也使用文本居中?
-
text-align-last
-
60(了解)文本属性-word-letter-spacing
-
设置字母间的间距letter-spacing
-
设置单词间的间距word-spacing
61(掌握)CSS字体属性-font-size
1.font-size 决定字体的大小
-
常用设置
-
具体数值+单位
-
比如100px
-
也可用em单位,1em表示100%,2em表示200%,0.5em表示50%(不推荐这种方式)
-
-
百分比
-
基于父元素的font-size计算,比如50%表示等于父元素font-size的一半
-
-
62(掌握)字体属性-font-family
-
font-family设置文字的字体名称
-
可以设置1个或多个字体名称
-
浏览器会选择列表中第一个该计算机上有安装的字体
-
通过@font-face指定的可以直接下载的字体
-
-
可以通过单独新建一个css文件,通过link引入
-
注意link不可以放在<style>元素中,需要和<style>元素为兄弟关系,这样输入link元素后,后面的值才会自动出来,否则会报错
-
63(掌握)字体属性-font-weight
-
font-weight设置文字的粗细(重量)
-
常见的取值
-
100|200|300|400|500|600|700|800|900,每一个数字表示一个重量
-
normal:等于400
-
bold:等于700
-
-
-
案例:
-
64(掌握)字体属性font-style-variant
1.font-style设置字体斜体
-
有2种方式
-
方式一:italic
-
方式二:oblique
2.font-variant影响小写字母的显示形式
-
可以设置的值
-
normal:常规显示
-
small-caps:将小写字母替换为缩小过的大写字母(将小写字母替换为大写字母,但还是占据小写字母的高度)
-
65(掌握)文本居中显示line-height
-
line-height 设置文本的行高
-
一行文字所占据的高度
-
严格定义:两行文字基线之间的间距
-
-
line-height和height的区别
-
height:元素的整体高度
-
line-height:元素每一行文字所占据的高度
-
-
应用:假如div中只有一行文字,如何让这行文字在div内部垂直居中?
-
让line-height等同于height
-
66(掌握)font缩写属性的语法规则
-
font的缩写属性
-
font缩写属性的规则
-
-
案例
-
注:规则可以去MDN文档查询
67(了解)CSS选择器-统配选择器的使用
-
开发中需要找到特定的网页元素进行设置样式,通过CSS选择器找
-
CSS选择器:按照一定规则选出符合条件的元素,给它添加CSS样式
-
选择器的种类
-
通配符
-
注意*在编程语言里表示通配符
-
案例
-
-
通用选择器
-
所有的元素都会被选中
-
一般用来给所有的元素做一些通用性的设置
-
比如内边距,外边距
-
重置一些内容
-
-
68(掌握)简单选择器
-
简单选择器是开发中用的最多的选择器
-
案例
-
id值是唯一的,不能重复
-
id如果有多个单词组成,单词间可以用中划线-或者下划线_链接,也可以使用驼峰表示(首字母大写)
-
69(掌握)CSS选择器-属性选择器
-
属性选择器(attribute selectors]
-
拥有某一个属性[att]
-
属性等于某个值[att=val]
-
70(掌握)CSS选择器-后代选择器
-
后代选择器(descendant combinator)
-
后代选择器一:所有的后代(直接/间接的后代)
-
选择器之间以空格分割
-
-
后代选择器二:直接子代选择器(必须是直接子代)
-
选择器之间以>分割
-
-
71(理解)CSS选择器-兄弟选择器
-
兄弟选择器一:相邻兄弟选择器
-
使用符号 + 连接
-
-
兄弟选择器二:普遍兄弟选择器
-
使用符号"波浪号"连接
-
72(掌握)选择器-选择器组-交集-并集
-
交集选择器
-
需要同时符合两个选择器条件(两个选择器紧密连接)
-
作用:开发中为了精准的选择某一个元素
-
注意: 注意div和.one中间没有空格,有空格就变成了后代选择器
-
-
-
并集选择器
-
符合一个选择器条件即可(两个选择器以逗号, 分割)
-
作用:为了给多个元素设置相同的样式
-
73(理解)认识伪类和常见的伪类
1.伪类
-
伪类: 是选择器的一种,用于选择处于特定状态的元素
-
比如:当鼠标放在一个元素上时,会显示另外一个颜色
2.常见的伪类
-
动态伪类
-
:link , :visited , :hover , :active , focus
-
-
目标伪类
-
:target
-
-
语言伪类
-
:lang
-
-
元素状态伪类
-
:enabled , :disabled , :checked
-
-
结构伪类
-
否定伪类
-
:not()
-
所有伪类:伪类 - CSS:层叠样式表 | MDN
74(掌握)伪类-动态伪类
1.动态伪类
-
动态伪类
-
使用举例
-
a:link 未访问的链接
-
a:visited 已访问的链接
-
a:hover 鼠标挪动到链接上
-
a:active 激活的链接(鼠标在链接上长按住未松开)
-
-
-
使用注意
-
:hover必须放在:link和:visited后面才能完全生效
-
:active必须放在:hover后面才能完全生效
-
建议编写顺序::link ,:visited ,:hover ,:active
-
-
除了a元素,:hover,:active也能用在其他元素上,比如div、span,h1
2.动态伪类-:focus
-
:focus指当前拥有输入焦点的元素(能接收键盘输入)
文本框一聚焦后,背景就会变成红色
-
因为a元素可以被键盘的Tab键选中聚焦,所以:focus也适用于a元素
-
动态伪类编写顺序为
-
link ,:visited ,:focus ,:hover ,:active
-
-
直接给a元素设置样式,相当于给a元素的所有动态伪类都设置了red
-
相当于a:link、a:visited、a:hover、a:active、a:focus的color都是red
-
76(了解)伪元素first-line-letter
-
常用的伪元素
-
:first-line, ::first-line, 对首行文本设置属性
-
:first-letter, ::first-letter, 对首字母设置属性
-
:before, ::before
-
:after, ::after
注意:为了区分伪元素和伪类,伪元素最好用2个冒号
-
77(掌握)伪元素-before-after
-
::before和::after用来在一个元素的内容之前或之后插入其他内容(文字\图片)
-
常通过content属性来为一个元素添加修饰性的内容
-
添加<span></span>和content的区别
-
<span>与内容不在一行,那么内容和<span>中的内容之间会有空格
-
<span>与内容在一行时,内容与<span>之间没有空格,但是可读性就会变差,因此使用befor和after伪元素
-
使用伪元素在内容之前或者之后添加新内容时,可以在属性值后面添加item,进行批量添加
-
-
注意:@import可以通过""和url两种方式引入
-
调整after中图标的位置:position:relative(相对定位)
-
注意
-
使用伪元素的过程中,content不能省略
-
伪元素为行内非替换元素,不能设置宽度和高度,所以需要使用display:inline-block
-
78(掌握)CSS属性的特性-继承性
1.css的属性继承
-
CSS的某些属性具有继承性
-
如果一个属性具备继承, 那 在该元素上设置后 , 它的后代元素都可以继承这个属性 ;
-
如果后代元素自己有设置该属性 , 那么优先使用后代元素自己的属性 (不管继承过来的属性权重多高 )
-
-
如何知道一个属性是否具有继承性?
-
常见的font-size/font-family/font-weight/line-height/color/text-align都具有继承性
-
查MDN文档看属性是否具有继承性
-
2.继承
-
默认继承
-
继承计算值(了解)
-
强制继承
79(掌握)CSS属性的特性-层叠性
-
CSS的翻译是层叠样式表,什么是层叠:
-
多个样式属性覆盖之后,哪个会生效?
-
选择器的权重
80(掌握)HTML元素的特性-块级-行内级
-
div是块级元素会独占一行,span是行内级元素会在同一行显示
-
块级元素:独占父元素的一行
-
行内级元素:多个行内级元素可以在父元素的同一行显示
-
通过CSS修改元素类型
-
div是块级元素,span是行内级元素
-
div是块级元素是因为浏览器默认设置了display的属性
-
-
CSS属性-display(修改元素的显示类型).有4个常用值
-
block:让元素显示为块级元素
-
inline:让元素显示为行内级元素
-
inline-block:让元素同时具备行内级,块级元素的特征
-
none:隐藏元素
-
81(掌握)display的值-block-inline
-
CSS属性-display
-
inline-block值的特点
-
可以和其他元素在同一行显示,还可以设置宽度和高度
-
-
伪元素after也是一个行内级元素,添加红色小方格时不可以设置宽度和高度,所以需要设置display:inline-block,才能设置宽高
-
总结
82(理解)HTML元素编写的注意事项
-
块级元素:h1/p/div
行内级元素:span/a/img/strong
-
块级元素里面可以嵌套块级元素和行内级元素
-
不要在p元素里面放div元素
-
行内级元素中不要放块级元素
83(掌握)HTML元素的隐藏四种方法
-
元素隐藏的4种方法
-
方法一 : display设置为 none
-
元素不显示出来 , 并且也不占据位置 , 不占据任何空间 (和不存在一样 );
-
-
方法二 : visibility设置为hidden
-
设置为 hidden, 虽然元素不可见 , 但是会占据元素应该占据的空间 ;
-
默认为 visible,元素是可见的 ;
-
-
方法三 : rgba设置颜色 , 将a的值设置为 0
-
rgba的a设置的是 alpha 值, 可以设置透明度 , 不影响子元素 ;
-
-
方法四 : opacity设置透明度 , 设置为 0
-
设置整个元素的透明度 , 会影响所有的子元素;
-
-
84(理解)css不生效的原因
85(掌握)认识盒子模型-盒子模型的四部分
-
盒子模型-HTML中的每一个元素都可以看做是一个盒子,具备4个属性
-
内容(content)
-
元素的内容:width/height
-
-
内边距(padding)\
-
元素和内容之间的间距
-
-
边框(border)
-
元素自己的边框
-
-
外边距(margin)
-
元素和其他元素之间的间距
-
-
-
盒子模型的四边
-
因为盒子有四边,所以margin/padding/border/都包括top/right/bottom/left四个边
-
86(掌握)盒子模型-内容-width-height
-
宽度设置:width
-
高度设置:height
-
对于行内级非替换元素来说,设置宽高是无效的
-
-
设置其他属性
-
min-width:最小宽度,无论内容多少,宽度都>=min-width
-
max-width:最大宽度,无论内容多少,宽度都<=max-width
-
移动端适配时,可以设置最大宽度和最小宽度
-
87(掌握)盒子模型-内边距-padding
-
padding属性用于设置盒子的内边距, 通常用于设置边框和内容之间的间距;
-
padding包括四个方向, 所以有如下的取值:
-
padding-top:上内边距
-
padding-right:右内边距
-
padding-bottom:下内边距
-
padding-left:左内边距
-
-
padding单独编写是一个缩写属性:
-
padding-top、padding-right、padding-bottom、padding-left的简写属性
-
padding缩写属性是从零点钟方向开始, 沿着顺时针转动的, 也就是上右下左;
-
-
padding的其他值
88(掌握)盒子模型-边框-border
-
border 用于设置盒子的边框
-
border有三个属性width,style,color
-
设置边框的方式
-
边框样式的设置值
-
圆角-border-radius: 用于设置盒子的圆角
-
border-radius 常见的值
-
数值:通常用来设置小的圆角, 比如6px;
-
百分比:通常用来设置一定的弧度或者圆形;
-
-
border-radius其实是一个缩写属性
-
将border-top-left-radius、border-top-right-radius、border-bottom-right-radius,和border-bottom-left- radius 这四个属性简写为一个属性。
-
一个个圆角设置比较少见
-
-
如果一个元素是正方形, 设置border-radius大于或等于50%时,就会变成一个圆
89(掌握)盒子模型-外边距-margin
-
margin属性用于设置盒子的外边距, 通常用于元素和元素之间的间距;
-
margin包括4个方向:
-
margin-top:上外边距
-
margin-right:右外边距
-
margin-bottom:下外边距
-
margin-left:左外边距
-
-
margin单独编写是一个缩写属性:
-
margin-top、margin-right、margin-bottom、margin-left的简写属性
-
margin缩写属性是从零点钟方向开始, 沿着顺时针转动的, 也就是上右下左;
-
-
magin的其他值
90(掌握)盒子模型-padding和margin对比
-
padding和margin都能设置子元素到父元素之间的边距,但都有缺点
-
用padding设置时,设置的边距超过父元素的宽度时,子元素会把父元素撑开;
-
用margin设置时,设置top的边距超过父元素的高度时,会把父元素撑高
-
-
总结:
-
margin一般是用来设置兄弟元素之间的间距
-
padding一般是用来设置父子元素之间的间距
-
91(掌握)盒子模型-margin上下传递问题
-
margin-top传递
-
如果块级元素的顶部线和父元素的顶部线重叠,那么这个块级元素的margin-top值会传递给父元素
-
-
margin-bottom传递
-
如果块级元素的底部线和父元素的底部线重写,并且父元素的高度是auto,那么这个块级元素的margin-bottom值会传递给父元素
-
-
如何防止出现传递问题?
-
给父元素设置padding-top\padding-bottom
-
给父元素设置border
-
触发BFC(block formation context)格式化上下文: 设置overflow为auto
-
92(掌握)盒子模型-margin上下折叠模型问题
-
垂直方向上相邻的2个margin(margin-top、margin-bottom)有可能会合并为1个margin,这种现象叫做collapse(折叠)
-
水平方向上的margin(margin-left、margin-right)永远不会collapse
-
折叠后最终值的计算规则:两个值进行比较,取较大的值
-
如何防止margin collapse?
-
只设置其中一个元素的margin
-
两个兄弟块级元素之间上下margin的折叠
-
父子块级元素之间margin的折叠
注意:父子之间最好不用margin,用父元素的padding来设置间距,避免折叠
93(掌握)块级元素的水平居中
把块级元素水平居中的2种方法
-
方法1:将块级元素改成行内块级元素
-
方法2:margin设置成auto
94(理解)关于margin-auto值的优劣分析
-
margin-auto可以设置水平居中,但是没有办法协调多个块级元素进行垂直居中的弊端,后面需要借助flexible进行设置.
95(掌握)盒子模型-外轮廓-outline
-
outline表示元素的外轮廓
-
不占用空间
-
默认显示在border的外面
-
-
outline相关属性有
-
outline-width: 外轮廓的宽度
-
outline-style:取值跟border的样式一样,比如solid、dotted等
-
outline-color: 外轮廓的颜色
-
outline:outline-width、outline-style、outline-color的简写属性,跟border用法类似
-
-
应用实例
-
去除a元素,input元素的focus效果
注意:a元素不单独设置:link,:visited,:hover,:focus,:active时,表示对这些统一进行了设置.
-
96(掌握)盒子模型-盒子阴影-box-shadow
-
box-shadow属性可以设置一个或者多个阴影
-
每个阴影用<shadow>表示
-
多个阴影之间用逗号,隔开,从前到后叠加
-
-
<shadow>的常见格式:
-
盒子阴影在线查看:Box Shadow CSS Generator | 𝗧𝗛𝗘 𝗕𝗘𝗦𝗧 𝗢𝗡𝗟𝗜𝗡𝗘 𝗖𝗦𝗦 𝗚𝗘𝗡𝗘𝗥𝗔𝗧𝗢𝗥
97(理解)盒子模型-文字阴影-text-shadow
-
text-shadow用法类似于box-shadow,用于给文字添加阴影效果
-
可以同时叠加多个shadow
-
-
<shadow>的常见格式如下
-
网站测试文字的阴影:Text Shadow CSS Generator Online
98(掌握)盒子属性在行内非替换元素的特殊性
-
盒子属性:
-
内容content(width/height)
-
内边距padding
-
边框border
-
外边距margin
-
-
行内非替换元素:span/a/strong/i
-
盒子属性的特殊性
98.1(掌握)盒子尺寸计算box-sizing
-
前景色有没有设置到border下面(有设置)
-
前景色会在border没有设置颜色的情况下,显示出来color颜色
-
box-sizing用来设置盒子模型中宽高的行为
-
content-box:padding,border都布置在width,height外边
-
border-box:padding,border都布置在width,height里面
-
98.2(掌握)盒子模型-案例练习1
-
元素水平居中的方法
-
行内级元素(包括inline-block元素)
水平居中:在父元素中设置text-align:center
-
块级元素
水平居中:margin:0 auto
京东案例:
-
99(掌握)盒子模型-案例练习2
-
小米商品展示案例
-
单行显示省略号
-
100(掌握)盒子模型-案例练习3
-
注意
-
display:-webkit-box:用来设置多行保留时显示省略号
-
文本显示一行出现省略号
-
文本显示2/3行出现省略号
102(掌握)设置背景-background-image
-
background-image用于设置元素的背景图片
会盖在 (不是覆盖 )background -color 的上面
-
如果设置多张图片
设置的第一张图片将显示在最上面 ,其他图片按顺序层叠在下面
-
注意:如果设置了背景图片后,元素没有具体的宽高是不会显示出来的
103(掌握)设置背景-repeat-size-position
1 background-repeat
-
background-repeat设置图片是否要平铺
-
常见的设置值:
-
repeat :平铺
-
no -repeat:不平铺
-
repeat -x:只在水平方向铺
-
repeat -y:只在垂直平方向铺
-
2 background-size
-
background-size用于设置背景图片的大小
-
auto:默认值,以背景图本身大小显示
-
cover:缩放背景图,以完全覆盖铺满元素 ,可能背景图片部分看不见
-
contain :缩放背景图,宽度或者高铺满元素但是图片保持宽高比
-
<pecentage>:百分比,相对于背景区(例如:100% 100%)
-
length :具体的大小,比如 100px
-
3 background-position
-
background-position设置背景图片在水平、垂直方向上的具体位置
-
可以设置具体的数值:比如20px 30px;
-
水平方向可以设置:left,center,right
-
垂直方向可以设置:top,center,bottom
-
如果只设置了1个方向,另一个方向默认是center
104(掌握)设置附加-attachment-缩写属性
-
background-attachment决定图像的位置是在视口内固定,或者随着包含它的区块滚动
-
设置的值
-
scroll:此关键属性值表示背景相对于元素本身固定,而不是随着它的内容滚动(内容滚动,背景图片不动)
-
local :此关键属性值表示背景相对于元素的内容固定。如果一个元素拥有滚动机制,背景将会随着元素的内容滚动(内容滚动,背景图片也滚动)
-
fixed:此关键属性值表示背景相对于视口固定。 即使一个元素拥有滚动机制,也不会随着元素的内容滚动
-
-
background是一些列背景相关属性的简写属性