python學習之路前端-CSS

時間 2019-12-08

標籤 python 學習之路前端 css 欄目 Python 简体版

原文原文鏈接

CSS概述

css是英文Cascading Style Sheets的縮寫,稱爲層疊樣式表，用於對頁面進行美化。css

存在方式有三種：元素內聯、頁面嵌入和外部引入，比較三種方式的優缺點。html

語法：style = 'key1:value1;key2:value2;'url

在標籤中使用 style='xx:xxx;'
在頁面中嵌入 < style type="text/css"> </style > 塊
引入外部css文件

必要性：美工會對頁面的色彩搭配和圖片的美化負責，開發人員則必須知道是如何實現的spa

經常使用的選擇器

1.標籤選擇器htm

/*標籤選擇器，找到全部的標籤應用如下樣式*/
div {
            color: green;
   }

2.class選擇器blog

/*class選擇器，找到class=c1的全部標籤，應用如下樣式*/
        .c1{
            background-color: red;
        }

3.id選擇器繼承

/*id選擇器，找到標籤id等於i1的標籤，應用如下樣式*/
        #i1{
            font-size: 56px;
            /* color: green; */
        }

4.關聯選擇器圖片

/*層級選擇器，找到 class=c2 下的div下的p下的class=c3標籤，應用如下樣式*/
.c2 div p .c3{
            background-color: red;
        }

5.組合選擇器開發

/*組合選擇器，找到class=c4,class=c5,class=c6,的標籤，應用如下樣式*/
.c4,.c5,.c6{
            background-color: aqua;
              }

6.屬性選擇器input

