00
CSS优先级和继承问题 ★CSS冲突，即CSS本身优先级的设置可以同时对同一个元素应用多种样式。 这时候可能会出现样式冲突，达不到用户想要的效果。 ★解决CSS冲突的优先级规则： ● CSS级联样式表导入方式的优先级：内联>嵌入>链接>导入 ● 多个外部样式中css样式继承，后出现的样式的优先级低于先出现的样式，也称为作为覆盖范围 ● 样式中，选择器的优先级：ID样式>类样式>标签样式（权重方面：id的权重为100，class的权重为10，标签名称的权重为1) ● 在样式前面添加!important，例如：abc {background:#fff !imrotant;} 该样式的优先级默认会提升到最前面，全局样式几乎不会影响它。
?注意：重要的应该写在分号后面。 优先级：就近原则（距离代码越近，优先级越高）。 选择范围越小，优先级越高。 细化CSS，通过逐层添加更多父元素选择器来缩小选择范围。 样式继承：继承是指我们设置了父级（parent）的CSS样式，父级（parent）和子级（subrider）都有这个属性。
一般只有文本具有继承的特性，如文本大小、文本粗体、文本颜色、字体等。但要注意，有些css样式是不能继承的。 如边框：1px纯红色； 演示：
如果你不知道自己想做什么、做什么，你就什么都做不好。
说明：（1）我将上层（parent：p）的文本颜色设置为蓝色，但是子层（span）没有设置文本颜色，但是文本具有继承的特性，所以文本内容儿童级别仍然是黑色。 (2)如果设置了父级的文本颜色样式后，其多个子级由于继承而与父级相同。 如果有些子项不希望与父项颜色相同，此时只需为对应的子项设置所需的颜色即可。
注：还有一种特殊的残差——继承也有残差，但是很低。 有文献提出只有0.1，因此可以理解为继承的残差是最低的。 继承的好处：可以只设置上层的CSS样式表属性，子层（下层）不需要设置这个CSS属性，可以减少CSS代码，方便维护。
★CSS 中可继承和不可继承的属性 1. 不可继承属性 1. Display：指定元素应生成的框类型 2. 文本属性： Vertical-align：垂直文本对齐方式 text-decoration：指定添加的内容文字装饰text-shadow：文字阴影效果white-space：空白处理unicode-bidi：设置文字的方向3、盒子模型的属性：width、height、margin、margin-top、margin-right 、 下边距、 左边距、 边框、 边框样式、 上边框样式、 右边框样式、 下边框样式、 左边框样式、 边框宽度、 上边框宽度、 边框-右右，边框-底部宽度，边框左宽度，边框颜色，边框顶部颜色css样式继承，边框右颜色，边框底部颜色，边框左颜色，边框顶部，边框-right、border-bottom、border-left、padding、padding-top、padding-right、padding-bottom、padding-left4、背景属性：背景、背景颜色、背景图像、背景重复、背景位置、 background-attachment5，定位属性：float、clear、position、top、right、bottom、left、min-width、min-height、max-width、max-height、overflow、clip、z-index6、生成的内容属性：content ，计数器-重置，计数器-增量7，轮廓样式属性：轮廓样式，轮廓宽度，轮廓颜色，轮廓8，页面样式属性：大小，分页之前，分页之后9，声音样式属性：暂停-before、pause-after、pause、cue-before、cue-after、cue、play-during 2、继承属性 1、字体族属性 font：组合字体 font-family：指定元素的字体族 font-weight：设置字体的粗细 font -size：设置字体的大小 font-style：定义字体的样式 font-variant：设置大写字母的字体显示文本，即全部大写字母都会被转换改为小写，但所有字母都使用大的小写字体 与文本的其余部分相比，其字体大小较小。
font-stretch：拉伸当前字体系列。 并非所有主流浏览器都支持。 font-size-调整：指定元素的宽高比值，以便保持首选字体的 x 高度。
2、文本系列属性 text-indent：文本缩进 text-align：文本水平对齐方式 line-height：行高 word-spacing：增大或减小短语之间的间距（即单词间距） letter-spacing：增大或减小短语之间的间距字符空白（字符宽度） text-transform：控制文本大小写方向：指定文本的书写方向 color：文本颜色3、元素可见性：visibility4、表格布局属性：caption-side、border-collapse、border-spacing、empty - cells、table-layout5、列表布局属性：list-style-type、list-style-image、list-style-position、list-style6、生成内容属性：quotes7、光标属性：cursor8、页面样式属性：page、page -break-inside、windows、orphans9、声音风格属性：说话、说话标点符号、说话数字、说话标题、语速、音量、语音系列、音高、音高范围、重音、丰富度、方位角、仰角3. 所有元素都可以继承的属性 1. 元素可见性：visibility 2. 光标属性：cursor 4. 内联元素可以继承的属性 1. 字体族属性 2. 除了text-indent 和 text-align 以外的文本系列属性 5.块级元素可以继承的属性1、text-indent、text-align。
提交
发表评论