css是修饰html的对吗,关于HTML和CSS的几个基础问题

什么是结构、样式、行为相分离？这样做的好处是什么？

首先让我们了解一下什么是HTML、CSS、javascript。

HTML：英文全称是 Hypertext Marked Language，即超文本标记语言。用HTML编写的超文本文档称为HTML文档。使用HTML语言，将所需要表达的信息按某种规则写成HTML文件，通过的浏览器来识别，并将这些HTML文件“翻译”成可以识别的信息，即现在所见到的网页。

CSS：英文全称是 Cascading Style Sheets，即层叠样式表。从HTML被发明开始，样式就以各种形式存在。不同的浏览器结合它们各自的样式语言为用户提供页面效果的控制。最初的HTML只包含很少的显示属性。随着HTML的成长，为了满足页面设计者的要求，HTML添加了很多显示功能。但是随着这些功能的增加，HTML变的越来越杂乱，而且HTML页面也越来越臃肿。于是CSS便诞生了。所以CSS的就是给HTML文件所写的网页结构进行装饰的。

Javascript：是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。

说明了上面这三个概念就可以解释什么是结构、样式、行为相分离了。其中结构就表示的是HTML文档，样式表示CSS文档，行为可以代表JavaSrcipt文档，这三者分开书写在不同的文件中，即为结构、样式、行为的分离。但是他们都会作用到同一个HTML结构上面。这样做的好处大可比喻成图书馆对图书的分类。 例如图书馆会按照内容把书分成工具书、文学、语言等不同的类别，为什么要这么做，这样清晰、方便、便于查找修改。并且在协同开发中我们的代码不只是写给自己看的，我们需要有这么一个默认的规则来兼容并解析不同的代码风格。

什么是语义化？为什么要语义化？

其实很简单，在HTML中语义化就是指是用含有语言意义的标签来书写代码。

在一个网页布局中，可能会用到许多div的标签，这些div在网页开发中被看作一个个盒子，作为网页内容的容器，但是当网页复杂的时候，全部使用div来布局的话会让开发人员十分难以阅读代码，整个代码全部都是div的盒子，开发人员并不能很轻松的确定哪个div是页面头部，哪个div是页面的底部，哪个div的大概功能是什么。所以在新版本的HTML中就新增了一些语义化的标签，在些标签本质上与div没有不同，在网页布局中都可以看成一个一个的小盒子，但是标签的名字却带有语义化，比如 表示页面的头部，表示一个导航栏...通过这样的方法予以区分，对于开发人员就能很快了解整个网页的布局情况。同时对浏览器来说也能够快速的理解整个文档。

什么是CSS？它的特点有哪些？

CSS在前面已经说过，中文翻译就是层叠样式表的意思，CSS就是能够修饰HTML文档的结构的一系列样式声明。诸如文字的字体，颜色等等，一些样式都可以写在CSS中，通过在HTML中声明CSS文件的位置就可进行引用， 从而让HTML结构的外观发生改变，就好比，一棵树，树干是HTML来书写，那么叶子和花朵这些装饰就是CSS来写的。

层叠性

层叠性是指当一个标签被设置了多个重复的样式的时候，一个属性会覆盖另外一个属性。

比如：先给div设置背景颜色为红色，然后设置背景颜色为粉红色，那么最终颜色可能为红色，也可能为粉红色，层叠性主要遵循的原则是就近原则，在不考虑优先级的情况下，在多个样式中最终生效的样式是离标签最近的样式。【这里要注意只覆盖同样的不可重复的样式属性，不会覆盖不重复的属性，不重复的属性会合并下来(包括那些允许设置多个值的属性也会合并，比如text-shadow)。】

继承性

继承性是指当子标签没有设置样式时，会继承父标签的样式。

比如一个子标签没有设置背景颜色，那么子标签会继承父标签的背景颜色。可继承的属性比如有字体类属性(字体颜色、字体大小之类的)、文本类属性(行高之类的)、背景类属性(背景颜色之类的)(要注意子标签不会继承父标签的宽度、高度、边距属性等。)

优先级

选择器的优先级大致遵循这样的顺序：!important>行内样式>id选择器>类选择器>标签选择器>通配符>继承 【优先级高的规则会忽视层叠性，忽视就近原则来定义样式。比如定义了!important，即使行内样式离得近，最终生效的还是!important标注的属性】

!important是css的一种语法，定义在样式属性后面，代表这个属性不会被覆盖，最终生效的属性一定是!important标注的属性。

优先级在CSS中有更为精确的算法来确定。如下所述：

定义CSS样式时，经常出现两个或更多规则应用在同一元素上，这时就会出现优先级的问题。

在考虑权重时，还需要注意一些特殊的情况，具体如下：

继承样式的权重为0。即在嵌套结构中，不管父元素样式的权重多大，被子元素继承时，他的权重都为0，也就是说子元素定义的样式会覆盖继承来的样式。

行内样式优先。应用style属性的元素，其行内样式的权重非常高，可以理解为远大于100。总之，他拥有比上面提高的选择器都大的优先级。

权重相同时，CSS遵循就近原则。也就是说靠近元素的样式具有最大的优先级，或者说排在最后的样式优先级最大。

CSS定义了一个!important命令，该命令被赋予最大的优先级。也就是说不管权重如何以及样式位置的远近，!important都具有最大优先级。

关于CSS权重，我们需要一套计算公式来去计算， 具体规范入如下：

用一个四位的数字串来表示，更像四个级别，值从左到右，左面的最大，一级大于一级，数位之间没有进制，级别之间不可超越。

| 继承或者* 的贡献值      | 0,0,0,0 |

| --------------- | ------- |

| 每个元素(标签)贡献值为    | 0,0,0,1 |

| 每个类，伪类贡献值为      | 0,0,1,0 |

| 每个ID贡献值为        | 0,1,0,0 |

| 每个行内样式贡献值       | 1,0,0,0 |

| 每个!important贡献值 | ∞ 无穷大   |