/*屬性選擇器*/
        input[type='text'] {width:80px;height: 20px;background-color: #2459a2}

Style樣式

style的使用一共有三種形式：

1.直接設置標籤的屬性

<div style="font-size:20px;color:red;" ></div>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>style的第一種使用方式</title>
</head>
<body>
    <div style="font-size:20px;color:red;" >
        <span>style的第一種使用方式：直接在標籤中設置</span>
    </div>
</body>
</html>

2.在head頭部進行設置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>style的使用</title>
    <style>
        div {
            background-color: blue;
            font-size: 40px;
        }
    </style>
</head>
<body>
    <div>
        <p>style的第二種使用方式：在head頭部進行設置</p>
    </div>
</body>
</html>

3.將全部的style樣式放到一個特定的文件中，而後在使用的地方進行引用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Style的第三種使用方式：引用已經定義好的樣式文件</title>
    <link rel="stylesheet" href="common.css" />
</head>
<body>
    <div>Style的第三種使用方式：引用已經定義好的樣式文件</div>
</body>
</html>

css文件定義的樣式

div {
    font-size: 50px;
    background-color: aquamarine;
    color: #000;
}

說明：三種方式各有利弊，請根據實際狀況來進行選擇

標籤屬性：只針對當前標籤生效，不具備重用性。

head頭部style：針對當前頁面均有效，具備重用性，當程序有多個頁面時，則須要將head style分別複製到其餘的頁面方纔能生效

css樣式文件：程序有多個頁面，當多個頁面都須要使用相同的style只須要在使用處引用css文件便可。

三種style能夠同時使用，其優先級以下：

標籤屬性優先級最高    head頭部style其次   css樣式文件優先級最低

若是標籤屬性和css文件中的style不一樣時，則繼承css樣式文件中的style，若是style和css文件相同時，則標籤屬性會將css文件中的style給覆蓋掉。

style和選擇器綜合應用實例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <!--<style的使用有三種方式：1.直接設置標籤的屬性  2.在head頭部中進行設置 3.將全部的style放到-->
    <!--一個特定的文件中，而後在使用的地方進行引用，三種方式各有利弊，根據實際狀況來選擇使用>-->
    <!--<link rel="stylesheet" href="common.css" />-->
    <style>
        /*標籤選擇器，找到全部的標籤應用如下樣式*/
        div{
            color: green;
        }
        /*id選擇器，找到標籤id等於i1的標籤，應用如下樣式*/
        #i1{
            font-size: 56px;
            /* color: green; */
        }
        /*class選擇器，找到class=c1的全部標籤，應用如下樣式*/
        .c1{
            background-color: red;
        }
        /*層級選擇器，找到 class=c2 下的div下的p下的class=c3標籤，應用如下樣式*/
        /*.c2 div p a{*/
            /**/
        /*}*/
        .c2 div p .c3{
            background-color: red;
        }
        /*組合選擇器，找到class=c4,class=c5,class=c6,的標籤，應用如下樣式*/
        .c4,.c5,.c6{
            background-color: aqua;
        }
        /*屬性選擇器*/
        input[type='text'] {width:80px;height: 20px;background-color: #2459a2}
    </style>
</head>
<body>
    用戶名：<input type="text"/>
    <div class="c4">寒風飄飄落葉</div>
    <div class="c5">軍隊是一朵綠化</div>
    <div class="c6">親愛的戰友你不要想家，不要想媽媽</div>

    <div class="c2">
        <div></div>
        <div>
            <p>
                <span>聲聲我日夜呼喚，多少句內心話</span>
                <a class="c3">不要離別時兩眼淚花，軍營是咱溫暖的家</a>
            </p>
        </div>
    </div>
    <div class="c3">媽媽你不要牽掛，孩兒我已經長大</div>

    <span class="c1">站崗執勤是保衛國家，風吹雨打都不怕</span>
    <div class="c1">衷心的祝願媽媽，願媽媽健康長壽</div>
    <a class="c1">待到慶功時再回家，再來看望好媽媽</a>


    <a id="i1">baidu</a>
    <div>99</div>
    <div>99</div>
    <div>99</div>
    <div>
        <div>asdf</div>
    </div>
</body>
</html>

background系列

1.background-color

背景色有以下三種表現形式
background-color: #FF69B4;
background-color: rgb(25,180,10);
background-color: red;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .c1{
            color: red;
            font-size: 32px;
            height: 150px;
            width: 600px;
        }
    </style>
</head>
<body>
    <div class="c1">故鄉有位好姑娘，我時常夢見她</div>
    <div style="width: 600px;">
        <div style="width: 20%;background-color: antiquewhite;float: left">軍中的男兒也有情</div>
        <div style="width: 80%;background-color: palegoldenrod;float: left">也願伴你走天涯</div>
    </div>
</body>
</html>

2.background-image

能夠像定義樣式同樣將圖片的屬性在style中進行定義

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .img{
            background-image: url("junren.gif");
            height: 150px;
            width: 400px;
            background-repeat: no-repeat;
        }
        .img2{
            background-image: url("guniang.jpg");
            height: 50px;
            width: 50px;
            background-position: 84px -58px;
        }
    </style>
</head>
<body>
    <div class="img"></div>
    <div class="img2"></div>
</body>
</html>

3. background-repeat

　顯示的背景圖片是否重複填充（no-repeat不重複填充）

4.background-position

　根據實際須要調整background-position來展現不一樣的圖片、內容

應用：將京東的購物車圖案顯示爲"小房子"

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .img {
            background-image: url(jd2015img.png);
            height: 10px;
            width:10px;
            background-position: 87px 18px;
        }
    </style>
</head>
<body>
    <div class="img"></div>
</body>
</html>

border

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>border的使用</title>
</head>
<body>
    <div style="width: 500px;height: 10px;border: 1px solid red;"></div>
    <br/>
    <div style="width: 500px;height: 10px;border: 1px dotted blue;"></div>
    <br/>
    <div style="width: 500px;height: 10px;border: 1px dashed green;"></div>
</body>
</html>

marign和padding

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>margin和padding的使用</title>
</head>
<body>
    <h2>margin</h2>
    <div style="border: 1px solid red;height: 60px;">
        <div style="background-color: green;height: 40px;margin-top: 20px;"></div>
    </div>
    <h2>padding</h2>
    <div style="border:1px solid red;height: 70px;">
        <div style="background-color: yellowgreen;height: 40px;padding-top: 30px;"></div>
    </div>
</body>
</html>

display

1.display的屬性值

display  none:隱藏，使其內容不顯示
display  block:使行內標籤具備塊級標籤的屬性
display  inline:使行內標籤具備塊級標籤的屬性
display  inline-block:使行內標籤具備塊級標籤的屬性

2.display應用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>display的使用</title>
</head>
<body>
    <!--display  none:隱藏，使其內容不顯示-->
    <span style="color: red;font-size: 10px;">span標籤是行內標籤，使用display標籤前的效果</span>
    <br/>
    <span style="color: red;font-size: 40px; display: none;">span標籤是行內標籤，使用display none標籤後的效果</span>
    <br/>
    <!--display  block:使行內標籤具備塊級標籤的屬性-->
    <span style="color: red;font-size: 20px;">span標籤是行內標籤，有多少內容佔多少空間</span>
    <span style="background-color: aqua;font-size: 5px;height: 20px;display: block;">使行內標籤具備塊級標籤的屬性，佔據整行</span>
    <!--display  inline:使行內標籤具備塊級標籤的屬性-->
    <div style="background-color: blueviolet;font-size: 20px;">div是塊級標籤，無論內容有多少都是佔據一行</div>
    <div style="background-color: cornflowerblue;font-size: 20px;display: inline">使div塊級標籤具備行內標籤的屬性</div>
    <!--display  inline-block:使行內標籤具備塊級標籤的屬性-->
    <span style="color: red;font-size: 20px;">span標籤是行內標籤，有多少內容佔多少空間</span>
    <span style="background-color: aqua;font-size: 5px;height: 50px;display: inline-block;">使行內標籤既具備塊級標籤的屬性又具備行內標籤的屬性，佔據整行</span>
</body>
</html>

cursor

超連接