Python学习第63天（css选择器、伪类）

冰蝶

2020-04-26

关注关注

css，暂时把他比作给html加各种花里胡哨东西的插件。

那么如果你要使用css给您的html增加一些东西，你必须得先导入他，怎么操作呢？

一、css引入方式，以下四种方法：

　　1.直接就在你的原有标签中增加style属性，用键值对去描述他。

　　2.head标签里面增加<style>标签　　　　　　

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
        color:red}
    </style>
</head>
<body>
    <p>引入方式2</p> 
</body>
</html>

　　3.放入文件内，使用link这种半标签进行导入（链接式引入）

　　　　<link href="mystyle.css" rel="stylesheet" type="text/css"/>

　　　　这里的rel参数非常重要，必须书写，不然系统是不知道你导入的文件是一个css文件的

　　4.通过加载文件，只是加载方式不同（导入式引入）

　　　　<style type="text/css"> @import"mystyle.css"; 此处要注意.css文件的路径</style>　

引入方式3（链接式引入）和引入方式4（导入式引入的区别）

　　1.使用方法3，对导入文件数量没有限制，但是导入式只能导入一个

　　2.加载方式不同，使用导入式引入，浏览器会预先加在html部分在进行css部分的渲染，如果网络出现延迟会出现没有渲染效果的html，但是链接式引入使用的是预先完成css部分的效果加载之后，再同步进行输出，只要能看到，就是完整的。

　　综合这些因素，后期使用比较多的就是链接式引入方式

二、css的选择器

　　成功导入了css部分之后，面临的下一个问题就是，如何找到我们要进行渲染的部分，我把伪类放到了一个单独的部分，姑且就说是三种吧

　　找到了之后就可以在中括号里面进行自由的编辑了。

　　1.基础选择器。

　　　　＊：通用元素选择器，匹配任何元素 * { margin:0; padding:0; }

　　　　E ：标签选择器，匹配所有使用E标签的元素 p { color:green; }

　　　　.info和E.info: class选择器，匹配所有class属性中包含info的元素 .info { background:#ff0; } p.info { background:blue; }

　　　　　　这里应该注意class就是一个我们给取得名字，不是Python中出现的类

　　　　#info和E#info id选择器，匹配所有id属性等于footer的元素 #info { background:#ff0; } p#info { background:#ff0; }

　　　　　　#开头就表示要找id，id又是唯一的，当然能够找到

　　2.组合选择器

　　　　 E,F 多元素选择器，同时匹配所有E元素或F元素，E和F之间用逗号分隔，

　　　　　　可以是两个，当然也可以是很多个，然后选择的方式很多，可以使用.class和#id的方式，混搭也是没有问题的

　　　　 E F 后代元素选择器，匹配所有属于E元素后代的F元素，E和F之间用空格分隔

　　　　　　这个主要用在发生嵌套的部分，如果嵌套了很多层，他会一直找下去，各一两层都是没问题的

　　　　 E > F 子元素选择器，匹配所有E元素的子元素F

　　　　　　和上面的空格进行一个区分吧，上面是不管隔了多少层都会向下找，但是这个只会找挨着的那一层，基本就是只找儿子，有点像西周的分封制，我只对自己的主子负责，我的奴隶不是我主子的奴隶

　　　　E + F 毗邻元素选择器，匹配所有紧随E元素之后的同级元素F

　　　　　　用的比较少，主要是用在确定相邻关系的时候才会用，这样以后可以直接写，相邻就发生，不相邻就不触发，还是蛮好的

　　重在练习，看下演示吧！　　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        .div1>p{
            background-color: aqua;
            color: deeppink;
        }

        .main2>div{
            background-color: blueviolet;
            color: chartreuse;
        }
    </style>
</head>
<body>

      <div class="div1">hello1
          <div class="div2">hello2
              <div>hello4</div>
              <p>hello5</p>
          </div>
          <p>hello3</p>
      </div>
      <p>hello6</p>

<hr>

     <div class="main2">1
       <div>2
           <div>
           </div>
       </div>
       <div>
           </div>
     </div>
</body>
</html>

　　　　注意嵌套规则：

　　　　　　a.块级元素可以包含内联元素或某些块级元素，但内联元素不能包含块级元素，它只能包含其它内联元素。

　　　　　　b.有几个特殊的块级元素只能包含内联元素，不能包含块级元素。如h1,h2,h3,h4,h5,h6,p,dt

　　　　　　c.div内可以包含div

　　　　　　d.块级元素与块级元素并列、内联元素与内联元素并列。

　　3.属性选择器

　　　　属性这个东西，可以是固定的系统里面有的，也可以是你自己编的

　　　　需要注意属性的一个问题style = “sb dsb”表示的是style的属性可能是sb或是dsb，而不是“sb dsb”

　　　　E[att] 匹配所有具有att属性的E元素，不考虑它的值。（注意：E在此处可以省略，比如“[cheacked]”。以下同。） p[title] { color:#f00; }

　　　　E[att=val] 匹配所有att属性等于“val”的E元素 div[class=”error”] { color:#f00; }

　　　　E[att~=val] 匹配所有att属性具有多个空格分隔的值、其中一个值等于“val”的E元素 td[class~=”name”] { color:#f00; }

　　　　E[attr^=val] 匹配属性值以指定值开头的每个元素 div[class^="test"]{background:#ffff00;}

　　　　E[attr$=val] 匹配属性值以指定值结尾的每个元素 div[class$="test"]{background:#ffff00;}

　　　　E[attr*=val] 匹配属性值中包含指定值的每个元素 div[class*="test"]{background:#ffff00;}

三、伪类

　　典型的一个案例就是，一个超链接，你悬浮在上面一个样子，正常时候一个样子，点完之后一个样子

<style type="text/css">
    a:link{
        color: red;    正常时候的颜色
    }
    a:visited {
        color: blue;   访问之后的颜色
    }
    a:hover {
        color: green;  悬停时候的颜色
    }
    a:active {
        color: yellow; 触发时候的颜色
    }
</style>
</head>
<body>
    <a href="01-hello-world.html">hello-world</a>
</body>
</html>

　　a:link（没有接触过的链接）,用于定义了链接的常规状态。

　　a:hover（鼠标放在链接上的状态）,用于产生视觉效果。

　　a:visited（访问过的链接）,用于阅读文章，能清楚的判断已经访问过的链接。

　　a:active（在链接上按下鼠标时的状态）,用于表现鼠标按下时的链接状态。

　　　　伪类选择器 : 伪类指的是标签的不同状态:

　　　　　　a ==> 点过状态没有点过的状态鼠标悬浮状态激活状态

　　　　　　a:link {color: #FF0000} /* 未访问的链接 */

　　　　　　a:visited {color: #00FF00} /* 已访问的链接 */

　　　　　　a:hover {color: #FF00FF} /* 鼠标移动到链接上 */

　　　　　　a:active {color: #0000FF} /* 选定的链接 */ 格式: 标签:伪类名称{ css代码; }

　　还有一个before after的伪类不是很明白，不知道到底怎么用

　　暂时先不总结到这里。