CSS样式精讲-优快云博客

CSS概念

概念：
1. 层叠样式表：同一个样式都作用于同一个元素
2. 设置网页外观
3. 减少内容格式化，减少网页体积，加快下载和访问速度

注意：如果同一个样式同时作用于同一个元素，最终样式决定于样式的优先级

CSS基本语法

CSS选择器
1. 可以使css样式与元素进行分离
2. 作用
  1. 减少代码冗余
  2. 方便后期维护
3. 语法：选择器{属性名：属性值;}

注意：符号都是英文的，符号必须写

选择器命名规则：
1. 最好不使用简单的字符命名，使用英文单词
2. 使用英文字母开头，后面跟数字、字母、下划线、中线
3. 不能以数字开头
4. 不能使用中文
CSS引入方式

行间样式
1. 语法：<标签名 style=”样式属性”></标签名>
内嵌式
1. 语法
  1. 在head标签中创建一对style标签
  2. 在style标签中创建选择器
  3. <head><style>选择器{属性名:属性值;}</style></head>
外链式
1. 语法：
  1. 先在页面外建立外部样式表文件（*.css）
  2. 再在页面引入文件：<link rel=”stylesheet” type=”text/css” href=”*.css”/>

注意：type属性值可选择，默认text/css

注意：

1. 1. 标签属性属性名=”属性值”
  2. 样式属性属性名:属性值;
选择器

什么是选择器：选择器就是一种匹配模式，匹配那些需要添加样式的元素

注意：选择器最终选择的就是元素（标签），给匹配到的元素添加样式

选择器分类
1. 基本选择器
  1. id选择器
    1. 声明：#id名称{样式规则}
    2. 调用：<标签名 id=”id名称”></标签名>
    3. 注意：
      1. # 表示使用的是id声明的选择器
      2. id是唯一的，在调用的时候只能调用一次，可以声明多次
      3. 调用时 id名称前后不能有空格
      4. 同一个元素不能同时调用多个id
  2. 类名选择器
    1. 声明：.类名{样式规则}
    2. 调用：<标签名 class=”类名”></标签名>
    3. 注意：
      1. . 表示使用的是class声明的选择器
      2. 调用过程中同一个类名可以调用多次
      3. 同一个元素可以同时调用多个类名，用空格隔开
  3. 标签选择器（元素选择器）
    1. 语法：标签名{样式规则}
    2. 匹配页面中所有该标签的元素
    3. 注意：标签名只能是html中存在的标签
  4. 通用选择器
    1. 语法：*{样式规则}
    2. 注意：
      1. *表示通配符，匹配页面中所有的标签（包括html，head，body）
      2. 通常不建议使用，在测试代码时使用
      3. 会影响浏览器解析网页速度
  5. 注意：不能匹配某个范围内的元素，引入层级选择器
2. 层次选择器
  1. 后代选择器
    1. 语法：选择器1 选择器2 选择器3{样式规则}
    2. 注意：
      1. 选择器1，2，3都是由基本选择器组成
      2. 匹配选择器1下面的选择器2下面的选择器3
      3. 选择器2是选择器1的后辈元素
  2. 子选择器
    1. 语法：选择器1>选择器2{样式规则}
    2. 匹配选择器1的第一层子级元素
    3. 只匹配第一代儿子
  3. 并列选择器
    1. 语法：选择器1,选择器2{样式规则}
    2. 注意：
      1. 匹配页面中所有的选择器1和选择器2
      2. 多个元素设置相同属性时用
  4. 交集选择器
    1. 语法：选择器1选择器2{样式规则} （中间没空格）
    2. 注意：匹配同时含有选择器1和选择器2的元素
  5. 相邻选择器
    1. 语法：选择器1+选择器2{样式规则}
    2. 注意：匹配的是选择器1 后面的第一个兄弟选择器2
  6. 兄弟选择器
    1. 语法：选择器1~选择器2{样式规则}
    2. 注意：匹配的是选择器1之后的所有兄弟选择器2

注意：在属性前面加一个-（-属性）表示过滤属性，不解析这个属性

1. 伪类选择器
  1. 动态伪类选择器
    1. E:link 设置超链接a在未被访问前的样式。
    2. E:visited 设置超链接a在其链接地址已被访问过时的样式。
    3. E:hover 设置元素在其鼠标悬停时的样式。
    4. E:active 设置元素在被用户激活（在鼠标点击与释放之间发生的事件）时的样式。
    5. E:focus 设置元素在成为输入焦点（该元素的onfocus事件发生）时的样式。
    6. 注意;
      1. 设置超链接标签注意设置顺序：L、V、H、A
      2. 项目中：只设置其中一两个属性
  2. 目标伪类选择器
    1. 设置页面中锚点的样式
  3. 语言伪类选择器
  4. UI状态伪类选择器
  5. 结构伪类选择器（重点）
    1. E:first-child：匹配父元素中第一个儿子，并且第一个儿子必须是指定的选择器
    2. E:last-child：匹配父元素中最后一个儿子，并且最后一个儿子必须是指定的选择器
    3. E:first-of-type：匹配父元素中同类型中第一个子元素
    4. E:last-of-type：匹配父元素中同类型中最后一个子元素
    5. E:nth-child(n)：匹配父元素的第n个子元素E，如果之前有其他元素会占一个位置（E:nth-child(2n)匹配偶数项，奇数项+1）
    6. E:nth-of-type(n)：匹配父元素中同类型中第n个子元素
  6. 否定伪类选择器
    1. E:not(s): 匹配不含s选择符的元素E
2. 伪类选择器，伪元素选择器区别
  1. 在css3之前的版本中没有区别，使用时都是使用一个”:”
  2. 在css3中对它们做了一个区分（用两个冒号）
    1. 伪类选择器：一种状态或一个属性
      1. 实例：匹配班上的所有男生得到一个集合，伪类选择器就是从这个集合中筛选出某个或多个元素
    2. 伪元素选择器：就是创建了一个新元素
      1. 如before是在元素之前创建一个新元素
3. 属性选择器
  1. E[att] 选择具有att属性的E元素。
  2. E[att="val"] 选择具有att区别属性且属性值等于val的E元素。
  3. E[att~="val"] 选择具有att属性且属性值为一个用空格分隔的字词列表，其中一个等于val的E元素。
  4. E[att^="val"] 选择具有att属性且属性值为以val开头的字符串的E元素。
  5. E[att$="val"] 选择具有att属性且属性值为以val结尾的字符串的E元素。
  6. E[att*="val"] 选择具有att属性且属性值为包含val的字符串的E元素。
  7. E[att|="val"] 选择具有att属性且属性值为以val开头并用连接符"-"分隔的字符串的E元素，如果属性值仅为val，也将被选择。
优先级

1. css优先级

1. 引入css的三种方式：行内>内嵌=外链（内嵌、外链优先级取决于哪一个最后引入）
2. !important > 行内样式 > id选择器 > 类名选择器 > 标签选择器
3. 权值：
  1. 行内样式： 1000
  2. id选择器： 100
  3. 类名选择器：10
  4. 标签选择器：1
4. 优先级：比较权值大小