前端之css引入方式

m0_74242675

已于 2024-02-04 20:33:12 修改

阅读量210

点赞数 9

分类专栏：前端 HTML css js 文章标签：前端 css html5 css3

于 2024-02-03 17:09:38 首次发布

本文链接：https://blog.csdn.net/m0_74242675/article/details/136010020

版权

前端 HTML css js 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

CSS（层叠样式表）是一种用来描述网页样式的标记语言，并且是网页开发中不可或缺的一部分。通过CSS，开发人员可以为HTML元素应用各种样式和布局，如颜色、字体、大小、间距、定位等。

CSS的主要特点包括：

分离了内容和表现：通过将样式定义与HTML文档分离，使得网页的结构与样式相互独立，方便维护和修改。
层叠性：当多个样式定义冲突时，CSS会按优先级进行层叠并决定最终的样式。
继承性：子元素会继承父元素的样式，简化了样式的定义。

CSS的样式定义通常包含选择器和声明两部分。选择器用于选择需要应用样式的HTML元素，而声明则定义了具体的样式属性和值。例如，可以使用以下CSS代码将所有段落的字体颜色设为红色：

p {
  color: red;
}

CSS还提供了丰富的选择器类型，可以根据元素的标签名、类名、ID、属性等进行选择。除了基本的样式属性（如颜色、背景、字体等），CSS还支持布局和定位属性，如边距、定位、浮动等。

在实际应用中，前端开发人员通常通过CSS文件或者页面内的<style>标签来引入和定义样式。同时，CSS还可以与JavaScript一起使用，通过动态地修改元素的样式，实现动态的交互效果。

总的来说，CSS是一种基于选择器和声明的标记语言，用于定义网页的样式和布局，为网页提供美观和一致的外观。

css的引入方式：

在HTML中引入CSS可以通过使用`<link>`标签或者内联样式的方式。

1. 使用`<link>`标签：


<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <!-- HTML内容 -->
</body>
</html>

上述示例中，<link>标签用于引入外部的CSS文件，通过href属性指定CSS文件的路径，通过rel属性指定关系类型（在这里是stylesheet，表示外部样式表）。

2.使用内联样式

<!DOCTYPE html>
<html>
<head>
    <style>
        /* CSS样式 */
    </style>
</head>
<body>
    <!-- HTML内容 -->
</body>
</html>

在<style>标签中，可以编写CSS样式代码，这样样式规则就会直接应用到页面中的元素上。

需要注意的是，在<link>标签中引入的外部CSS文件应该以.css作为文件扩展名，而内联样式的CSS代码直接写在<style>标签内部。

3.在标签里直接写css(不推荐)

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
</head>
<body>
   <p style="color: brown;">网页</p>
</body>
</html>

以上是我分享的css引入方式，后续内容：

请点击

最后求点赞，求分享，求抱抱...

m0_74242675

关注

9
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
前端之css引入方式

通过CSS，开发人员可以为HTML元素应用各种样式和布局，如颜色、字体、大小、间距、定位等。除了基本的样式属性（如颜色、背景、字体等），CSS还支持布局和定位属性，如边距、定位、浮动等。同时，CSS还可以与JavaScript一起使用，通过动态地修改元素的样式，实现动态的交互效果。总的来说，CSS是一种基于选择器和声明的标记语言，用于定义网页的样式和布局，为网页提供美观和一致的外观。标签中，可以编写CSS样式代码，这样样式规则就会直接应用到页面中的元素上。作为文件扩展名，而内联样式的CSS代码直接写在。
复制链接

扫一扫