2020-07-04-----3.2CSS添加方法

3.2CSS添加方法

我们要实现下面的样式，即让字体变为红色，可以有下面三种方法。

1.行内样式

将属性和属性的取值直接添加到当前需要添加样式的元素的标签内部。
现在我们要将段落添加样式，我们就将段落的标签p标签，在它的内部加一个style属性，然后style属性设置的值直接写上color这个属性的名字，冒号后面是属性的取值。

2.内嵌样式

将CSS代码内嵌到当前页面的head标签部分。当前的样式只对当前页面的标签有用。
body部分不再包含样式，只包含段落内容，要将样式用一对style标签表示出来，并且style标签要放在head标签内来写。
style标签的type属性：表示当前样式以什么文本显示。
< style type=“text/css”>
    选择器{属性：属性值；/ * 注释 * /}
< /style>
text/css表示以CSS文本来规定。
然后在CSS内部，依据CSS语法来写样式，选择器开头，花括号{}括起来，花括号内部写上属性的名字，冒号：，属性值，分号；结束，还可以在分号后面添加注释/* */。

注意：
1.内嵌的样式只对当前的页面有效，如果多个页面共享一个样式，每个页面也都要重新定义CSS样式。
2.适合文件很少，CSS代码也不多的情况。
3.如果一个网站有很多页面，如果公共的样式都在每个页面重新定义，就会使每个文件都会变大，修改的时候很难修改，后期维护难度也大。

3.单独文件

把外部样式表文件style.css写在站点文件夹的子文件里，在样式表里面依据CSS语法结构，直接写上选择器然后把属性，属性值写上即可。

样式表文件style.css只是定义了文件，我们的网页并不知道有这个文件，我们必须要在网页文件引用这个样式表文件才能对网页起作用。采用下面的方法来引用样式：在head标签内，添加一个link标签，link标签表示要进行文件的链接，link标签的rel属性：表示要链接的文件的类型，stylesheet表示样式表文件，href属性：用相对路径的方法，表示要链接到的文件的相对位置和文件的名字。

sublime的快捷书写方式：link：css，然后tab扩展，然后修改href的属性值。

好处：
1.页面结构HTML代码与样式css代码完全分离。
2.维护方便，只需要更新样式表文件style.css。 3如果需要改变网站风格，只需修改公共css文件
4.用一个样式表文件在多个网页中引用。
5.同一个HTML文档内部可以多次引用多个不同的外部样式表文件。

4.css添加方法的优先级

多重样式可以层叠，可以覆盖，样式的优先级按照“就近原则”。
行内样式 > 内嵌样式 > 链接样式 > 浏览器默认样式
例如：当外部样式表文件和内嵌样式都定义了text-align属性和font-size属性，最终内嵌样式设置的样式将会被保留下来。

最终的样式设置如下：