1.简介及样式表分类
1.1简介
【1】适用场景
CSS核心是
控制视觉表现
【2】详细介绍
1.2 样式表分类
<head>
<style>
div {
color: blue;
}
strong {
color: purple;
}
</style>
</head>
<body>
<!-- 1.内联样式表（行内样式表） 直接写到标签内部 控制当前标签-->
<p style="color:pink;">我是佩奇我喜欢粉色</p>
<!-- 2.内部样式表（嵌入样式表） 写到head标签中的style标签中 控制当前页面 -->
<div>我是乔治，我是蓝色</div>
<strong>我喜欢紫色</strong>
</body><head>
<!-- 3.外部样式表（链接样式表） 写到外部的css文件中 控制当前页面 -->
<link rel="stylesheet" href="./css.css/my.css">
</head>
<body>
<div>我是猪爸爸，我喜欢红色</div>
</body>
并且另写一个CSS文件：
eg:
div{
color: red;
}
2.类型选择器及AI注释
2.1CSS选择器
【1】选择器是什么
【2】选择器的细分
2.1.1基础选择器
2.1.1.1类型选择器
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
color: pink;
font-size: 20px;
}
/*就近原则 层叠性【谁离body的div近，谁决定】
所以最后是红色
*/
div {
color: red;
}
</style>
</head>
<body>
<!-- 类型选择器 标签选择器 也叫元素选择器 -->
<div>春</div>
<div>夏</div>
<div>秋</div>
<div>冬</div>
</body>注意书写规范：
2.1.1.2 类选择器
【1】场景
【2】语法
【3】代码演示
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 类选择器 选择一个或多个 实现差异化选择*/
.pink {
color: pink;
}
/* 用短横线连接单词 */
.sub-nav {
font-size: 20px;
}
</style>
</head>
<body>
<div class="pink">春</div>
<div>夏</div>
<div>秋</div>
<!-- 用空格来写下一个属性 -->
<div class="pink sub-nav">冬</div>
</body>2.1.1.3 id选择器
【1】语法
【2】代码演示
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* id 选择器 */
#first {
color: pink;
}
</style>
</head>
<body>
<div id="first">春</div>
<div>夏</div>
<div>秋</div>
<div>冬</div>
</body>注意：类选择器与id选择器的区别
2.1.1.4通配符选择器
【1】语法
2.1.1.5 总结
2.1.2关系选择器
【1】分类
2.1.2.1 后代选择器
【1】使用场景
【2】语法
【3】代码演示
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 后代选择器 -->
<style>
/* 法一 */
div a {
Color: red;
}
/* 法二 */
.footer a {
color: red;
}
/* 选择其一即可 */
/* 法一 */
ul li a {
color: skyblue;
font-size: 20px;
}
/* 法二 */
.nav li a {
color: skyblue;
font-size: 30px;
}
</style>
</head>
<body>
<ul class="nav">
<li><a href="#">首页</a></li>
<li><a href="#">产品介绍</a></li>
<li><a href="#">合作模式</a></li>
</ul>
<div class="footer">
<a href="#">关于我们</a>
<a href="#">联系我们</a>
<a href="#">隐私政策</a>
</div>
</body>2.1.2.2 子代选择器
【1】语法
PS：是亲儿子，不是孙子....
[2]代码演示
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 子代选择器 只选择亲儿子 */
div>span {
color: red;
}
</style>
</head>
<body>
<!-- 子代选择器 -->
<div>
<span>我是儿子</span>
<p>
<span>我是孙子</span>
</p>
</div>
</body>
2.1.2.3 兄弟选择器：邻接和通用
【1】二者区别
2.1.2.4总结
2.2.注释
