前端开发之CSS入门篇
一、CSS介绍和语法
二、CSS引入方式
三、基本选择器
四、高级选择器
五、伪类选择器
六、伪元素选择器
1️⃣ CSS介绍和语法
1、 CSS的介绍
（1）为什么需要CSS？
使用css的目的就是让网页具有美观一致的页面，另外一个最重要的原因是内容与格式分离 在没有CSS之前，
我们想要修改HTML元素的样式需要为每个HTML元素单独定义样式属性，当HTML内容非常多时，就会定义很多重复的样式属性，
并且修改的时候需要逐个修改，费心费力。而此时CSS就出现了。
CSS的出现解决了以下问题：
首先，将HTML页面的内容与样式的分离；其次，提高了Web开发的效率。
（2）什么是CSS？
CSS是指层叠样式表(Cascading Style Sheets)，样式定义如何显示HTML元素，样式通常又会存在于样式表中。
也就是说把HTML元素的样式都统一收集起来写在一个地方或一个CSS文件里。
（3）CSS的优势
一是内容与表现分离；二事网页的表现统一，容易修改；三是丰富的样式，使页面布局更加灵活；
四是减少网页的代码；五是运用独立页面的CSS，有利于网页被搜索引擎收录。
（4）如何使用CSS？
通常会把样式规则的内容都保存在CSS文件中，此时该CSS文件被称为外部样式表，然后在HTML文件中
通过link标签引用该CSS文件即可。这样浏览器在解析到该link标签的时候就会加载该CSS文件，并按照该
文件中的样式规则渲染HTML文件。
2、CSS语法
（1）CSS基础语法
CSS语法分为两部分：
选择器和声明
声明由属性和值组成，多个声明之间用分号隔开。
语法：
选择器｛
声明1；
声明2；
声明3；
｝
例如：
h2{
color:green;
font-size:20px;
}
（2）代码注释
方法：/*代码注释写在这里*/
2️⃣ CSS引入方式
网页中引入CSS样式有三种：
1、内联样式
2、行内样式表
3、外部样式表
①链入式
②导入式
（1）内嵌方式
style 标签
例如： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css的引入方式1</title>
<!--CSS引入的方式一--> <style> h2{ color:green; /*这是注释*/ font-size: 20px; } </style> </head> <body> <div> <h2>这是二号标题</h2> </div> </body> </html>
（2）行内样式
示例如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css的引入方式2</title> </head> <body> <div> <p style="font-size: 30px;color:red">这是一个段落标签</p> </div> </body> </html>
（3）外联样式表--链接式
link 标签
例如：index.css为css样式表文件
index.css文件如下
p{
color:pink;
font-size:30px;
}
然后在HTML文件中通过link标签引入，语法：<link rel="stylesheet" type="text/css" href="index.css"/>
示例如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css_1</title> <link rel="stylesheet" type="text/css" href="index.css"/> </head> <body> <div> <p >这是一个段落标签</p> </div> </body> </html>
（4）外联样式表--@import url()方式 导入式
同样导入index.css
语法如下：
<style> @import url(index.css); </style> 注意：@import url() 必须写在文件最开始的位置
示例如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css_1</title> <style> @import "index.css"; </style> </head> <body> <div> <p >这是一个段落标签</p> </div> </body> </html>
链接式与导入式的区别：
1、<link/>标签属于XHTML,@import是属性css2.1 2、使用<link/>链接的css文件先加载到网页当中，再进行编译显示 3、使用@import导入的css文件，客户端显示HTML结构，再把CSS文件加载到网页当中 4、@import是属于CSS2.1特有的，对于不兼容CSS2.1的浏览器来说就是无效的
3️⃣ 基本选择器
1、何为选择器？
在一个HTML页面中会有很多很多的元素，不同的元素可能会有不同的样式，
某些元素又需要设置相同的样式，选择器就是用来从HTML页面中查找特定元素的，
找到元素之后就可以为它们设置样式了。 选择器为样式规则指定一个作用范围。
2、基础选择器的种类
（1）标签选择器
（2）ID选择器
（3）类选择器
（4）通用选择器
2.1 标签选择器
顾名思义，标签选择器就是通过标签名来选择元素。
示例：
<style> p{ color:red; font-size:30px; } </style> 表示将所有的p标签设置字体颜色为红色，字体大小为30像素。
2.2 ID选择器
通过元素的ID值选择元素。
语法：
<style> #select{ color: gold; font-size: 30px; } </style>
示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css_1</title> <style> #select{ color:gold; font-size: 30px; } </style> </head> <body> <div id="select"> <p >这是一个段落标签</p> </div> </body> </html>
2.3 类选择器
（1）所谓类就是class,.class与id非常相似，任何的标签都可以加类，类是可以重复的，我们要学会归类；
（2）同一个标签中可以带有多个类，用空格隔开，有公共类的概念；
（3）不要试图用一个类将我们的页面写完，这个标签可以携带多个类，设置共同的样式；
（4）每个类要尽可能的小，有公共的概念，能够让更多的标签通过样式类选择元素。
语法：
.c1{ color:orange; } // 注意，类选择器名称前面用点“.”与其他选择器区分。
示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css_1</title> <style> .c1{ color: orange; font-size: 30px; } </style> </head> <body> <div class="c1"> <p >这是一个段落标签</p> </div> </body> </html>
2.4 通用选择器
使用 “ * ”选择所有元素。
语法：
*{
color:pink;
}
示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css_1</title> <style> *{ color: #1b9dec; } </style> </head> <body> <div > <p >这是一个段落标签</p> </div> <div> <p>这是另一个段落标签</p> </div> </body> </html>
4️⃣ 高级选择器
1、高级选择器的种类
① 并集选择器：多个选择器通过逗号连接而成，同时声明多个风格相同样式。
② 交集选择器：有两个选择器连接构成，选中二者范围的交集，两个选择器之间不能有空格，
第一个必须是标签选择器。第二个必须是类选择器或者ID选择器。
③ 后代选择器：外层的选择器写在前面，内层的选择器写在后面，之间用空格分隔标签嵌套时，
内层的标签称为标签的后代。
④ 子元素选择器：通过“>”连接在一起而成，仅作用于子元素。
⑤ 属性选择器：选择带有指定属性的元素，或选取带有指定属性和值的元素。
⑥ 毗邻选择器：找到所有紧挨在选择器后面的第一个选择器，设置属性。
⑦ 弟弟选择器：找到所有紧挨在选择器后面同级的选择器，设置属性。
2、并集选择器
<style>
h3,h4{
color:red;
font-size: 20px;
}
</style>
3、交集选择器（第一个必须是标签选择器，第二个必须是类选择器或者ID选择器。）
① 第一个为标签选择器，第二个为ID选择器。
<style>
p{
width: 120px;
font-size: 25px;
}
#sect1{
color:blue;
}
p#sect1{
font-style: italic;
font-family: "Adobe 宋体 Std L";
}
</style>
② 第一个为标签选择器，第二个为类选择器。
<style>
h3{
width: 200px;
color:orange;
}
.sect2{
font-size: 20px;
}
h3.sect2{
background-color: #1b9dec;
}
</style>
4、后代选择器
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css_1</title>
<style>
<!--方法1：-->
div p{
color: red;
font-size: 30px;
}
<!--方法2：-->
div div p{
color:green;
}
<!--方法3：-->
.box div p{
color: blue;
}
</style>
</head>
<body>
<div class="box">
<div>
<p>后代选择器1</p>
</div>
<p>后代选择器2</p>
</div>
</body>
</html>
5、子代（子元素）选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css_1</title>
<style>
/*<!--子代选择器-->*/
div>p{
font-size: 30px;
color: #1da7ee;
}
</style>
</head>
<body>
<div>
<p>子代选择器</p>
</div>
</body>
</html>
6、属性选择器
（1）方式一：根据属性查找
<style type="text/css">
label[for]{
color:greenyellow;
font-size: 20px;
}
input[type]{
width: 80px;
color:greenyellow;
}
</style>
<!--属性选择器-->
<div>
<form action="">
<p><label for="user">用户名：</label>
<input type="text" name="" id="user">
</p>
<p>
<label for="pwd">密码：</label>
<input type="password" name="" id="pwd">
</p>
</form>
</div>
（2）方式二：根据属性和值查找
<style type="text/css">
①/* <!--查找所有属性与指定的属性值相同的元素-->*/
label[for="pwd"]{
color: red;
font-size: 25px;
}
②/* <!-- ^ 查找找到所有属性对应的属性值以指定值开头的元素-->*/
label[for^="VIP"]{
color: darkred;
font-size: 28px;
}
③/* <!-- $ 表示查找所有属性对应的属性值以指定值结尾的元素-->*/
label[for$="2"]{
color:pink;
}
④/*<!-- * 表示查找标签所有属性中包含（字符串包含）指定值的元素-->*/
label[for*="user"]{
color:#5bc0de;
font-size: 18px;
}
⑤/*<!--查找标签所有属性(有多个值或值以空格分割)中有一个值为指定值的元素-->*/
input[type~="submit"]{
color:royalblue;
height: 25px;
}
</style>
<div>
<form action="">
<p><label for="user">用户名：</label>
<input type="text" name="" id="user">
</p>
<p>
<label for="pwd">密码：</label>
<input type="password" name="" id="pwd">
</p>
<p>
<label for="VIP1">vip1等级</label>
<label for="VIP2">vip2等级</label>
</p>
<p>
<label for="user2">用户名2：</label>
<label for="user3">用户名3：</label>
</p>
<p>
<input type="text" name="" size="30px" placeholder="输入关键词">
<input type="submit" name="" width="3px" placeholder="搜索">
</p>
</form>
</div>
5️⃣ 伪类选择器
<style type="text/css">
/*<!--没有访问过的超链接a标签样式-->*/
.test ul li.item1 a:link{
color:orange;
}
/*<!--访问过的超链接a标签样式-->*/
.test ul li.item2 a:visited{
color: yellowgreen;
}
/*<!--鼠标悬停在元素上的应用样式-->*/
.test ul li.item3 a:hover{
color: #93fff3;
}
/*<!--鼠标点击瞬间的样式-->*/
.test ul li.item4 a:active{
color: #ffc2d9;
}
/*<!--input输入框获取焦点时样式-->*/
.test ul li.item5 input:focus{
outline: #b4ffc2;
background-color: #dae3ff;
}
/*<!--选中任一一个(从0开始，但0表示什么都没选)-->*/
.test ul li:nth-child(2){
font-size: 8px;
color:darkgray;
}
/*<!--n表示选中所有，0表示什么都没选-->*/
.test ul li:nth-child(n){
font-family: "Adobe 楷体 Std R";
font-size: 30px;
}
/*<!--选中偶数-->*/
.test ul li:nth-child(2n){
font-size: 20px;
}
/*<!--选中奇数-->*/
.text ul li:nth-child(2n-1){
font-size: 30px;
}
/*<!--隔几换色-->*/
.test ul li:nth-child(4n+1){
/*<!--每隔3个换一种-->*/
font-size: 40px;
color: #fdffb5;
}
</style>
<div class="test">
<ul>
<li class="item1">
<a href="#">没有访问过的超链接a标签样式</a>
</li>
<li class="item2">
<a href="#">访问过的超链接a标签样式</a>
</li>
<li class="item3">
<a href="#">鼠标悬停在元素上的应用样式</a>
</li>
<li class="item4">
<a href="#">鼠标点击瞬间的样式</a>
</li>
<li class="item5">
<input type="text" name="" placeholder="在此处输入">
</li>
<li class="item6">
<a href="#">我是倒数第二个</a>
</li>
<li class="item7">
<a href="#">我是最后一个</a>
</li>
</ul>
</div>
完整案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>伪类选择器（“爱恨原则love hate”）</title>
<style type="text/css">
/*<!--没有访问过的超链接a标签样式-->*/
.test ul li.item1 a:link{
color:orange;
}
/*<!--访问过的超链接a标签样式-->*/
.test ul li.item2 a:visited{
color: yellowgreen;
}
/*<!--鼠标悬停在元素上的应用样式-->*/
.test ul li.item3 a:hover{
color: #93fff3;
}
/*<!--鼠标点击瞬间的样式-->*/
.test ul li.item4 a:active{
color: #ffc2d9;
}
/*<!--input输入框获取焦点时样式-->*/
.test ul li.item5 input:focus{
outline: #b4ffc2;
background-color: #dae3ff;
}
/*<!--选中第一个元素-->*/
.test ul li:first-child{
font-size: 25px;
color:brown;
}
/*<!--选中最后一个元素-->*/
.test ul li:last-child{
font-size: 25px;
color: #a195ff;
}
/*<!--选中任一一个(从0开始，但0表示什么都没选)-->*/
.test ul li:nth-child(2){
font-size: 8px;
color:darkgray;
}
/*<!--n表示选中所有，0表示什么都没选-->*/
.test ul li:nth-child(n){
font-family: "Adobe 楷体 Std R";
font-size: 30px;
}
/*<!--选中偶数-->*/
.test ul li:nth-child(2n){
font-size: 20px;
}
/*<!--选中奇数-->*/
.text ul li:nth-child(2n-1){
font-size: 30px;
}
/*<!--隔几换色-->*/
.test ul li:nth-child(4n+1){
/*<!--每隔3个换一种-->*/
font-size: 40px;
color: #fdffb5;
}
</style>
</head>
<body>
<div class="test">
<ul>
<li class="item1">
<a href="#">没有访问过的超链接a标签样式</a>
</li>
<li class="item2">
<a href="#">访问过的超链接a标签样式</a>
</li>
<li class="item3">
<a href="#">鼠标悬停在元素上的应用样式</a>
</li>
<li class="item4">
<a href="#">鼠标点击瞬间的样式</a>
</li>
<li class="item5">
<input type="text" name="" placeholder="在此处输入">
</li>
<li class="item6">
<a href="#">我是倒数第二个</a>
</li>
<li class="item7">
<a href="#">我是最后一个</a>
</li>
</ul>
</div>
</body>
</html>
6️⃣ 伪元素选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>伪元素选择器</title>
<style type="text/css">
/*<!--为文本的首字母设置特殊样式-->*/
p:first-letter{
color: #6f42c1;
font-size: 20px;
}
h3:first-letter{
color:yellowgreen;
font-size: 25px;
}
/*!*<!--在元素的内容前面插入新内容（注意，要配合content属性使用）-->*!*/
p:before{
content: "hello";
font-family: "Adobe 宋体 Std L";
}
h3:before{
content: "world";
font-family: "Microsoft YaHei UI";
}
/*!*<!--在元素的内容后面插入新内容（注意，要配合content属性使用），使用很频繁-->*!*/
p:after{
content: "every";
font-size: 30px;
}
h3:after{
content: "one";
font-size: 30px;
}
span{
font-size: 50px;
color:cornflowerblue;
}
</style>
</head>
<body>
<!--<div>-->
<!--<p>这是伪元素选择器</p>-->
<!--<h3>这是一个段落</h3>-->
<!--</div>-->
<div>
文档文档 文档文档<span>文档</span>文档文档文档文档文档文档
文档文档文档文档文档文档
<img src="fav.ico" alt=""><img src="fav.ico" alt=""><img src="fav.ico" alt="">
<img src="fav.ico" alt="">
<img src="fav.ico" alt="">
</div>
</body>
</html>
读书原为修身，正己才能正人正世；不修身不正己而去正人正世者，无一不是盗名欺世；你把念过的书能用上十之一二，就是很了不得的人了。——朱先生
