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

个人简介
我已加入 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选择器

元素选择器

    
    
    
    
    



    
有点意思

类选择器

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

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

    
    
    
    
    


    
这个文本没有使用类样式
    
这个文本使用了类样式

ID选择器

在给样式名称的时候使用一个“#”号，在“#”号后给予一个ID名即可，那么在这个HTML中，为这个ID名的元素将会拥有这个样式 

    
    
    
    
    



    
这里是没有使用任何样式的段落
    
这个段落使用了类样式
    
这里是没有使用任何样式的段落
    
这个段落是使用了ID选择器进行修饰

 多个类样式的使用

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

    
    
    
    
    



    
这个文本使用了_color类样式
    
这个文本使用了_size类样式
    
这个文本使用了_size 与 _color 两个类样式

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

集体选择器 

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

    
    
    
    
    



    
这是文本一
    
这是文本二
    
这是文本三
    这是链接1
    这是链接2
    这里使用_color类选择器
    这里没有使用_color类选择器

 

属性选择器

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

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

    
    
    
    
    



    这是链接1
    这是链接2
    这是链接3没有name属性
    
p标签没有写name属性
    
p标签有写name属性

 

后代选择器 

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

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

    
    
    
    
    



    

        这是p元素这是p的后代的内容
    
    

        这是一个没有包含 span 的 p 元素
    

 

相邻元素选择器 

基本形式 

h1 + span {
    color:red;
}

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

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

    
    
    
    
    


    
标题1
    这是span元素内容，我顶上就是h1标签了，我离他最近
    
这是p的内容，我距离span最近
    
我上面就是p标签

 

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

    
    
    
    
    



    
标题1
    
这是p标签
    这是span元素内容，我顶上就是h1标签了，我离他最近
    
这是p的内容，我距离span最近
    
我上面就是p标签