认识

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

语法

  1. 选择器{
  2.     属性：属性值；

属性与属性值之间使用冒号隔开，大多数属性值不加引号，以分好进行结尾，属性设置的就是样式，多个属性值之间使用分号隔开,里面的符号必须是英文符号，中文不会有效果

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

特点：

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

选择器

  1. 通配符选择器（*）
  • 作用对象:所有的标签
  • 用途：一般用来清除标签的默认样式
*{
    margin:0;
    padding:0;
}

类选择器

  1. 表示：class的属性值
  2. 作用对象;选中页面中所有具有相同类名的元素，class就是给标签定义名字
  3. 相当于我们的名字
  4. 命名规范，不能以数字开头，命名要有含义，不要用标签名来命名

  • 命名方法:

    • 驼峰命名法：通过多个英文单词组成，第一个英文单词首字母小写，之后的单词首字母大写
    • 划线命名法：通过多个英文单词组成，每个单词之间使用-或者_连接

id选择器

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

id选择器和类选择器的区别：

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

子代选择器

  1. 表示：使用> (父选择器>子选择器[包含所有的后代])
  2. 选中父选择器下的第一子代

后代选择器

  1. 表示：使用空格 祖先选择器 子代选择器（包括所有后代）

群组选择器

  1. 表示：，（逗号）
    （选择器，选择器，选择器）
  2. 当不同的选择器拥有一样的样式的时候使用群组选择器

伪类选择器

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

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

伪元素选择器

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

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

例：:after{content："内容"}

特点

  1. 层叠性：当同一样式作用于同一个标签，就会产生冲突，产生冲突就会产生层叠（覆盖），当选择器的权重相同时，谁在后谁生效，当选择器的权重不同时，谁的权重大谁生效
  2. 继承性：当子元素没有设置样式时会继承父元素的某些样式，可以继承的属性包含文字和文本属性

font- text- color line-height

  • a标签不会通过继承的方式改变本身的样式，想要改变样式必须给本身添加样式*
  1. 优先级（权重）

！impportant
行内样式 1000
id选择器 100
类，伪类，属性选择器 10
标签选择器 1

  • 通配选择器（*），子选择器（>）不在这四个等级中，他们权值都为0

css引入方式

  1. 行内式（内联式）
    只需要在添加样式的标签中添加style属性，属性值书写方式跟内联式的属性书写方式一致
  2. 内嵌式
    在head标签里面填入style标签，里面填写选择器{样式}
  3. 外联式
  • 需要在文件外面的css文件夹单独建立一个css为后缀名的文件，在css文件中只需要填入选择器{样式}
  • 在要引用css的html文件的head标签里面通过link标签来引入相对应的css文件
    方式：<link rel="stylesheet" href="引入css文件的路径">