Python全棧之學習CSS(1)

1. 表單框類型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>單選框 , 復選框 , 下拉框</title>
</head>
<body>
    <form action="" method="">
        <!-- 單選框 radio 多選一 name名字要一致  checkedc:默認選中 -->
        <input type="radio" name="sex" value="m" id="sex1"  /> <label for="sex1" >男性</label>
        <input type="radio" name="sex" value="w" id="sex2" checked /> <label for="sex2" >女性</label>
        <hr />
        <!-- 復選框 checkbox 多選多 name名字要一致 -->
        <input type="checkbox" name="food" value="banana" checked />香蕉
        <input type="checkbox" name="food" value="huanggua" />黃瓜
        <input type="checkbox" name="food" value="qiezi" checked />茄子
        <input type="checkbox" name="food" value="donggua" />冬瓜
        <hr />
        <!-- 下拉框 select 多選一 selected 默認選中, disabled 無法選中-->
        <select name="city" >
            <option value="beijing"  >北京人</option>
            <option value="xian" selected>西安人</option>
            <option value="dalian"  >大連人</option>
            <option value="fuzhou">福州人</option>
            <option value="zhengzhou" disabled >鄭州人</option>
        </select>
        <hr / >
        <input type="submit" value="點我" />
    </form>
</body>
</html>

文件上傳:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> 文件上傳 </title>
</head>
<body>
    <form action="" method="post" enctype="multipart/form-data">
        <!-- 文件上傳 -->
        頭像:<input type="file" name="myfile" />
        <hr/>
        <!-- 大段文本框 -->
        <textarea name="info" style="width:100px;height:100px;background-color:tan;" >請填寫相關數據</textarea>
        <hr/>
        <!-- 隱藏的表單框 => 隱藏要修改的數據id -->
        <input type="hidden" name="sid" value="13" />
        <hr/>
        <input type="submit" value="提交"/>
    </form>
</body>
</html> 

2. 表單屬性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>input屬性</title>
</head>
<body>
    <!-- 
    placeholder  灰色輸入提示
    required     必填
    readonly     隻能讀不能改   可以被提交
    disabled     隻能讀不能改   不會被提交
    size         設置輸入框的大小
    maxlength    輸入框最多可以輸入多少字符
    minlength    輸入框最少需要輸入多少字符
    autofocus    自動獲取焦點, 整個頁面隻能有一個
    tabindex     設置tab的切換順序 
    -->
    <form action='' method="" >
        用戶名:<input type="text" name="username" placeholder="請輸入用戶名" required tabindex=5 />
        <br />
        密碼: <input type="password" name="pwd" tabindex=4 >
        <br />
        年齡: <input type="text" name="age" value="18" readonly tabindex=3 />
        <br />
        郵箱: <input type="text" name="email" value="[email protected]" disabled   />
        <br />
        班級: <input type="text" name="classroom" size=100 maxlength = 5 minlength=2  tabindex=2/>
        <br />
        國籍: <input type="text" name="country" autofocus tabindex=1 />
        <br />
        <input type="submit">
    </form>
</body>
</html>

3. css引入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css學習 css的三種引入方法</title>
    <!-- 2.內嵌樣式 -->
    <style>
        p
        {color:blue;}
    </style>
    <!-- 外部引入 -->
    <link href="my.css" type="text/css" rel="stylesheet" />
</head>
<body>
    <p>今天學習css</p>
    <!-- 1.行內樣式 -->
    <p style="color:tan;">今天學習css</p>
    <p>我們很開心</p>
    <a href="">我是鏈接</a>
</body>
</html>

my.css

a
{font-size:100px;}

4. 選擇器

4.1 常用選擇器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>常用選擇器</title>
    <style>
        /* 標簽選擇器*/
        h1
        {color:cyan}
        /* 類選擇器 */
        .one
        {color:green;}
        /* ID選擇器 */
        #two
        {color:red;}
        /* 組合選擇器 */
        h1,h2,h3,h4
        {color:goldenrod;}
        /* 越具體指定,優先級就越高 */
        h1.one
        {color:gray;}        
        h2#two
        {color:greenyellow;}
    </style>
</head>
<body>
    <!-- 
    標簽選擇器 :  指定的是哪一些標簽
    類選擇器   :  指定的是哪一類標簽
    ID選擇器   :  指定的是哪一個標簽 
    -->
    <h1>1號標簽111</h1>
    <h1 class="one" >1號標簽222</h1>
    <h2 id = "two">2號標簽333</h2>
    <a href="" class="one">我是連接</a>
    <span id ="two">我是span</span>
    <h3>我是h3標簽</h3>
