CSS介绍及三种应用方式[内联,内嵌,外链]元素及实例讲解

最新推荐文章于 2024-05-07 20:12:44 发布

Zeddm

最新推荐文章于 2024-05-07 20:12:44 发布

阅读量1.1k

点赞数 26

分类专栏：前端三部曲文章标签： css 前端

本文链接：https://blog.csdn.net/h1008685/article/details/137765956

版权

前端三部曲专栏收录该内容

12 篇文章 0 订阅

订阅专栏

本文详细介绍了CSS在HTML中的应用，包括内联样式、内嵌样式（如ID选择器和类选择器）以及外链样式。通过实例展示了如何使用这些方法控制网页元素的布局、颜色和字体等属性。

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

css介绍

CSS（Cascading Style Sheets）是一种用于描述HTML文档外观和格式的样式表语言。CSS允许开发者和设计师将网页的呈现（布局、颜色、字体等）与内容（HTML）分离开来，从而使得网页的设计更加灵活和可维护。

HTML代码演示使用CSS样式的多种方法

css1.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #css1{
            background-color: aqua;
        }/* 使用id选择器设置所有id属性为css1的背景颜色 */
        .css2{
            color: red;
        }/* 使用类选择器设置具有类的元素文本颜色为红色 */
        p{
            font-size: 30px;     
        }/* 使用标签选择器设置所有p标签字体大小为30像素 */
    </style>
    <link rel="stylesheet" href="css2.css">
</head>
<body>
    <p style="background-color: pink;">使用[内联]方式</p>
    
    <p id="css1">使用id选择器的[内嵌]方式</p>
    <p class="css2">使用类选择器的[内嵌]方式</p>
    <p>使用标签选择器的[内嵌]方式</p>
    <!-- 引入外部css文件设置所有p标签的边框 -->

</body>
</html>

css2.css

p{
    border: 1px solid;
}
/* 设置p标签边框的宽度和样式 */

页面样式

CSS内联、内嵌与外链方法详解

内联样式

内联样式是直接在HTML元素的style属性中定义的CSS规则。适用于单个元素的样式定义。

使用[内联]方式

标签使用了内联样式来设置背景颜色为粉红色。

内嵌样式

内嵌样式在HTML文档的<head>部分的<style>标签内定义的CSS规则。用于整个页面的样式定义。

<style>
#css1{ background-color: aqua; }
.css2{ color: red; }
p{ font-size: 30px; }
</style>

在这个例子中，定义了三种样式规则：
#css1：ID选择器，用于选择ID为css1的元素，并设置其背景颜色为浅蓝色（aqua）。
.css2：类选择器，用于选择所有具有css2类的元素，并设置其文本颜色为红色。
p：标签选择器，用于选择所有的标签，并设置其字体大小为30像素。

外链样式

外链样式是在一个单独的CSS文件中定义的样式规则，然后通过<link>标签引入到HTML文档中。这种方法的优点是样式和内容分离，便于维护和重用样式。

<link rel="stylesheet" href="css2.css">

在这个例子中，我们引入了一个名为css2.css的外部CSS文件。用于设置p标签的边框的样式。

应用示例

在<body>中，有四个标签，每个标签都以不同的方式应用了css样式：

使用[内联]方式
使用id选择器的[内嵌]方式
使用类选择器的[内嵌]方式
使用标签选择器的[内嵌]方式

第一个标签使用了内联样式，背景颜色被设置为粉红色。
第二个标签通过ID选择器`#css1`应用了内嵌样式，背景颜色为浅蓝色。
第三个标签通过类选择器`.css2`应用了内嵌样式，文本颜色为红色。
第四个标签没有显式地应用任何样式，但会继承内嵌样式中为所有标签设置的字体大小（30像素）。

css外链文件分析

p：这是一个标签选择器，选择了页面上的所有 标签。任何直接应用到 标签的样式都会影响页面中所有段落的外观。

border：这是一个属性，用于设置元素的边框。

1px：这是 border 属性的第一个值，定义了边框的宽度为1像素。

solid：这是 border 属性的第二个值，定义了边框的样式。solid 表示边框是实线。其他可能的值包括 dashed（虚线）、dotted（点线）。