html+css知识点全面总结(二)
文章目录
- html+css知识点全面总结(二)
- 1.css的引入方式
- 2.css选择器
- 3.字体样式
- 4.font属性连写(了解)
- 5.文本缩进
- 6.文本(内容)对齐方式
- 7.text-align:center能让哪些元素水平居中?
- 8.文本修饰
- 9.行高 line-height
- 10.行高-单行文本垂直居中
- 11.颜色的取值方法(了解)
- 12.标签水平居中(拓展)
- 13.后代选择器
- 14.子代选择器
- 15.并集选择器
- 16.交集选择器
- 17.hover伪类选择器
- 18.背景颜色 设置透明色
- 19.背景图片
- 20.背景平铺
- 21.背景位置
- 22.背景相关属性连写
- 23.img标签和背景图片的区别(拓展)
- 24.元素显示模式
- 25.拓展1:HTML嵌套规范注意点
- 26.CSS三大特性-继承性
- 27.继承失效的特殊情况(拓展)
- 28.CSS三大特性-层叠性
- 29.CSS三大特性-优先级
- 30.优先级权重叠加计算
1.css的引入方式
引入方式 | 书写位置 | 作用范围 | 使用场景 |
---|---|---|---|
行内式 | css写在标签的style属性中 | 当前标签 | 配合js使用 |
内嵌式(内部样式) | css写在style标签中(通常写在head里) | 当前页面 | 小案例 |
外联式(外部样式) | 单独的css文件,通过link标签引入 | 多个页面 | 项目中使用 |
实际开发中行内式一般不用
css中文名称:层叠样式表
样式优先级:行内式>内嵌(内部)式>外联式>浏览器默认样式
2.css选择器
- 标签选择器 标签名{css属性名:属性值;} 所有的标签都生效
- 类选择器 .类名{css属性名:属性值;}
- id选择器 #id 属性值{css属性名:属性值;}
- 通配符选择器 *{css属性名:属性值;} 作用:找到页面中的所有标签,设置样式 注意:开发中极少使用,一般用于去除标签默认的margin和padding
class选择器:通过类名来选择标签
注意:
-
类选择器以点开头,由字母、数字、下划线、中划线组成,但是不能数字或中划线开头(尽可能做到见名知意 多个单词用驼峰命名法)
-
类名可以重复并且一个标签可以同时拥有多个类名,类名之间用空格隔开
id选择器:针对性更强,主要配合js代码使用
注意:
1.所有标签都有id属性
2.id属性类似于身份证号码,在一个页面中是唯一的,不可重复的!
3.一个标签上只能有一个id属性值!!
4.一个id选择器只能选中一个标签!!
选择器优先级:id选择器>class类选择器>元素选择器
通配符选择器:*{} 能够选择页面中的所有标签
主要应用:初始化操作,清楚默认的内外边距。
*{
margin:0;
padding:0;
}
3.字体样式
-
字体大小:font-size 谷歌浏览器默认字体大小16px 最小只能显示到12px
-
字体粗细:font-weight
属性值:
关键字:
bold 加粗
normal 正常
100-900的整百数字:
700:加粗
400:正常
-
字体样式:font-style
属性值:
normal:正常
italic:倾斜 谐音记忆:italic谐音“意大利”,意大利有一个比萨斜塔
-
字体类型:font-family “Microsoft YaHei”、微软雅黑、黑体等… 无衬线字体(sans-serif)
设置多个字体是做备选用;如果一个字体有多个英文单词,那么要使用引号包裹。
4.font属性连写(了解)
字体font相关属性的连写 中间用空格隔开。
属性名:font(复合属性)
取值:
font:style weight size family 可以省略前两个直接写size 和family 前两个会变成默认值,如果跟单一写法连用,前面写的会被覆盖。
font:字体是否倾斜 是否加粗 字体大小 字体系列
5.文本缩进
文本缩进:text-ident
取值:
- 数字+px
- 数字+em(推荐:em单位,响应式的单位,1em=当前标签的font-size的大小)
text-indent缩进
浏览器默认字号是16px 一般indent取值用em em一个字的大小
6.文本(内容)对齐方式
作用:让大盒子里面的内容水平居中
属性名:text-align
取值:left center right
让大盒子水平居中的方式:margin:0 auto;
注意:
text-align可以让标签里面的内容居中,让div居中是让盒子居中 ,所以不能用text-align,让大盒子居中要用 margin:0 auto
7.text-align:center能让哪些元素水平居中?
1.文本
2.span标签、a标签
3.input标签、img标签
注意点:如果需要以上元素水平居中,text-align:center需要给以上元素的父元素设置!!
让h1中的文字居中,要给h1加上text-align
比如给图片img设置居中,要用img的父级标签body标签设置text-align:center
但凡内容对齐都用text-align
8.文本修饰
属性名:text-decoration
属性值 | 效果 |
---|---|
underline | 下划线(常用) |
line-through | 删除线(不常用) |
overline | 上划线(几乎不用) |
none | 无装饰线(常用) |
9.行高 line-height
行高:控制一行的上下行间距(控制两行文字之间的距离)
属性名: line-height
取值:
- 数字+px
- 倍数(当前标签font-size的倍数)
行高:文字的上间距+文本高度+文字的下间距 (上间距=下间距)
应用:
-
让单行文本垂直居中可以设置 line-height : 文字父元素高度
-
网页精准布局时,会设置 line-height : 1 可以取消上下间距
-
行高与font连写的注意点:
- 如果同时设置了行高和font连写,注意覆盖问题
- font : style weight size/line-height family ;
//66px 宋体 倾斜 加粗 行高2倍 font:italic 700 66px/2 宋体;
10.行高-单行文本垂直居中
设置行高的样式:line-height
单行文本在盒子中可以设置 行高=盒子的高度 使文字在盒子中垂直居中
如果是多行文本 因为行高的原因 其他行会被挤出盒子
然后text-align:center就可以水平也居中了。
11.颜色的取值方法(了解)
颜色表示方法 | 表示含义 | 属性值 |
---|---|---|
关键词 | 预定义的颜色名 | red、green |
rgb表示法 | 红绿蓝三原色。每项取值范围0~255 | rgb(0,0,0)、rgb(255,255,255) |
rgba表示法 | 红绿蓝三原色+a表示透明度,取值范围是0-1 | rgba(255,255,255,255)rgba(255,0,0,0.3) |
十六进制表示法 | #开头,将数字转化成十六进制表示 | #000000、#ff0000 |
12.标签水平居中(拓展)
margin:0 auto
如果需要让div、p、h(大盒子)水平居中?
- 可以通过margin:0 auto;实现
注意点:
- 如果需要让div、p、h(大盒子)水平居中,直接给当前元素本身设置即可
- margin:0 auto一般针对于固定宽度的盒子,如果大盒子没有宽度,此时会默认占满父元素的宽度。(高度不是 高度要看它的内容)
13.后代选择器
后代选择器:根据标签结构选择所有符合条件的后代标签(使用频率很高)
语法:选择器1 选择器2 选择器3 {样式代码}
注意:
后代选择器中的后代包括儿子、孙子、重孙子…
后代选择器多个选择器之间用空格隔开
div p span {
/* 只选中后代中的span元素 */
color: aqua;
}
14.子代选择器
子代选择器:根据标签结构关系选择到所有符合条件的子代标签
语法:选择器1>选择器2>选择器3{样式代码}
注意:
子代选择器中的子代表示只包含儿子辈的标签
子代选择器中多个选择器使用>号隔开
15.并集选择器
并集选择器:同时选则多组不同的标签,设置相同的样式
语法:选择器1,选择器2,选择器3{样式代码}
注意:
并集选择器中多个选择器之间用,隔开
并集选择器可以是由多个复合选择器组成
选择器书写结构上,一般一个选择器占一行
16.交集选择器
交集选择器:同时满足所有选择器条件的标签才会被选中 (不需要加任何符号!)
语法:选择器1选择器2 {样式代码}
注意点:
交集选择器中多个选择器之间是紧挨着的不需要符号隔开
如果交集选择器之间有标签选择器,那么需要写到前面
比如p标签和.target 要写成p.target 不能.targetp
17.hover伪类选择器
作用:选中鼠标悬停在元素上
hover伪类选择器:鼠标悬停时样式才生效 。任何标签都可以添加伪类,任何标签都可以鼠标悬停。
语法:选择器:hover{样式代码}
注意点:
- 伪类选择器只会在对应状态下才会生效
- 所有标签都可以使用hover
18.背景颜色 设置透明色
属性名:background-color(emmet语法:bgc)
第一种方法:给rgba中的a设置为0 原先是1
background-color: rgba(27, 158, 172,0);
第二种:background-color:transparent;
div设置背景透明 盒子里面的文字不受影响
19.背景图片
属性名:background-image(emmet语法:bgi):url(图片路径)
注意点:
背景图片上面可以写文字
url中的图片路径可以省略引号
背景图片默认会横向和竖向平铺
背景图片不会影响盒子内容
20.背景平铺
属性名:background-repeat(bgr)
属性值:
取值 | 效果 |
---|---|
repeat | (默认值)水平和垂直方向都平铺 |
no-repeat | 不平铺(常用) |
repeat-x | 沿着水平方向(x轴)平铺 |
repeat-y | 沿着垂直方向(y轴)平铺 |
21.背景位置
设置背景位置样式:background-position(bgp):水平方向位置 垂直方向位置;
属性值取值:
1.方位名词:
水平方向:left左、center中间、right右
垂直方向:top上、center中间、bottom下
2.像素值 数字+px(坐标):
第一个值表示从原点水平移动的距离
第二个值表示从原点垂直移动的距离
正数:向右向下移动;负数:向左向上移动
注意:背景色和背景图只显示在盒子里面
注意点:
方位名词和数字可以混用,第一个值横向,第二个值表示竖向
22.背景相关属性连写
背景的复合属性:background
书写不分顺序:background-color background-image background-repeat background-position
书写顺序推荐:background:color image repeat position
省略问题:
复合属性中,不需要的可以省略。省略后的属性相当于设置了默认值
注意点:
复合属性和单一属性混用的时候 注意层叠问题
- 如果需要设置单独的样式和连写
- 要么把单独的样式写在连写的下面
- 要么把单独的样式写在连写的里面
23.img标签和背景图片的区别(拓展)
背景图片和img的区别:
img标签是作为内容,有图片默认大小
背景图片是作为css样式背景,不是内容不会撑开盒子
应用:
img常用于商品、宣传等可提换图片
背景图片长时间不变的图
需求:需要在网页中展示一张图片的效果?
- 直接写上img标签即可
- img标签是一个标签,不设置宽高默认会以原尺寸显示
- div标签+背景图片
- 需要设置div的宽高,因为背景图片只是装饰的CSS样式不能撑开div标签
24.元素显示模式
1.块级元素显示特点:
- 独占一行,(一行只能显示一个)
- 默认宽度是父元素宽度,高度默认由内容撑开
- 可以设置宽高
举例:
div、p、h标题、ul、li、ol、dt、dd、form、header、nav、footer等
2.行内元素特点:
1.一行可以显示多个
2.宽度和高度由内容撑开
3.不可以设置宽高
举例:
a span b u i s strong ins em del
3.行内块显示特点:
1.一行可以显示多个
2.可以设置宽高
不加宽高时是默认的显示模式
举例:
input、textarea、button、select
特殊情况:img标签也具有行内块元素的特点,所以属于行内块,但是Chrome调试工具中显示结果是inline。
4.元素显示模块转换
-
目的:改变元素默认的显示特点,让元素符合布局要求
-
语法
属性 效果 使用频率 display:block 转换成块级元素 较多 display:inline-block 转换为行内块元素 较多 display:inline 转换为行内元素 极少
25.拓展1:HTML嵌套规范注意点
- 块级元素一般作为大容器,可以嵌套:文本、块级元素、行内元素、行内块元素等等。。。
- 但是:p标签中不要嵌套div、p、h等块级元素
- a标签内部可以嵌套任意元素
- 但是:a标签不能嵌套a标签
26.CSS三大特性-继承性
特性:子元素有默认继承父元素样式的特点(子承父业)
可以被继承的样式属性(文字控制属性都可以继承):
- color
- font-开头的样式
- text-开头的样式
- line-height
- 具体应用:字体的初始化样式
(拓展)继承的应用
➢ 好处:可以在一定程度上减少代码
➢ 常见应用场景:
- 可以直接给ul设置 list-style:none 属性,从而去除列表默认的小圆点样式
- 直接给body标签设置统一的font-size,从而统一不同浏览器默认文字大小
27.继承失效的特殊情况(拓展)
场景:如果标签具有默认样式,则会覆盖继承的效果
➢ 如果元素有浏览器默认样式,此时继承性依然存在,但是优先显示浏览器的默认样式
-
a标签的color会继承失效
其实color属性继承下来了,但是被浏览器默认设置的样式给覆盖掉了
-
h系列标签的font-size会继承失效
其实font-size属性继承下来了,但是被浏览器默认设置的样式给覆盖掉
解决方式:单独选中对应标签添加样式,就可以覆盖默认样式
例如:
a标签的color被覆盖
h系列的font-size被覆盖
28.CSS三大特性-层叠性
➢ 特性:
- 给同一个标签设置不同的样式 → 此时样式会层叠叠加 → 会共同作用在标签上
- 给同一个标签设置相同的样式 → 此时样式会层叠覆盖 → 最终写在最后的样式会生效
➢ 注意点:
- 样式冲突时,只有当选择器优先级相同时,才会使用层叠性进行判断;如果优先级不同,则以优先级高的为准
29.CSS三大特性-优先级
特性:不同的选择器具有不同的优先级,优先级高的选择器样式会覆盖优先级低的选择器样式
优先级排序:
- 继承 < 通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important
注意点:
- !important写在属性值的后面,分号的前面
- !important不能提升继承的优先级,只要是继承优先级就是最低的
- 实际开发中不建议使用!important
30.优先级权重叠加计算
权重叠加计算
➢ 场景:如果是复合选择器,此时需要通过权重叠加计算方法,判断最终哪个选择器优先级最高会生效
➢ 权重叠加计算公式:(每一级之间不存在进位)
在复合选择器中:
第一级 | 第二级 | 第三级 | 第四级 |
---|---|---|---|
0 | 0 | 0 | 0 |
行内样式的个数 | id选择器的个数 | 类选择器的个数 | 标签选择器的个数 |
➢ 比较规则:
- 先比较第一级数字,如果比较出来了,之后的统统不看
- 如果第一级数字相同,此时再去比较第二级数字,如果比较出来了,之后的统统不看
- ……
- 如果最终所有数字都相同,表示优先级相同,则比较层叠性(谁写在下面,谁说了算!)
➢ 注意点:!important如果不是继承,则权重最高,天下第一!
权重叠加计算:如果使用的的是复合选择器,那么就需要进行权重的叠加计算
不同选择器的权重:
继承: 无穷小
通配符选择器 0,0,0,0
标签选择器 0,0,0,1
类选择器 0,0,1,0
id选择器 0,1,0,0
行内样式 1,0,0,0
关键字!important: 无穷大
比较规则:
将复合选择器中,各个选择器的权重举例出来,然后按位相加,获得复合选择器的权重
复合选择器的比较,从左至右按位次依次比较,第一位相同则比较第二位直至得出结果
如果复合选择器的优先级相同,则按照层叠性为准
注意点:
权重叠加不会进位