day22-CSS3-基础一
一、CSS基础
1.什么是CSS
- CSS又叫层叠样式表(简称样式表，目前使用的CSS3)
- CSS是web标准中的表现标准，它负责的是网页中内容的样式和布局
2.怎么写CSS
- 1)语法
- 选择器{属性名1:属性值1;属性名2:属性值2;...}
- 2)说明
- 选择器{}：通过选择器选中需要添加样式的标签；在内联样式中不用写
- 属性：属性名和属性值之间用冒号连接，多个属性之间用分号隔开；属性名不是自己命名，必须是CSS提供的属性，学习CSS主要就是学CSS中的属性；属性值如果是表示大小的数字：必须加单位(px-像素，em-空格数，50%-百分比)；颜色值：颜色的英文单词、#6位16进制颜色值、rgb(0-255,0-255,0-255)、rgba(r,g,b,透明度)；透明度：0-1
- 3)常用属性
- 根据样式表写的位置，将样式表分为：内联样式、内部样式、外部样式
- a.内联样式：将样式表写在标签的style属性中，只能作用于一个标签
- b.内部样式：将样式表写在style标签中，可以作用于当前整个html中的标签
- c.外部样式：将样式表写在CSS文件中，然后再在html文件中通过link导入，可以作用于所有页面的所有标签
- 优先级：内联的优先级最高；内部和外部样式表看谁后写，谁优先级高
二、CSS选择器
1.元素选择器/标签选择器
- 直接将标签名作为选择器，选中所有指定的标签
- 例如：a{}-选中所有a标签
2.id选择器
- 在标签的id属性值前加#作为一个选择器，选中id值是指定值的标签(注意：一个html中id必须是唯一的)
- 例如：#a{}-选中id值为a的标签
3.class选择器
- 在标签的class属性值前加.作为选择器，选中所有class属性值是指定值的标签
- 例如：.a{}-选中class属性是a的所有标签
- 注意：一个html中多个标签可以拥有一个class值，同一个标签也可以同时拥有多个class值(多个class值之间用空格隔开)
4.群组选择器
- 将多个选择器用逗号隔开，选中每个独立选择器选中的所有标签
- 例如：a,p{}-选中所有的a标签和p标签
5.1.包含选择器(包含关系中不一定是直接包含，间接包含也能选中)
- 将多个选择器用空格隔开，从前往后一层一层的找，找到最后一个选择器选中的标签
- 例如：div #d1 p{}-选中所有在div标签中的id是d1的标签中的p标签
5.2.包含选择器(包含关系必须是直接包含)
- 将多个选择器用>隔开，从前往后一层一层的找，找到最后一个选择器选中的标签
6.通配符选择器
- 直接将*作为选择器，选中当前页面中所有的标签
- 一般用来选中所有标签关闭所有默认的间隙(margin、padding)
7.选择器的权重
- 权重值越大优先级越高，但是内联样式表优先级永远是最高的
- 元素选择器：0001(1)
- class选择器：0010(2)
- id选择器：0100(4)
- 群组选择器：看单独每个选择器的权重
- 包含选择器：单独每个选择器的权重和
8.伪类选择器
- 普通选择器选中的是某一个标签，伪类选择器是选中标签的状态
- 1)语法-普通选择器:类型
- 2)说明
- 普通选择器就是所有能够选中标签的选择器
- 类型决定了被选中的状态
- 3)常见的伪类选择器
- link：选中初始状态，一般只针对a标签有效；a标签的初始状态指的是a标签关联连接
- visited：成功访问后的状态，一般只针对a标签有效
- hover：鼠标悬停在标签上时对应的状态，可以作用于所有可见的标签
- active：在标签上按住鼠标不放时对应的状态，可以作用于所有可见的标签
- 注意：除了a标签以外别的标签的link无效；直接选中标签选中的是这个标签的所有的状态；使用伪类选择器时候需要遵守'爱恨原则'，LoVe HAte
