【JavaWeb学习专栏 | CSS篇】css简单介绍 & css常用选择器集锦

清疚 2024-04-27 07:08 11阅读 0赞

> 个人主页：\[兜里有颗棉花糖(https://xiaofeizhu.blog.csdn.net/)  
> 欢迎 点赞👍 收藏✨ 留言✉ 加关注💓本文由 [兜里有颗棉花糖][Link 1] 原创  
> 收录于专栏【[JavaWeb学习专栏][JavaWeb]】【[Java系列][Java]】  
> 希望本文内容可以帮助到大家，一起加油吧！！！💌  
> ![在这里插入图片描述][b84d2c6007f443ff9ad3677ed2dee7f7.png]

## 前言 ##

css（Cascading Style Sheets），即层叠样式表。css可以对网页中元素位置进行像素级别的精细控制，可以一定程度上美化页面的效果，**`能够做到页面的样式和结构进行分离`。结合以下html来说，html决定了页面的整体结构，而css则可以控制页面的展示效果。**

#### 目录 ####

*  前言
 *  一、css基本语法规范
 *  二、css引入方式
 *  三、CSS选择器
 *   *  基础选择器
     *   *  类选择器
         *  id选择器
         *  通配符选择器
     *  复合选择器
     *   *  后代选择器
         *  伪类选择器

## 一、css基本语法规范 ##

**css的基本语法格式：`选择器 + {一条/n条声明}`**

*  **选择器决定了对谁进行修改**
 *  **声明决定了修改啥**
 *  **声明的属性`键值对`，`键值对`用`;`进行区分，用`:`区分键与值。**

> **下面我们来进行一个举例：**  
> ![在这里插入图片描述][a8ea5e6915c5453593a746544f398f52.png]  
> **演示结果如下：**  
> ![在这里插入图片描述][81d8bc7b900b4c03887b8e8402624fda.png]

## 二、css引入方式 ##

**css主要有三种引入方式**：**内部样式表、行内样式表、外部样式（实际开发中最常用的引入方式）**。

> **内部样式表：**  
> **内部杨样式表是通过`stytle标签`嵌套在html内部中的。**  
> **优点：能够让页面结构和样式进行分离。**  
> **缺点：只是一定程度上将页面结构和样式进行了分离（当css比较多的时候，就会显得页面非常的乱），`即分离的还不够`。**  
> **举个栗子：**  
> ![在这里插入图片描述][490f6113ff1b48e49358b2bd37c700a9.png]  
> **演示结果如下：**  
> ![在这里插入图片描述][41bb7bf34779486e9ac5d9cdfb78531a.png]

> **行内样式表：通过style属性, 来指定某个标签的样式。**  
> **举个栗子：`<h1 style = "color : blue;font-size : 50px">hello world</h1>`**  
> **演示结果如下：**  
> ![在这里插入图片描述][314d90d86fd449eb8af33cf1258fcfd0.png]  
> **行内样式表的优先级要高于内部样式表，举个栗子：**![在这里插入图片描述][6b0fd9b0cd7149cc815eec6f65075dab.png]  
> **演示结果如下：**  
> ![在这里插入图片描述][7f0dd414e58e458184b55bea62baa360.png]  
> **所以，`当行内样式表和内部样式表重复的时候以行内样式表为主`。**

> **现在我们来看最后一种引入方式：`外部样式`（同时也是实际开发过程中最常用的引入方式）。**  
> **引入方式分为两步：首先创建一个`css文件`，然后通过`link标签`来引入刚刚创建的css文件。**  
> **样例演示：**  
> ![在这里插入图片描述][b6e48c3099f341a18d62bca55d9ce8fb.png]  
> ![在这里插入图片描述][202f563f669348f09b03abeea0fcea4b.png]  
> **外部样式恰好解决了内部样式表的一个弊端，即可以将页面样式和页面结构进行更进一步的分离，同时一定程度上提高了代码的可读性。**

## 三、CSS选择器 ##

**`注意：下面内容的选择器是css2标准中支持的选择器。`**

**CSS 选择器用于选择 HTML 文档中的元素，并将样式应用于这些元素。通过 CSS 选择器，可以对网页的各个元素进行样式化和布局控制。简单来说如果我们相对标签中的元素某些属性进行修改的话，必须先选中该元素，然后才能对该元素中的某些属性进行修改。**

**CSS选择器主要分为两种：基础选择器和复合选择器。**

> **基础选择器：**

*  **标签选择器**
 *  **类选择器**
 *  **id选择器**
 *  **通配符选择器**

> **复合选择器：**

*  **后代选择器**
 *  **子选择器**
 *  **并集选择器**
 *  **伪类选择器**

### 基础选择器 ###

#### 类选择器 ####

> 我们先通过一个样例再来学习类选择器的语法，请看举例：  
> ![在这里插入图片描述][fa86b1b27dd24479a504cde851c23f42.png]  
> ![在这里插入图片描述][097c6ee4ab2e420fbde2de0e62bd457d.png]  
> **运行结果如下：**  
> ![在这里插入图片描述][00c740e685b14428b4ec5852d5cf4716.png]

**类选择器语法如下：**

*  **如果是长的类名, 可以使用 `-` 分割**
 *  **下方的标签使用class属性来调用。一个类可以被多个标签使用, 一个标签也能使用多个类(多个类名要使用空格分割, 这种做法可以让代码更好复用)**
 *  **一个标签可以使用多个类名，多个类型之间用`空格`间隔。**

> **下面我们来看看使用多个类型的具体实例：**  
> ![在这里插入图片描述][9bb8d21d996941a6b76575ea99caf0e3.png]  
> **演示结果如下：**  
> ![在这里插入图片描述][70f89b2eed0148639fd4bddfb2aba4f2.png]

#### id选择器 ####

**id选择器的语法格式：**

*  **id选择器和类选择器的最大区别就是`id选择器不能被多个标签使用`（id是唯一的）。**
 *  **css中使用`#`开头来表示id选择器。**
 *  **id 选择器的值和 html 中某个元素的 id 值相同。**

> **举个栗子：**  
> ![在这里插入图片描述][83c41f72c98742d782da666364bd8d47.png]  
> ![在这里插入图片描述][3f18b9bd5b0b45b7a056931a3e435ff3.png]  
> **运行结果如下：**  
> ![在这里插入图片描述][15641af2469a49eca8ddad3969375b6d.png]

#### 通配符选择器 ####

**通配符选择器语法格式：**

// 页面中的所有内容结构都会被改为红色
    // 不需要被页面结构调用
    * {
        
    	color:red;
    }

**通配符选择器在实际的开发中最主要的作用就是用来对页面中的所有元素样式的默认样式进行消除，消除主要针对的就是用来消除边距。**

> **样例演示：**  
> ![在这里插入图片描述][f48063071e784293861606b47fe32df5.png]  
> **演示结果如下：**  
> ![在这里插入图片描述][b1c82dec04ef45c4a8bffa99bfad8ba3.png]

### 复合选择器 ###

**复合选择器简单来说就是将之前学过的基础选择器进行组合来进行使用。**

#### 后代选择器 ####

**后代选择器又称为包含选择器，选择某个父元素中的子元素。**

**语法格式如下：`元素1 元素2 {样式声明}`**

> **我们现在来进行举例：**  
> ![在这里插入图片描述][e19846afbbf34740b32aa8bf363d9818.png]  
> ![在这里插入图片描述][7b79760b5497487e8b41b16471d4a3f6.png]  
> **现在我们如果想把上述有序列表中的文字字体更换为红色，请看下面几种修改方法。**

> **修改方式1（使用内部选择器）：**  
> ![在这里插入图片描述][5090e4a64a454d87a66b21110e4c6b90.png]  
> **这种方式有种缺陷就是如果列表中的元素非常多，使用内部选择器的方式就非常的麻烦。**  
> **修改方式2（后代选择器）：**  
> ![在这里插入图片描述][d17ffde29abd40dd975cd1f296a8ff83.png]  
> **修改方式3（选择器的组合：类选择器和后代选择器的组合使用）：**![在这里插入图片描述][77319e8307a94fb48f3f868738d6d87a.png]

> **关于后代选择器的语法格式中，元素1和元素2之间的关系不仅仅可以是父子关系，也可以是爷爷和孙子之间的关系。**  
> **请看举例：**  
> ![在这里插入图片描述][6469ed41f72240dcb7fe240c38ff6dc9.png]  
> **上述语句中元素1`ol`、元素2`a`之间的关系我们可以理解为爷爷和孙子之间的关系。**  
> 其实我们换成下面的写法也可以完成和上述代码一样的效果。![在这里插入图片描述][357633f410ba449186b64bb5acf28f09.png]  
> **上述的两种写法的最终演示结果如下：**  
> ![在这里插入图片描述][4a97a3d417194dac92b602e3e2fe402a.png]

#### 伪类选择器 ####

伪类选择器简单来说就是用来定义元素状态的一个选择器。

**链接伪类选择器：**

*  `a:link 选择未被访问的链接`
 *  `a:visited 选择已经被访问过的链接`
 *  `a:hover 选择鼠标指针悬停上的链接`
 *  `a:active 选择活动链接(鼠标按下了但是未弹起)`

> **这里我们直接来进行举例：**  
> ![在这里插入图片描述][997fb458d4d94ab38f499c5c1ac32b89.png]![在这里插入图片描述][dd336f8a9bd243a99721f830e319b7ab.png]  
> **现在我想对这个链接做出如下修改：这里链接默认显示是黑色的，当鼠标悬停在该链接时显示颜色为红色，当鼠标点击链接但是没有弹起的时候显示的颜色为绿色。**  
> ![在这里插入图片描述][7f303768f9344be784b32dfaa7367005.png]

> **伪类选择器不仅仅可以对链接标签生效，对其他的标签依然可以生效。**  
> ![在这里插入图片描述][d3670c4c7a7f4c51b500e7303ff4d041.png]  
> ![在这里插入图片描述][bfd4648dd3fd45a195673212c9878e5d.png]  
> **现在对该按钮元素进行设置：默认显示颜色是蓝色，鼠标悬停在该按钮上时显示颜色为红色，鼠标点击但是并未弹起时的显示颜色为绿色。**  
> ![在这里插入图片描述][1e47ef3c905e4e59a4c0f6a7c4e3e681.png]

**好了，本文到这里就结束了，主要讲解了css中一些常用的选择器。嗯，就到这里吧，再见啦友友们！！！**

![在这里插入图片描述][79b697cc9d09410ba34ef39dad3e5748.png]

[Link 1]: https://xiaofeizhu.blog.csdn.net/
[JavaWeb]: https://blog.csdn.net/m0_74352571/category_12523116.html
[Java]: https://blog.csdn.net/m0_74352571/category_12520599.html
[b84d2c6007f443ff9ad3677ed2dee7f7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/5bdc34e5c20a4d1fa6eeff784cb6c277.png
[a8ea5e6915c5453593a746544f398f52.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/366532a447674764bf5893deaef38c7d.png
[81d8bc7b900b4c03887b8e8402624fda.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/e721473b80c545ba9ecae933e17040ac.png
[490f6113ff1b48e49358b2bd37c700a9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/ce62fbb408fe44d2b5a1b4d13a1fece0.png
[41bb7bf34779486e9ac5d9cdfb78531a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/1e4140c8ae474c1699648f47a5d8fd3c.png
[314d90d86fd449eb8af33cf1258fcfd0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/3e5ebc35ec7445f3b0b712016df3ac73.png
[6b0fd9b0cd7149cc815eec6f65075dab.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/d606e0650dea42349e0260b6121c81c3.png
[7f0dd414e58e458184b55bea62baa360.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/62a0e641de3342f98d565046fc6fae28.png
[b6e48c3099f341a18d62bca55d9ce8fb.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/7f13eb1ce19448c8857be27fa7b2c0c4.png
[202f563f669348f09b03abeea0fcea4b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/26a48708d37f4c0d8319ebe53197fe3d.png
[fa86b1b27dd24479a504cde851c23f42.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/e0a1b3b4cfc341feb917890231f657fe.png
[097c6ee4ab2e420fbde2de0e62bd457d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/0a022419b85b4904a8614ffa0a0156f0.png
[00c740e685b14428b4ec5852d5cf4716.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/cd354f8f736e47f79431504c74e377a9.png
[9bb8d21d996941a6b76575ea99caf0e3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/997ce443dc2b42fdb54dc7fc90ac7f61.png
[70f89b2eed0148639fd4bddfb2aba4f2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/694c60f758544b25b03fd744b256de09.png
[83c41f72c98742d782da666364bd8d47.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/542a740bf1a0461e8c31631e38593afb.png
[3f18b9bd5b0b45b7a056931a3e435ff3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/21c3f5ffff4b44f78e599702ea42d625.png
[15641af2469a49eca8ddad3969375b6d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/6b73a29be8034361b44e86751a4790a8.png
[f48063071e784293861606b47fe32df5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/edacb40a70094fce9e5430f16137732a.png
[b1c82dec04ef45c4a8bffa99bfad8ba3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/33eb944d33e74c3eb6e1fe8e0869e38a.png
[e19846afbbf34740b32aa8bf363d9818.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/48cd349ef6ff49a5a79fe8342692af8d.png
[7b79760b5497487e8b41b16471d4a3f6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/a9de35ceef7e4ce1a6719624ab2d0dbf.png
[5090e4a64a454d87a66b21110e4c6b90.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/15b1d3a79d3349b2b8710ff6252112fb.png
[d17ffde29abd40dd975cd1f296a8ff83.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/591ced31e1264b3e830c673fc18d7efe.png
[77319e8307a94fb48f3f868738d6d87a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/bd599654ffdf46ba840d4b75063846d2.png
[6469ed41f72240dcb7fe240c38ff6dc9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/6097553bead840ffb5e7d43a9f418431.png
[357633f410ba449186b64bb5acf28f09.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/b397a0d5e0074a339952811de8d40d23.png
[4a97a3d417194dac92b602e3e2fe402a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/bf7eb3cc8fea4ed8b5c31be85bc424cd.png
[997fb458d4d94ab38f499c5c1ac32b89.png]: https://img-blog.csdnimg.cn/direct/997fb458d4d94ab38f499c5c1ac32b89.png
[dd336f8a9bd243a99721f830e319b7ab.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/e07c3584d3d4421b8d6a5b589102a8ca.png
[7f303768f9344be784b32dfaa7367005.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/59754e5509ba4f60beae1b5394086deb.png
[d3670c4c7a7f4c51b500e7303ff4d041.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/3a1fcfffeb914076a8e1de06c270a392.png
[bfd4648dd3fd45a195673212c9878e5d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/a099222bef234866a7b9b8e380d7b79a.png
[1e47ef3c905e4e59a4c0f6a7c4e3e681.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/3c02b6068a01491c834e898f22d1d0e3.png
[79b697cc9d09410ba34ef39dad3e5748.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/5b49a15792c043619ea511fbe49b0d46.png