三种引入CSS的方式

欲无缘

已于 2024-01-15 16:44:56 修改

阅读量1.2k

点赞数 20

分类专栏： # CSS 文章标签： css 前端

于 2024-01-15 16:44:44 首次发布

本文链接：https://blog.csdn.net/qq_29917503/article/details/135604641

版权

CSS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

本文介绍了CSS的基础知识，包括其起源、使用中的结构与样式分离问题，以及三种引入CSS的方式（内嵌式、外链式和行内式）。重点讲解了不同引入方式的优先级及其在实际应用中的影响。

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

文章目录

CSS基础知识

概述

Cascading Style Sheet 层叠样式表

前端三大基础之一(Html结构 CSS样式 JS动作)

最早由网景公司（Netscape）提出，在1996年受到w3c的认证，发布了第一版，迄今为止已经是第四版，专门用来负责页面的样式取代了Html同时渲染结构和样式造成的页面混乱。

使用html同时渲染页面样式和结构的弊端：结构样式耦合在一起，浏览器解析困难，可读性差，毫无代码重用性。

CSS的注释

/**/ 这是css的标准注释，不能使用

CSS的格式

CSS通过选择器(selector)机制从全文精确拿取元素，通过设置名值对的方式来设置样式

sel{  
  样式名:样式值;  
  样式名2:样式值2;  
 }

三种引入CSS的方式

准备几个HTML标签用来测试

<body>
	<h2>我是H2标题</h2>
	<hr>
	<a href="#">我是一个链接</a>
	<span id="test">我是一个span标签</span>
	<div class="test">看看我听谁的？</div>
</body>

内嵌式

直接将css代码书写在head标签内，这是一种优缺点都不是很明显的书写方式，注意style标签只能书写css代码，不能书写html的标签

<head>
		<meta charset="UTF-8">
		<style>
			h2{
				/* 设置字体 */
				font-family:DFPWaWaW5;
				/*
					设置颜色 此处设置矢车菊蓝
				*/
				color:cornflowerblue;
				/*
					设置字体大小
				*/
				font-size:30px;
			}
		</style>		
</head>

运行效果

在这里插入图片描述

外链式

通过link标签引入一个独立的css文件到本页面
rel:表示引入的是一个样式表
href:表示引入css文件的路径
这种设置 css 的方式被普遍使用，实现了代码重用性

<head>
		<meta charset="UTF-8">
		<link rel="stylesheet" href="./css/style.css">
</head>

新建style.css文件

/*
    设置默认的a链接样式
*/
a{
    /* 设置颜色 */
    color:deepskyblue;
    /*
        去掉链接自带的下划线
    */
    text-decoration: none;
}

/*
    通过设置伪类来设置某种状态下a链接的样式
    sel:伪类{

    }
    :hover表示鼠标悬停时的样式
*/
a:hover{
    color:orangered;
    /* 字体加粗 */
    font-weight: bolder;
    /* 添加下划线 */
    text-decoration: underline;
}

/*
    设置被点击之后的链接的样式，注意，只要被点击后就会出现
    此样式，刷新页面无效
*/
a:visited{
    color:#663399;
}

运行效果

在这里插入图片描述

行内式

在标签内直接书写css，这种方式严重违背了解耦结构和样式的原则将结构和样式再次耦合在一起，但是由于其优先级极高，所以使用较多

background-color:设置背景色;

color:设置字体颜色

<span id="test" style="background-color: pink;color:red">我是一个span标签</span>

运行效果
在这里插入图片描述

优先级

当三种引入方式同时对一个元素进行样式的渲染时，优先级问题

优先级从高到低行内式> 外链式和内嵌式谁放在后面，会覆盖之前出现冲突得样式

可以自己通过三种方式同时对div标签进行样式渲染，测试下优先级

欲无缘

关注

20
点赞
踩
19

收藏

觉得还不错? 一键收藏
0
评论
三种引入CSS的方式

Cascading Style Sheet 层叠样式表前端三大基础之一(Html结构 CSS样式 JS动作)最早由网景公司（Netscape）提出，在1996年受到w3c的认证，发布了第一版，迄今为止已经是第四版，专门用来负责页面的样式取代了Html同时渲染结构和样式造成的页面混乱。使用html同时渲染页面样式和结构的弊端：结构样式耦合在一起，浏览器解析困难，可读性差，毫无代码重用性。
复制链接

扫一扫

专栏目录