1. CSS基本语法 CSS使用格式
选择器 {
属性 : 值;
属性 : 值;
…
}
说明:
- 选择器是将样式和页面元素关联起来的名称
- 属性名是希望设置的样式属性, 每个属性有一个或者多个值
- 属性和值之间用冒号隔开
- 一个属性和值与下一个属性和值之间用分号, 最后一个分号可以省略.
2. CSS引入方法
CSS样式导入HTML中有三种方式
1.内联式:
通过标签的 style 属性, 在标签上直接写样式.
这是个div标签
- 嵌入式:
通过 style 标签, 在网页上创建嵌入的样式表.
3.外联式:
- CSS选择器
CSS选择器: 帮助我们找寻标签, 找到之后 添加样式
CSS 的四种基本选择器:
- 通用选择器 ( * )
- 标签选择器 ( 标签名 )
- 类选择器 ( class )
- id 选择器 ( id )
CSS 组合选择器:
- 多元素选择器
- 后代选择器(层级)
- 子元素选择器
- 兄弟选择器
CSS 属性选择器:
- 属性选择器
伪类选择器
3.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样式也会加载在这个标签上
- id选择器
通过 id 名来选择元素，元素的 id 名称不能重复，所以一个样式设置项只能对应于页面上一个元素，不能复用，id 名一般给程序使用，所以不推荐使用id作为选择器。
使用格式:
#ID名 {
属性名: 值
}
举例：
CSS部分: HTML部分:这是第一个段落标签
这是第二个段落标签
这是第三个段落标签
3.2 组合选择器
- 多元素选择器
同时匹配所有 E元素 和 F元素, E和F之间用逗号分隔
使用格式:
E,F {
属性名: 值;
属性名: 值;
…
}
例如:
CSS部分:
HTML部分:这是一个美丽的div美丽div下面的段落标签p
2.后代选择器:
主要应用在标签嵌套的结构中,层级选择器, 是结合上面两种选择器来写的选择器, 它可与标签选择器结合使用,减少命名,同时也可以通过层级, 限制样式的作用范围
使用方式:
E F {
属性名: 值;
属性名: 值;
…
}
例如:
CSS部分:
HTML部分:
这里是span标签的内容
这里是div中的div标签
粉红色啊粉红色
层级选择器: 按照标签的层级来匹配对应的标签
- 子代选择器
E > F 匹配所有 E元素的 子元素F
使用格式:
E > F {
属性名: 值;
属性名: 值;
…
}
例如:
CSS部分:
HTML部分:
这是div元素的子集p元素
div标签的内容部分
第二个div的子集:a元素
- 毗邻选择器
匹配所有紧随 E元素 之后的同级元素F (向下寻找)
使用格式:
E + F {
属性名: 值;
属性名: 值;
…
}
例如:
CSS部分:
HTML部分:
第一个div,啦啦啦~
第二个div,啦啦啦~
第三个div,啦啦啦~
- 3 属性选择器
- 第一种属性选择器的使用
使用方法:
[attr] {
属性名: 值;
属性名: 值;
…
}
[title] {
}
例如:
CSS部分:
HTML部分:hello1 hello1 hello1 hello1
3.4 伪类选择器
- 伪类选择器
常用的伪类选择器有hover，表示鼠标悬浮在元素上时的状态。
CSS部分: HTML部分: 别看村子不咋大呀， 有山有水有树林， 邻里相亲多和睦， 老少爷们也合群 补充: #input:focus { outline: none; border: 2px solid red; }
总结:
- CSS 选择器的主要目的是: 获取 HTML 元素, 获取到后给当前元素添加样式.
- CSS 选择器的种类非常多, 一般我们用不上, 把常用的学会即可.
- 标签选择器尽量少用, 覆盖面巨大. 不利于我们样式的单独调整.
- class 类选择器是经常使用的选择器. 可以多多练习
- 层级选择器 一般配合类选择器或者其他的选择器一起使用. 常用来获取大容器里面没有明确定义类名的元素
- id 选择器偶尔使用, 使用它往往就是利用他的唯一性. 获取单个某个标签使用.
- 伪类选择器是需要设置特殊阶段的效果时, 添加的选择器, 知道即可
