下一篇我们会讲解php全栈之路最基础的部分，html。
明天我们继续讲解php全栈之路的第二个基础部分css3 兄弟选择器，css。
明天主要讲解CSS的基础知识、CSS的语法规范和应用方法。
让我们回顾一下html、css和javascript之间的关系。
HTML相当于人体的骨骼，CSS相当于人的外貌，JavaScript相当于人的动作和动作。
通过上面的文章我们已经了解了网页的骨架制作。 那么接下来让我们学习如何制作网页外观的CSS。
什么是CSS？
CSS是指层叠样式表（CascadingStyleSheets），主要用于控制HTML文档的显示，如颜色、字体、位置、宽度等。
官方描述：CSS是一种标记语言，用于（增强）控制网页的样式，并允许将样式信息与网页内容分离。 CSS不需要编译，可以直接被浏览器执行（属于浏览器解释型语言）。
HTML 标签最初是为了定义文档内容而设计的。 通过使用，
，这样的标签，HTML的初衷是表达“这是一个标题”，“这是一个段落”，“这是一个表格”等信息。
同时文档布局由浏览器完成，不使用任何低帧标签。
因为当时的两个主要浏览器（Netscape 和 Internet Explorer）不断向 HTML 规范中添加新的 HTML 标签和属性（例如字体标签和颜色属性），从而创建了文档内容明显独立于演示文稿的网站。文档层似乎越来越难了。
为了解决这个问题，非营利标准化联盟万维网联盟（W3C）承担了HTML标准化的使命，创建了HTML4.0之外的样式（Style）。
所有主流浏览器都支持级联样式表。
CSS 历史
CSS支持多种设备，比如手机、电视、打印机、魔kt板等，并且CSS在浏览器上推广得更好。
如何应用CSS？
在 HTML 中使用 CSS 的方式有以下三种：
1.外部样式表（CSS写在单独的.css文件中）
用法：在head标签添加链接导入css文件
您可以先构建外部样式表文件 *.css，然后使用 HTML 链接对象。 或者使用@import来导入。 示例代码：
注意：实际开发中，建议使用HTML链接对象导入。
2.内部样式表（写在HTML页面中
3.内联样式（直接写在HTML标签上，使用style来设置样式）InlineStyles
内联定义意味着使用对象的样式属性在对象的标记内定义适用的样式表属性。 示例代码：
这是风格
在实际应用中，如果将所有样式都写在标签上，会导致标签样式大量，不便于维护。 推荐使用前两种。
选择权重
权重主要分为4个等级：
只需了解重量部分即可。 当你学完，看看这个重量，你就很明白了！
优先事项
CSS 优先级遵循以下规则：
只需了解优先级部分即可。
CSS 级联简介
多种风格将层叠为一种
样式表允许以多种形式指定样式信息。 样式可以在单独的 HTML 元素、HTML 页面的 head 元素或外部 CSS 文件中指定。 甚至可以在同一个 HTML 文档中引用多个外部样式表。
级联顺序
当同一个 HTML 元素被多个样式定义时，会使用哪种样式？
一般来说，所有样式都会按照以下规则堆叠在一个新的虚拟样式表中，其中数字4具有最高优先级。
1.浏览器默认设置
2.外部样式表
3.内部样式表（位于标签内部）
4. 内联样式（HTML 元素内部）
因此，内联样式（HTML元素内部）具有最高优先级（与之前的权重大致相同），这意味着它将优先于以下样式声明：标签中的样式声明、外部样式表中的样式声明或样式在浏览器中声明（默认）。
CSS的层叠有点类似于PS的视口概念。 事实上，当我们为每个html元素定义样式时，我们可以有多种定义。 具体使用哪种定义样式？ 这取决于优先级，或者 CSS 的权重。 重量估计值较高则使用哪种样式。
另一个是层的概念。 在CSS中，不同的层之间可以放置不同的样式。 前视图有点像我们看到的图片，但是借助了 2D 旋转。 可见CSS其实有多个层次，你的具体样式也可以在那个层次中定义。
就像我们看到一幅画时的感觉一样，如果我们从里面看，我们是看不出有什么区别的。 如果我们横向看，我们可以看到 CSS 是分层的。
CSS 句型
CSS是由一条条规则组成的，每条规则的格式为
选择器{
属性1：值1；
属性2：值2；
...
}注意：学习CSS主要学习CSS的声明
选择器{属性：值;}
CSS 指南简介
技术人员在开发时不可能记住所有的技术信息，因此需要借助指南来查找相关信息。
指南网址：
CSS 选择器
CSS选择器包括五种选择器（元素选择器、关系选择器、属性选择器、伪类选择器、伪对象选择器）
元素选择器包括四个类别
1. 通配符选择器 *
2. 类型选择器 E
3. ID选择器
4. 类选择器
元素选择器---通配符选择器
用法：
*{
颜色：#f00；
选择所有对象。
通用选择器
一般不建议使用通配符选择器，因为它会遍历并命中文档中的所有元素，出于性能考虑应酌情使用。
注意：要养成检查兼容性的习惯，因为不同的浏览器版本不同，所以CSS的兼容性也不同
元素选择器---类型选择器
您要操作的标签名称
A {
颜色：#f00；
李{
颜色：蓝色；
使用文档语言 (HTML) 标记对象类型作为选择器。
类型选择器（TypeSelector）
元素选择器---id选择器
给标签起个名字，id属性，下一篇文章会解释，
用法：例如
申请方法#id名称
#h1_1{
颜色：蓝色；
还可以在id选择器后面添加标签限定符，限制id必须是上述类型
例如：
h1#h1_1{
颜色：蓝色；
元素选择器---类选择器
一般我们会对页面中使用的标签进行分类，关键词类。
比如给页面添加class属性进行分类
：注意class属性中可以添加多个类名，用空格分隔
相当于将上述三种类型定义为一类选择器。 然后将其应用到 CSS 中。 （英语点）
在类选择器中。 （英文点）表示选择class=。 以前名称的所有标签。
.class11{
红色;
。大的{
字体大小：30px；
类选择器在实际应用中被广泛使用，目的是通过CSS控制标签的样式。
关系选择器
关系选择器通过页面上各个标签（元素）之间的关系来确定选择器选择的内容
其中，关系选择器包括包含选择器（EF）、子选择器（E>F）、相邻选择器（E+F）、兄弟选择器（E~F）
html 之间有哪些关系？
我们把html标签按结构画个图来理解。
从上图可以看出。 html标签是head标签和body标签的父标签，body标签是html标签的子标签。 这使得更容易理解关系选择器。 结合下面的解释，理解上一张图。 我们可以很容易地理解CSS关系选择器。
关系选择器---包含选择器（EF）
句型：
EF{规则}
阐明：
选择E 元素包含的所有F 元素。 与子选择器不同的是，include 选择器会命中所有符合条件的后代，包括父亲、儿子、儿子的儿子……而子选择器只会选择自己的女儿后代。
例子：
可以看到选择器.demo是一个类选择器，它这次选择的并不是类选择器，而是类选择器中包含的所有div元素要命中。 绿色部分是命中元素。 不仅包括孩子，还包括儿子儿子！
关系选择器---子选择器(E>F)
句型：
E>F{s规则}
阐明：
选择作为 E 元素的子元素的所有元素 F。 与包含选择器不同css3 兄弟选择器，子选择器只能命中子元素，而不能命中子元素。
关系选择器---相邻选择器(E+F)
句型：
E+F{规则}
阐明：
选择靠近 E 元素，然后选择 F 元素。
与同级选择器不同，相邻选择器只会命中符合条件的相邻同级元素！ 而且不包括我自己。
关系选择器---兄弟选择器(E~F)
句型：
E~F{规则}
阐明：
选择 E 元素之前的所有同级元素 F。
与相邻选择器不同，同级选择器将命中所有符合条件的同级元素，而不一定是相邻元素！ 而且不包括我自己。
明天我们一起学习CSS基础、语法规范以及CSS应用方法。
还了解了CSS的一些选择器。 今天我们继续。
（注：本内容原创，未经许可禁止抄袭，内容真实性已核实，图片来自网络，若图片侵权，请联系作者删除）