</body>
</html>
aoe

4.2 選擇器的優先級

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>選擇器的優先級</title>
    <style>
        font
        {color:greenyellow;}
        .one
        {color:blue;}
        #two
        {color: indigo;}
        font
        {color:greenyellow!important;}
    </style>
</head>
<body>
    <!-- 
        !important <- 行內樣式 <- ID選擇器 <- 類選擇器 <- 標簽選擇器 
        大原則: 泛指的元素優先級低, 特指的元素優先級高 , 越具體優先級就越高 
    -->
    <font style="color:tan;" class="one" id="two"> 選擇器的優先級 </font>
</body>
</html>

4.3 關系選擇器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> 關系選擇器 </title>
    <style>
        /*  多行註釋  */
        ul li   /* 包含選擇器/後代選擇器 */
        {color:darkslateblue;}
        ul>li   /* 父子選擇器 */
        {color:yellow;}
        ol+li   /* 相鄰選擇器 特指下面一個*/
        {color:green;}
        ol~li   /* 兄弟選擇器 特指下面一堆*/
        {color:deeppink;}
    </style>
</head>
<body>
    <ul>
        <li>動漫頻道</li>
        <li>學習頻道</li>
        <li>直播頻道</li>
        <li>遊戲頻道</li>
        <ol>
            <li>少兒頻道</li>
            <li>智慧樹,大風車</li>
            <li>老年人頻道</li>
        </ol>
        <li>授課直播</li>
        <li>亞洲捆綁</li>
    </ul>
</body>
</html>

4.4 屬性選擇器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>屬性選擇器</title>
    <style>
        input[name]
        {background-color: dodgerblue;}
        input[name=username]
        {background-color: red;}
        input[type=password]
        {background-color:yellow;}
        input[type=text]
        {background-color:green;}
    </style>
</head>
<body>
    <form action="" method="" >
        用戶名: <input type="text" name="username" />
        <br />
        密碼: <input type="password" name="nickname">
        <br />
        性別:<input type="radio" name="sex" value="m"> 男
        <input type="radio" name="sex" value="w"> 女
        <br />
        <input type="submit" value="點我">
    </form>
</body>
</html>

4.5 偽類選擇器_顏色設置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>偽類選擇器</title>
    <style>
        /* 鼠標懸停的時候觸發 */
        a:hover
        {color:teal;}
        /* 列表中第一個元素 */
        ul li:first-child
        {color:yellow;}
        /* 列表中最後一個元素 */
        ul li:last-child
        {color:green;}
        /* 列表中具體某一個元素 */
        ul li:nth-child(4)
        {color: red;}
        /*  偶數個2n / even   奇數個2n-1 / odd n不可換 */
        ul li:nth-child(even)
        {color:turquoise;}
        ul li:nth-child(odd)
        {color:violet;}

        /* 小練習 */
        /* 1.寫一個table表格,設置一個背景色 */
        table
        {background-color:green;}
        /* 2.偶數行顏色為藍色 */
        table tr:nth-child(2n)
        {background-color: blue;}
        table tr td
        {}
        /* 3.第3 , 6 , 9   3倍行顏色為黃色 */
        table tr:nth-child(3n)
        {background-color:yellow;}
        /* 4.鼠標滑過時,顏色變成紅色 */
        table tr:hover
        {background-color: red;}
    </style>
