CSS层叠样式表_html/css_WEB-ITnose

一般说来所有样式有下面的规则（第四个最有优先性）

1、Browser default

浏览器默认

2、External style sheet

外部样式表

3、Internal style sheet（inside the

tag）

内嵌样式表（在

标签内）

4、Inline style （inside an HTML element）

行内样式（在一HTML元素内）

所以写在HTML元素中的样式有最高的优先权（写在HTML元素内的），它会替代其他形式的样式。

CSS的语法由三部分组成：一个选择器，一个属性和一个值，例如：selector{property:value}

选择器是你希望去定义的HTML元素/标签，每个属性可以有一个值，属性和值由冒号区分开外面用大括号括起来 body{color:black}

如果值为多个单词，则用双引号括起来 -p{font-family:"sans serif"}

注意：如果你想指定多个属性，你就必须将每个属性用分号隔开，下面的例子就演示了怎样定义居住红色文字锻炼

-p {text-align:center;color:red}

为了让样式定义更有可读性，你可以像这样分行描述属性

p{

text-align:center;

color:black;

font-family:arial

}

还可以将选择器组合。用逗号分隔每个选择器。下面的例子将所有的标题元素组合起来，它们的颜色都变为绿色

h1,h2,h3,h4,h5,h6{color:green}

用选择器类你可以将同一类型的HTML元素定义出不同的样式。比如你想在你的文档中有两种不同样式的段落：一种是右对齐，另外是居中的。这就告诉你该怎么用样式来做到这点

p.right{text-align:right}

p.center{text-align:center}

你必须在你的HTML文档中使用类属性（才能显示出效果）

This paragraph will be right-aligned.

This paragraph will be center-aligned.

注意：每个HTML元素只能有一个类属性

你也可以省略标签名称直接去定义，这样你就可以在所有的HTML元素中使用了。下面的例子就能让所有HTML中所有带class="center"的元素居中文字：

.center{text-align:center}

下面的代码中H1和P元素都有class=“center”。这就意味着这两个元素都将遵循选择器“center”的规则

This heading will be center-aligned

This paragraph will also be center-aligned.

不要用以数字开头为名称的类，在Mozilla/Firefox中不能正常运作。

（id选择器）

使用id选择器你可以为不同的HTML元素定义相同的样式

下面的样式规则对任何一个带有id属性值为“green”的元素都是匹配的

#green{color:green}

上面的规则将匹配h1和p元素

Some text

Some text

下面的样式规则将匹配任何一个带有id属性值为“green”的p元素

p#green{color:green}

上面的规则与h1元素不匹配（也就是说不会产生样式效果）

Some text

和class一样，id的名称的开头也不要使用数字，不然在Mozilla/Firefox中不能正常运作。

怎样插入样式表？

当浏览器阅读样式表，它会根据它（样式表）来格式化文档。有三种方式可以插入样式表

1、外部样式表（External Style Sheet）

2、内嵌样式表（Internal Style Sheet）

3、行内样式（Inline Styles）

外部样式表：

使用外部样式表是是样式应用于多张网页的理想方法。通过这个方法你只需改动一个文件就能改变整个网站的外观。使用标签让每个页面都连接到样式表。标签在head区域使用

浏览器将从mystyle.css文件中读取样式定义信息，并根据它来格式化文档

外部样式表可以用任何一个文字编辑器来书写。文件不应该包含任何的html标签。并保存为一个后缀为.css的文件。下面是一个样式表文件的内容

hr{color:sienna}

p{margin-left:20px}

body{background-image:url(images/back40.gif)}

内嵌样式表

一个内嵌样式表应该在当有单独文档有特殊样式的时候使用。使用

hr{color:red}

p{margin-left:20px}

body{background-image:url("images/back40.gif")}

行内样式

使用行内样式就失去了样式表的优势而将内容和形式相混淆了。一般这类方法在个别元素需要改变样式的时候使用

在相关的标签上用style属性来加入行内样式。样式属性可以包含任何CSS属性。例子中将展示怎样给一个段落加上左间距并将颜色改为red

This is a paragraph

多重样式表

如果一些属性被相同的选择器设置成不同的样式，值就会向更为具体的样式所继承（具体化）

举个例子，一个外部样式表有这样的h3选择器属性

h3{color:red;text-align:left;font-size:8pt}

同时有一个内嵌样式表有这样的h3选择器属性

h3{text-align:right;font-size:20pt}

如果页面在有内嵌样式表的同时又连接到外部样式表的话h3的属性将变成为

color:red;text-align:right;font-size:20pt

颜色是继承了外部样式表而文字对齐和文字大小被内嵌的样式表所替换。

版权声明：本文为博主原创文章，未经博主允许不得转载。