CSS创建

插入CSS样式表的方法有3种：使用<link>标签进行外部样式表插入、使用<style>标签进行内部样式插入、使用style数学进行内联样式插入

外部样式表

当样式需要应用于很多页面时，外部样式表将是最理想的选择。在使用外部样式表的情况下，可以通过改变一个文件来改变整个站点的外观。每个页面使用<link>标签链接到样式表，<link>标签在文档的头部

实例：

<head>


<link rel=”stylesheet” type=”text-css” href=”123.css”>


</head>

浏览器会从文件123.css中读到样式声明，并根据它来格式文档，外部样式表可以在任何文本编辑器中进行编辑，文件不能包含任何HTML标签，样式表应该以.css扩展名进行保存

实例：

P{color:red;}


Body{background-image:url(images/123.jpg);}

注意：不要在属性值与单位之间留有空格

内部样式表

当某个文档需要特殊的样式时，就应该使用内部样式表。可以使用<style>标签在文档头部定义内部样式表

实例：

<head>


<style type=”text-css”>


P{color:red;}


Body{background-image:url(images/123.jpg);}


</head>

多重样式

如果某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来

实例：外部样式表拥有针对h3选择器的属性

H3{color:red; text-align:left; font-size:8px;}

而内部样式表拥有针对h3选择器的两个属性

H3{text-align:center; font-size:20px;}

假如拥有内部样式表的这个页面同时与外部样式表链接，那么h3得到的样式是：

H3{color:red; text-align:right; font-size:20px;}

即颜色属性将被继承于外部样式表，而文字排列和文字尺寸会被内部样式中的规则取代

样式表允许以多种方式规定样式信息，样式可以规定在单个的HTML元素中，在HTML页的头元素中，或在一个外部CSS文件中。甚至可以在同一个HTML文档内部引用多个外部样式表

当同一个HTML元素被不止一个样式定义时，一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中第四个拥有最高优先权

1.      浏览器缺省设置

2.      外部样式表

3.      内部样式表

4.      内联模式

因此，内联模式拥有最高优先权，这意味着它将优先于第一二三个声明

多重样式优先级深入理解

优先级用于浏览器是通过判断哪些属性值与元素最相关比决定并应用到该元素上的

优先级仅由选择器组成的匹配规则决定的

优先级就是分配给指定的CSS声明的一个权重，它由匹配的选择器中的每一种选择器类型的数值决定

下列是一份优先级逐级增加的选择器列表，第七个拥有最高优先权

1.      通用选择器

2.      元素选择器

3.      类选择器

4.      属性选择器

5.      伪类

6.      ID选择器

7.      内联样式

!important规则

当 !important 规则被应用在一个样式声明中时，该样式声明会覆盖CSS中任何其他的声明，无论它处在声明列表中的哪里。尽管如此，!important规则还是与优先级毫无关系。使用 !important 不是一个好习惯，因为它改变了你样式表本来的级联规则，从而使其难以调试。

实例：

<!DOCTYPE html>


<html>


<head>


<meta charset="utf-8">


<title>118qq.top</title>


<style type="text/css">


p{


       color:#00f !important;


       color:#f00;


}


</style>


<body>


<p style="color:orange;">这是一个段落</p>


</body>


</head>