选择器的优先级通过不同的选择器选中相同的元素 并且为相同的样式名设置不同的值时就发生了样式的冲突。到底应用哪个样式此时就需要看优先级了。简单描述—行内样式 ID选择器 类选择器 元素选择器 通配选择器。详细描述计算方式每个选择器都可计算出一组权重格式为 (a,b,c)a : ID 选择器的个数。b : 类、伪类、属性 选择器的个数。c : 元素、伪元素 选择器的个数。例如比较规则按照从左到右的顺序依次比较大小当前位胜出后后面的不再对比例如特殊规则— 行内样式权重大于所有选择器。— !important 的权重大于行内样式大于所有选择器权重最高CSS三大特性层叠性概念如果发生了样式冲突那就会根据一定的规则选择器优先级进行样式的层叠覆盖。什么是样式冲突 ——— 元素的同一个样式名被设置了不同的值这就是冲突。继承性概念元素会自动拥有其父元素、或其祖先元素上所设置的某些样式。规则优先继承离得近的。常见的可继承属性text-?? font-?? line-?? 、 color …备注参照 MDN 网站可查询属性是否可被继承。优先级简单聊 !important 行内样式 ID选择器 类选择器 元素选择器 * 继承的样式。详细聊需要计算权重。—计算权重时需要注意并集选择器的每一个部分是分开算的CSS常用属性像素的概念概念我们的电脑屏幕是是由一个一个“小点”组成的每个“小点”就是一个像素px。规律像素点越小呈现的内容就越清晰、越细腻。注意点如果电脑设置中开启了缩放那么就会影响一些工具的测量结果但这无所谓因为我们工作中都是参考详细的设计稿去给元素设置宽高。颜色的表示表示方式一颜色名编写方式直接使用颜色对应的英文单词编写比较简单例如红色red绿色green蓝色blue紫色purple橙色orange灰色gray…—1. 颜色名这种方式表达的颜色比较单一所以用的并不多。—2. 具体颜色名参考 MDN 官方文档https://developer.mozilla.org/en-US/docs/Web/CSS/named-color表示方式二rgb 或 rgba编写方式使用 红、黄、蓝 这三种光的三原色进行组合。r 表示 红色g 表示 绿色b 表示 蓝色a 表示 透明度举例/* 使用 0~255 之间的数字表示一种颜色 */ color: rgb(255, 0, 0);/* 红色 */ color: rgb(0, 255, 0);/* 绿色 */ color: rgb(0, 0, 255);/* 蓝色 */ color: rgb(0, 0, 0);/* 黑色 */ color: rgb(255, 255, 255);/* 白色 */ /* 混合出任意一种颜色 */ color:rgb(138, 43, 226) /* 紫罗兰色 */ color:rgba(255, 0, 0, 0.5);/* 半透明的红色 */ /* 也可以使用百分比表示一种颜色用的少 */ color: rgb(100%, 0%, 0%);/* 红色 */ color: rgba(100%, 0%, 0%,50%);/* 半透明的红色 */小规律若三种颜色值相同呈现的是灰色值越大灰色越浅。rgb(0, 0, 0) 是黑色 rgb(255, 255,255) 是白色。对于 rbga 来说前三位的 rgb 形式要保持一致要么都是 0~255 的数字要么都是百分比 。表示方式三HEX 或 HEXAHEX 的原理同与 rgb 一样依然是通过红、绿、蓝色 进行组合只不过要用 6位分成3组 来表达格式为# rr gg bb— 每一位数字的取值范围是 0 ~ f 即 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c,d, e, f — 所以每一种光的最小值是 00 最大值是 ffcolor: #ff0000;/* 红色 */ color: #00ff00;/* 绿色 */ color: #0000ff;/* 蓝色 */ color: #000000;/* 黑色 */ color: #ffffff;/* 白色 */ /* 如果每种颜色的两位都是相同的就可以简写*/ color: #ff9988;/* 可简为#f98 */ /* 但要注意前三位简写了那么透明度就也要简写 */ color: #ff998866;/* 可简为#f986 */注意点 IE 浏览器不支持 HEXA 但支持 HEX 。表示方式四HSL 或 HSLAHSL 是通过色相、饱和度、亮度来表示一个颜色的格式为 hsl(色相,饱和度,亮度)— 色相取值范围是 0~360 度具体度数对应的颜色如下图— 饱和度取值范围是 0%~100% 。向色相中对应颜色中添加灰色 0% 全灰 100% 没有灰— 亮度取值范围是 0%~100% 。 0% 亮度没了所以就是黑色。 100% 亮度太强所以就是白色了HSLA 其实就是在 HSL 的基础上添加了透明度。CSS字体属性字体大小属性名 font-size作用控制字体的大小。语法div { font-size: 40px; }注意点Chrome 浏览器支持的最小文字为 12px 默认的文字大小为 16px 并且 0px 会自动消失。不同浏览器默认的字体大小可能不一致所以最好给一个明确的值不要用默认大小。通常以给 body 设置 font-size 属性这样 body 中的其他元素就都可以继承了。借助控制台看样式字体族属性名 font-family作用控制字体类型。语法div { font-size: 40px; }注意使用字体的英文名字兼容性会更好具体的英文名可以自行查询或在电脑的设置里去寻找。如果字体名包含空格必须使用引号包裹起来。可以设置多个字体按照从左到右的顺序逐个查找找到就用没有找到就使用后面的且通常在最后写上 serif 衬线字体或 sans-serif 非衬线字体。windows 系统中默认的字体就是微软雅黑。字体风格属性名 font-style作用控制字体是否为斜体。常用值normal 正常默认值italic 斜体使用字体自带的斜体效果oblique 斜体强制倾斜产生的斜体效果实现斜体时更推荐使用 italic 。语法div { font-style: italic; }
选择器的优先级通过不同的选择器选中相同的元素 并且为相同的样式名设置不同的值时就发生了样式的冲突。到底应用哪个样式此时就需要看优先级了。简单描述—行内样式 ID选择器 类选择器 元素选择器 通配选择器。详细描述计算方式每个选择器都可计算出一组权重格式为 (a,b,c)a : ID 选择器的个数。b : 类、伪类、属性 选择器的个数。c : 元素、伪元素 选择器的个数。例如比较规则按照从左到右的顺序依次比较大小当前位胜出后后面的不再对比例如特殊规则— 行内样式权重大于所有选择器。— !important 的权重大于行内样式大于所有选择器权重最高CSS三大特性层叠性概念如果发生了样式冲突那就会根据一定的规则选择器优先级进行样式的层叠覆盖。什么是样式冲突 ——— 元素的同一个样式名被设置了不同的值这就是冲突。继承性概念元素会自动拥有其父元素、或其祖先元素上所设置的某些样式。规则优先继承离得近的。常见的可继承属性text-?? font-?? line-?? 、 color …备注参照 MDN 网站可查询属性是否可被继承。优先级简单聊 !important 行内样式 ID选择器 类选择器 元素选择器 * 继承的样式。详细聊需要计算权重。—计算权重时需要注意并集选择器的每一个部分是分开算的CSS常用属性像素的概念概念我们的电脑屏幕是是由一个一个“小点”组成的每个“小点”就是一个像素px。规律像素点越小呈现的内容就越清晰、越细腻。注意点如果电脑设置中开启了缩放那么就会影响一些工具的测量结果但这无所谓因为我们工作中都是参考详细的设计稿去给元素设置宽高。颜色的表示表示方式一颜色名编写方式直接使用颜色对应的英文单词编写比较简单例如红色red绿色green蓝色blue紫色purple橙色orange灰色gray…—1. 颜色名这种方式表达的颜色比较单一所以用的并不多。—2. 具体颜色名参考 MDN 官方文档https://developer.mozilla.org/en-US/docs/Web/CSS/named-color表示方式二rgb 或 rgba编写方式使用 红、黄、蓝 这三种光的三原色进行组合。r 表示 红色g 表示 绿色b 表示 蓝色a 表示 透明度举例/* 使用 0~255 之间的数字表示一种颜色 */ color: rgb(255, 0, 0);/* 红色 */ color: rgb(0, 255, 0);/* 绿色 */ color: rgb(0, 0, 255);/* 蓝色 */ color: rgb(0, 0, 0);/* 黑色 */ color: rgb(255, 255, 255);/* 白色 */ /* 混合出任意一种颜色 */ color:rgb(138, 43, 226) /* 紫罗兰色 */ color:rgba(255, 0, 0, 0.5);/* 半透明的红色 */ /* 也可以使用百分比表示一种颜色用的少 */ color: rgb(100%, 0%, 0%);/* 红色 */ color: rgba(100%, 0%, 0%,50%);/* 半透明的红色 */小规律若三种颜色值相同呈现的是灰色值越大灰色越浅。rgb(0, 0, 0) 是黑色 rgb(255, 255,255) 是白色。对于 rbga 来说前三位的 rgb 形式要保持一致要么都是 0~255 的数字要么都是百分比 。表示方式三HEX 或 HEXAHEX 的原理同与 rgb 一样依然是通过红、绿、蓝色 进行组合只不过要用 6位分成3组 来表达格式为# rr gg bb— 每一位数字的取值范围是 0 ~ f 即 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c,d, e, f — 所以每一种光的最小值是 00 最大值是 ffcolor: #ff0000;/* 红色 */ color: #00ff00;/* 绿色 */ color: #0000ff;/* 蓝色 */ color: #000000;/* 黑色 */ color: #ffffff;/* 白色 */ /* 如果每种颜色的两位都是相同的就可以简写*/ color: #ff9988;/* 可简为#f98 */ /* 但要注意前三位简写了那么透明度就也要简写 */ color: #ff998866;/* 可简为#f986 */注意点 IE 浏览器不支持 HEXA 但支持 HEX 。表示方式四HSL 或 HSLAHSL 是通过色相、饱和度、亮度来表示一个颜色的格式为 hsl(色相,饱和度,亮度)— 色相取值范围是 0~360 度具体度数对应的颜色如下图— 饱和度取值范围是 0%~100% 。向色相中对应颜色中添加灰色 0% 全灰 100% 没有灰— 亮度取值范围是 0%~100% 。 0% 亮度没了所以就是黑色。 100% 亮度太强所以就是白色了HSLA 其实就是在 HSL 的基础上添加了透明度。CSS字体属性字体大小属性名 font-size作用控制字体的大小。语法div { font-size: 40px; }注意点Chrome 浏览器支持的最小文字为 12px 默认的文字大小为 16px 并且 0px 会自动消失。不同浏览器默认的字体大小可能不一致所以最好给一个明确的值不要用默认大小。通常以给 body 设置 font-size 属性这样 body 中的其他元素就都可以继承了。借助控制台看样式字体族属性名 font-family作用控制字体类型。语法div { font-size: 40px; }注意使用字体的英文名字兼容性会更好具体的英文名可以自行查询或在电脑的设置里去寻找。如果字体名包含空格必须使用引号包裹起来。可以设置多个字体按照从左到右的顺序逐个查找找到就用没有找到就使用后面的且通常在最后写上 serif 衬线字体或 sans-serif 非衬线字体。windows 系统中默认的字体就是微软雅黑。字体风格属性名 font-style作用控制字体是否为斜体。常用值normal 正常默认值italic 斜体使用字体自带的斜体效果oblique 斜体强制倾斜产生的斜体效果实现斜体时更推荐使用 italic 。语法div { font-style: italic; }
