Python 前端CSS

CSS3

1.什么是css3:

　　CSS3就是css语言，数字3是该语言的版本号；css语言开发的文件是以.css为后缀，通过在html文件中引入该css文件来控制html代码的样式（css语言代码也可以直接写在html文件中），采用的语言是级联样式表（Cascading Style Sheet），也属于标记语言。

2.作用：

　　控制修改标签样式

3.css注释

/*这是注释*/

css注释

一 css三种引入方式

1.行内式

css样式书写在标签的style全局属性中，一条样式格式为样式名: 样式值/ 单位;，可以同时出现多条样式

<!-- 关键代码 -->
<!-- 给div标签设置宽高背景颜色 -->
<div style=" 200px; height: 200px; background-color: orange;"></div>

行内式

2.内联式

css样式书写在head标签内的style标签中，样式格式为 css选择器 { 样式块 }，样式块由一条条样式组成

<!-- 关键代码 -->
<head>
    <style>
        /* css语法下的注释语法 */
        /* 设置页面中所有h2标签宽高背景颜色 */
        h2 {
            width: 50px; 
            height: 50px; 
            background-color: orange;
        }
        /* 设置页面中所有h3标签宽高背景颜色 */
        h3 {
            width: 100px; 
            height: 100px; 
            background-color: red;
        }
    </style>
</head>
<body>
    <h2></h2>
    <h2></h2>
    <h3></h3>
    <h3></h3>
</body>

内联式

3.外联式

css样式的写法同内联式，但样式书写在css文件中，在html页面中用link标签引入css文件（建议在head标签中引入）

1.#css文件夹下的my.css
/* html文件会引入该css文件，设置所有引入了html文件中的所有p标签宽高背景颜色 */
p {
     50px; 
    height: 50px; 
    background-color: orange;
}

2.#
<!-- 关键代码 -->
<head>
    <!--
    rel="stylesheet"：引入的是层级样式表，也就是css文件
    type="text/css"：引入文件采用的是css语法书写文本类型代码
    href="css/my.css"：采用相当路径引入目标css文件
    -->
    <link rel="stylesheet" type="text/css" href="css/my.css">
</head>
<body>
    <!-- 该页面中的p标签样式都被my.css文件控制 -->
    <p></p>
    <p></p>
</body>

外联式

二 css基础选择器

css选择器本质就是css与html两种语法建立关联的特定标识符

1.通配选择器

/* 特定标识符 星号(*) -- 可以表示页面所有标签的名字 */
/* 通配选择器控制页面中所有的标签(不建议使用) */
* {
    /* 样式块 */
}

2.标签选择器

/* 特定标识符 标签名 */
/* 标签选择器控制页面中标签名为标签选择器名的所有标签*/
div { /* 控制页面中所有div标签的样式 */
    /* 样式块 */
}

3.class选择器（提倡使用）


  /* 特定标识符 点(.) */
/* class选择器控制页面中标签全局属性class值为class择器名的所有标签*/
.box { /* 控制页面中所有标签全局属性class值为box标签的样式 */
    /* 样式块 */
}

4.id选择器

/* 特定标识符 井号(#) */
/* id选择器控制页面中标签全局属性id值为id择器名的唯一标签*/
#box { /* 控制页面中唯一标签全局属性id值为box标签的样式 */
    /* 样式块 */
}

css基础选择器

三 css组合选择器

1.组合：

/* 连接标识符 逗号(,) */
/* 群组选择器就是一套样式块同时控制用逗号连接(,)的所有目标标签 */
div, p, .box, #ele {
    /* 样式块 */
}


<!-- 页面中所有div标签、所有p标签、所有class属性值为box、唯一id属性值为ele的标签都能被匹配 -->
<div>
    <div></div>
</div>
<p></p>
<p></p>
<i class="box"></i>
<span class="box"></span>
<b id="ele"></b>

群组

2.后代选择器和子代选择器

#1.后代选择器（本等级下面所有）
/* 连接标识符 空格( ) */
/* 后代选择器控制的是最后置的选择器位匹配到目标标签(们)，前置位的所有选择器都是修饰 */
body .box i { /*最后置位的选择器为i标签选择器，前置位body标签选择器、class值为box的class选择器都是修饰*/
    /* 样式块 */
}

<!-- body标签内部的class属性值为box内部的i标签们都能被匹配，所以只匹配i标签，其他都是修饰 -->
<body>
    <div class='box'>
        <span><i></i></span><!-- body与.box是直接父子关系，.box与i是间接父子关系，能被匹配 -->
    </div>
    <div>
        <span class='box'><i></i></span><!-- body与.box是间接父子关系，.box与i是直接父子关系，能被匹配 -->
    </div>
</body>
<!-- 标签的嵌套结构形成父子代标签，后代选择器可以匹配直接父子关系或间距父子关系形成的层次，所以两个i标签均能被匹配 -->


#2.子代选择器（本等级下面相邻一个）
/* 连接标识符 大于号(>) */
/* 子代选择器控制的是最后置的选择器位匹配到目标标签(们)，前置位的所有选择器都是修饰 */
body>.box>i { /*最后置位的选择器为i标签选择器，前置位body标签选择器、class值为box的class选择器都是修饰*/
    /* 样式块 */
}

