Python 前端CSS樣式

時間 2019-12-02

標籤 python 前端 css 樣式欄目 Python 简体版

原文原文鏈接

一 css字體和文本樣式

1.字族css

/*字族：STSong做爲首選字體, 微軟雅黑做爲備用字體*/
font-family: "STSong", "微軟雅黑";

字族

2.字體大小：font-sizehtml

 font-size: 14px;

字體大小

3.字重（字體粗細）：瀏覽器

font-size: 40px;

4.字體顏色(四種設置方式）：color網絡

1.十六進制值 - 如: ＃FF0000ide

2.一個RGB值 - 如: RGB(255,0,0)函數

3.顏色的名稱 - 如: red佈局

4. rgba(255,0,0,0.3)，第四個值爲alpha, 指定了色彩的透明度/不透明度，它的範圍爲0.0到1.0之間。字體

 color: red;
 color: #4e4e4e;
 color: rgb(128,128,128);
 color: rgba(0,0,0,1.0);  最後一個參數只能調節顏色的透明度 不能調節文本

字體顏色

5.文本排列方式：text-align優化

/* 文本水平排列方式：left(水平居左 默認) | center(水平居中) | right(水平居右) | justify(兩端對齊) */
text-align: center;

6.行高：line-heighturl

 /*行高(垂直位置)：默認文本在所在行高中垂直居中，要實現文本的垂直居中，讓行高 = 容器高*/

line-height: 200px;

7.文字裝飾：text-decoration 屬性用來給文字添加特殊效果。

text-decoration: overline;

# a標籤去下劃線
 a {
            text-decoration: none;
           
        }

8.其餘字體或文本樣式

/*字間距*/
letter-spacing: 2px;
/*詞間距*/
word-spacing: 5px;
/*首行縮進：1em至關於一個字的寬度*/
text-indent: 2em;

二背景樣式

1.背景圖片，平鋪，圖片移動：background-image，background-repeat，background-position

/*背景圖片：url函數能夠連接網絡或本地圖片*/
background-image: url('https://www.baidu.com/favicon.ico');

/*平鋪:repeat-x(x軸平鋪) | repeat-y(y軸平鋪) | repeat(雙軸平鋪) | no-repeat*/(不平鋪)  !*背景圖片 默認是填充整個區域 若是大小不夠 默認重複填充*!*/
background-repeat: no-repeat;
 
/*x軸背景圖片位置偏移：正值往右偏移，負值往左偏移*/
background-position-x: 10px;
/*y軸背景圖片位置偏移：正值往下偏移，負值往上偏移*/
background-position-y: 10px;
/*background-position: 10px 30px;  !*第一個參數調節的是左右  第二個參數調節的上下*!*

2.背景顏色：background-color

 /*背景顏色*/
 background-color: red;

3.背景固定：background-attachment: fixed

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1 {
            height: 400px;
            background-color: red;
        }
        .c2 {
            height: 400px;
            background-color: green;
        }
        .c3 {
            height: 500px;
            background-image: url("111.png");
            background-attachment: fixed;
        }
        .c4 {
            height: 400px;
            background-color: yellow;
        }

    </style>
</head>
<body>
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>
<div class="c4"></div>
</body>
</html>

背景圖片固定

4.簡寫

background:#336699 url('1.png') no-repeat left top;
                       顏色  圖片 平鋪   位置

三邊框：border 和border-radius

border-width 邊框寬度
border-style 邊框樣式
border-color 邊框顏色

簡寫：border: 2px solid red;

2.除了能夠統一設置邊框外還能夠單獨爲某一個邊框設置樣式，以下所示：

  border-top-style:dotted;
  border-top-color: red;
  border-right-style:solid;
  border-bottom-style:dotted;
  border-left-style:none;

3.border-radius邊界圓角

*左上是第一個角，順時針編號，不足找對角，只有一個值同時控制4個角*/
border-radius: 10px 20px 30px 40px;
border-radius: 10px 50px 100px;
border-radius: 10px 100px;
border-radius: 100px;

# 圓
border-radius: 50%;

四顯示方式:display

block：1.能夠手動設置寬高 2.自帶換行 3.支持全部css樣式
inline：1.寬高只能由文本內容撐開，不能手動設置 2.不帶換行 3.支持部分css樣式
inline-block：1.能夠手動設置寬高 2.不帶換行 3.支持全部css樣式

display: none;  /*標籤不顯示 而且也再也不佔用位置*/
visibility: hidden;   /* 標籤不顯示 可是位置還在*/

五盒模型

1.什麼是盒模型：頁面中的每個標籤外邊距、邊框、內邊距、內容四部分組成，每部分都有獨立區域均可以稱之爲一個盒子

2.盒模型組成：外邊距、邊框、內邊距、內容四部分組成，每部分都有獨立區域

#1.外邊距 - margin：用於控制元素與元素之間的距離；margin的最基本用途就是控制元素周圍空間的間隔，從視覺角度上達到相互隔開的目的。（兩個快遞盒之間的距離(標籤與標籤之間的距離) 稱之爲外邊距(margin)）

#2.邊框 - border - 控制邊框：圍繞在內邊距和內容外的邊框。（紙盒的厚度(邊框) 稱之爲邊框(border)）

#3.內邊距 - padding -控制內容與邊框的間距：（內部的物品到盒子的距離(內部文本與邊框的距離) 稱之爲內邊距(padding)）

#4.內容 - content(width*height) - 文本內容或子標籤顯示的區域（物品自己的大小(文本大小) 稱之爲內容(content)）

margin參考系：自身原有位置 ？？
margin的left和top控制自身位置 ？？
margin的right和bottom控制兄弟位置 ？？

margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
margin: 0;  /*上下左右全爲0*/
margin: 10px 20px;  /* 上下10px   左右20px*/
margin: 10px 20px 30px;  /* 上   左右   下*/
margin: 10px 20px 30px 40px;  /* 上 右  下 左 順時針*/
margin: 0;

margin: 0 auto; # 居中

border: 3px solid red; padding-top: 20px; padding-left: 10px; padding-bottom: 30px; padding-right: 50px; text-align: right; padding: 10px; /* padding 一樣支持1 2 3 4個參數 效果同margin*/

4.盒子陰影

/*x軸偏移 y軸偏移 虛化程度 陰影寬度 顏色*/
 box-shadow: 150px 0 10px 0 red, 0 150px 10px 0 green;

六浮動：float

在 CSS 中，任何元素均可以浮動。

浮動元素會生成一個塊級框，而不論它自己是何種元素。

關於浮動的兩個特色：

浮動的框能夠向左或向右移動，直到它的外邊緣碰到包含框或另外一個浮動框的邊框爲止。
因爲浮動框不在文檔的普通流中，因此文檔的普通流中的塊框表現得就像浮動框不存在同樣。

三種取值

left：向左浮動

right：向右浮動

none：默認值，不浮動

 float: left;

清浮動（只要子級標籤有浮動，父級標籤就清浮動）

.clearfix:after {
           content: '';
           display: block;
           clear: both;  /* 左右兩邊都不能有浮動的元素*/
       }





###事例：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            margin: 0;
        }
        #d1 {
            border: 3px solid black;
        }
        .c1 {
            height: 100px;
            width: 100px;
            background-color: red;
            float: left;
        }
        .c2 {
            height: 100px;
            width: 100px;
            background-color: black;
            float: left;
        }
       .clearfix:after {
           content: '';
           display: block;
           clear: both;  /* 左右兩邊都不能有浮動的元素*/
       }
    </style>
