900字范文 > //css 层叠样式表（Cascading Style Sheets）

//css 层叠样式表（Cascading Style Sheets）

时间：2023-02-16 18:47:51

表单补充：

//简单css样式表（Cascading Style Sheets）//样式使用方式//内联样式//内部样式//外链样式//元素选择器//标签选择器//id选择器//类选择器//表单补充

//简单css样式表（Cascading Style Sheets）

CSS全称为层叠样式表（Cascading Style Sheets），通常又称为风格样式表（Style Sheet），他是用来进行网页风格设计的。CSS拥有对网页对象和模型样式编辑的能力，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言。

在网页中，CSS通过设立样式表，可以统一控制HTML中各个标签的显示属性，如设置字体的颜色、大小、样式等，使用CSS还可以设置文本居中显示、文本与图片的对齐方式、超链接的不同效果等，这样层叠样式表就可以更有效地控制网页外观。CSS同样也是一种标识性语言。

CSS的出现给Web网页开发带来了很多优势，总结如下：

内容与表现相分离。表现统一性。样式的丰富性。减少网页代码量，增加网页浏览速度，节省网络带宽，极大的提高工作效率。

//样式使用方式

//内联样式

内联样式（行内样式）是混合在HTML标记里使用的，用这种方法可以很简单的对某个标签元素单独定义样式。内联样式就是在HTML标签中直接使用style属性设置CSS样式。

应用方式如下：

<标记名 style=“样式属性:样式属性值;样式属性:样式属性值;……”></标记名>

例如：

<div style="background:red;width:100px;height:100px;">这是一个盒子</div>

他在网页的显示结果如下：

background:red;背景红色

width:100px;宽度100像素

height:100px;高度一百像素

//内部样式

在HTML中通过使用style标签引入CSS样式，style标签永固为HTML文档定义样式信息。style标签位于head标签中，它规定浏览器中如何呈现HTML文档。在style标签中，type属性是必须的，它用来定义style元素的内容，唯一值是“text/css”。

当单个文件需要特别样式时，就可以使用内部样式，内部样式只对其所在的网页有效，是一种比较常用的方法。基本使用语法如下：

<style type="text/css">选择符1{样式属性:样式属性值;样式属性:样式属性值;...}选择符2{样式属性:样式属性值;样式属性:样式属性值;...}选择符3{样式属性:样式属性值;样式属性:样式属性值;...}选择符4...

例如：

<style type="text/css">div{width: 100px;height: 100px;background-color: gold;}#header{width: 100px;height: 100px;background-color: yellow;}.footer{width: 100px;height: 100px;background-color: green;}</style>

//外链样式

外链样式就是把CSS代码保存为一个单独的样式表文件，文件扩展名为“.css”，在页面中引入外部样式即可。而链接外部样式有两种方法：

1、在HTML页面中使用<link/>标签链接外部样式，这个link标签必须放到页面的<head>标签内，语法格式如下所示：

<head>...<link href="style.css" rel="stylesheet" type="text/css"/>...</head>

上述语法格式中，rel="stylesheet"是用来定义链接的文件与HTML之间的关系。stylesheet值表示指定一个固定或首选的样式。type上文已经讲到，href是指文件所在的位置，可以是相对路径也可以是绝对路径。

2、导入外部样式，用法与链接外部样式基本相同，都是使用外部样式文件。只是在语法和运行方式上有所区别。链接外部样式表示HTML文件直接链接到CSS文件中，而导入外部样式实在HTML文件初始化时才被导入HTML文件内，作为文件的一部分，类似内嵌。它的基本语法如下：

<style>@ import url("样式表路径")</style>

导入外部样式使用import，有多种写法，常见的如下：

@ import url("样式表路径");@ import url(样式表路径);@ import "样式表路径";@ import '样式表路径';

//元素选择器

选择器（selector）是CSS中非常重要的概念。所有HTML语言中的标签样式，都是通过不同的CSS选择器进行控制的。用户只需要通过选择器，就可以对HTML中的标签进行选择，并赋予各种声明，即可实现各种效果。

选择器指大括号内的这组样式代码针对的现象，即针对那些页面元素中进行设置，可以是HTML元素，如body、p、a等，也可以是元素的属性，如id值或class值。

属性和属性值是CSS的核心，每个HTML元素的CSS样式中都有丰富的样式属性。如字体颜色、大小、定位、浮动等。

CSS的使用方式就是首先指定对什么选择器进行设置，然后指定对该对象上的哪些方面的属性进行设置，最后给出该设置的属性值。

//标签选择器

对某一种标签进行选择，例如：

div{width: 100px;height: 100px;background-color: gold;}

div选择器，用于声明页面中所有div标签的样式风格。类似的还有p标签，h1等等等等。

样式重叠时，下面的样式会覆盖上面的样式

内联样式权重>内部样式权重>外链样式权重

默认标签上是有样式的。

//id选择器

id选择器为带有指定id的元素设置样式，允许以一种独立于文档元素的方式来指定样式。所有主流浏览器都支持id选择器。id选择器使用"#"前缀标识符进行标识，后面紧跟指定的元素的id名称。在HTML的标签中，只要在HTML中设置了id属性，就可以直接调用CSS中的id选择器。元素的id名称是唯一的，只能对应于文档中一个具体的元素。

例如：

<style>#header{width: 100px;height: 100px;background-color: yellow;}</style></head><body><div id="header">123</div><div class="footer">123</div>

上面两个div盒子中只有第一个div盒子被添加了样式。

注意：这里的id名可以是任何合法的字符（第一个字符不能是数字），由开发者自行定义。