认识

主要是用于定义HTML内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等

语法

  1. 选择器{
  2.     属性：属性值;
  3. }
  4. /* 属性与属性值之间使用冒号隔开，大多数属性值不加引号，以分好进行结尾，属性设置的就是样式，多个属性值之间使用分号隔开,里面的符号必须是英文符号，中文不会有效果 */

选择器就是要作用的对象（html里面的标签）

特点：

  1. 最好每行只描述一个属性，以分号进行结尾
  2. css代码不区分大小写，但是尽量用小写
  3. 属性值和属性名前后加空格不影响执行

选择器

通配符选择器

  1. 表示：*
  2. 作用对象：所有的标签
  3. 用途：一般用来清除标签的默认样式
  1. *{
  2.     margin: 0;
  3.     padding: 0;
  4. }

标签选择器

  1. 表示：标签名
  2. 作用对象：具有相同名字的标签

类选择器

  1. 表示：.class的属性值
  2. 作用对象：选中页面中所有的具有相同类名的元素，class就是给标签定义名字
  3. 相当于我们的名字
  4. 命名规范
  • 不能以数字开头
  • 命名要有含义，不要以标签名来命名
  • 命名方法
    • 驼峰命名法：通过多个英文单词组成，第一个英文单词首字母小写，之后的单词首字母大写
    • 划线命名法：通过多个英文单词组成，每个单词之间使用-或者_连接

id选择器

  1. 表示：#id的属性值
  2. 作用元素：选中页面中具有某个id属性的标签
  3. 相当于我们的身份证id
  4. id具有唯一性
  • 页面中不同的标签都有一个id属性，属性值不能重复
  • 一个id属性只有一个id值
  1. 因为id具有页面中的唯一性，一般用于跟js相结合

id选择器和类选择器的区别：
相同点：都是给标签定义名字
不同点：(1)两者表示方法不同：id选择器使用#作为标志，而类选择器使用.作为标志
(2)页面中所有标签有且仅有一个id值，而且不能重复，页面中所有的标签都可以拥有多个class属性值，每个属性值之间使用空格隔开，而且不同的标签可以公用一个class名，也就是class属性值相同

子代选择器

  1. 表示：使用> 父选择器>子选择器（直接子代）
  2. 选中父元素下的第一子代

后代选择器

  1. 表示：使用空格 祖先选择器 子选择器（包含所有的后代）
  2. 选中祖先元素下的所有后代

群组选择器

  1. 表示：, 选择器,选择器,选择器{样式}
  3. 当不同的选择器拥有一样的样式的时候使用群组选择器

伪类选择器

是对页面中已经存在的元素添加的一种状态

  1. :link未被访问时的状态，只用于超链接
  2. :visited访问过的状态，只用于超链接
  3. :hover鼠标浮上去的时候的状态,可以用于所有的元素
  • 浮上本身作用于本身
  • 浮上本身作用于其他标签
  1. :active被激活时候的状态，只用于超链接
  2. :focus聚焦时候的状态

伪元素选择器

是往页面中添加元素但是这个元素不在dom中

  1. :after在元素内部的后面添加内容
  2. :before在元素内部的前面添加内容
    使用伪元素选择器必须添加一个content属性