前端_CSS_01:CSS介绍&引入方式

最新推荐文章于 2021-08-04 04:35:16 发布

耳东er

最新推荐文章于 2021-08-04 04:35:16 发布

阅读量86

点赞数 1

分类专栏：前端基础文章标签： html

本文链接：https://blog.csdn.net/q734044429/article/details/117959244

版权

前端基础专栏收录该内容

7 篇文章 0 订阅

订阅专栏

本文介绍了CSS在网页设计中的作用，将其比喻为网页的‘精装修’，并讲解了CSS的三种引入方式：行内式、内嵌式和链接式。通过实例展示了不同引入方式对同一标签的影响，强调了优先级遵循‘就近原则’，即行内式最高。此外，还提供了内嵌式和链接式引入的代码示例。

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

一、CSS简介

在这里插入图片描述

HTML —— 搭建网页的主体结构        —— 毛胚房
CSS   —— 修饰网页，让网页更漂亮 —— 精装修
JS      —— 做交互的                          —— 智能家电
———————————————————————————————————————————————

—— span 行内标签（元素）：在页面上不会独占一行的标签，一般用于在网页上划定一个范围一般结合CSS样式(style属性) 帮助我们确定某些现实效果的作用范围
—— div 块标签（元素）：在页面上独占一行的标签，一般用于做网页的布局

二、CSS的引入方式

⭐行内式引入
借助标签的style属性引入
style 属性中语法为：样式名：样式值；…

⭐内嵌式引入
将CSS样式的代码提取出来，通过选择器确定样式作用范围
在head标签中，使用style双标签定义CSS样式
减少相同代码的编写量，减少代码的维护工作量

⭐链接式引入
行内式引入只能将样式作用于当前标签
内嵌式引入可以将样式作用于多个标签，但不能作用于其他网页
链接式引入可以将CSS代码放入独立的 .css 文件中，可以使当前网页更加简洁
每一个需要引入样式的HTML，在head标签中使用link标签引入css文件即可

💨————如果三种引入方式同时作用于同一个标签，如果样式冲突，谁的优先级更高？
💨优先级原则：就近原则————越靠近标签的引入方式优先级越高（行内式最优先）

<html>
	<head>
		<meta charset="utf-8">
		<title>引入方式</title>
		
		<!-- 内嵌式引入 -->
		<style type="text/css" >
			/* 选择器 */
			span{
				color: blueviolet;
				font-size: 40px;
				background-color:  dimgray;
			}
		</style>
		
		<!-- 链接式引入 -->
		<link rel="stylesheet" type="text/css" href="css/mycss.css"/>
	</head>
	<body>
		
		<!-- 行内式引用 -->
		<span style="color: red;font-size: 20px;background-color: black;">
			今天是个上分的好日子，针不错
		</span>
		<br>
		<span >
			今天是个上分的好日子，针不错
		</span>
		<br>
		<span >
			今天是个上分的好日子，针不错
		</span>
		<br>
		<span >
			今天是个上分的好日子，针不错
		</span>
		<br>
		<span >
			今天是个上分的好日子，针不错
		</span>
	</body>
</html>