【JavaEE初阶】前端篇：CSS（上篇）

☕导航小助手☕

🍚写在前面

     🍜一、什么是CSS

     🥡二、CSS基本语法规则

     🍱三、 如何在代码中引入CSS

                  🍞🍞3.1 内部样式

                  🥞🥞3.2 外部样式

                  🦪🦪3.3 内联样式

     🍔四、CSS选择器

                  🍤🍤4.1 基础选择器

                            🍰🍰🍰4.1.1 标签选择器

                            🥮🥮🥮4.1.2 类选择器 

                            🍣🍣🍣4.1.3 id选择器

                            🥩🥩🥩4.1.4 通配符选择器

                  🍛🍛4.2 复合选择器

                            🧀🧀🧀4.2.1 后代选择器（常见）

                            🧇🧇🧇4.2.2 子选择器

                            🥐🥐🥐4.2.3 并集选择器

                            🍩🍩🍩4.2.4 伪类选择器

---

写在前面

在前面的学习过程中，我们已经学习了 HTML 的相关知识点，知道了网页框架的基本的构造 ~

现在，我们需要学习 页面的样式，使网页的界面变的更加精美 ~

同样，我也打算分为两篇博客向大家介绍 CSS ~

那么现在，让我们一起进入关于 CSS 的学习吧 ~

一、什么是CSS

CSS，即为：层叠样式表（Cascading Style Sheets）~

样式：描述了 XXX 是什么样子的，放到网页上，就是：颜色、尺寸、位置、背景 ......

层叠：即 可以给一个 HTML 的元素设置多个样式，同时这些样式之间，是可以 "叠加" 的关系 ~

如：一个 HTML 元素，想要它的尺寸是 XXX，想要它的颜色是 YYY，那么 经过一顿操作猛如虎之后，XXX 和 YYY 的效果时都会生效，这个就是层叠 ~

简单的来说，CSS 就是传说中的 "东方四大邪术之一" 的 "化妆术"，即使 是一个非常普通的人，都可以化妆成一个非常帅气的小哥哥，或者是一个好看的小姐姐 ~

不过，CSS 并不是给 "人" 来 "化妆" 的，而是专门用来给 "网页" "化妆" 的（毕竟，纯html 所编写的网页 仅仅看起来是一个网页的 "骨架"````````````````，实际上和平经常我们浏览的网页来说，简直是天差地别）~

可能吧，在化妆之前，她是一个样子；在化妆之后，那就变成了另外一个样子了（反正我是一脸懵逼，这哪是化妆啊，这简直就是换了一张脸啊）~

简直是 "离谱的妈妈给离谱开门 —— 离谱到家了"，"化妆术" 居然有如此厉害的效果（我的天呐，这也太神奇了吧）~ 

所以说，在现实生活中 网恋需谨慎啊 ~

---

而 CSS，就是网页的 "化妆术"，通过 CSS，就可以对网页中元素位置的排版进行像素级别的控制，实现美化页面的效果，同时也可以做到页面的样式和结构分离 ~

和 HTML 一样，CSS 只能表达的是样式，而不能表达逻辑 ~

二、CSS基本语法规则

//CSS基本语法规则：
选择器 + {1条 / N条 声明}
//先是一个选择器，然后是一个大括号，大括号里有一些样式的内容(以键值对的方式显示)
//选择器：由于一个页面的html元素有很多，所以需要确定是针对那个元素进行操作，而选择器就是完成这个功能的

首先，我们来列举一个没有带任何样式的代码：

示例：

演示： 

---

现在，我们就可以使用 CSS 来增加一些样式了 ~

使用 CSS 的时候，需要把 CSS代码放到 style 这样的特殊标签当中（HTML 对于 style标签 的位置没有要求，放到哪里都是可以的，但是一般习惯下我们可以放到 head标签 里面） ~ 

示例：

演示：

---

其实，大括号里面的具体的样式值，是通过键值对的方式来体现的 ~

其中，键值对之间使用 ; 来分割 ~

键和值之间使用 : 来分割 ~

而且，这里的键值对可以有多组，比如说：

示例：

演示： 

一个元素，可以有很多的样式属性 ~

到底有哪些样式属性，每个样式属性都有哪些取值？

由于 CSS 样式属性是非常多的，同时每个属性的取值也是非常多的，所以不可能一一的介绍，只能在下面介绍一些比较常用、典型的属性和属性的取值 ~ 

---

关于 CSS 中的注释的写法，采取的是 /*  */ 的写法，而不支持 // 的写法，它的快捷键是：ctrl + / ，这个就不必多说了 ~

三、 如何在代码中引入CSS

3.1 内部样式

就如上所演示的，使用 style标签，把 CSS 嵌入到 HTML 中，这种写法我们把它叫做 内部样式 ~

3.2 外部样式

即：创建一个单独的 CSS文件(.css后缀)，通过 html 中的 link标签，把 CSS文件 引入过来 ~

示例：

 演示：

---

如果内部样式和外部样式都写的话，那么谁在下面就会显示谁的（在上面的先执行，在下面的后执行，后执行的会把先执行的给覆盖掉）~

下面进行证明：

演示：