</head>
<body>
    <a href="#"> 老男孩教育 </a>
    <ul>
        <li>馬春妮</li>
        <li>孫堅</li>
        <li>曉東</li>
        <li>文東</li>
        <li>王偉</li>
        <li>好心</li>
        <li>蜂擁</li>
        <li>倩倩</li>
        <li>石超</li>
        <li>帥帥</li>
    </ul>
    <!--
    小練習:
        1.寫一個table表格,設置一個背景色
        2.偶數行顏色為藍色
        3.第3 , 6 , 9   3被行顏色為黃色
        4.鼠標滑過時,顏色變成紅色
    -->
    <!--
    顏色設置:
        RGB:  三原色
            R:red     0~255 0~ff
            G:green   0~255 0~ff
            B:blue    0~255 0~ff
            1.使用rgb方式表達顏色:
                rgb(100,100,100)      三原色的設置
                rgba(100,100,100,0~1) 三原色+透明度設置
            2.使用十六進制的方式表達顏色
                f -> 15 1111  ff -> 255  1111 1111
                純紅色: # ff 00 00   => #f00 (簡寫)
                純綠色: # 00 ff 00   => #0f0 (簡寫)
                純藍色: # 00 00 ff   => #00f (簡寫)
    -->
    <table border=1 style="width:600px;" cellspacing=0 cellpadding=0 >
        <tr>
            <td style="background-color: #800000;">111</td><td style="background-color:#0f0;">222</td><td  style="background-color:#00f;">333</td><td>444</td>
        </tr>
        <tr>
            <td  style="background-color:rgb(100,100,100);">111</td><td>222</td><td>333</td><td>444</td>
        </tr>
        <tr>
            <td style="background-color:rgba(100,100,100,0.7);">111</td><td>222</td><td>333</td><td>444</td>
        </tr>
        <tr>
            <td>111</td><td>222</td><td>333</td><td>444</td>
        </tr>
        <tr>
            <td>111</td><td>222</td><td>333</td><td>444</td>
        </tr>
        <tr>
            <td>111</td><td>222</td><td>333</td><td>444</td>
        </tr>
        <tr>
            <td>111</td><td>222</td><td>333</td><td>444</td>
        </tr>
        <tr>
            <td>111</td><td>222</td><td>333</td><td>444</td>
        </tr>
        <tr>
            <td>111</td><td>222</td><td>333</td><td>444</td>
        </tr>
        <tr>
            <td>111</td><td>222</td><td>333</td><td>444</td>
        </tr>
    </table>
</body>
</html>

4.6 偽對象選擇器

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt;    &lt;meta charset="UTF-8"&gt;    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;    &lt;title&gt;偽對象選擇器&lt;/title&gt;    &lt;style&gt;        .name        {color:goldenrod;}        /* 在內容之前插入 */        .name::before        {            content:"我問:";            color:green;        }        /* 在內容之後插入 */        .name::after        {            content:"肯定對!";            color:magenta;        }        /* 鼠標選中後的樣式 */        .name::selection        {            background-color: mediumspringgreen;            color: white;        }    &lt;/style&gt;&lt;/head&gt;&lt;body&gt;        &lt;span class="name"&gt;王文很帥,對不對?&lt;/span&gt;&lt;/body&gt;&lt;/html&gt;

5. 字體屬性設置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css的相關屬性: 字體屬性 </title>
    <style>
        /*@符制定規則,來設置引入的自定義字體 */
        @font-face
        {
            font-family:"王文";
            src:url("font/方正舒體.TTF");
        }
        /* 設置字體屬性 */
        .c1
        {
            font-style:italic; /*字體斜體*/
            font-weight:bold;  /*字體粗細*/
            font-size:32px;    /*字體大小*/
            font-family:"宋體";/*字體種類*/
        }
        /* 簡寫字體1 */
        .c2
        {font:italic bold 32px "宋體"; }
        /* 簡寫字體2 */
        .c3
        {
            border:solid 1px red;
            font:64px/2 "宋體";   /*  字體大小/行高比例 字體種類  */
            background-color: yellow;
        }
        /* 自定義字體 */
        .c4
        {font:64px/2 "王文";}
        ul
        {
            /* 去掉前面的點. */
            list-style:none;
            /* 改變鼠標的形態 */
            cursor:wait;
        }
    </style>
</head>
<body>
    <ul>
        <li class="c1">設置字體相關的屬性1</li>
        <li class="c2">設置字體相關的屬性2</li>
        <li class="c3">設置字體相關的屬性3</li>
        <li class="c4">設置字體相關的屬性4</li>
    </ul>
</body>
</html>

cursor屬性:

在這裡插入圖片描述

6. 文本屬性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css的相關屬性: 文本屬性 </title>
    <style>
        .p0
        {
            font-size:16px;
            width:200px;height:200px;background-color: red;
            /* 字符間距 */
            letter-spacing:5px; 
            /* 文本的首行縮進 */
            /* text-indent:32px; */ /* px代表像素*/
            text-indent:2em;        /* 1em = 1個元素的大小 按照字體比例縮進 */
        }
        .p1  
        /* 強制換行 純英文不會默認換行*/
        {word-wrap: break-word;}  
        .p2
        /* 強制不換行 中文默認換行   */
        {white-space:nowrap;}
        .p3
        /* 設置height與line-height數值相同,可以讓文字在垂直方向上居中 */
        {font-size:16px;width: 200px;height:50px; line-height: 50px;   background-color:goldenrod;}
        .p4
        /* text-align:left/center/right       文本水平對齊方式 */
        {font-size:16px;width: 200px;height:50px; line-height: 50px;   background-color:goldenrod;text-align:center;}
        .p5
        /* text-decoration:overline/line-through/underline/none; */
        {text-decoration:none;}
        .p6 img
        /* vertical-align:top/middle/bottom   文本垂直對齊方式[一般都是在圖片排版的時候使用] */
        {vertical-align:-600%;}

        /* 
        text-shadow相關設置
        none: 無陰影 
        <length>①: 第1個長度值用來設置對象的陰影水平偏移值。可以為負值 
        <length>②: 第2個長度值用來設置對象的陰影垂直偏移值。可以為負值 
        <length>③: 如果提供瞭第3個長度值則用來設置對象的陰影模糊值。不允許負值 
        <color>: 設置對象的陰影的顏色。  */
        .p7        
        {text-shadow:7px 4px 10px gray;}

    </style>
