CSS3的引入和选择器

一、HTML中引入css

1、行内样式

• 使用style引入html样式
  示例：

style属性的应用
直接在HTML标签中设置的样式

2、内联样式表

• CSS代码写在的
  • 优点
    方便在同页面中修改样式
  • 缺点
    不利于在多页面间共享复用代码及维护，对内容与样式的分离也不够彻底

  3、外部样式表

  • CSS代码保存在扩展名为.css的样式表中
    HTML文件引用扩展名为.css的样式表，有两种方式：
    [1]链接式

  
    ……
  
    ……
  /*文件路径、使用外部样式表、文件类型*/
  
  

  [2]导入式

  
  ……
  
  
  

  4、链接式与导入式的区别

  • 标签属于XHTML，@import是属于CSS2.1
  • 使用链接的CSS文件先加载到网页当中，再进行编译显示
  • 使用@import导入的CSS文件，客户端显示HTML结构，再把CSS文件加载到网页当中
  • @import是属于CSS2.1特有的，对不兼容CSS2.1的浏览器是无效的

  5、CSS样式优先级

  行内样式>内部样式表>外部样式表
  就近原则

  二、CSS3基本选择器

  1、标签选择器

  HTML标签作为标签选择器的名称
  

  …

  、

  、
  语法：

  p { font-size:16px;}
  /*标签选择器{属性:(声明)值}*/
  

  2、类选择器

  语法：

  .class { font-size:16px;}
  

  <标签名 class= "类名称">标签内容
  

  3、ID选择器

  #id { font-size:16px;}
  /*id名称{属性:(声明)值}*/
  

  小结：

  • 标签选择器直接应用于HTML标签
  • 类选择器可在页面中多次使用
  • ID选择器在同一个页面中只能使用一次
  • ID选择器>类选择器>标签选择器

  三、CSS高级选择器

  1.1、层次选择器

  
  

  语法：

   body p{  background: red; }
  

  • 后代选择器两个选择符之间必须要以空格隔开，中间不能有任何其他的符号插入

  1.2、子选择器

  语法：

   body>p{  background: pink;}
  

  1.3、相邻兄弟选择器

  语法：

  .active+p {  background: green;  }
  

  1.4、通用兄弟选择器

  语法：

  .active~p{  background: yellow;  }
  

  2、结构伪类选择器

  
  

  示例：

  ul li:first-child{ background: red;}
  ul li:last-child{ background: green;}
  p:nth-child(1){ background: yellow;}
  p:nth-of-type(2){ background: blue;}
  

  • 使用E F:nth-child(n)和E F:nth-of-type(n)的 关键点
  • E F:nth-child(n)在父级里从一个元素开始查找，不分类型
  • E F:nth-of-type(n)在父级里先看类型，再看位置

  3、属性选择器

  3.1、E[attr]

  语法：

  a[id] { background: yellow; }
  

  3.2、E[attr=val]

  语法：

   a[id=first] { background: red; }
  

  • E[attr=val]属性选择器中，属性和属性值必须完全匹配才能被选中

  3.3、E[attr*=val]

  语法：

   a[class*=links] { background: red; }
  

  3.4、E[attr$=val]

  语法：

   a[href$=png] { background: red; }