演示结果最终显示的是绿色，说明显示的是外部样式，而外部样式正好在下面，所以这就证明成功了 ~

当然，如果反过来了的话，演示的结果也变成了红色，这里就不再进行演示了 ~ 

---

在实际开发过程中，还是以外部样式为主 ~

不过，为了避免麻烦，在下面的介绍中 还是以 内部样式为主 ~

---

3.3 内联样式

即：直接在元素里面使用 style属性，把对应的 CSS 内容写进来 ~

演示：

和其他两个样式不同的是，内联样式没有选择器 ~

这就说明，把内联样式写到哪个标签里面，那个标签就生效 ~

需要注意的是，在默认情况下，内联样式的优先级 > 内部样式和外部样式的优先级 ~ 

四、CSS选择器

需要知道的是，CSS 选择器的种类是非常多的，我们只学习一些比较常见的选择器 ~

选择器包括两类，一种是 基础选择器，一种是 复合选择器，下面就来一一介绍（部分）~

4.1 基础选择器

4.1.1 标签选择器

标签选择器，就是 直接选中这一类标签，当作选择器 ~

就是上面所演示的，只要一写标签名，就把所有的对应标签都给选中了 ~

/*
标签选择器的语法规则：
*/
标签选择器 {
    CSS属性名：CSS属性值;
}

示例：

演示：

4.1.2 类选择器 

看起来标签选择器很简单、很暴力，看起来很好 ~

但是在某些情况下，我们并不希望这样，我们希望有的标签生效，有的标签不生效 ~

可以简单的理解，标签选择器 类似于 AOE技能，一旦使用出来，就会造成范围性的伤害 ~

但是，在某一些情况下，这个范围性的伤害不好控制，不太方便精确控制 ~

所以我们希望有一个可以精确控制的选择器 —— 类选择器 ~

---

类选择器 可以差异化的进行选择 ~

此处的 "类" 和 Java 中的 "类" 没有一点点的关系 ~

---

/*
类选择器的语法规则：
*/

.类名{
    CSS属性名：CSS属性值;
}

需要注意的是：

• 在定义 类选择器的时候，类名之前是有 . 的，但是在标签里面 通过 class属性调用类选择器的时候，是没有 . 的 ~
• 想要给哪个元素加上类选择器，直接就指定类名即可 ~
• 类选择器的优先级高于标签选择器 ~ 

---

一个类选择器，是可以被多个标签来引用的 ~ 

示例：

演示：

---

一个标签，也可以引用多个类选择器 ~

示例：

演示：

4.1.3 id选择器

在前面介绍过，每一个 html标签，都可以有一个 id属性，id属性 的值，是唯一的 "身份标识"，所以 也可以直接借助 id属性 来直接定位到某个具体的元素 ~

id选择器 和 前面所介绍的 类选择器 十分类似：

/*
id选择器的语法规则：
*/
#选择器名称{
    CSS属性名：CSS属性值;
}

id选择器的优先级是最高的 ~

id选择器的优先级 > 类选择器 > 标签选择器 ~ 

示例： 

演示：

4.1.4 通配符选择器

通配符选择器 是一种特殊的情况，用来选中页面中的所有元素 ~

4.2 复合选择器

所谓复合选择器，就是 把上面所介绍的 基础选择器 给组合起来 ~

4.2.1 后代选择器（常见）

又叫 包含选择器，选中的是某个元素中的子元素（子元素的子元素 ...... 等等之类的，也是可以的）~

首先，我们可以看一下下面的示例及演示结果：

示例：

演示：

接着，我们想要把有序列表中的文字 变成红色，而无序列表中的文字不受影响（默认颜色是黑色），我们就可以看一下下面的代码示例及演示结果：

示例：

演示：

总结：

• 后代选择器 标签名与标签名之间 需要用空格分开 ~ 
• 如上面所演示的案例中，先找到的是 ol标签，再找到的是 ol标签 里面的 li标签 里面的元素 ~

---

实际上，后代选择器 的每一个部分，都可以是任意的基础选择器：

---

实际上，后代选择器 不仅仅可以选中子元素，还可以选择 子元素的子元素：

总而言之，就是先找到第一个标签，在第一个标签里面找第二个标签 中的元素 就可以了：

4.2.2 子选择器

子选择器，不可以选中元素的元素......

简单的来说，子选择器 只可以选择 子元素，换句话说：两个标签必须是相邻的 ~

/*
子选择器的语法规则：
*/
选择器1 > 选择器2 {
    CSS属性名：CSS属性值;
}

如：

再如：

4.2.3 并集选择器

并集选择器的效果：同时使用多个选择器，多个选择器之间，使用 逗号(,) 来分割 ~

4.2.4 伪类选择器

伪类选择器 的功能有很多，这里主要掌握两个：

标签名:hover => 鼠标悬停 应用的样式~
标签名:active => 鼠标按下(还没有弹起) 应用的样式~

 示例1：

 演示1：

---

 示例2：

演示2：

 

关于 CSS 前面部分的内容就暂时介绍到这里了，还有剩下一半的内容 就留到下一篇博客再做介绍 ~

如果感觉这一篇博客对你有帮助的话，可以一键三连走一波，非常非常感谢啦 ~