如何为网页添加CSS样式

最新推荐文章于 2024-04-06 22:43:58 发布

e7182818

最新推荐文章于 2024-04-06 22:43:58 发布

阅读量2.5k

点赞数 64

分类专栏： # CSS 学习笔记文章标签： css 前端图形渲染

本文链接：https://blog.csdn.net/e7182818/article/details/135508839

版权

CSS 学习笔记专栏收录该内容

9 篇文章 0 订阅

订阅专栏

本文介绍了CSS的三种主要应用方式：外部样式表通过链接文件统一改变网站风格，内部样式适用于单页定制，内联样式则用于个别元素的个性化。同时讲解了样式表的层叠规则和优先级，强调了内联样式的高优先级以及避免过度使用以保持HTML结构清晰。

摘要由CSDN通过智能技术生成

在这里插入图片描述

为网页添加超美样式

哇，CSS真是个神奇的东西呢！虽然全称为层叠样式表（Cascading Style Sheets）听起来有点复杂，但其实它就是用来美化网页上的HTML元素的。

我学到的三种CSS使用方式

在装饰网页的过程中，我发现了三种非常实用的CSS应用方式：外部样式表、内部样式表和内联样式。

外部样式表

这个方式真的很有趣！你可以在一个单独的文件（通常是.css后缀）里写下所有的CSS代码，然后在HTML文件中通过<link>标签来引用它。这样一来，只需要修改一个文件，就能改变整个网站的外观！

比如下面的HTML代码：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>我的美丽网页</title>
    <link rel="stylesheet" href="beautifulStyles.css">
</head>
<body>
    <h1>欢迎光临我的网页！</h1>
    <p>这里充满了精彩的内容。</p>
</body>
</html>

然后在beautifulStyles.css文件中，我们可以这样写：

body {
    background-color: lavender; /* 背景色变为淡紫色 */
}

h1 {
    color: navy; /* 标题文字变为深蓝色 */
    text-align: center; /* 标题居中显示 */
}

记住哦，在CSS中设置属性时，属性名和属性值之间用冒号分隔，多个属性之间用分号隔开。

请添加图片描述

内部样式表

如果只想针对单个页面添加样式，内部样式表是个不错的选择。把CSS代码放在HTML文件的<head>部分的<style>标签内即可。

例如：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>这个网页独一无二</title>
    <style>
        body {
            background-color: beige; /* 背景色变为米色 */
        }
        h1 {
            color: forestgreen; /* 标题文字变为森林绿 */
            font-size: 2rem; /* 标题文字大小 */
        }
    </style>
</head>
<body>
    <h1>这个网页的独特标题</h1>
    <p>这里的内容也是独一无二的。</p>
</body>
</html>

内联样式

内联样式是直接在HTML元素上通过style属性来应用CSS代码。这种方式可以让每个元素都拥有独特的样式！

例如：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>我的特色网页</title>
</head>
<body>
    <h1 style="color: darkorange; font-size: 2.5rem;">看我这个独一无二的标题！</h1>
    <p style="color: saddlebrown;">这里的段落文字也有独特的样式。</p>
</body>
</html>