CSS详解

1. CSS基本语法 CSS使用格式
选择器 {
属性 : 值;
属性 : 值;
…
}
说明:

• 选择器是将样式和页面元素关联起来的名称
• 属性名是希望设置的样式属性, 每个属性有一个或者多个值
• 属性和值之间用冒号隔开
• 一个属性和值与下一个属性和值之间用分号, 最后一个分号可以省略.

2. CSS引入方法
CSS样式导入HTML中有三种方式
1.内联式:
通过标签的 style 属性, 在标签上直接写样式.

这是个div标签

2. 嵌入式:
   通过 style 标签, 在网页上创建嵌入的样式表.

3.外联式:

3. CSS选择器

CSS选择器: 帮助我们找寻标签, 找到之后 添加样式

CSS 的四种基本选择器:

• 通用选择器 ( * )
• 标签选择器 ( 标签名 )
• 类选择器 ( class )
• id 选择器 ( id )

CSS 组合选择器:

• 多元素选择器
• 后代选择器(层级)
• 子元素选择器
• 兄弟选择器

CSS 属性选择器:

• 属性选择器

伪类选择器

3.1 基础选择器:

1. 通用选择器

通用选择器, 匹配任何元素:

使用格式:

* {
    属性名:  值;
    属性名:  值;
    ...
}

例如:

* {
    margin: 0px;
    padding: 0px;
}

有些标签自动会增加一些内边距和外边距等样式, 我们可以使用这个选择器把默认的都给去掉

2.标签选择器

标签选择器, 此种选择器影响范围大, 一般用来做一些通用设置, 或用在层级选择器中.

通用格式:

标签名 {
    属性名: 值;
    ...
}

例如:

CSS部分:
<style>
    div {
        color: red;
    }

    p {
        font-size: 18px;
    }
</style>


HTML部分:
<div>这里是html部分</div>
<p>html区域的p标签</p>

一旦使用标签选择器,则当前页面上的所有该标签全部都有该样式. 这一点需要注意

3.类选择器
通过类名来选择元素, 一个类可应用于多个元素, 一个元素上也可以使用多个类
应用灵活, 可复用, 是css中应用最多的一种选择器
常见格式:
.类名 {
属性名: 值;
…
}
举例:
CSS部分:

HTML部分:

这是div标签

这个标签的字体颜色会变成蓝色,是因为class选择器

这是div下面的p标签,也会变成蓝色,因为用的是同样的选择器,名字也一样

这个标签有好多个class类名, 则都会加载不同类名下面的样式, 形成重叠效果

这个标签的类名和上面的有一样的,所以上面的header样式也会加载在这个标签上

4. id选择器
   通过 id 名来选择元素，元素的 id 名称不能重复，所以一个样式设置项只能对应于页面上一个元素，不能复用，id 名一般给程序使用，所以不推荐使用id作为选择器。
   使用格式:
   #ID名 {
   属性名: 值
   }
   举例：
   CSS部分: HTML部分:

   这是第一个段落标签

   这是第二个段落标签

   这是第三个段落标签

3.2 组合选择器

1. 多元素选择器
   同时匹配所有 E元素 和 F元素, E和F之间用逗号分隔
   使用格式:
   E,F {
   属性名: 值;
   属性名: 值;
   …
   }
   例如:
   CSS部分:

   HTML部分:

   这是一个美丽的div

   美丽div下面的段落标签p

2.后代选择器:
主要应用在标签嵌套的结构中,层级选择器, 是结合上面两种选择器来写的选择器, 它可与标签选择器结合使用,减少命名,同时也可以通过层级, 限制样式的作用范围
使用方式:
E F {
属性名: 值;
属性名: 值;
…
}
例如:
CSS部分:

HTML部分:

这里是span标签的内容

这里是div中的div标签

粉红色啊粉红色

层级选择器: 按照标签的层级来匹配对应的标签

3. 子代选择器
   E > F 匹配所有 E元素的 子元素F
   使用格式:
   E > F {
   属性名: 值;
   属性名: 值;
   …
   }

例如:
CSS部分:

HTML部分:

这是div元素的子集p元素

div标签的内容部分
第二个div的子集:a元素

4. 毗邻选择器
   匹配所有紧随 E元素 之后的同级元素F (向下寻找)
   使用格式:
   E + F {
   属性名: 值;
   属性名: 值;
   …
   }

例如:
CSS部分:

HTML部分:

第一个div,啦啦啦~

第二个div,啦啦啦~

第三个div,啦啦啦~

3. 3 属性选择器

4. 第一种属性选择器的使用
   使用方法:
   [attr] {
   属性名: 值;
   属性名: 值;
   …
   }
   [title] {
   }
   例如:
   CSS部分:

   HTML部分:

   hello1
   hello1
   hello1
   hello1

3.4 伪类选择器

1. 伪类选择器
   常用的伪类选择器有hover，表示鼠标悬浮在元素上时的状态。
   CSS部分: HTML部分:
   别看村子不咋大呀， 有山有水有树林， 邻里相亲多和睦， 老少爷们也合群
   补充: #input:focus { outline: none; border: 2px solid red; }

总结:

• CSS 选择器的主要目的是: 获取 HTML 元素, 获取到后给当前元素添加样式.
• CSS 选择器的种类非常多, 一般我们用不上, 把常用的学会即可.
• 标签选择器尽量少用, 覆盖面巨大. 不利于我们样式的单独调整.
• class 类选择器是经常使用的选择器. 可以多多练习
• 层级选择器 一般配合类选择器或者其他的选择器一起使用. 常用来获取大容器里面没有明确定义类名的元素
• id 选择器偶尔使用, 使用它往往就是利用他的唯一性. 获取单个某个标签使用.
• 伪类选择器是需要设置特殊阶段的效果时, 添加的选择器, 知道即可