python 學習_第五模塊 CSS

時間 2019-12-08

標籤 python 學習第五模塊 css 欄目 Python 简体版

原文原文鏈接

python 學習_第五模塊 CSScss

1.網頁引用css樣式 3種模式html

　　內聯樣式python

　　內嵌樣式學習

　　外部樣式（經常使用）字體

<!--
    1.內聯樣式 （行內樣式）  少用
    2.內嵌樣式
    3.外部樣式
-->

<!DOCTYPE html>
<html>
<head>
    <title>3種模式</title>

    <!-- 內嵌樣式 -->
    <style type="text/css">
        h3{
            color: green;
        }    
    </style>
    <!-- 外部樣式-->
    <link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
    <!-- 行內樣式 -->
    <p>
    <p style="color: red;">
        文本顏色爲何顏色？
    </p>

    <h3>
        小圓圈
    </h3>

    <h4>
        mjj
    </h4>

</p>
</body>
</html>

link標籤 index.cssspa

h4{
    color: orange;
    font-size: 22px;
    font-weight: bold;
}

　　2. 基本選擇器code

　　　①標籤選擇器htm

　　　示例blog

p{
    color: green;
    font-size: 20px;
}

　　　　　將全部p標籤設置字體顏色爲綠色大小爲20px　　　繼承

　　　　②id選擇器

　　　　示例

#douyin{
    color: red;
    
}

　　　　將id爲抖音的元素字體顏色設置爲紅色　　

　　　　③類選擇器

　　　　示例

.active{
    color: gray;
}

　　　　　　將類爲 active的顏色設置爲灰色

基本選擇器的使用

<!DOCTYPE html>
<html>
<head>
    <title>css基礎選擇器</title>
    <link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
    <div id="container">
        <h3 class="active title">抖音</h3>

        <p>
            年後，一股抖音風火爆了社媒，抖音上的博主帶火了小豬佩奇。他們的標誌是"<span class="active">手帶小豬佩奇手錶，身披小豬佩奇紋身</span>"，因而就誕生了"<span id="peiqi">小豬佩奇身上紋，掌聲送給社會人</span>"。
        </p>

    </div>
</body>
</html>

link標籤 index.css

p{
color: green;
font-size: 20px;
}

.active{
color: gray;
}

.title{
font-size: 30px;
}

#peiqi{
color: red;

}

類選擇器的使用樣例

<!DOCTYPE html>
<html>
<head>
    <title>類選擇器使用</title>
    <link rel="stylesheet" type="text/css" href="css/common_class.css">
</head>
<body>
    <!-- 綠色 20px -->
    <p class="lv big">yyy</p>
    <!-- 綠色 粗 -->
    <p class="lv bold">yyy</p>
    <!-- 粗 20px -->
    <p class="bold big">yyy</p>

</body>
</html>

link 標籤 common_class.css

.lv{
    color: green;
}
.big{
    font-size: 20px;
}
.bold{
    font-weight: bold;
}

　　3.高級選擇器

　　①後代選擇器

/*後代選擇器*/
.wrap a {
    color:red;
}

　　②子代選擇器

/*子代 選擇器*/
.wrap >a{
    color: green;
}

　　③組合選擇器

/*組合選擇器*/

h3,span {
    color: gray;
    font-size: 20px;
}

　　④交集選擇器

/*交集選擇器*/

h2{
    color: red;
}
.active{
    font-weight: lighter;
}
h2.active{
    font-size: 14px;
}

<!DOCTYPE html>
<html>
<head>
    <title>高級選擇器</title>
    <link rel="stylesheet" type="text/css" href="css/advanced_selector.css">
</head>
<body>
    <h3>組合選擇器1</h3>
    
    <div class='wrap'>
        <p>
            <a href="#">小圓圈</a>
        </p>
        <a href="#">hello</a>
    </div>


    <a href="#">123456</a>


    <div>
        <a href="#"> hello a</a>
    </div>

    <span>組合選擇器2</span>


    <h2 class="active">mgg</h2>
</body>
</html>

link標籤 advanced_selector.css

/*後代選擇器*/
.wrap a {
    color:red;
}



/*子代 選擇器*/
.wrap >a{

    color: green;
}


/*組合選擇器*/

h3,span {
    color: orange;
    font-size: 30px;
}

/*交集選擇器*/

h2{
    color: red;
}
.active{
    font-weight: lighter;
}
h2.active{
    font-size: 24px;
}

　　⑤僞類選擇器

<!DOCTYPE html>
<html>
<head>
    <title>僞類選擇器</title>
    <link rel="stylesheet" type="text/css" href="css/test.css">
</head>
<body>
    <a href="https://www.baidu.com" >baidu</a>

</body>
</html>

　　link標籤 test.css

       /*讓超連接點擊以前是紅色*/
        a:link{
            color:red;
        }

        /*讓超連接點擊以後是綠色*/
        a:visited{
            color:green;
        }
        /*鼠標懸停，放到標籤上是黃色*/
        a:hover{
            color:orange;
        }
        /*鼠標點擊連接，可是不鬆手是黑色*/
        a:active{
            color:black;

須要注意的是 :hover 能夠應用於任何的元素

繼承性

<!DOCTYPE html>
<html>
<head>
    <title>繼承性</title>
    <link rel="stylesheet" type="text/css" href="css/special.css">
</head>
<body>
    <div>
        <ul>
            <li>
                <p>
                    A
                </p>
            </li>
        </ul>
    </div>
</body>
</html>

body{
    color: red;
    font-size: 30px;
    border: 1px solid red;
}

4. 選擇器權重

<!DOCTYPE html>
<html>
<head>
    <title>選擇器權重</title>
    <style type="text/css">
        /*數選擇器的數量： id選擇器 類選擇器 標籤選擇器*/
        /*0 1 0*/
        .b{
            color: purple;
        }
        /*0 0 3*/
        html body div{
            color: red;
        }
        /*1 0 0*/
        #b{
            color: orange;
        }

    </style>
