您的位置：首页 > Web前端 > CSS

CSS——使用CSS控制页面

2017-12-27 20:14 204 查看

【前言】

本篇博客主要介绍几种使用CSS控制页面的方法，以及各种方式的优先级问题。

【正文】

一、使用CSS控制页面的方法

1、行内样式：

直接对HTML的标记使用style属性，然后将CSS代码直接写在其中

<!--行内样式-->
<p style="color:#FF00FF;font-size:25px;font-weight:bold;">正文内容</p>

2、内嵌式:

将CSS写在<head>与</head>之间，并且用<style></style>标记进行声明

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>内嵌式</title>

<style type ="text/css" >
p {/*设置P标签样式*/
color:#FF00FF;
font-size:25px;
}
</style>
</head>

<body>
<!--内嵌式-->
<p>正文内容</p>
</body>

</html>

3、链接式：

即把相应的CSS文件链接到HTML文件中的<head></head>标记中。链接式将HTML页面本身与CSS样式风格分离为两个或者多个文件，实现了页面框架HTML代码与美工CSS代码的完全分离。

<!-- 链接式-->
<link href="StyleSheet.css" rel="stylesheet" />

4、导入样式

导入样式表与链接样式表的功能基本相同，只是语法和运作方式上略有区别，如：

▲ 导入样式：采用import方式导入样式表，在HTML文件初始化时，会被导入到HTML文件内，作为文件的一部分，类似内嵌式的效果。

▲ 链接式：在HTML的标记需要格式时才以链接的方式引入

▲ 常用的导入样式表方法有以下几种：

@import url(sheet1.css);
@import url("sheet1.css");
@import url('sheet1.css');
@import sheet1.css;
@import "sheet1.css";
@import 'sheet1.css';

二、四种方式的优先级问题：

▲行内样式的优先级最高，其次是采用<link>标记的链接式，接下来是位于<style>和</style>之间的内嵌式，最后是采用@import的导入式。即：

行内样式 > 链接式 > 内嵌式 > 导入式

▲温馨提示：虽然以上四种样式存在有优先级，但在设计网站时最好只使用其中的一两种即可，否则不利于后期的维护。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航