css的引入方式

最新推荐文章于 2024-10-13 17:27:18 发布

gzxcghzxysjnc7

最新推荐文章于 2024-10-13 17:27:18 发布

阅读量75

点赞数

分类专栏：日记笔记文章标签： css 前端 html

本文链接：https://blog.csdn.net/2202_75660142/article/details/129033471

版权

日记同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

笔记

8 篇文章 0 订阅

订阅专栏

文章介绍了CSS样式的三种引入方式：外部样式表（链接式），内部样式表（嵌入式）和行内样式表（行内式）。外部样式表通过<link>标签引用单独的.css文件，实现结构与样式的分离；内部样式表将CSS代码写在HTML的<style>标签内，方便控制整个页面样式，但未完全分离；行内样式直接在元素标签内使用style属性，适用于简单样式修改，但不推荐大量使用。

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

有三种:外部样式表(链接式) 内部样式表(嵌入式) 行内样式表(行内式)

外部样式表(链接式开发最常用):单独写一个以.css为后缀的文件

引入外部样式表分为两步：

1. 新建一个后缀名为 .css 的样式文件，把所有 CSS 代码都放入此文件中。

2. 在 HTML 页面中，使用<link> 标签引入这个文件。

简洁明了

练习如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>外部样式表</title>
    <link rel="stylesheet"  href="style.css">
</head>
<body>
    <div>新年快乐</div>
    <p>好好学习 天天向上</p>
</body>
</html>

div {
    color:burlywood ;font-family: 'Microsoft yahei';
}
p {
    color:brown ;text-align: center;line-height: 30px;
}

内部样式表（内嵌样式表):是写到html页面内部. 是将所有的 CSS 代码抽取出来，单独放到一个 <style> 标签中。

 <style> 标签理论上可以放在 HTML 文档的任何地方，但一般会放在文档的<head>标签中

 通过此种方式，可以方便控制当前整个页面中的元素样式设置

 代码结构清晰，但是并没有实现结构与样式完全分离

 使用内部样式表设定 CSS，通常也被称为嵌入式引入，这种方式是我们练习时常用的方式

行内样式表（内联样式表）是在元素标签内部的 style 属性中设定 CSS 样式。适合于修改简单样式.

<div style="color: red; font-size: 12px;">好好学习天天向上</div>

 style 其实就是标签的属性

 在双引号中间，写法要符合 CSS 规范

 可以控制当前的标签设置样式

 由于书写繁琐，并且没有体现出结构与样式相分离的思想，所以不推荐大量使用，只有对当前元素添加简单样式的时候，可以考虑使用

 使用行内样式表设定 CSS，通常也被称为行内式引入

总结如下:

练习如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>引入方式</title>
</head>
<body>
    <p>
        引入方式有三种:内部 行内(嵌入式) 外部(链接式)
    </p>
    <div>内部的就是练习时用的 不限制地方 但是一般style写在/head上  在style里面写css的需求 </div>
   <p> <div style="color:darkgreen ;text-decoration: underline ;">嵌入式比较方便 但不适合大规模 有单独的css设置的可以采用它</div></p>
    <div>链接式是用<link rel="stylesheet" href="路径名称">导入 css文件单独成为一个文件对内容进行设置</div>
</body>
</html>