day22-CSS3-基础一

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

---