Web前端-6-css-样式_web前端开发第6章 css设计页面样式(购物网站)-优快云博客

本文深入探讨CSS（层叠样式表）的基础知识，包括其优点、基本语法及三种引入方式：内联式、嵌入式和外联式，旨在帮助读者理解CSS在网页设计中的核心作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

css概述

CSS是英文Cascading Style Sheets(层叠样式表)的缩写，CSS语言是一种标记语言，它不需要编译，可以直接由浏览器解释执行(属于浏览器解释型语言)。

css优点

1）表现和内容相分离将设计部分剥离出来放在一个独立样式文件中，HTML文件中只存放文本信息，这样的页面对搜索引擎更加友好。

2）提高页面浏览速度对于同一个页面的视觉效果，采用DIV+CSS重构的页面容量要比TABLE编码的页面文件容量小的多，前者一般只有后者的1/2大小，浏览器就不用去编译大量冗长的标签。

3）易于维护和改版，只要简单的修改几个CSS文件就可以重新设计整个网站的页面。

css基本语法

css的定义方法是：

选择器 { 属性:值; 属性:值; 属性:值;}

选择器是将样式和页面元素关联起来的名称，属性是希望设置的样式属性每个属性有一个或多个值。代码示例：

div{ width:100px; height:100px; color:red }

css样式引入方式

（1）内联式

①内联式Inline（也叫行内样式）：通过标签的style属性，在标签上直接写样式

②格式： <html标签 style="属性:值;属性:值;....">被修饰的内容</html标签>

③例如: <p style="color:blue;font-family:隶书">在HTML中如何使用css样式</p>

④特点：仅作用于本标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css 内联式</title>
</head>
<body>
    <!-- 内嵌式 作用于本标签 -->
    <p style="color:red">
        好好学习
    </p>
    <p style="color:green">
        天天向上
    </p>
</body>
</html>

（2）嵌入式

①嵌入式（也叫内页样式）：在网页上创建嵌入的样式表就是在head标签中使用<style type="text/css">....</style>标签来设置css样式

②格式：<style type="text/css">

....css样式代码

</style>

③例如：<style type="text/css">

选择器{

width:100px;

height:100px;

background:red;

}

</style>

④特点：作用于当前整个页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css 嵌入式</title>
    <style type="text/css">
        /* 页面上所有的<h2>标签蓝色显示；<b>标签红色显示*/
        h2{
            color:blue;
        }
        b{
            color:red;
        }
    </style>
</head>
<body>
    <h2>标题蓝色显示</h2>
    <b>加粗红色显示</b>
    <p>这段内容正常显示</p>
</body>
</html>

（3）外联式

①外联式（也叫外部样式）：将网页链接到外部样式表，在head标签中使用<link/>标签导入一个css文件，在作用于本页面，实现css样式设置（推荐使用）

②格式：<link href="文件名.css" type="text/css" rel="stylesheet"/>

③特点：作用于整个网站，工作常用这种方式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css 外联式</title>
    <link rel="stylesheet" type="text/css" href="1.css">
</head>
<body>
    <h2>这是标题</h2>
    <b>加粗显示</b>
    <p>这是一段话</p>
</body>
</html>

【1.css】中设置样式

b{
    color:green;
}

p{
    color:blue;
}

注意:他们的优先级：内联式 > 嵌入式 > 外联式

当样式冲突时，就是采用就近原则，是指css属性离被修饰的内容最近的为主。若没有样式冲突则采用叠加效果。