来张思维导图…
一、什么是CSS
CSS，英文全称Cascading Style Sheets，中文名层叠样式表，从这个名称中我们就可以看出，它是一个样式，层叠的样式，用来描绘html的。俗话说，人靠衣装马靠鞍（等等，这句话好像不是这样用的，毕竟下一句是…），如果说html是一个人的话，css就是对其化妆，层层抹粉，让其更帅更美。
二、CSS的基本思想（个人理解）
css的基本思想其实很简单，就是简单的两步，找到要化妆（修改样式）的对象，以及怎么化妆（修改成什么样的）两步。
三、CSS的引入方式
引入方式也就是写的地方，不同于html，css可以写在三种地方，分别是：
1.行内式
写在html的标签的style属性里，语法是 style=”属性1=值1 属性2=值2 …”，不同的键值对之间用空格隔开。如：
<div class="car-img" style="background-color: #dcd8d9; background-image: url(./assets/1.jpg);"> div>
这里的属性值后面会介绍，先了解下语法规则。
行内式设置的样式只适用于当前这个标签，因此这种写法每个想要修改样式的元素都要写一个，很不方便，不推荐使用。
2.内连式
写在html的head标签里，用style标签包裹起来，这里面的样式会适用于当前页面，提高了代码的复用性。如：
<style> div { font: 700 normal 50px 楷体; } style>
3.外联式
将css样式，写在一个单独的css文件里（文件后缀为.css），想要用样式的话，通过在头文件里写link标签来引用这个css文件，语法如下：
<link rel="stylesheet" type="text/css" href="css/bg.css">
href这个属性是链接的文档所在的位置，推荐相对路径
rel这个属性表示链接的文档与当前文档的关系，stylesheet是指文档的外部样式表
type 属性规定被链接文档的 MIME 类型。
引入方式小结
css的三个引用方式中，行内式优先级最高的，其余两个优先级相同，毕竟行内式是跟特定元素住在一块了，而内连式和外联式是分家的，是针对一类元素，或具有某一特征的元素处于特定情况下的元素，至于为什么是针对一类元素，请看后面的选择器。
四、CSS选择器
具体怎么找到修改样式的对象，就需要用到CSS的选择器。css选择器通常都是在 内连式和外联式中使用的，选择器常分为以下几种
1.元素选择器
顾名思义，是选择元素的，只要是同类元素都会被选中，如：
h1{
color: aliceblue;
}
这里的凡是h1标签的字体颜色都发生了改变。
语法规则如下：
元素名{
属性1:值；
属性2:值;
}
2.类选择器
选择的是一类的元素，也就是具有相同class属性值的元素，如：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title> 类选择器title> <style> .red{ color:red; } .blue{ color:blue; } style> head> <body> <div class="red">Lorem ipsum dolor sit amet.div> <div class="blue">Sunt harum tenetur adipisci id.div> <div class="red">In, adipisci! Reprehenderit, voluptatibus eius?div> <div class="blue">Officiis maxime minima dolores sequi.div> body> html>
View Code
结果如下：
类选择器语法规则：
.类名{
样式； /属性：值这种键值对形式的我就简写为样式了，见谅/
}
3.id选择器
id值在html中是唯一的，因此id选择器能够选择唯一的特定一个元素。如：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>id选择器title> <style> #name{ color:red } style> head> <body> <div id="name">sssssdiv> <div class="mydiv">sssssssdiv> <div class="red">ssssssdiv> <p class="red">sssssp> <div id="red">ssssssdiv>body>html>
View Code
结果图如下：
语法规则：
id名{
样式；
}
以上都是css的一些基本选择器，接下来是一些复合选择器，复合选择器是由两个或两个以上的选择器组成的
4.并集选择器
适用场景：实际过程中我们可能有多个选择器有着相同的样式，如字体都是某种特定颜色，这种时候，为减少代码量，诞生了并集选择器，共有选择器之间的相同样式。
语法规则：
选择器1, 选择器2…{
选择器1，2共有的样式；
}
示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>并集选择器title> <style> h1, p{ color: red; } style> head> <body><span><</span><span>h1</span><span>></span>Lorem ipsum dolor sit amet.<span><span>h1</span><span>></span> <span><</span><span>p</span><span>></span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto iusto amet soluta ipsa odio enim dignissimos. Quae nostrum quam ex?<span><span>p</span><span>></span>body>
View Code
html>5.交集选择器
适用场景：当想要选择的元素同时具有两个特征的时候，比如说，要选中的是一个具有class属性，值为p1（这里只是举例，正常情况下，class的值应该要见名知义）的p元素，此时就可以用交集选择器来选择。
语法规则：
选择器1选择器2（常为class选择器）{
样式；
}
示例：
<div class="p1">divdiv> <p>段落p> <p class="p1">小可爱p>如果只要让小可爱变成紫色的话，css应该这样写：
p.p1{ color: purple; }结果图如下：
6.后代选择器
适用场景：想要选择一个元素的后代元素（与该元素具有嵌套关系，包括儿子，孙子等），可以使用这个选择器。
语法规则：
父选择器 后代选择器{
该后代具有的样式；
}
示例：
This is a important paragraph.
想要将p标签下的，em标签下的字体变为红色，css应该这样写：
p em{ /* 将p后代中的em标签设置成红色 */ color: red; }结果如下：
7.子选择器
使用场景：当想要只选择一个元素的子元素，不选择这个元素的孙辈以后的元素。
语法规则：
父选择器>子选择器{
子选择器的样式；
}
示例：
<h1>This is <strong>verystrong> <strong>verystrong> important.h1> <h1>This is <em>really <strong>verystrong>em> important.h1>当只想要上面那个h1的strong标签里的元素变为红色时，如果使用后代选择器，会让上下两个h1里的very都变成红色，因此要使用子选择器，css代码如下：
h1>strong{ color: red; }结果图如下：
8.相邻兄弟选择器
适用场景：当只想要选择紧跟一个元素后的元素，且这两个元素具有同一个父元素，我们把这两个元素称为相邻兄弟，要选后一个元素时，可以用相邻兄弟选择器。
语法规则：
兄元素+弟元素{
弟元素的样式；
}
示例：
This is a heading.
This is paragraph.
This is paragraph.
This is paragraph.
This is paragraph.
This is paragraph.
当只想要让h1后的p元素标签内的文字变为红色的时候，使用兄弟选择器，css代码如下：
h1 + p{ color: red; }9.属性选择器
适用场景：当想选择具有某一特定属性值的元素的时候，使用此选择器。
语法规则：
[属性1=值]{ /值可以不用加引号/
样式；
}
示例：
用户:<input type="text"><br>想要让文本框里的字和光标变红色，css代码如下
[type=text]{ color:red /* 里面的光标会变成红色 */ }结果图：
10.伪类选择器
什么是伪类，伪类是 W3C （World Wide Web Consortium 万维网联盟，一个进行web标准规范的组织）制定的一套选择器的特殊状态，通过伪类您可以设置元素的动态状态，例如悬停（hover）、点击（active）以及文档中不能通过其它选择器选择的元素（这些元素没有 ID 或 class 属性），例如第一个子元素（first-child）或者最后一个子元素（last-child）。（参考网站C语言中文网，mdn）
语法规则：
选择器:伪类名{
样式；
}
由于伪类数量较多，本文就只选择其中较为常用的来介绍。
示例：
<a href="http://www.baidu.com">百度a>实现超链接未访问时，已访问后，鼠标移动到超链接，点击，的样式分别为红色，绿色，粉色，蓝色
a:link {color: #FF0000} /* 未访问的链接 */ a:visited {color: #00FF00} /* 已访问的链接 */ a:hover {color: #FF00FF} /* 鼠标移动到链接上 */ a:active {color: #0000FF} /* 选定的链接 */结果图：由于调试时已经访问过了，就会一直时显示这个为已访问后的链接样式，
五、CSS常用属性
1.尺寸属性
对于一个块元素（或行内块）来说，我们通常会在css中定义它的宽高，属性如下：
width 宽
height 高
示例：修改一个div的宽高，为了方便显示，设置了背景色，不设置的话就看不到。
div { width: 100px; height: 100px; background: pink; }结果图：
2.字体相关属性
修改文字样式的属性，有：
font-siize：字体大小
font-weight：字体粗细
font-style：字体风格，如斜体（italic oblique）等
italic 和 oblique 都是向右倾斜的文字, 但区别在于 italic 是指斜体字，而 oblique 是倾斜的文字，对于没有斜体的字体应该使用 oblique 属性值来实现倾斜的文字效果。
font-family：字体族，如宋体，楷体，微软雅黑等
上面四个属性可以简写在font属性里，语法如下，要注意书写顺序哦
font： style weight size family
示例：
<div> Lorem ipsum dolor sit amet. div>css样式：
div { font: italic 700 30px 宋体; }结果图：
3.文本相关属性
修改的时文本相关样式，如颜色对齐等，常用属性有：
color：颜色
颜色的取值有四种方式，
1）关键字形式的，如red，blue等。
2）rgb形式，如rgb(255,0,0),rgb(0,0,255)等，括号内的三个数字分别是红色分量，绿色分量，蓝色分量，值的范围是0-255。
3）rgba形式，rgba(255,0,0,0.5)，最后一个分量是alpha 透明度，范围0（完全透明）-1（完全不透明）。
4）16进制形式，如 #fff，#efefef等，#号后的数字两两为一组，分别为红绿蓝，由于是16进制，换算下来也是0-255，如果每一组的两个数都相同的话，可以简写为1个数。
text-align：对齐方式，默认为left，值有center居中，right右对齐等。
text-decoreation：文本修饰线，有如下划线 underline ，上划线 overline ，穿过文本的一条线line-through等，默认为none。
text-indent：文本首行缩进。
line-height：行高，当设置行高等于容器高的时候，能实现文本垂直居中。
示例：
div { color: #f00; text-align: center; text-decoration: overline; text-indent: 2em; line-height: 100px; height: 100px; background-color: rgb(169, 168, 168); }结果图：
4.背景相关属性
修饰容器背景的相关样式，属性有：
background-color：背景颜色
background-image：url(图片路径) 背景图片
background-repeat：背景平铺方式，默认为水平，通常值有repeat-x 水平平铺，repeat-y 垂直平铺，no-repeat 无平铺
background-position： 背景图片位置，值通常有三种，
1）10px 20px 这类单位为像素的值，容器左上角为0，0 ，背景图片水平向右（向右为为正）移动10px，垂直向下（向下为正）移动20px。
2）关键字形式的如 center center，实现背景图片水平 垂直居中。
3）百分比值形式，如50% 50% ，实现的也是背景图片水平居中，这种时候当图片与容器左上角重合时，值为0% 0%，当图片右下脚与容器右下角重合时，值为100%。
背景属性简写，使用background属性，
background：color image repeat position
示例：
div{ width: 40px; height: 40px; background-image: url(./img/icon.png); background-position: -131px -38px; }结果图：
此处有两个知识点，
1）关于img标签与背景图片的区别
1.img属于html的范畴，是页面骨架的一个部分，background-image是属于css的范畴，主要是起到一个装饰作用。
2.img如果没有设置图片，其宽高为0*0，本质是一个行内块。
3.使用div+background-image，显示图片，即使设置了背景图片，在不设置div高度的时候，其div的高为0，图片显示不出来2）关于精灵图的应用
利用背景位置这一属性可以实现”精灵图”，什么是精灵图，下面贴一张图给大家看一下，
可以看到像这样由许多图标组成的大图就是一张精灵图，上面的示例就是利用背景位置和容器大小实现的获取精灵图中的一个图标。
六、CSS三大特性
1.继承性
即子元素会继承父元素的样式，能被继承的样式有 font- ，text- ， line-， color 这几类属性。
示例：html部分代码：
html部分代码：
<div class="father"> father <div class="son"> son div> div>css代码：
.father { /* 字体相关 */ font: 30px 宋体; /* 文本相关 */ text-decoration: underline; /* 行高 */ line-height: 100px; /* 文本颜色 */ color: red; }请问son的样式是，
2.层叠性
既然都叫层叠样式表了，层叠性必然少不了。CSS的层叠性体现在，同类样式会覆盖，不同的样式会叠加。
示例：
html代码：
<div> <div>猜猜我是什么颜色div> div>css代码：
div div{ color: red; } div{ color:green;/* 相同的样式会被覆盖 */ font-size: 50px;/* 不同的样式就会叠加 */ }是什么颜色呢，答案揭晓
此时我们F12打开浏览器开发者模式，查看代码中的div元素，发现单独定义的div样式被划掉了，那么，这个覆盖的规则又是什么样的呢，请看下面css的优先级。
3.优先级
css定义样式具有优先级，相同样式优先级高的会覆盖优先级低的样式，相同优先级，后写的样式覆盖前面写过的同类样式。下面给出一个优先级计算权重表
选择器计算权重公式继承或者 *0,0,0,0 每个元素（标签选择器）0,0,0,1 每个类，伪类0,0,1,0 每个ID 0,1,0,0 每个行内样式 style=””1,0,0,0 每个!important ∞ 无穷大上面这张表能够帮助大家理解选择器的优先级，注意，权重的计算没有进位一说，也就是说，一个类选择器定义的样式，比一万个元素选择器套娃组成的后代选择器定义的样式优先级高。此外，这张表也没必要记，因为当我们在vscode中编写css代码的时候，将鼠标放到选择器上，能查看到优先级。如下：
这也解释了为什么2中的示例的颜色为红色了。
总结一下，css选择器的优先级为 继承或*
Original: https://www.cnblogs.com/madaao/p/16176995.html
Author: 百分号
Title: 前端开发学习之CSS
原创文章受到原创版权保护。转载请注明出处：https://www.johngo689.com/596201/
转载文章受原作者版权保护。转载请注明原作者出处！