</head>
<body>
    <p class="p0 p1">setwordxiangguanpropertyhahahah </p>
    <p class="p0 p2">設置文本屬性111222233asd設置文本屬性設置文本屬性</p>
    <p class="p3">本屬性</p>
    <p class="p4">本屬性</p>
    <a href="" class="p5">本屬性</a>
    <del>特價取消</del>
    <p class="p6">   <img src="tupian1.png" />   <a href>點我跳轉</a>   </p>
    <p class="p7"> 我是炫酷的陰影效果</p>
</body>
</html>

7. 盒子模型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> 盒子模型 </title>
    <style>
        #d1
        {
            width: 200px;
            height:200px;
            /* 上 右 下 左  top right bottom left*/
            border:solid 10px green;
            border-top:dotted 3px red;
            border-right:dashed 5px blue;
        }
        #d2
        {
            width: 200px;
            height:200px;
            border:solid 5px red;
            /* border-radius: 100px; */
            border-top-left-radius: 100px;
            border-bottom-right-radius: 100px;
        }
        #d3
        {
            width: 200px;
            height:200px;
            border:solid 5px red;
            /*上 右 下 左 padding會增大盒子的面積 內填充*/
            /* padding:50px; */            
            /* 上下 左右*/
            /* padding:10px 20px; */
            /* 上 左右 下 */
            padding:10px 20px 30px;
            /* 上 右 下 左 */
            /* padding:10px 20px 30px 10px;  */
            /* padding-left:30px; */
        }   
        #d4
        {
            width: 200px;
            height:200px;
            border:solid 5px red;
            /*上 右 下 左 盒子與盒子之間的間距 外邊距*/
            /* margin:60px; */
            /* 上下 左右 */
            margin:10px 20px;
            /* 上 左右 下 */
            margin:10px 20px 30px;
            /* 上 右 下 左 */
            /* margin:10px 20px 30px 10px;  */
            /* margin-left:30px; */
        }  
        #d5
        {
            width: 200px;
            height:200px;
            border:solid 5px red;
            /*  上下0px 左右自動居中*/
            margin:0px auto;
        }
        /* 
        box-shadow:
        <length>①: 第1個長度值用來設置對象的陰影水平偏移值。可以為負值 
        <length>②: 第2個長度值用來設置對象的陰影垂直偏移值。可以為負值 
        <length>③: 如果提供瞭第3個長度值則用來設置對象的陰影模糊值。不允許負值 
        <length>④: 如果提供瞭第4個長度值則用來設置對象的陰影外延值。可以為負值 
        <color>: 設置對象的陰影的顏色。  */
        #d6
        {width:100px;height:100px;border:solid 5px red;box-shadow:6px 3px 16px 6px black;}
    </style>
</head>
<body>
    <div id="d1"></div>
    <div id="d2"></div>
    <div id="d3">我是d3</div>
    <div id="d4">我是d4</div>
    <div id="d5">我是d5</div>
    <div id="d6"></div>

</body>
</html>

order-style:

在這裡插入圖片描述

8. 學習工具

學習css一般有三種工具提供給我們開發:
1. 代碼編輯器本身一般自帶提示或者語法提示.
2. css手冊,內部提供提供瞭所有的樣式屬性和樣式值的使用參考,甚至包括一些演示代碼.
   http://css.doyoe.com
3. 瀏覽器也內置瞭一些css輔助工具給我們學習和開發.
   F12,或者Ctrl+shift+i,或者鼠標右鍵,檢查代碼

總結

本篇文章就到這裡瞭,希望能夠給你帶來幫助,也希望您能夠多多關註WalkonNet的更多內容!

推薦閱讀: