1. 外部样式表的引入
<!-- rel="stylesheet"作用是 关联样式表 -->
<!-- <link rel="stylesheet" href="css文件及其路径"> -->
<link rel="stylesheet" href="../css/happy.css">
</head>
<body>
<div>今天周五，不是一点点的开心</div>
<h1>我们放假啦</h1>
<p>我们跨年啦</p>
<p>不要悲伤，要快乐</p>
3.<p>如果你孤独，来我家啊 一起打扫卫生</p>
</body>
2.外部样式表的另一种引入方式(了解)
<!-- 外部样式表的另一种引入方式 在头部写style-->
<style>
/* @import url(css文件及其路径); */
@import url(../css/happy.css);
</style>
</head>
<body>
<div>祝我们2022年健健康康，开开心心</div>
</body>
😄问题：二者的区别是什么（面试题）
1）基本含义：link属于标签语法；后者@import属于：CSS语法
2）兼容性不一样：link支持所有的浏览器，兼容性很高；@import是CSS2.1提出的，兼容性不高
3）加载顺序：link引入的样式是和结构一起加载显示的；@import引入的样式：浏览器是先加载结构后加载样式，容易出现页面闪现的效果
4）js操作DOM：link引入的样式可以使用js进行操作修饰，但是你的@import导入的样式是不能进行js操作的
3.样式表的优先级
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>样式表的优先级</title>
<!-- 2、外部样式表的引入 cyan-->
<link rel="stylesheet" href="../css/demo.css">
<!-- 1、内部样式表 pink-->
<style type="text/css">
div{
background-color: red;
background-color: pink;
}
</style>
</head>
<body>
<!-- 3、行内样式表 -->
<div style="background-color: red;">行内最大！！！外部样式表和内部样式表相比较，和书写顺序有关；后来居上 谁书写在后面 谁的优先级高一点点 因为代码自上而从下解析</div>
</body>
</html>
4.选择器
常见的选择器
1）在html里面建立文件 .html
<!-- 外部样式表的引入 -->
<link rel="stylesheet" href="../css/index.css">
</head>
<body>
<a href="javascript:;">空链接</a>
<a href="javascript:;">空链接</a>
<a href="javascript:;">空链接</a>
<a href="javascript:;">空链接</a>
<a href="javascript:;">空链接</a>
<div>今天是2021年最后一天</div>
<p class="cc ">明天，我们就认识两年啦</p>
<p>好开心啊</p>
<p id="study">希望大家好好学习</p> ( 起名字）
<p class="cc colorF">有啥不会的随时问</p>
<h2 class="aa">为啥不写h1</h2>
<h2 class="cc color">因为有一个不成文的规定</h2>
<h2>啥规定，一个页面只能出现一次h1</h2>
<ol>
<li>事业</li>
<li>健康</li>
<li>快乐</li>
<li>减肥</li>
</ol>
<ul>
<li>好好工作</li>
<li>好好学习</li>
<li>好好生活</li>
<li>好好减肥</li>
</ul>
<b>周一</b>
<strong>周二</strong>
<i>周三</i>
<em>周四</em>
<span>周五</span>
<a href="#">锚链接</a>
<a href="javascript:;">空链接</a>
</body>
2.在css里面建立文件 inex.css
1)元素选择器
a{} span{} div{} p{} li{}
/* 代表选中了页面中所有这个元素；一般用于重置某个标签自带的样式；比如说去除页面所有超链接下划线 */
a{/* 代表选中了页面中所有的超链接 */
text-decoration: none;/* 去除超链接下划线 */
}
2) id选择器 具有唯一性 啥意思 id值不可以相同
#你起的id名字{}
#study{/* 代表你选中了id名字为study的元素 */
background-color: red;
}
3)class类选择器 可以选择一个或多个元素
.你起的class名字{}
.cc{
background-color: cyan;
}
.aa{/* 代表你选中了class名字为aa的元素 */
color:red;
}
/* 注意 一个标签 是可以拥有多个class名字的 用空格隔开即可 */
/* <div class="a b"> */
.colorF{
color:white;
}
4) 通配符选择器 当下只用于去除页面缝隙
/* *代表页面中所有的元素 */
*{
margin: 0;
padding: 0;
}
5、包含选择器/后代选择器
/* A B{}代表选中了A里面的儿子B 孙子B... */
ol li{/* 代表选中了ol里面的li们 */
color:red;
}
6) 群组选择器 同时选择多个元素 逗号隔开
/* 小工，小红，小明，小华{喜欢二狗} */
b,strong,i,em,span{
background-color: yellowgreen;
}
7、伪类选择器 口诀 捡到一个LV HA哈一笑
/* 我们超链接 有四个状态！！ */
1.a:link{
/* 代表超链接初始状态 */
color:yellow;
}
2.a:visited{
/* 代表超链接被点击过后的状态 */
color:red;
}
3.a:hover{
/* 代表超链接被鼠标滑过的状态 */
color:pink;
}
4.a:active{
/* 代表超链接被点击/激活时的状态 */
color:palegreen;
}
/* 我们平常 更愿意这样子写 */
/* 代表超链接各个状态下 文字颜色都是黑色;鼠标滑过是蓝色 */
5.a{
color:black;
}
6.a:hover{
color:blue;
}
举例如下：
<!-- 内部样式表的创建 -->
<style type="text/css">
/* 只有超链接 可以使用a:link a:active a:visited 其他标签不可以！！！ */
li:hover{
/* 代表鼠标滑过li */
background-color: cyan;
}
</style>
</head>
<body>
<ul>
<li>超链接四个状态都有；其他元素只有一个hover可以用</li>
<li>超链接四个状态都有；其他元素只有一个hover可以用</li>
<li>超链接四个状态都有；其他元素只有一个hover可以用</li>
<li>超链接四个状态都有；其他元素只有一个hover可以用</li>
<li>超链接四个状态都有；其他元素只有一个hover可以用</li>
<li>超链接四个状态都有；其他元素只有一个hover可以用</li>
<li>超链接四个状态都有；其他元素只有一个hover可以用</li>
<li>超链接四个状态都有；其他元素只有一个hover可以用</li>
</ul>
</body>
652
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
