CSS的创建与表现

CSS

CSS,层叠样式表,是用来对HTML文档外观的表现形式进行排版和格式化。

CSS样式是由一条或多条以;隔开的样式声明组成。每条声明的样式包含着一个CSS属性和属性值。

创建CSS

可以通过以下三种方式来创建CSS。

  • 元素内嵌样式

  • 文档内嵌样式

  • 外部引用样式

元素内嵌样式

在元素中使用style属性来声明CSS样式。

<p style="color:red; font-size:50px;">一段文本</p>
1

文档内嵌样式

在HTML文档的<head>中创建**<style>**,通过选择器的方式调用指定的元素并设置CSS。

<head>
    <style type="text/css">
    p {
        color: red;
        font-size: 50px;
    }
    </style>
</head>
1
2
3
4
5
6
7
8

外部引用样式

将CSS样式保存在一个单独的**.css文件中,HTML文档通过<link>**来引入使用即可。比如,下面定义一个style.css文件和要使用它的HTML文档。

@charset "utf-8"

p {
    color: red;
    font-size: 50px;
}
1
2
3
4
5
6
<head>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
1
2
3

样式的表现

浏览器样式

浏览器样式,即某个元素在浏览器运行时默认附加的样式。

<b>元素本身隐含加粗样式。

可设置CSS样式冲突来抵消浏览器样式,如<b style="font-weight:normal;">去除b元素隐含的加粗样式</b>

样式表层叠

样式表层叠,即同一个元素通过不同方式设置样式表产生的样式重叠。

CSS样式可通过多种方式进行创建,若不同方式创建的样式所作用的属性相同,会产生冲突替换。而此时的优先级从高到低的顺序为:

  1. 元素内嵌样式。

  2. 文档内嵌样式。

  3. 外部引入样式。

  4. 浏览器样式。

以下同时用前三种方式设置p元素的样式,可知相同的color属性被替换,而font-*属性因为名称不同而可以同时产生作用。

// 外部引入
@charset "utf-8"
p {
    color: orange;
    font-style: italic;
}
1
2
3
4
5
6
<!-- 文档内嵌 -->
<sytle type="text/css">
p {
    color: blue;
    font-weight: bold;
}
</style>

<!-- 元素内嵌 -->
<p style="color: red;font-size: 30px;">我将被三种方式叠加样式</p>
1
2
3
4
5
6
7
8
9
10

可对某属性使用!important强行设置最高优先级。如强行设置外部引入的color属性为最优,即color: orange !important;

样式表继承

样式表继承,即某一个被嵌套的元素得到它父元素的样式。

样式只适用于元素的外观,如文字、颜色、字体等。而元素在页面上的布局样式则不会被继承。

<style type="text/css">
p {
    color: red;
    border: 1px solid red;
}
</style>

<p>这是<b>CSS基础</b></p>
1
2
3
4
5
6
7
8

以上的b元素会继承p元素的color属性,但不会继承border属性。若使用inherit可让b元素继承父元素的布局样式。

b {
    border: inherit;
}
1
2
3