</head>
<body>
<div id="d1" class="clearfix">
    <div class="c1"></div>
    <div class="c2"></div>

</div>

</body>
</html>

清浮動

實現左右浮動佈局（一個標籤左浮動，另外一個右浮動）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            margin: 0;
        }
        .blog-left {
            float: left;
            width: 20%;
            height: 1000px;
            background-color: #4e4e4e;
        }
        .blog-right {
            float: right;
            width: 80%;
            height: 1000px;
            background-color: #eeeeee;
        }
    </style>
</head>
<body>
<div class="blog-left"></div>
<div class="blog-right">
    <div>div</div>
    <div>div</div>
    <div>div</div>
    <div>div</div>
    <div>div</div>
    <div>div</div>
    <div>div</div>
    <div>div</div>
    <div>div</div>
    <div>div</div>
    <div>div</div>
    <div>div</div>
    <div>div</div>
    <div>div</div>
    <div>div</div>
    <div>div</div>
    <div>div</div>
    <div>div</div>
    <div>div</div>
    <div>div</div>
    <div>div</div>
    <div>div</div>
    <div>div</div>
    <div>div</div>
    <div>div</div>
    <div>div</div>
    <div>div</div>
    <div>div</div>
    <div>div</div>
    <div>div</div>
    <div>div</div>
    <div>div</div>
    <div>div</div>
    <div>div</div>
    <div>div</div>
    <div>div</div>
    <div>div</div>
