CSS内联样式、页面嵌入、外部引用的方法

发布时间：2022-02-22 15:57:49 作者：iii
来源：亿速云阅读：174

这篇文章主要介绍“CSS内联样式、页面嵌入、外部引用的方法”，在日常操作中，相信很多人在CSS内联样式、页面嵌入、外部引用的方法问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”CSS内联样式、页面嵌入、外部引用的方法”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

CSS简介

顾名思义CSS 的意思是层叠样式表 (Cascading Style Sheets)
CSS的样式定义为如何显示 HTML 元素
CSS样式通常都会存储在样式表中
外部的样式表对工作效率有极大的提高
外部样式表通常都存储在 CSS 文件中
多个样式定义可层叠为一个

总之，CSS 可以美化页面，对页面元素进行更为精准仔细的设置，样式主要用来描述元素的字体颜色、字体大小、背景颜色、背景图片等等。

CSS作用

CSS 主要有内联样式、页面嵌入和外部引用三种使用方式，接下来我们一一来了解他们。

1、内联样式

元素的内联是直接在属性中写入元素的 style 属性，适用于样式没有其他可复用性的场合，见以下代码：

<body>
    <p >w3cschool</p>
    <p >亿速云</p>
</body>

2、页面嵌入

在<head>中加入<style>。这种做法表示此页面中所有对应元素都是采用其指定的样式，适合于样式的复用，有效减小页面体积。

<head>
    <meta charset="UTF-8">
    <title>CSS w3cschool</title>
    <style type="text/css">
        p{
            font-size:25px;
            color:red;
        }
        h2{
            color:greenyellow;
        }
        h3{
            background-color: #2196F3;
        }
    </style>
</head>
<body>
<body>
    <h2>亿速云</h2>
    <p>w3cschool</p>
    <h3>学编程</h3>
</body>

3、外部引用

在<head>中加入，将 CSS 的所有内容都写入以 CSS 为后缀的文件，可适用多个页面来共享此 CSS。

CSS 代码

h2 {
    background-color: red;
    border-color: green;
}
p {
    color: blue;
}

HTML 代码

<body>
    <h2>亿速云</h2>
    <p>w3cschool</p>
    <h3>学编程</h3>
</body>

到此，关于“CSS内联样式、页面嵌入、外部引用的方法”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注亿速云网站，小编会继续努力为大家带来更多实用的文章！