H5入门四:CSS选择的艺术

H5入门四:CSS选择的艺术

一、什么是CSS

  • CSS层叠样式表(Cascading Style Sheets)
  • 用于定义HTML内容在浏览器里面的显示样式

二、为什么学习CSS

H5入门四:CSS选择的艺术_第1张图片

三、CSS基本内容

  • CSS基础语法
  • CSS 使用方法
  • CSS选择器
  • CSS集成和层叠
  • CSS优先级
  • CSS命名规范

CSS基础语法

  1. CSS样式规则:H5入门四:CSS选择的艺术_第2张图片
  2. CSS样式的引用H5入门四:CSS选择的艺术_第3张图片
  3. CSS样式的引用方式H5入门四:CSS选择的艺术_第4张图片
    1. 行内样式H5入门四:CSS选择的艺术_第5张图片
    2. 内部样式H5入门四:CSS选择的艺术_第6张图片
    3. CSS外部样式H5入门四:CSS选择的艺术_第7张图片
    4. CSS导入样式H5入门四:CSS选择的艺术_第8张图片
    5. CSS样式引用总结:H5入门四:CSS选择的艺术_第9张图片
    6. CSS样式优先级关系H5入门四:CSS选择的艺术_第10张图片

CSS选择器

  1. CSS有哪些选择器?H5入门四:CSS选择的艺术_第11张图片
  2. 标签选择器H5入门四:CSS选择的艺术_第12张图片
  3. 类选择器H5入门四:CSS选择的艺术_第13张图片
  4. 给不同标签的相同类选择标签设置不同样式

H5入门四:CSS选择的艺术_第14张图片

  1. 一个元素可以设置多个类选择器,之间用空格隔开
    H5入门四:CSS选择的艺术_第15张图片

  2. ID选择器
    H5入门四:CSS选择的艺术_第16张图片

  3. 群组选择器
    H5入门四:CSS选择的艺术_第17张图片

  4. 【注意:】class和id的值在设置样式时候是区分大小写的

  5. 全局选择器(通配符选择器),使用*号表示

H5入门四:CSS选择的艺术_第18张图片

  1. 后代选择器

H5入门四:CSS选择的艺术_第19张图片

  1. 后台选择器-各个选择器之间以空格隔开

H5入门四:CSS选择的艺术_第20张图片

  1. 链接伪类

H5入门四:CSS选择的艺术_第21张图片

  1. 伪类:hover和伪类:active
    H5入门四:CSS选择的艺术_第22张图片

  2. 链接伪类的顺序

H5入门四:CSS选择的艺术_第23张图片

CSS层叠和优先级

  1. CSS层叠
    H5入门四:CSS选择的艺术_第24张图片

  2. CSS选择器优先级规则

H5入门四:CSS选择的艺术_第25张图片

  1. CSS各种选择器的权值
    H5入门四:CSS选择的艺术_第26张图片

  2. 通过!important来调整样式的优先级

H5入门四:CSS选择的艺术_第27张图片

  1. CSS样式优先级总结

H5入门四:CSS选择的艺术_第28张图片

CSS样式命名规范

  1. 命名规范

H5入门四:CSS选择的艺术_第29张图片

  1. 常用CSS样式的命名

H5入门四:CSS选择的艺术_第30张图片

  1. 常用导航的CSS命名

H5入门四:CSS选择的艺术_第31张图片

  1. 常用功能区域的命名规范

H5入门四:CSS选择的艺术_第32张图片

End

你可能感兴趣的:(H5)