CSS样式表应用技巧-优快云博客

本文链接：https://blog.youkuaiyun.com/min_mmax/article/details/77126755

本文介绍了如何使用CSS样式表来美化HTML页面，包括创建外部、嵌入式样式表及应用内联样式的方法，并探讨了样式优先级及媒体相关样式表的应用。

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

写在前面：
暑假自己在家学习，真的需要很强自制力。自己八月初又开始三天打鱼两天晒网了，接下来不能再这样了。

创建外部样式表
链接到外部样式表
创建嵌入式样式表
应用内联样式
位置的重要性
使用与媒体相关的样式表
提供替代的样式表
借鉴他人的灵感：CSS

1.创建外部样式表
文本编辑器中创建css文件
文件名不包含空格
在外部样式表开头最好添加@charset “UTF-8”；

2.连接到外部样式表
在每个希望使用样式表的html页面的head部分，输入<link rel="stylesheet
输入一个空格，然后输入href=”url.css”,其中url.css是样式表的名称
输入一个空格和/> 也可以不输入空格，直接输入>

多个样式表有冲突时，靠后优先级高

3.创建嵌入样式表
在HTML文档head部分输入<style>
根据需要，定义任意数量的样式规则
输入/style>结束嵌入

当且仅当style出现在link后面，才会覆盖样式表。

4.应用内联样式
在希望进行格式化的html元素中，输入style=”
创建一个样式规则，但不要包括花括号和选择器。
创建其他样式定义，输入;
输入后引号”

;分割多属性定义 “”包围样式定义

5.位置的重要性
基本规则：相同条件下，越晚出现的样式优先级越高。内联样式拥有最高的优先级。
标记！important的样式拥有最高优先级

6.使用与媒体相关的样式表
在link或style开始标记中添加media=”output”,其中output可以使print，screen，all。多个值之间用逗号隔开。
也可以在样式表中使用@media规则，这种方法不需要在link中指定媒体类型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>El Palau de la Música</title>
    <link rel="stylesheet" href="base.css" media="screen" />
    <link rel="stylesheet" href="print.css" media="print" />
</head>
<body>
<article>
    <h1>El Palau de la Música</h1>

    <img src="img/palau250.jpg" width="250" height="163" alt="El Palau de la Música" /> 
    <img src="img/tickets.jpg" width="87" height="163" alt="The Ticket Window" />

    <p>I love the <span lang="es">Palau de la Música</span>. It is ornate and gaudy and everything that was wonderful about modernism. It's also the home of the <span lang="es">Orfeó Català</span>, where I learned the benefits of Moscatell.</p>
</article>
</body>
</html>

7.提供替代的样式表
指定基本样式，使用简单描述，不带title属性
要指定可以被其他样式替代的首选样式表，就在link元素中添加title=”label” 其中label时标识首选样式表的名称
要制定替代样式表的，就在link中使用rel=”alternate stylesheet” title=”label” 其中label是替代样式表的名称

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>El Palau de la Música</title>
    <link rel="stylesheet" href="base.css" />
    <link rel="stylesheet" href="preferred.css" title="Dashed" />
    <link rel="alternate stylesheet" href="alternate.css" title="Dotted" />
</head>
<body>
<article>
    <h1>El Palau de la Música</h1>

    <img src="img/palau250.jpg" width="250" height="163" alt="El Palau de la Música" /> 
    <img src="img/tickets.jpg" width="87" height="163" alt="The Ticket Window" />

    <p>I love the <span lang="es">Palau de la Música</span>. It is ornate and gaudy and everything that was wonderful about modernism. It's also the home of the <span lang="es">Orfeó Català</span>, where I learned the benefits of Moscatell.</p>
</article>
</body>
</html>