HTML5 零基础到实战（三）CSS基础入门笔记_heart_6662

irpas 02-07 3025

💥个人简介我已加入 1_bit 博主的免费前端站起来学习计划，专栏链接：一哥博客

💖 作者简介：??大一heart，还在学习（卷）当中，欢迎交流指正~😜 📝 个人主页 heart的博客🔥 📧如果文章知识点有错误的地方，请指正留言📝！和大家一起学习，一起进步 📣 系列专栏：大话前端🍁 💬格言：人生舞台的大幕随时都可能拉开，关键是你愿意表演，还是选择躲避🔥 🧡如果感觉博主的文章还不错的话，请👍三连支持一下博主💌哦

?参考一哥的博客加上我自己对超链接的理解

💥个人简介我已加入 1_bit 博主的免费前端站起来学习计划，专栏链接：一哥博客

css基本描述

css是用来干嘛的？

html中定义样式

css中定义样式

?选择器的分类

元素选择器

类选择器

ID选择器

?多个类样式的使用

集体选择器?

属性选择器

后代选择器?

相邻元素选择器?

本文目的：

1.什么是css?(css用来干嘛的？)

2.css的样式规范

3.css中的选择器（为什么要选择器？选择器有什么作用?）

css基本描述 css是用来干嘛的？

我们在第一篇文章里面了解的? CSS（层叠样式表）HTML5 从零基础到实战（一）HTML基本介绍_heart_6662的博客-CSDN博客

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

html中定义样式

简单来说css就相当于网页的衣服（用于装饰我们网页，比如字体大小，颜色之类的）

其实HTML里面也可以定义样式，当时我们是这么写的

比如这个table标签，我们先不用纠结table标签是什么！

table标签属性类似于我们的a标签

我们可以看到标签前定义一堆属性（看起来代码特别的臃肿）

align="center"border="1"cellpadding="0"cellspacing="3" css中定义样式

写在head中现得代码没这么臃肿

注意：

1.选择器相当于定位到哪里？

2.属性相当于改什么？?

3.在p标签选择器中可以定义多个属性（比如同时定义下面的字体大小和颜色）

?选择器的分类

首先，CSS中的三个选择器，分别是元素选择器、类选择器和ID选择器

元素选择器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>体验CSS语法规范</title> <style> /* 选择器 {样式} */ /* 给谁改样式 { 改什么样式} */ p { color: red; /* 修改了文字大小为12像素 */ font-size: 12px; } </style> </head> <body> <p>有点意思</p> </body> </html>

类选择器

和元素选择器不同的是（? ? ? ?.(点号) + 类名? ? ?）

?注意：这个类名我们可以随便取，可以是hu 也可以是hahaha

<!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>CSS基础 03 1_bit 的实战课</title> <style> .p{ color: blue; background-color: coral; } </style> </head> <body> <p>这个文本没有使用类样式</p> <p class="p">这个文本使用了类样式</p> </body> </html>

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>CSS基础 01 heart_6662 的实战课</title> <style> .hu { color: blue; background-color: coral; } #dua { color: white; background-color: black; } </style> </head> <body> <p>这里是没有使用任何样式的段落</p> <p class="hu">这个段落使用了类样式</p> <p>这里是没有使用任何样式的段落</p> <p id="dua">这个段落是使用了ID选择器进行修饰</p> </body> </html>

?多个类样式的使用

使用类选择器时，我们可以同时调动两个类样式对一个标签进行修饰

<!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>Document</title> <style> ._color { color: white; background-color: black; } ._size { font-size: 30px; } </style> </head> <body> <p class="_color">这个文本使用了_color类样式</p> <p class="_size">这个文本使用了_size类样式</p> <p class="_color _size">这个文本使用了_size 与 _color 两个类样式</p> </body> </html>

?我们可以看到第三段文字同时具备_color类和 _size类的属性值

集体选择器?

集体选择器的方式统一创建同样式的不同调用：相同的样式，在名称前逗号分隔不同的样式名

<!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> p, ._color, a { color: white; background-color: black; } </style> </head> <body> <p>这是文本一</p> <p>这是文本二</p> <p>这是文本三</p> <a href="03-1.html">这是链接1</a> <a href="03.html">这是链接2</a> <span class="_color">这里使用_color类选择器</span> <span>这里没有使用_color类选择器</span> </body> </html>

属性选择器

属性选择器可以通过对具有某一些属性的标签应用样式

例如在一个 html 代码中有有部分有些name 属性的标签需要颜色调蓝，那么代码如下：?

<!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>1_bit 的前端实战课程属性选择器</title> <style> .s_name[name] { color: blue; } </style> </head> <body> <a class="s_name" href="03-1.html" name="链接1">这是链接1</a> <a class="s_name" href="03.html" name="链接2">这是链接2</a> <a class="s_name" href="03.html">这是链接3没有name属性</a> <p class="s_name">p标签没有写name属性</p> <p class="s_name" name="写了个name">p标签有写name属性</p> </body> </html>

后代选择器?

什么是后代呢? 简单来看就是? ? ?标签里面包含的标签（就被称为子标签）

例如一个标签p中还包含了一个标签span，这个span就是标签p的子元素，span就是父元素；例如如下代码示例

<!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> p span { color: red; } </style> </head> <body> <p> 这是p元素<span>这是p的后代</span>的内容 </p> <p> 这是一个没有包含 span 的 p 元素 </p> </body> </html>

相邻元素选择器?

基本形式?

h1 + span { color:red; }

h1 + span?就表示选择h1 标签后的 span 元素

如果在 h1 下刚好是一个 span 标签那么就生效，否则不生效，一个完整的示例代码如下：

<!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>1_bit 的前端实战课程子元素选择器相邻兄弟选择器</title> <style> h1 + span { color:red; } span + p{ color:blue; } </style> </head> <body> <h1>标题1</h1> <span>这是span元素内容，我顶上就是h1标签了，我离他最近</span> <p>这是p的内容，我距离span最近</p> <p>我上面就是p标签</p> </body> </html>

注意：如果 h1标签下一个不是span标签就不生效

<!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>1_bit 的前端实战课程子元素选择器相邻兄弟选择器</title> <style> h1+span { color: red; } span+p { color: blue; } </style> </head> <body> <h1>标题1</h1> <p>这是p标签</p> <span>这是span元素内容，我顶上就是h1标签了，我离他最近</span> <p>这是p的内容，我距离span最近</p> <p>我上面就是p标签</p> </body> </html>