web前端入門到實戰：css選擇器和css文本樣式相關

時間 2020-04-03

標籤 web 前端入門實戰 css 選擇器文本樣式相關欄目 HTML 简体版

原文原文鏈接

【文章來源微信公衆號：天天學編程】---關注，後臺領取編程資源css

css基礎-css選擇器和css文本樣式相關：html

使用link鏈入外部樣式，頁面加載時會同時加載樣式前端

@import url(「*.css」);使用導入式，頁面加載完後，纔會加載樣式web

連接僞類的順序編程

:link-> :visited ->:hover-> :activeapi

或者微信

: visited -> : link ->:hover-> :activeide

選擇器的優先級：工具

id選擇器>class選擇器>標籤選擇器學習

若是設置了一樣的類樣式，類樣式與元素裏類的順序沒有關係，取決於哪一個樣式離須要引用樣式的元素最近就用哪一個，因此div裏的文字顏色是「橘色「

選擇器權值：

標籤選擇器：1

類和僞類選擇器：10

id選擇器：100

通配符選擇器：0

行內樣式：1000

!important：優先級最最高

權值不一樣時，根據權值判斷樣式；權值相同時，根據就近原則判斷樣式

經常使用選擇器：

input:focus

p:first-letter p元素的首字母

p:first-line p元素的首行

serif字體和sans-serif字體的區別：

sans-serif有修飾

sans-serif無修飾

font-style:normal/italic/oblique

正常斜體傾斜

font簡寫順序： font-style font-variant font-weight font-size font-family；

img水平居中：

img不是塊級元素，不能使用img{text-align:center;}

能夠在img外面包裹div，使用div{text-align:center;}

margin:0 auto也能夠實現

vertical-align能夠設置數值

單行文字水平垂直居中：

height與Line-height相同，text-align:center;

多行文字水平垂直居中：

多行文字設置margin:0 auto；

文字外容器設置：display:table-cell;vertical-align:middle;

文字外容器的外容器設置：display:table;

專門創建的學習Q-q-u-n： 784783012 ，分享學習的方法和須要注意的小細節，不停更新最新的教程和學習技巧
（從零基礎開始到前端項目實戰教程，學習工具，全棧開發學習路線以及規劃）

<!DOCTYPE html>
<html>
   <head>
   <meta charset="UTF-8">
   <title>vertical-align</title>
   <style type="text/css">
    *{padding:0px;margin: 0px;}

    .warp1{    
        height:80px;
        width: 100%;
        background-color: #14191e;        
        line-height:80px;
        text-align:center;
    }

    .warp1 h1{ 
        color:#fff; 
        font-size:24px;

    }

    .warp2{
        height:400px;
        width: 100%;
        border:1px  #14191e solid;
        display:table;
    }

    .content{    
        display:table-cell;
        vertical-align:middle;
    }

    .content  p{
        width:500px;
        font-family: "微軟雅黑";
        line-height:1.5em;
        font-size:14px;
        margin:0 auto;
    }   

   </style>
</head>
<body>
    <div class="warp1">
        <h1>CSS vertical-align 屬性</h1>      
    </div>
      <div class="warp2">
        <div class="content">
            <p>vertical-align 屬性設置元素的垂直對齊方式</p>
            <p>該屬性定義行內元素的基線相對於該元素所在行的基線的垂直對齊。容許指定負長度值和百分比值。這會使元素下降而不是升高。在表單元格中，這個屬性會設置單元格框中的單元格內容的對齊方式。</p>
        </div>
    </div>    

</body>
</html>

文本大小寫：

text-transform：capitalize/uppercase/lowercase/none

文本裝飾線：

text-decoration: underline/overline/line-through

文本樣式應用demo：

<!DOCTYPE html>
<html>
   <head>
   <meta charset="UTF-8">
   <title>vertical-align</title>
   <style type="text/css">
    *{padding:0px;margin: 0px;}

    .wrap{
        height:200px;
        line-height:200px;
        width:100%;
        text-align:center;
        background-color: #abcdef;
        font-family: "宋體";
    } 
    span.words{
        font-size: 28px;
        color: gray;
        text-decoration: underline;
        letter-spacing: 5px;
        margin-left: 10px;
        vertical-align: 12px;
    } 
    span.name{
        color:red;
        font-size: 60px;
        letter-spacing: 10px;
        text-transform:uppercase;
    }
    span.mark{
        font-style: italic;
        color: gray;
        font-weight: bold;
        font-size: 60px;
    }

   </style>
</head>
<body>
    <div class="wrap">
        <span class="name">cyy</span><span class="words">你會愈來愈棒棒</span><span class="mark">！</span>
    </div>    

</body>
</html>

文本樣式demo2：

專門創建的學習Q-q-u-n： 784783012 ，分享學習的方法和須要注意的小細節，不停更新最新的教程和學習技巧
（從零基礎開始到前端項目實戰教程，學習工具，全棧開發學習路線以及規劃）

<!DOCTYPE html>
<html>
   <head>
   <meta charset="UTF-8">
   <title>vertical-align</title>
   <style type="text/css">
    *{padding:0px;margin: 0px;}

    .wrap{
        height: 100px;
        line-height: 34px;
        width: 100%;
        padding-left:10px;
    } 
    hr{
        margin:10px 0;
    }
    h3{
        color:green;
        margin: 10px 0;
    }
    a{
        text-decoration: none;
        color:#009;
    }
    span{
        color:orange;
    }
   </style>
</head>
<body>
    <div class="wrap">
        <h3>大話西遊之大聖娶親的影評</h3>
        <a href="#">熱門</a>/<a href="#">最新</a>/<a href="#">好友</a>
        <hr>
        <p><a href="#">羅紅黴素</a><span>★★★★★</span>2019-07-26</p>
        <p>有人跟我比賽背臺詞麼</p>
        <p>閱讀：1615 <a href="#">有用</a></p>
        <hr>
        <p><a href="#">十七隻貓和魚</a><span>★★★★</span>2019-04-26</p>
        <p>任什麼時候候任何場合均可以再看一遍的電影</p>
        <p>閱讀：515 <a href="#">有用</a></p>
        <hr>
        <p><a href="#">暖家男</a><span>★★★★</span>2019-04-22</p>
        <p>必定有一些電影，永遠都不能被超越</p>
        <p>閱讀：490 <a href="#">有用</a></p>
        <hr>
    </div>    

</body>
</html>