<!-- body>.box>i：同理body和.box都是修饰位，i才是目标匹配位 -->
<body>
    <div class='box'>
        <span><i></i></span><!-- body与.box是直接父子关系，.box与i是间接父子关系，不能被匹配 -->
    </div>
    <div>
        <span class='box'><i></i></span><!-- body与.box是间接父子关系，.box与i是直接父子关系，不能被匹配 -->
    </div>
    <div class='box'>
        <i></i><!-- body与.box是直接父子关系，.box与i是直接父子关系，能被匹配 -->
    </div>
</body>
<!-- 子代选择器只能匹配直接父子关系，所以只能匹配最后一个i标签 -->

后代和子代

3.兄弟和相邻选择器

#1.兄弟（同等级下面所有）
/* 连接标识符 波浪号(~) */
/* 兄弟选择器控制的是最后置的选择器位匹配到目标标签(们)，前置位的所有选择器都是修饰 */
#ele~div~i { /*最后置位的选择器为i标签选择器，前置位id值为ele的id选择器、div标签选择器都是修饰*/
    /* 样式块 */
}

<!-- #ele~div~i：同理#ele和div都是修饰位，i才是目标匹配位 -->
<h3 id="ele"></h3>
<div></div><!-- #ele与div是直接兄弟关系 -->
<i></i><!-- div与i是直接兄弟关系，能被匹配 -->
<div></div><!-- #ele与div是间距兄弟关系 -->
<i></i><!-- div与i是直接兄弟关系，能被匹配 -->
<!-- 标签的上下结构形成兄弟标签，兄弟选择器可以匹配直接兄弟关系或间距兄弟关系形成的层次，所以两个i标签均能被匹配 -->

#2.相邻（同等级下一个）
/* 连接标识符 加号(+) */
/* 相邻选择器控制的是最后置的选择器位匹配到目标标签(们)，前置位的所有选择器都是修饰 */
#ele+div+i { /*最后置位的选择器为i标签选择器，前置位id值为ele的id选择器、div标签选择器都是修饰*/
    /* 样式块 */
}

<!-- #ele+div+i：同理#ele和div都是修饰位，i才是目标匹配位 -->
<h3 id="ele"></h3>
<div></div><!-- #ele与div是直接兄弟关系 -->
<i></i><!-- div与i是直接兄弟关系，能被匹配 -->
<div></div><!-- #ele与div是间距兄弟关系 -->
<i></i><!-- div与i是直接兄弟关系，不能被匹配 -->
<!-- 相邻选择器只能匹配直接兄弟关系，所以只能匹配第一个i标签 -->

兄弟和相邻

注意：后代和子代以及兄弟和相邻的区别和相似

4.交叉选择器

/* 连接标识符 紧挨着(没有任何连接符) */
/* 交叉选择器本质上是对一个目标标签的多个名字的同时表示 */
div.box#ele.tag { /*div是标签名，box和tag都是class属性值，ele是id属性值*/
    /* 样式块 */
}

<!-- 标签名div、class名box及tag和id名ele都是对一个目标标签的修饰空格隔开
<!-- class属性拥有多个值时，多个值之间用空格隔开 -->
<div class="box tag" id="ele"></div>

交叉

5.属性选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*
        1.具有某个属性名
        2.具有某个属性名及属性值
        3.具有某个属性名及属性值某个标签
        */
        /*找只要有hobby这个属性名的所有标签*/
        /*[hobby] {*/
        /*    background-color: red;*/
        /*    color: orange;*/
        /*}*/

        /*[hobby="jdb"] {*/
        /*    background-color: pink;*/
        /*}*/
        /*找input 具有属性名是hobby并且值是jdb的input标签*/
        input[hobby="jdb"] {
            background-color: greenyellow;
        }
    </style>
</head>
<body>
<input type="text" name="username" hobby="jdb">
<input type="text">
<span hobby="jdb">span</span>
</body>
</html>

属性

四 a标签的伪类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*连接态*/
        a:link {
            color: pink;
        }
        /*鼠标悬浮态*/
        a:hover {
            color: red;
        }
        /*鼠标点击态*/
        a:active {
            color: purple;
        }
        /*访问过后的状态*/
        a:visited {
            color: dimgrey;
        }
    /*    input框被点击的状态 称之为获取焦点*/
        input:focus {
            background-color: orange;
        }
        input:hover {
            background-color: red;
        }

    </style>
</head>
<body>
<a href="https://www.chouti.com">click me!</a>
<input type="text">
</body>
</html>

a标签的四大伪类

五伪元素选择器

#1. first-letter 常用的给首字母设置特殊样式：

#2.before ：在每个<p>元素之前插入内容

#3.after：在每个<p>元素之后插入内容

#4.before和after多用于清除浮动。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p:first-letter {
            font-size: 48px;
            color: gold;
        }

        p:before {
            content: '$';
            color: gold;
        }
        /*after在解决浮动的问题上 很有用*/
        p:after {
            content: "?";
            color: red;
        }
    </style>
</head>
<body>
<p>澳门最大线上赌场开业了,爱剪辑!</p>
<p>澳门最大线上赌场开业了,爱剪辑!</p>
<p>澳门最大线上赌场开业了,爱剪辑!</p>
<p>澳门最大线上赌场开业了,爱剪辑!</p>
</body>
</html>

伪元素

六选择器优先级

1.选择器相同的情况下:
 就近原则

2.选择器不同的情况下:
 行内  > id选择器 > 类选择器  > 标签选择器

优先级