</head>
<body>
    <div>a</div>
    <div class="b" id="b" style="color: green;">b</div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <title>css選擇器權重深刻</title>
    <style type="text/css">
        /* 0 0 3*/
        div div p{
            color: yellow;
        }
        /*0 0 1*/
        p{
            color: gray;
        }
        /*0 1 0*/
        .active{
            color: purple;
        }
        /*0 1 1*/
        div .active{
            color: black;
        }
        /*0 1 1*/
        div div .active{
            color: blue;
        }
        /*1 2 0*/
        .wrap1 #box2 .active{
            color: green;
        }
        /*2 0 1*/
        #box1 #box2 p{
            color: red;
        }
        /*繼承來的屬性 它的權重很是低 0*/
        #box1 #box2 #box3{
            color: orange;
        }

        .container{
            color: orange;
            font-size: 14px;
        }
        .container ul li {
            color: #000;
            font-size: 16px;

        }

    </style>
</head>
<body>
    <div class="wrap1" id="box1">
        <div class="wrap2" id="box2">
            <div class="wrap3" id="box3">
                <p class="active">MJJ是什麼顏色</p>
            </div>
        </div>
        
    </div>


    <div class="container">
        <ul>
            <li>小米手機</li>
        </ul>
    </div>
</body>
</html>

5 字體相關屬性

font-family 字體系列

body {
  font-family: "Microsoft Yahei", "微軟雅黑", "Arial", sans-serif
}

若是設置成inherit，則表示繼承父元素的字體。

font-weight 字重（字體粗細）。

取值範圍：

font-size 字體大小。

p {
  font-size: 14px;
}

若是設置成inherit表示繼承父元素的字體大小值。

color 設置內容的字體顏色。

　　支持三種顏色值：

　　　　十六進制值如: ＃FF0000
　　　　一個RGB值如: RGB(255,0,0)
　　　　顏色的名稱如: red

p {
  color: red;
}

text-align 文本對齊

取值範圍：

line-height 行高

text-decoration 文字裝飾。

取值範圍：

字體屬性示例

<!DOCTYPE html>
<html>
<head>
    <title>字體屬性</title>
    <style type="text/css">
        body{
            font-family: "Hoefler Text","Arial";
            font-size: 30px;    
            color: rgb(255,103,0);
            font-style: italic;
            font-weight: 900;
            text-decoration: line-through; 
        }
        
    </style>
</head>
<body>
    <!-- 像素單位： px  em rem  -->
    MJJ 小猿圈

</body>
</html>

文本屬性和字體屬性示例

<!DOCTYPE html>
<html>
<head>
    <title>文本屬性和字體屬性示例</title>
    <style type="text/css">
         a{
            text-decoration: none;
            color: #333;
            font-size: 14px;
        }
        a:hover{
            color: #FD8308;
            text-decoration: underline;
        }
        .box p span{
            text-decoration: line-through;
        }
    </style>
</head>
<body>
    <div class="box">
        <a href="https://detail.tmall.com/item.htm?spm=a230r.1.14.10.3e58105cVQmmSc&id=576523555964&cm_id=140105335569ed55e27b&abbucket=9">
            V領雪紡衫女2019春裝新款漏鎖骨打底長袖雪紡襯衣寬鬆網紗襯衫潮</a>
        <p>¥ <span>339.00</span></p>
    </div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <title>文本屬性</title>
    <style type="text/css">
        p{    
            /*font-family: */
            text-indent: 2em;
            /*font-size: 20px;*/
            /*行高： 行與行之間的距離*/
            /*line-height: 60px;*/
            /*文字和文字之間的距離*/
            letter-spacing: 5px;
            /*英文單詞之間的距離*/
            word-spacing: 10px;
            /*綜合屬性*/
            font: 20px / 3 "Helvetica Neue",Helvetica,Arial,"Microsoft Yahei","Hiragino Sans GB","Heiti SC","WenQuanYi Micro Hei",sans-serif;
        }
        div{
            line-height: 60px;
            font-size: 20px;
            background-color: red;
            /*設置文本水平居中顯示*/
            text-align: center;
        /*    text-align: left; 默認
            text-align: right;*/
        }
    </style>
</head>
<body>
      <p>
           hello  world在人類漫長的歷史長河中，推進社會向前的從不會是那些甘於平凡的多數人，相反，他們每每都是一羣特立獨行桀驁不馴的瘋子！這一羣瘋子中有位傳奇的人物，他顛覆性地將人文與科技完美融合，極大地改變了人類計算機領域，改變了人們的生活方式，其一手建立的計算機公司到現在還是手機行業的傳奇，沒錯！他就是喬布斯！
      </p>
      <div>
          在人類漫長的歷史長河    
      </div>    

</body>
</html>