</div>
</body>
</html>

實現左右浮動佈局

七溢出：overflow

什麼是溢出：標籤裏的內容或子標籤超出父標籤設置的大小。

hidden：影藏超出內容  scroll：以滾動顯示超出內容  auto：有超出內容才滾動顯示
 
overflow: scroll;
overflow: hidden;
overflow: auto;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>原型頭像</title>
    <style>
        body {
            margin: 0;
            background-color: darkgray;
        }
        div {
            height: 120px;
            width: 120px;
            border-radius: 50%;
            border: 5px solid white;
            overflow: hidden;
        }
        img {
            /*max-width: 100%;*/
            width: 100%;
        }
    </style>
</head>
<body>
<div>
    <img src="111.png" alt="">
</div>
</body>
</html>

圓形頭像事例

七定位（相對絕對固定）

1.靜態定位：

　　static 默認值，無定位，不能看成絕對定位的參照物，而且設置標籤對象的left、top等值是不起做用的的。

2。relative（相對定位）：

　　參考系：自身原有位置，且自身偏移不影響原有位置

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box {
            width: 300px;
            height: 300px;
            background-color: orange;
            border: 1px solid black;
        }

        .box {
            /*margin-left: 100px;*/
            /*margin-right: 100px;*/
            /*margin-top: 100px;*/
        }

        .box {
            /*相對定位偏移的是圖層*/
            position: relative;
            /*left: 100px;*/
            /*right: 100px;*/
            /*top: 100px;*/
            /*bottom: 100px;*/
            /*參考系：自身原有位置，且自身偏移不影響原有位置*/
        }

        p {
            margin: 0;
            border: 1px solid black;
        }
    </style>

    <style>
        .box {
            margin: 10px 100px;
            position: absolute;
        }
    </style>

</head>
<body>
<div class="box">12345</div>
<p>12345</p>
</body>
</html>

View Code

3.absolute（絕對定位）：

　　#1.參考系：最近的定位父級。父相子絕（子級採用絕對定位，通常都是想參考父級進行定位，父級必須採用定位處理才能做爲子級的參考系；父級能夠選取 fixed、 absolute，但這兩種定位都會影響盒模型，relative定位不會影響盒模型）。

#2. /*絕對定位：子標籤獲取不到父級標籤的寬，也撐不開父級的高*//*子標籤必須本身設置寬高，父級也必須本身設置寬高*/

