溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

css選擇器和文本樣式實(shí)例分析

發(fā)布時(shí)間：2022-03-11 15:06:48 來源：億速云 閱讀：175 作者：iii 欄目：web開發(fā)

本篇內(nèi)容介紹了“css選擇器和文本樣式實(shí)例分析”的有關(guān)知識(shí)，在實(shí)際案例的操作過程中，不少人都會(huì)遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

css基礎(chǔ)-css選擇器和css文本樣式相關(guān)：

使用link鏈入外部樣式，頁面加載時(shí)會(huì)同時(shí)加載樣式

@import url(“*.css”);使用導(dǎo)入式，頁面加載完后，才會(huì)加載樣式

鏈接偽類的順序

:link-> :visited ->:hover-> :active

或者

: visited -> : link ->:hover-> :active

選擇器的優(yōu)先級(jí)：

id選擇器>class選擇器>標(biāo)簽選擇器

css選擇器和文本樣式實(shí)例分析

如果設(shè)置了同樣的類樣式，類樣式與元素里類的順序沒有關(guān)系，取決于哪個(gè)樣式離需要引用樣式的元素最近就用哪個(gè)，所以div里的文字顏色是“橘色“

選擇器權(quán)值：

標(biāo)簽選擇器：1

類和偽類選擇器：10

id選擇器：100

通配符選擇器：0

行內(nèi)樣式：1000

!important：優(yōu)先級(jí)最最高

權(quán)值不同時(shí)，根據(jù)權(quán)值判斷樣式；權(quán)值相同時(shí)，根據(jù)就近原則判斷樣式

常用選擇器：

input:focus

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

p:first-line  p元素的首行

serif字體和sans-serif字體的區(qū)別：

sans-serif有修飾

sans-serif無修飾

font-style:normal/italic/oblique

正常 斜體 傾斜

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

img水平居中：

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

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

margin:0 auto也可以實(shí)現(xiàn)

vertical-align可以設(shè)置數(shù)值

單行文字水平垂直居中：

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

多行文字水平垂直居中：

多行文字設(shè)置margin:0 auto；

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

文字外容器的外容器設(shè)置：display:table;

<!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 h2{ 
        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">
        <h2>CSS vertical-align 屬性</h2>      
    </div>
      <div class="warp2">
        <div class="content">
            <p>vertical-align 屬性設(shè)置元素的垂直對(duì)齊方式</p>
            <p>該屬性定義行內(nèi)元素的基線相對(duì)于該元素所在行的基線的垂直對(duì)齊。允許指定負(fù)長度值和百分比值。這會(huì)使元素降低而不是升高。在表單元格中，這個(gè)屬性會(huì)設(shè)置單元格框中的單元格內(nèi)容的對(duì)齊方式。</p>
        </div>
    </div>    

</body>
</html

文本大小寫：

text-transform：capitalize/uppercase/lowercase/none

文本裝飾線：

text-decoration: underline/overline/line-through

文本樣式應(yīng)用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">你會(huì)越來越棒棒</span><span class="mark">！</span>
    </div>    

</body>
</html>

文本樣式demo2：

<!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;
    }
    h4{
        color:green;
        margin: 10px 0;
    }
    a{
        text-decoration: none;
        color:#009;
    }
    span{
        color:orange;
    }
   </style>
</head>
<body>
    <div class="wrap">
        <h4>大話西游之大圣娶親的影評(píng)</h4>
        <a href="#">熱門</a>/<a href="#">最新</a>/<a href="#">好友</a>
        <hr>
        <p><a href="#">羅紅霉素</a><span>★★★★★</span>2019-07-26</p>
        <p>有人跟我比賽背臺(tái)詞么</p>
        <p>閱讀：1615 <a href="#">有用</a></p>
        <hr>
        <p><a href="#">十七只貓和魚</a><span>★★★★</span>2019-04-26</p>
        <p>任何時(shí)候任何場合都可以再看一遍的電影</p>
        <p>閱讀：515 <a href="#">有用</a></p>
        <hr>
        <p><a href="#">暖家男</a><span>★★★★</span>2019-04-22</p>
        <p>一定有一些電影，永遠(yuǎn)都不能被超越</p>
        <p>閱讀：490 <a href="#">有用</a></p>
        <hr>
    </div>    

</body>
</html>

“css選擇器和文本樣式實(shí)例分析”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

css
AI
助
手