导图社区 Web前端基础Day03
这是一个关于Web前端基础Day03的思维导图,包含CSS选择器、CSS字体,文本属性等。
编辑于2024-04-30 23:57:45Day03
1、CSS选择器
1.1、基础选择器
1.1.1、通配符(通用)选择器
语法:*{ 样式声明; }
作用:匹配页面中所有的HTML元素
1.1.2、元素名称选择器
语法:元素名称 { 样式声明; }
作用:选择所有同一元素名称的所有元素
1.1.3、class(类)选择器
语法: HTML: <标签名 class="类名"></标签名> CSS: .类名{ 样式声明; }
类名的命名规范: 1、 见名知意,可以采用多个单词组合的形式 驼峰式(offcnLogo) 中划线连接(offcn-logo) 下划线连接(offcn_logo) 2、 可以包含数字、字母、中划线、下划线 3、 不能包含除中划线、下划线以外的其他特殊字符 4、 不能以数字开头 5、 区分大小写
注意: 可以使用词列表(同一个元素可以添加多个类名,多个类名之间空格隔开) 同一个页面中class可以重复使用(class相当于是人名,可以重名的
作用:选择所有带有指定类名的元素
1.1.4、id选择器(具有唯一性)
语法:HTML: <标签名 id="id名称"></标签名> CSS: #id名称{ 样式声明; }
注意: id具有唯一性,一般用于页面中唯一的元素身上,搭配js使用 同一个页面中相同的id名称只能使用一次(id相当于身份证号) id不可以使用词列表 不能使用词列表、不同使用相同的id名称 id名称命名规范同class
作用:选择所有带有指定类名的元素
【笔试题】class选择器与id选择器的区别
语法不同: class是以.标识,id是以#标识
使用频率不同: class使用较频繁,id具有唯一性,同一个页面中同一id只使用一次,配合js来使用
class可以使用词列表,id不能使用词列表的
同一个页面中相同的class名称可以出现多次,id不可以的
1.1.5、优先级:id>class>标签>通配符
1.1.6、总结
总结使用频率 基础选择器中最常用是类选择器 id用于页面中唯一模块 元素名称选择器定义的全局样式,单独使用要慎重 *号通常用于重置样式【最不常用】
总结id与类的区别 基础选择器的优先级
3、复合选择器
概述:由两个或多个基础选择器通过不同的方式组合而成的选择器
3.1、后代元素选择器
语法:E F { 样式声明; }
【空格】连接一个或多个选择器
作用: 选择E元素内部包含的所有F元素
3.2、子元素选择器
语法:E > F { 样式声明; }
描述:【大于】号 连接一个或多个选择器
作用: 选择E元素内部包含的所有直接子元素F(第一嵌套层级)
3.3、相邻选择器
语法:E + F { 样式声明; }
描述:【加号】连接一个或多个选择器
作用: E元素之后紧跟着的兄弟元素F
3.4、交集选择器
语法:E.F { 样式声明; }
描述:【无连接符】
作用:选择同时被所有选择器交集选中的元素
3.5、并集选择器
语法:E,F { 样式声明; }
描述:【逗号】连接一个或多个选择器
作用: 使用逗号分隔的列表来对选择器进行分组,给列表中每一个选择器选中的元素设置样式
3.6、伪类选择器
a:link{ css样式 } //链接未被访问
a:visited{ css样式 } //链接被访问过后
a:hover{ css样式 } //链接被鼠标悬停
a:active{ css样式 } //链接被激活(鼠标按下不抬起时)
总结: 注意书写顺序 l-h-v-a 实际工作中最常用的是:hover 可以与其它选择器结合灵活使用
2、CSS字体 ,文本属性
2.1、font-family设置文本的字体类型
语法:font-family:字体名称;
常用值: 一个字体名称或系列名称(介绍常用字体名称、字体系列) 微软雅黑 Microsoft YaHei 宋体 SimSun 黑体 HeiTi 楷体 KaiTi 多个字体名称 逗号分开 如果浏览器不支持第一个字体,则会尝试下一个(回退机制)
注意:如果字体名称包含空格、汉字、特殊字符,必须加引号!
2.2、font-size:设置字体的大小
语法:font-size:值;
常用值: 长度值(通常是像素px) 百分比(相对于父元素计算) 相对单位:em用于字号,相当于父元素字号计算,用于其它属性,相对于当前元素的字号 rem相对于根元素的font-size来计算的 大多数浏览器的默认值字号:16px;浏览器最小字号是12px;字号为0时文字消失。
2.3、font-style:设置字体的风格
normal 正常【常用于去掉标签自带的样式】 例:em,i,strong,b,h1-h6,th等等 italic 斜体显示(倾斜)
2.4、font-weight:设置文字的粗细
normal 正常(400) bold 加粗(700) 100-900
2.5、font简写:设置所有字体属性
语法:font: 字体风格 字体加粗 字号/行高 字体;
总结:只有当【字号和字体】同时存在简写才是有效的,简写属性可以精简代码
2.6、line-height:设置行高(效果是产生文本行间距)
语法:line-height:值;
特性:实现单行文本的垂直居中 测量:文字高+行间距
常用值: normal 合理的行高 px 绝对长度单位(像素) 相对单位:数字 数字乘以当前文字的高度得到的结果就是行高的值 % 相对于当前元素的font-size来计算的 rem 相对于根元素的font-size来计算的 em 相对于当前元素的font-size来计算的
2.7、text-align:设置文本的水平对齐方式
语法:text-align:值;
常用值 left居左对齐 [默认值] right居右对齐 center居中对齐 justify两端对齐
注意:适用于块状元素
2.8、text-decoration:设置文本装饰
语法:text-decoration:值;
常用值 none 默认。定义标准的文本。 【常用】 underline 定义文本下的一条线 【常用】 line-through 定义穿过文本的一条线。【比较常用】 overline 定义文本上的一条线。 【不常用】
2.9、text-indent:设置文本块首行的缩进
语法:text-indent:值;
常用值 默认值:0 长度值,px,em(更方便) 百分比: 相对于元素内容宽进行计算 允许负值
2.10、color:设置文字的颜色
语法:color:颜色值;
常用值: 1、 颜色名称:如red、blue等 2、十六进制颜色表示方法 3、rgb颜色表示方法
2.11、文本属性继承性
简单渗透:字体文本属性大多具有继承性。 可继承的属性 font-size font-family font-style font-weight font line-height text-align text-indent color
不可继承 text-decoration(穿透性)