摘要：我是红色这种引用代码的方式在一定程度上解决了所有代码都分散写在各个元素上的问题，但是不利于代码的整体重用。需要详尽选定该元素来设置具体的样式。子元素会继承父元素的样式，等除外。
上一篇简单总结了一下选择器，如果一个元素被多个选择器选中，元素的样式就会以级联方式被应用到。要搞清最终那个样式被应用到元素上了，首先要明白引用CSS代码的几种方式。
CSS代码引用方式如何应用CSS代码到Html元素上，常见的有下面几种方式
通过Html元素的style属性来指定样式
在Html页面中直接添加style标签
通过link标签来引用外部css文件
sytle属性想要修改一个元素，最简单的方式就是修改它的style属性，如下栗子：
我是红色
这种方式给元素添加CSS代码有一定的局限性，抛开浏览器解析渲染CSS样式的性能不说，但从DRY原则来看就不太好。每次想修改同类型样式的元素，要逐个修改元素的style属性。
sytle标签style标签是Html的标准标签，可以在里面直接写CSS代码。
我是红色
这种引用CSS代码的方式在一定程度上解决了所有CSS代码都分散写在各个元素上的问题，但是不利于CSS代码的整体重用。如果某些class需要在多个Html文件中引用，需要将style标签里的内容复制粘贴到各个Html中。
引用外部CSS文件通过link标签来引用外部CSS文件。CSS文件可以位于和Html文件同一个服务器上，也可以是互联网上任意的一个地址，例如CDN。
我是红色
style.css
.red {
color: red;
}
这种方式我们可以做到CSS代码的重用，但由于引用了外部文件，浏览器会额外发送一个http请求去加载CSS文件，性能上可能稍微会有一点影响，但以目前浏览器的性能，少量额外的http请求都是可以接受的。
CSS级联样式的应用回到开头的问题，如果我有两个选择器都选中了某个元素，分别赋予这个元素不同的样式，到底哪个选择器中的样式会被应用呢？看一下如下的栗子：
我是蓝色
首先要知道，Html是从头到未顺序加载并解析的。无论是style标签还是CSS外部文件引用都是如此。从例子中可以看到，div中的文字会变成蓝色，即在CSS代码中，在选择器相同的情况下，靠后的CSS代码样式会覆盖掉之前的样式。
再看一个栗子：
我是蓝色而且有下划线
这个栗子中，尽管红色字体选择器更靠后但是由于前面的一个选择器更详尽的选中了div元素内的p元素，所以p里面的文字颜色为蓝色，即更详尽的选择器样式覆盖掉了之前的样式。而p选择器里面还添加了文字下划线样式，这个样式被继承了下来，所以最后p元素的文字是蓝色，并且有下划线。
下面来看看使用类选择器是什么效果。
我是蓝色而且有下划线
从代码结果中可以清楚的看到，类选择器较元素选择器具有更高的优先级。再来看看id选择器。
我是蓝色而且有下划线
因为id通常是唯一标识一个元素的，所以它的优先级又高于了此前两种选择器。
我是绿色而且有下划线
最后发现，style属性的优先级最高。所以我们可以通过JavaScript来动态的修改元素的style属性值，如 display: none， 达到修改元素样式的效果，而且不会受到之前任何选择器样式的影响。
CSS样式继承什么是CSS样式继承，直接上栗子。
我是蓝色且18个像素
通过栗子发现，子元素child的文字颜色继承自parent的样式，通过Chrome的developer tools也可以清楚的看到。
关于继承，还有一种情况是有些Html元素是不会继承父元素样式的，例如input。需要详尽选定该元素来设置具体的样式。这里就不一一举例了，大家遇到样式不是预期效果的情况，可以通过developer tools来查看到底哪个选择器的样式被应用到了。
总结CSS的代码加载顺序决定了后加载的样式会覆盖先加载的样式。
最终元素的样式会合并所有选中的样式，高优先级的覆盖低优先级的。
样式覆盖的优先级是 id > 详尽选择 > class > 元素。
style属性具有最高的样式优先级。
子元素会继承父元素的样式，input等除外。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/115995.html
摘要：我是红色这种引用代码的方式在一定程度上解决了所有代码都分散写在各个元素上的问题，但是不利于代码的整体重用。需要详尽选定该元素来设置具体的样式。子元素会继承父元素的样式，等除外。 上一篇简单总结了一下选择器，如果一个元素被多个选择器选中，元素的样式就会以级联方式被应用到。要搞清最终那个样式被应用到元素上了，首先要明白引用CSS代码的几种方式。 CSS代码引用方式 如何应用CSS代码到Ht...
摘要：浏览器渲染引擎通过盒模型的方式来布局元素。应用后元素的外边框增加了宽度。应用后元素内的内容和边框之间产生了相应的空间。上面的代码在中的计算结果如下上栗中，我们将盒子四个方向的都设置成了。关于盒模型的高度，可以通过属性来设置。 浏览器渲染引擎通过盒模型的方式来布局html元素。我们可以将每一个html元素都看做是一个盒子，每一个盒子都有长和款，多个这样的盒子组成了我们的网页。 Margi...
摘要：浏览器渲染引擎通过盒模型的方式来布局元素。应用后元素的外边框增加了宽度。应用后元素内的内容和边框之间产生了相应的空间。上面的代码在中的计算结果如下上栗中，我们将盒子四个方向的都设置成了。关于盒模型的高度，可以通过属性来设置。 浏览器渲染引擎通过盒模型的方式来布局html元素。我们可以将每一个html元素都看做是一个盒子，每一个盒子都有长和款，多个这样的盒子组成了我们的网页。 Margi...
摘要：内容简述关于，确实太繁杂了，内容多。写好不易，基本上就这个调了。里面有许多属性是可以继承的，注意了，继承一定是继承父级元素的样式在这里我就列出可以继承的属性，和不能继承的属性啦不可继承的和。内联元素可继承。每个浏览器可能表现不一样。 内容简述 关于CSS，确实太繁杂了，内容多。写好不易，基本上就这个调了。大家肯定听过CSS奇淫技巧吧，关于这个我还没有去深入了解，只是说普通的效果啥的，我...
摘要：层叠样式表二修订版这是对作出的官方说明。速查表两份表来自一份关于基础特性，一份关于布局。核心第一篇一份来自的基础参考指南简写速查表简写形式参考书使用层叠样式表基础指南，包含使用的好处介绍个方法快速写成高质量的写出高效的一些提示。 迄今为止，我已经收集了100多个精通CSS的资源，它们能让你更好地掌握CSS技巧，使你的布局设计脱颖而出。 CSS3 资源 20个学习CSS3的有用资源 C...
阅读 3379·2021-11-22 09:34
阅读 649·2021-11-19 11:29
阅读 1349·2019-08-30 15:43
阅读 2232·2019-08-30 14:24
阅读 1865·2019-08-29 17:31
阅读 1222·2019-08-29 17:17
阅读 2615·2019-08-29 15:38
阅读 2728·2019-08-26 12:10
