前端快速入门学习3——CSS介绍与选择器
1.概述
CSS全名是cascading style sheets,中文名层叠样式表。
用于定义网页样式和布局的样式表语言。
通过 CSS，你可以指定页面中各个元素的颜色、字体、大小、间距、边框、背景等样式，从而实现更精确的页面设计。
HTML与CSS的关系：HTML相当于毛坯房，CSS是装修。
CSS 通常由选择器、属性和属性值组成，多个规则可以组合在一起，以便同时应用多个样式
- 选择器的声明中可以写无数条属性
- 声明的每一行属性，都需要以英文分号结尾;
- 声明中的所有属性和值都是以键值对这种形式出现的;
CSS三种导入方式：
1.内联样式（Inline Styles）
2.内部样式表（Internal Stylessheet）
3.外部样式表（External Stylesheet）
三种导入方式的优先级：内联样式>内部样式表>外部样式表
内联样式：
<head>
<link rel="stylesheet" href="style.css">
<style>
h2{
color: red;
font-size: 30px;
}
style>
head>
<body>
<h1 style="color: yellowgreen;">这是一个内联样式h1>
<h2>二级标题标签，应用内部样式h2>
<h3>三级标题标签,使用外部样式h3>
body>
style.css
h3{
color: aqua;
font-size: 20px;
}
效果：
2.选择器
选择器是 CSS中 的关键部分，它允许你针对特定元素或一组元素定义样式
(1)元素选择器
<head>
<style>
h1{
color: red;
font-size: 30px;
}
style>
head>
<body>
<h1>这是一个元素选择器h1>
body>
（2）类选择器
<head>
<style>
.highlight {
color: red;
font-size: 30px;
}
style>
head>
<body>
<h1 class="highlight">这是一个类选择器h1>
body>
（3）id选择器
<head>
<style>
#unique {
color: blue;
font-size: 25px;
}
style>
head>
<body>
<h2 id="unique">这是一个ID选择器h2>
body>
（4）通用选择器
<head>
<style>
* {
font-family: KaiTi;
font-size: 20px;
color: green;
}
style>
head>
<body>
<h2 id="unique">这是一个ID选择器h2>
<p>这是一个简单的HTML示例1。p>
<p>这是一个简单的HTML示例2。p>
body>
（5）子元素选择器
<head>
<style>
.father > .son {
color: yellow;
font-size: 20px;
}
style>
head>
<body>
<div class="father">
<p class="son">这是一个子元素选择器p>
div>
body>
（6）后代选择器
<head>
<style>
.father .grandson {
color: orange;
font-size: 10px;
}
style>
head>
<body>
<div class="father">
<p class="son">这是一个子元素选择器p>
<div>
<p class="grandson">这是一个后代选择器p>
div>
body>
（7）兄弟选择器
<head>
<style>
h3 + p {
color: pink;
font-size: 18px;
}
style>
head>
<body>
<p>这是一个普通的标签p>
<h3>这是相邻兄弟选择器示例h3>
<p>这是另一个P标签p>
body>
（8）伪类选择器
伪类是用来添加一些选择器的特殊效果。
如链接的不同状态都可以以不同的方式显示
a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */
注意： 在CSS定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
注意： 在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。
注意：伪类的名称不区分大小写。
<head>
<style>
#element:hover{
background-color: lightblue;
}
style>
head>
<body>
<p id="element">这是一个伪类选择器p>
body>
