CSS的特性以及在HTML中的三种用法

来源：互联网发布：java script实例编辑：程序博客网时间：2024/06/06 08:39

简介

CSS和HTML一样，也是一种标记语言，代码简单，通过浏览器解释执行，是一种用于为HTML文档定义布局的样式表语言。

作用：

HTML用于结构化内容；CSS用于格式化结构化的内容

Ø CSS的出现弥补了HTML对标记属性控制的不足，如“背景图像重复”只能用CSS的“background-repeat”才能实现

Ø CSS将网页内容与样式进行了分离，实现了对两者的“解耦和”，因此使得样式内容可以被很好的复用，大大提高了网站开发者的工作效率和后期的维护工作

特性：

继承性：

指被包在内部的标签将拥有外部标签的的样式性质。

例：

层叠性：

指当有多个选择器都作用于同一元素时，即多个选择器的范围发生了重叠，CSS该怎样处理？

（1）若多个选择器定义的样式不发生冲突，则元素应用所有选择器定义的样式

例：

（2）若多个选择器定义的样式发生冲突（比如：同时定义了字体颜色属性），则CSS按选择器的优先级，让元素应用优先级高的选择器样式。

CSS定义的选择优先级从高到低为：行内样式 > ID样式 >类别样式>标记样式

测试：

<html><head><title>css层叠测试21</title><style type="text/css">/*标记样式*/p{color:yellow}/*类别样式*/.classStyle{color:blue}/*ID样式*/#idStyle{color:green}</style></head><body><!--行内样式--> <p class="classStyle" id="idStyle" style="color:red">Hello World</p></body></html>

分别用四种样式设置“Hello World”的颜色属性，最终显示样式是“行内样式”的red。如下：

注：我们可以通过“!important“属性强制改变选择器优先级，加！important的选择器优先级最高。

例：将上例中的标签样式语句改为“p{color:yellow !important}”，这样运行结果会变为黄色，通过加！important，将本来优先级最低的“标签样式”变为了优先级最高。

CSS在HTML中的三种用法：

（1）内联样式表：

直接将使用HTML元素的style属性来改变元素的样式，style属性可以应用于任意body元素（包括body本身）

例：

<html><head><title>css内联样式表测试</title> </head> <body> <p style="color:red">这里应用css内联样式表，为红色字体</p> </body></html>

运行结果：

（2）内部样式表：

采用HTML元素的style属性，将样式表的内容定义在HTML文件的<head>标记内，例：

<html><head><title>css内部样式表测试</title><style type="text/css">.csstest{color:blue}</style> </head> <body> <p class="csstest">这里应用css内部样式表，为蓝色字体</p> </body></html>

运行结果：

（3）外部样式表：

指引用一个样式表文件（是一个扩展名为.css的文本文件），可以将一个文件应用于多个html页，使得样式可复用，大大提高了网站开发效率。

引用一个样式表有两种方法：（1）链入外部样式表（2）导入外部样式表

（3.1）链入外部样式表：

在HTML文件的<head>区域内使用<link>标记进行链接，语法：

其中url为样式表文件的地址，可以是相对地址和绝对地址

<html><head><title>css外部样式表-链入外部样式表测试</title><link rel=”stylesheet” type=”text/css” href=”style/style.css”/> </head> <body> <p class="csstest">这里应用css外部样式表，为红色字体</p> </body></html>

原理：<link rel=”stylesheet”type=”text/css” href=”url”/>告诉浏览器，在执行html文件时，应使用相应url下的css文件进行布局和格式化。（文件style.css放在style目录下，代码为 .csstest{color:red}）

（3.2）导入外部样式表：

在HTML文件的<style> 区域内引用一个外部样式表文件，语法如下：

<style type="text/css">@import url(样式表目录地址)…</style>

@import声明可以放到<head>标记之外，也可以放到<head>标记之内，但根据语法规则，一般放到<head>内使用，举例如下：

<html><head><title>css外部样式表-导入外部样式表测试</title><style type="text/css">@import url(style/style.css)；</style> </head> <body> <p class="csstest">这里应用css外部样式表的导入外部样式表形式，为红色字体</p> </body></html>

原理同上面的“链入外部样式表”;

注：@import声明后的“； ”不能省略，此外，某些浏览器可能不支持导入外部样式表的@import声明，所有最好别用这种方法，见到了认识即可。