认识CSS--01

目录

1 CSS是什么

2 语法规范

3 引入方式 

3.1 内部样式

3.2 内联样式

3.3 外部样式

4 CSS选择器

4.1 标签选择器

4.2 类选择器

4.3 id选择器

4.4 通配符选择器

4.5 后代选择器

4.6 子选择器

 4.7 并集选择器

4.8 伪类选择器

4.8.1 :hover（鼠标放上去）

4.8.2 :active（鼠标按下去）

1 CSS是什么

css叫做层叠样式表，能够对网页中元素位置的排版进行像素级精确控制，实现页面美化效果，能够做到页面的样式和结构分离。

2 语法规范

• 选择器+{一条/n条声明}，选择器决定针对谁修改，生命决定修改什么，声明的属性是键值对，使用 ； 区分键值对，使用 ： 区分键和值。
• CSS可以嵌入到HTML文件中编写，就需要一个style标签。

• CSS的命名方式都是这种风格，我们在Java中用到驼峰命名，在C语言和python中用到蛇形命名，CSS这种命名方式叫做脊柱命名。

• 注释

3 引入方式 

3.1 内部样式

3.2 内联样式

使用style属性，每个标签都有style属性，里面可以直接写CSS，不必写选择器，只针对当前元素生效。

 当一个元素分多种方式设置样式的时候，如果是不同的属性，彼此就会叠加；

如果是相同样式，style属性设置优先级高于style标签

3.3 外部样式

把CSS写到一个单独的.css文件中，通过link标签引入到html里面

 

外部样式和内联样式冲突，内联样式优先级更高；外部样式和内部样式冲突，看谁离元素更近，就近原则。

实际开发过程中，最主要的写法就是外部样式，写作外部样式可以让页面结构和样式分离开，同时也就可以复用样式到其他页面中，也就是一个css文件可以被多个html引用。

4 CSS选择器

CSS选择器描述了需要选择页面中的哪些元素，{}的样式就是针对这些元素生效的。CSS选择器有以下几种写法

4.1 标签选择器

写个标签名字，标签名就表示针对当前页面中所有的指定标签都要被选中。

4.2 类选择器

类选择器可以让样式具有差异化效果

然后在html中使用class属性，引用对应的css类名，从而使对应的样式针对指定的元素生效

 这里引用的时候 one不带 . 

效果如下：

 类选择器允许让多个元素引用同一个类：

   类选择器是CSS选择器中最灵活的一种方式，也是最常用的方式

4.3 id选择器

每个元素都有一个id属性，该值应该要在页面中是唯一的，使用id选择器来选中到对应的元素上

4.4 通配符选择器

表示选中页面中的所有元素，通常用于删除浏览器的默认样式

* {

} 

上述四个称为基础选择器，还有复合选择器，把多个基础选择器组合起来。

4.5 后代选择器

就是在指定的元素里面去筛选后代元素

效果展示：

4.6 子选择器

用法和后代选择器类似，但是只能选择子标签，无法选择子标签的后代标签

 4.7 并集选择器

针对多个不同的选择器运用相同的样式

4.8 伪类选择器

选中元素的不同状态

4.8.1 :hover（鼠标放上去）

这里设置鼠标放上去就变红

4.8.2 :active（鼠标按下去）

这里鼠标按下去就变成金色