[关闭]
@wangyupu 2020-05-21T06:08:07.000000Z 字数 3454 阅读 20

HTML5+CSS第四章笔记主讲层次筛选和结构伪类选择器

HTML5+CSS

  2. 初识css
  3. -----
  4. 1、会使用行内样式、内部样式表和外部样式表三种方式为`html5`文档添加`css`样式
  5. 2、会使用`css3`的基本选择器设置字体大小和颜色。
  6. 3、会使用复合选择器为特定的网页元素添加`css`样式。
  7. 4、会使用css3高级选择器为网页元素添加`css`样式
  8. （1）`css`导入方式
  9. （2）`css`语法
  10. （3）选择器（普通和高级）

css的优势

  1. 内容与样式分离
  2. 内容的表现统一容易修改
  3. 丰富的样式时的页面布局更加灵活
  4. 减少网页的代码量，增加网页的浏览速度，节省网络带宽
  5. 运用独立于的`css`有利于网页被搜索引擎收录

css的基本语法结构

  1. 语法:
  2.     选择器{
  3.             声明1;
  4.             声明2;
  5.     }
  6. css属性在最后使用
  7. 示例
  8.    ` h1 {
  9.         font-size:12px;
  10.         color：#F00;
  11.     }`
  12. `css`的最后一句声明的`；`可写可不写，但是基于W3C标准规范考虑，建议最后一条生明的结束“；”都要写上。

style标签

  1. `<style type="text/css">
  2.     h1 {
  3.         font-size:12px;
  4.         color:#f00;
  5.     }
  6. </style>` 
  1. 行内样式
  2. 内部样式
  3. 外部样式

行内样式

  1. 使用`style`属性引入`css`样式
  2. 示例
  3. `<h1 style="color:red";>style属性的应用<h1>`
  4. `<p style="font-size:14px；color:green;">直接在HTML5中标签样式中设置的样式</p>`

内部样式

  1. `css在（head）的<style>`标签中
  2. `<style>
  3.     h1{cocor:green;}
  4. </style>`
  5. 优点：
  6.     方便在同一页面中修改样式
  7. 缺点：
  8.     不利于再多页面中共享复用代码及维护对内容与样式的分离也不够彻底

外部样式表

  1. `css`代码保存在扩展名为`css`的样式表中
  2. `html`文件引用扩展名为`css`的样式表有两种方法
  3. >链接式
  4. >导入式
  5. 外部样式表
  6.     链接外部样式表
  7. 语法为下
  8. `<head>
  10. <link href=“style.css” rel=“stylesheet” type="text/CSS" />
  12. </head>`

css样式优先级

  1. 行内样式表>内部样式表>外部样式表

css基本选择器

  1. 标签选择器
  2. 类选择器
  3. id选择器    
  1. 标签选择器的名称
  2. >···<h6>、<p>、<img/>
  3. 语法：`p{
  4.         font-size:16px
  5.         }`

类选择器

  1. `.class{
  2.         font-size:16px
  3. }
  4. 示例
  5. .pet{
  6.     color：red；
  7. }
  8. class="pet"`
  9. 类选择器图片对齐方式
  10. .a{vertical-align:middle;}
  11. <img sr=..... class="a";>

id选择器

  1. 语法：
  2. `#id{
  3.     font-size:16px;
  4. }`
  5. 标签选择器直接应用于HTML标签
  6. 类选择器可以在页面中使用多次
  7. id选择器在同一个页面中只能使用一次

基本选择器

  1. **id选择器>类选择器>标签选择器**

层次选择器

  1. EF 后代选择器 选择匹配F元素且元素匹配的F元素被包含的匹配的E元素
  2. E>F 子选择器  选择匹配的F元素，且匹配的F元素是匹配的的E元素的子元素
  3. E+F 相邻兄弟选择器 选择匹配的F元素且匹配的F元素紧位于匹配的E元素后面
  4. E~F 通用兄弟选择器 选则匹配的F元素，且位于匹配的E元素后的所有匹配的F元素
  5. 语法
  6. `body p{
  7.         background:red；
  8. }`
  9. 后代选择器两个选择符之间必须要以空格隔开，中间不能有任何其他符号框
  10. `body>p{
  11.         background:pink；
  12. }`
  13. 后代选择器两个选择符之间必须用空格隔开，中间不能有任何其他的符号输入
  14. 示例
  15. --
  17. <!DOCTYPE html>
  18. <html>
  19.     <head>
  20.         <meta charset="UTF-8">
  21.         <title></title>
  22.     </head>
  23.     <!--
  24.         层次选择器(由基本选择器构成<标签选择器，类选择器，ID选择器>)
  25.     -->
  26.     <style>
  27.         /*后代选择器*/
  28.         /*ul .xyj{
  29.             color: red;
  30.         }*/
  31.         /*子选择器*/
  32.         /*body>a{
  33.             color: red;
  34.         }*/
  35.         /*相邻兄弟选择器  下面的兄弟   第一个元素*/
  36.         /*ul+a{
  37.             color: red;
  38.         }*/
  39.         /*通用兄弟选择器  下面所有兄弟*/
  40.         /*ul~span{
  41.             color: red;
  42.         }*/
  43.     </style>
  44.     <body>
  45.         <ul>
  46.             <li><a class="xyj">猪八戒</a></li>
  47.             <li><a class="xyj">沙悟净</a></li>
  48.             <li><a class="xyj">孙悟空</a></li>
  49.             <li><a>葫芦娃</a></li>
  50.         </ul>
  51.         <span>张四娃</span>
  52.         <a class="xyj">王大锤</a>
  53.     </body>
  54. </html>

