python_day13_CSS

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了python_day13_CSS相关的知识,希望对你有一定的参考价值。

1 、CSS导入

    1.1、行内式

    1.2、?入式

    1.3、导入式

    1.4、链接式

2、CSS选择器

    2.1.1、*所有标签

    2.1.2、标签

    2.1.3、id号设置

    2.1.4、class选择器

    2.1.5、组合选择器

3、组合选择器

    3.1.1、多元素选择

    3.1.2、后代元素选择器

    3.1.3 子代元素选择器

    3.1.4 毗(pi)邻元素选择器

4、属性选择器

    4.1.1、匹配具有某个属性的元素    

    4.1.2、匹配所有属性等于val的元素

    4.1.3、匹配其中一个等于val的值

    4.1.4、锚定val前一个元素


CSS是Cascading Style Sheets的简称,中文称为层叠样式表,用来控制网页数据的表现,可以使网页的表现与数据内容分离。

css操作方式:

1、怎么找到标签  (如何操作html标签)

2、如何操作标签对象 (element)


1、CSS导入

   1.1、行内式

<body>
    <p style="color: black;background-color: hotpink">hello world</p>
</body>

技术分享图片

  1.2、?入式

<head>
    <meta charset="UTF-8">
    <title>css</title>
    <style>
        p{
            color: black;
            background-color: hotpink;
            width: 50%;
            height: 30px;
        }
    </style>
</head>
<body>
    <p>hello world</p>
</body>
</html>

技术分享图片

  1.3、 导入式   

<head>
    <meta charset="UTF-8">
    <title>css</title>
    <style>
        @import "test1.css";
    </style>
</head>
<body>
    <p>hello world</p>
</body>
</html>

技术分享图片

css类风格, 导入有限,并且页面在打开时,如果有延时它会先执行html内容,然后再去执行css文件, 不建议使用


  1.4、链接式

<head>
    <meta charset="UTF-8">
    <title>css</title>
    <link href="test1.css" rel="stylesheet">
</head>
<body>
    <p>hello world</p>
</body>
</html>

技术分享图片

     注意:导入式会在整个网页装载完后再装载CSS文件,因此这就导致了一个问题,如果网页比较大则会儿出现先显示无样式的页面,闪烁一下之后,再出现网页的样式。这是导入式固有的一个缺陷。使用链接式时与导入式不同的是它会以网页文件主体装载前装载CSS文件,因此显示出来的网页从一开始就是带样式的效果的,它不会象导入式那样先显示无样式的网页,然后再显示有样式的网页,这是链接式的优点。


2、css选择器

    2.1.1、*  所有的body内容都会被设置

<head>
    <style>
        *{ background-color: yellowgreen; }
    </style>
</head>
<body>
    <p>hello 1 </p>
    <div>heelo 2</div>
</body>


技术分享图片


    2.1.2、标签: 只设置自定义的标签

<head>
    <meta charset="UTF-8">
    <title>css_chiose</title>
    <style>
        p{
            background-color: darkblue;
        }
    </style>
</head>
<body>
    <p>hello 1 </p>
    <div>heelo 2</div>
</body>


技术分享图片

    2.1.3、id号设置

<head>
    <style>
        #strong{
            background-color: hotpink;
        }
    </style>
</head>
<body>
    <b id="strong">hello b </b>
</body>


技术分享图片


    2.1.4、class选择器

<head>
    <meta charset="UTF-8">
    <title>css_chiose</title>
    <style>
        .twob{        # 或者b.twob
            background-color: aqua;
        }

    </style>
</head>
<body>
    <b class="twob">hello b2 </b>
</body>

技术分享图片


3、组合选择器


    3.1.1、多元素选择

<head>
    <style>
        .twob,#twoc{
            background-color: darkblue;
        }

    </style>
</head>
<body>
    <b class="twob">hello b2 </b><hr>
    <b id="twoc">hello b3</b>
</body>

技术分享图片


    3.1.2、后代元素选择器

<head>
    <meta charset="UTF-8">
    <title>css_chiose</title>
    <style>
        .divs p {        # 后代元素,只要元素中包含了,那么就会控制网页的改变
            color: yellow;
        }
    </style>
</head>
<body>
    <div class="divs">
        <a href="">di yi</a>
        <div>
            <p>two</p>
            <div>three</div>
        </div>
    </div>
</body>


技术分享图片


    3.1.3 子代元素选择器

<head>
    <meta charset="UTF-8">
    <title>css_chiose</title>
    <style>
        .divs > p {
            color: brown;
            background-color: yellow;
        }    
    </style>
</head>
<body>
    <div class="divs">
        <a href="">di yi</a>
        <div>
            <p>two</p>
            <div>three</div>
        </div>
        <p>ok</p>
    </div>
</body>

技术分享图片    

    3.1.4 毗(pi)邻元素选择器

<head>
    <meta charset="UTF-8">
    <title>css_chiose</title>
    <style>
        .divs + div {
            color: brown;
            background-color: yellow;
        }

    </style>
</head>
<body>
    <div>11111111111111</div>
    <div class="divs">
        <a href="">di yi</a>
        <div>
            <p>two</p>
            <div>three</div>
        </div>
        <p>ok</p>
    </div>

    <div>22222222222222</div>
</body>

技术分享图片

注意: 如果定义的标签与类选择或id选择不毗邻(中间还有其它标签) 那么它就不会生效。

嵌套规则

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

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

  3. li内可以包含div

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


4、属性选择器

    4.1.1、匹配具有某个属性的元素

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        [xiong]{
            color: brown;
        }
    </style>
</head>
<body>
        # 自定义属性名称
    <div xiong="xx">hello div</div>
</body>

技术分享图片

    4.1.2、匹配所有属性等于val的元素

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        # 匹配属性等于val的元素
        [xiong="yy"]{
            color: brown;
        }
    </style>
</head>
<body>
    <div xiong="xx">hello div</div>
    <div xiong="yy">hello div2</div>
</body>

技术分享图片

    4.1.3、匹配其中一个等于val的值

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        [xiong~="xyz"]{
            color: brown;
        }
    </style>
</head>
<body>
    <div xiong="xx">hello div</div>
    <div xiong="yy">hello div2</div>
    <div xiong="xyz">hello div3</div>
</body>

技术分享图片  # 跟等于号 (=) 类似

    4.1.4、锚定val前一个元素

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        # 锚定前一个值为x的元素
        [xiong^="x"]{
            color: brown;
        }
    </style>
</head>
<body>
    <div xiong="xx">hello div</div>
    <div xiong="yy">hello div2</div>
    <div xiong="xyz">hello div3</div>
</body>

技术分享图片

    4.1.4、锚定val最后一个元素

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        # 锚定最后一个值为z的元素
        [xiong$="z"]{
            color: brown;
        }
    </style>
</head>
<body>
    <div xiong="xx">hello div</div>
    <div xiong="yy">hello div2</div>
    <div xiong="xyz">hello div3</div>
</body>

技术分享图片





以上是关于python_day13_CSS的主要内容,如果未能解决你的问题,请参考以下文章

Python_Day13_ORM sqlalchemy

python_day15_jquery

python_day12_html

Python_day_01

PYTHON_DAY_05

python_day14_前端_JS