一、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>