✨CSS简介
- CSS指的是层叠样式表 (Cascading Style Sheets)
- CSS 描述了如何在屏幕、纸张或其他媒体上显示 HTML 元素
- CSS 节省了大量工作，它可以同时控制多张网页的布局
- 外部样式表存储在 CSS 文件中
✨CSS语法规范
CSS规则由两个主要的部分构成:选择器以及一条或多条声明。
<style>
p1{colore: red;font-size: 25ph;}
/*选择器{样式}*/
</style>
- 选择器是用于指定CSS样式的HTML标签，花括号内是对该对象设置的具体样式
- 属性和属性值以“键值对”的形式出现
- 属性和属性值之间用“：”分开
✨CSS基础选择器
✨作用
选择器是根据不同需求把不同的标签选出来，即选择标签用的
✨分类
选择器分为基础选择器和复合选择器
- 基础选择器是由单个选择器组成的
- 基础选择器包括：标签选择器、类选择器、id选择器、通配符选择器
✨标签选择器
- 标签选择器是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式
- 能快速为页面中同类型的标签统一设置样式
<head>
<style>
p {color: blue;}
div {color: green;}
</style>
</head>
<body>
<p>吃饭1</p>
<p>吃饭2</p>
<p>吃饭3</p>
<div>
睡觉1
睡觉2
睡觉3
</div>
</body>
✨类选择器
- 如果想要差异化选择不同的标签，单独选一个或者某几个标签，可以使用类选择器
- 类选择器在HTML中以class属性表示，在css中以“.”号显示
- 记忆口诀：样式点定义，结构类调用
✨多类名使用
- 给一个标签指定多个类名
- 各个类名中间用空格隔开
<head>
<style>
.red{
color:red;
}
.eat{
color: pink;
}
.font {font-size: 30px}
p {color: blue;}
/*原本所有<p>的值都是蓝色，但是类选择器差异化了吃饭123*/
</style>
</head>
<body>
<p class="red font">吃饭1</p>
<p class="eat font">吃饭2</p><!--使用两个类名，改变字体颜色和大小-->
<p class="eat">吃饭3</p>
<p>吃饭4</p>
</body>
✨id选择器
- 样式#定义，结构id调用
- 类选择器可以重复使用，id选择器只能调用一次
- 类选择器在修改样式中用的最多，id选择器一般用于页面唯一性的元素上
<head>
<style>
#five {color: skyblue;}
</style>
</head>
<body>
<div id="five">五月天</div>
<!--<div id="five">周杰伦</div>
错误 id选择器只能调用一次，别的标签不能再使用了-->
</body>
✨通配符选择器
- 使用“ * ”定义，表示选取页面中所有标签
- 不需要调用，自动就给所有元素使用样式
<head>
<style>
* {color: red;} /* “ * ”把html body div p li等等标签都改成了红色*/
</style>
</head>
<body>
<div>五月天</div>
<p>温柔</p>
<ul>
<li>知足</li>
</ul>
</body>
✨css的引入方式
- 行内样式表（行内式）就是在HTML页面内部写样式，但是单独在style标签内
- 内部样式表（嵌入式）在元素标签内部的style属性中设定css样式
<body>
<p style="color: red;">我想要一个红包</p>
</body>
- 外部样式表（链接式）样式单独写到css文件中，之后把css文件引入到HTML页面中使用（实现结构与样式相分离）
- 新建一个后缀名为.css的样式文件，写入css代码
- 在HTML中使用link标签引入这个样式
/*.css样式文件*/
p {
color: red;
} /*这个css文件只有样式没有标签*/
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<P>我想要一个红包</P>
</body>
</html>
✨Emmet 语法
- Emmei语法的前身是zwn coding,它食用缩写来提高html或css的编写速度，VS code内部已经集成该语法
- 快速生成HTML结构语法
- 快速生成css样式结构
- 格式化代码
✨复合选择器
- 复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的
- 复合选择器可以更准确、更高效的选择目标元素（元素）
- 分类：后代选择器、子选择器、并集选择器、伪类选择器
✨后代选择器
可以选择父元素里面的子元素，标签嵌套。
基本语法：元素1 元素2 {样式声明} 最后修改的是元素2的样式
<head>
<style>
ol li {
color: red;
}
.nav li {
color: gold;
}
</style>
</head>
<body>
<ol>
最终改变的是li中的标签的样式
<li>ol的子代</li>
<li>ol的子代</li>
<li>
<div>没有添加div的样式也不会改变</div>
</li>
</ol>
<ol class="nav">
加上类名区分
<li>第二个ol的子代</li>
<li>第二个ol的子代</li>
<li>第二个ol的子代</li>
</ol>
</body>
✨子选择器
子元素选择器只能选择作为某元素的最近一级子元素 语法：元素1>元素2{样式声明}
✨并集选择器
可以选择多组标签，同时为他们定义相同的样式 语法：元素1 ，元素2 {样式声明}
- 并集选择器通常用于集体声明
- 任何形式的选择器都可以作为并集选择器的一部分
<html>
<head>
<style>
span > div {
color: skyblue;
}/*子选择器*/
p ,
.pick a {
color: pink;
}/*并集选择器和后代选择器*/
</style>
</head>
<body>
<span>
<ul>相信</ul>
<div>
<li>彩虹</li>
<li>纯真</li><!--<li>为天蓝色-->
</div>
</span>
<div>温柔</div>
<p>超人</p>
<ul class="pick">
<li>知足</li>
<li>拥抱</li>
<a href="#">咸鱼</a><!--<p>和<a>为粉红色-->
</ul>
</body>
</html>
✨伪类选择器
✨链接伪类
- a:link 选择未访问过的链接
- a:visited 选择已访问过的链接
- a:hover 选择鼠标经过的链接
- a:active 选择鼠标按下没有松开的链接
<html>
<head>
a {
color: black;
}
a:link {
color: black;
text-decoration: none;
}
a:visited {
color: skyblue;
}
a:hover {
color: blue;
}
a:active {
color: forestgreen;
text-decoration: underline;
}
</style>
</head>
<body>
<a href="https://www.bilibili.com/">一个网站</a>
</body>
✨focus伪类选择器
- 用于选取获得焦点（光标）的表单元素
- 一般情况
<input>类表单元素才能获取
<html>
<head>
<style>
input:focus {
background-color: cyan;
color: red;
}
</style>
</head>
<body>
<input type="text">
<input type="text">
<input type="text">
</body>
</html>