结构伪类选择器

  1. `E：first-child`   作为父元素的第一个子元素的元素E必须为E
  2. `E: last-child`    作为父元素的最后一个字元素的元素E
  3. `EF:nth-child(n)`  选择父级元素E的第N个子元素F（n可以试1、2、3）关键字为even,odd
  4. `E: first-of-type`  选择父元素内具有之类元素类型的第一个E元素
  5. `E: last-of-tyoe`    选择父元素内具有指定元素类型的最后一个E元素
  6. `EF：nth-of-type(n)` 选择父元素内具有指定类型的第N个F元素
  7. 使用`EF：nth-child(n)`和`EF：nth-of-type（n）`的关键字
  8. `EF：nth-child(n)`在父级别里从一个元素开始查找不分类型
  9. `EF: nth-of-type(n)`在父级里先看类型在看位置
  10. 重点
  11. `**EF:nth-child(n)`  选择父级元素E的第N个子元素F（n可以试1、2、3）关键字为even,odd
  12. `EF：nth-of-type(n)` 选择父元素内具有指定类型的第N个F元素**
  13. 示例
  14. --
  16. <!DOCTYPE html>
  17. <html>
  18.     <head>
  19.         <meta charset="UTF-8">
  20.         <title></title>
  21.     </head>
  22.     <style>
  24.         /* 选中ul下的第一个li 必须是li*/
  25.         /*.top li:first-child{
  26.             color: red;
  27.         }*/
  28.         /* 选中UL下 最后一个li    */
  29.         /*.top li:last-child{
  30.             color: red;
  31.         }*/
  33.         /* 指定选中第2个ul下的li */
  34.         /*.top li:nth-child(2){
  35.             color: red;
  36.         }*/
  38.         /*选中 div下第一个a标签*/
  39.         /*div a:first-of-type{
  40.             color: red;
  41.         }*/
  42.         /*选中div下第二个a标签*/
  43.         div a:nth-of-type(2){
  44.             color: red;
  45.         }
  47.     </style>
  48.     <body>
  49.         <div>
  50.             <span>这是span</span>
  51.             <a>1</a>
  52.             <span>这是span</span>
  53.             <a>2</a>
  54.             <span>这是span</span>
  55.             <a>3</a>
  56.             <span>这是span</span>
  57.             <a>4</a>
  58.         </div>
  60. <!--        
  61.         <ul class="top">
  62.             <li>11111</li>
  63.             <li>22222</li>
  64.             <li>33333</li>
  65.         </ul>-->
  67.     </body>
  68. </html>

属性选择器

  1. `E[attr]`        选则匹配具有atter的E元素
  2. `E[attr=val]`  选择匹配具有属性attr的E元素,并且属性值为val（其中val区分大小写）
  3. `E[attr^=val]`   选择匹配元素E，且E元素定义了属性attr，其属性值是以val开头的任意字符串
  4. `E[attr$=val]`    选择匹配元素E，且E元素定义了属性attr，其属性值是以val结尾的任意字符串
  5. `E[attr*=val]`     选择匹配元素E，且E元素定义了属性attr，其属性值包含了“val”，换句话说，字符串val与属性值中的任意位置相匹配
  6. 示例
  7. --
  8. <!DOCTYPE html>
  9. <html>
  10.     <head>
  11.         <meta charset="UTF-8">
  12.         <title></title>
  13.     </head>
  14.     <style>
  16.         a[class='aa']{
  17.             color: red;
  18.         }
  21.     </style>
  22.     <body>
  23.         <a href="http://www.baidu.com" class="aa">百度</a>
  24.         <a href="http://www.taobao.com" >淘宝</a>
  25.         <a href="http://www.jingdong.com">京东</a>
  26.         <a href="inwwwdex.html" >我的</a>
  27.     </body>
  28. </html>
添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注