CSS——使用CSS控制页面

灰太狼 2022-06-02 00:23 224阅读 0赞

【前言】

本篇博客主要介绍几种使用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的导入式。即：

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

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