　　#3.採用絕對定位，父標籤在哪出現，子標籤九相對在哪出現

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box {
            /* 當前頁面窗口的寬高(鎖屏幕尺寸變化而變化)：vw vh */
            height: 500vw;
            background-color: red;
        }
        .tag {
            width: 180px;
            height: 300px;
            background-color: orange;

            /*一旦打開定位屬性，left、right、top、bottom四個方位詞均能參與佈局*/
            /*固定定位參考瀏覽器窗口*/
            /*佈局依據：固定定位的盒子四邊距瀏覽器窗口四邊的距離：eg：left - 左距左，right - 右距右*/
            /*左右取左，上下去上*/
            position: fixed;
            left: 0;
            top: calc(50% - 150px);
            right: 50px;
            bottom: 20px;
        }
        .flag {
            width: 220px;
            height: 330px;
            background-color: pink;

            position: fixed;
            left: 0;
            top: calc(50% - 165px);
        }
        .tag {
            /*z-index值就是大於等於1的正整數，多個重疊圖層經過z-index值決定上下圖層顯示前後*/
            z-index: 666;
        }
        .flag {
            z-index: 888;
        }

    </style>
</head>
<body>
<div class="tag"></div>
<div class="box"></div>
<div class="flag"></div>
</body>
</html>

絕對定位

4.fixed（固定）

　　參考系：相對於瀏覽器窗口固定在某個位置

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box {
            /* 當前頁面窗口的寬高(鎖屏幕尺寸變化而變化)：vw vh */
            height: 500vw;
            background-color: red;
        }
        .tag {
            width: 180px;
            height: 300px;
            background-color: orange;

            /*一旦打開定位屬性，left、right、top、bottom四個方位詞均能參與佈局*/
            /*固定定位參考瀏覽器窗口*/
            /*佈局依據：固定定位的盒子四邊距瀏覽器窗口四邊的距離：eg：left - 左距左，right - 右距右*/
            /*左右取左，上下去上*/
            position: fixed;
            left: 0;
            top: calc(50% - 150px);
            right: 50px;
            bottom: 20px;
        }
        .flag {
            width: 220px;
            height: 330px;
            background-color: pink;

            position: fixed;
            left: 0;
            top: calc(50% - 165px);
        }
        .tag {
            /*z-index值就是大於等於1的正整數，多個重疊圖層經過z-index值決定上下圖層顯示前後*/
            z-index: 666;
        }
        .flag {
            z-index: 888;
        }

    </style>
</head>
<body>
<div class="tag"></div>
<div class="box"></div>
<div class="flag"></div>
</body>

View Code

八脫離文檔流

脫離文檔流
            1.浮動的元素都是脫離文檔流的
            2.絕對定位是脫離文檔流的
            3.固定定位也是脫離文檔流的
不脫離文檔流
            1.相對定位不脫離文檔流

九 z-index（誰大優先顯示）

1.z-index 值表示誰壓着誰，數值大的壓蓋住數值小的，
2.只有定位了的元素，纔能有z-index,也就是說，無論相對定位，絕對定位，固定定位，均可以使用z-index，而浮動元素不能使用z-index
3. z-index值沒有單位，就是一個正整數，默認的z-index值爲0若是你們都沒有z-index值，或者z-index值同樣，那麼誰寫在HTML後面，誰在上面壓着別人，定位了元素，永遠壓住沒有定位的元素。
4.從父現象：父親慫了，兒子再牛逼也沒用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            margin: 0;
        }

        .cover {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(128,128,128,0.45);
            z-index: 999;
        }

        .modal {
            height: 200px;
            width: 400px;
            background-color: white;
            position: fixed;
            left: 50%;
            top: 50%;
            z-index: 1000;
            margin-top: -100px;
            margin-left: -200px;
        }

    </style>
</head>
<body>
<div>我是最底層的</div>
<div class="cover"></div>
<div class="modal">
    <p><label for="d1">username:<input type="text" id="d1"></label></p>
    <p><label for="d2">password:<input type="text" id="d2"></label></p>
    <input type="submit">
</div>
</body>
</html>

View Code

十 opacity（便可以調節顏色透明度也能夠調文本透明度）

十一 ul優化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        ul {
            list-style-type: none;  # 取列表項前的小圓點
            padding: 0;    # 列表項左對齊
        }  
    </style>
</head>
<body>
<ul>
    <li><a href="">哈哈1</a></li>
    <li><a href="">哈哈2</a></li>
    <li><a href="">哈哈3</a></li>
</ul>
</body>
</html>