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

成都創(chuàng)新互聯(lián)公司專注于企業(yè)營銷型網(wǎng)站建設(shè)、網(wǎng)站重做改版、察哈爾右翼中旗網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、H5響應(yīng)式網(wǎng)站、商城網(wǎng)站定制開發(fā)、集團(tuán)公司官網(wǎng)建設(shè)、成都外貿(mào)網(wǎng)站建設(shè)、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計(jì)等建站業(yè)務(wù)，價格優(yōu)惠性價比高，為察哈爾右翼中旗等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。

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

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

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

鏈接偽類的順序

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

或者

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

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

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

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

選擇器權(quán)值：

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

類和偽類選擇器：10

id選擇器：100

通配符選擇器：0

行內(nèi)樣式：1000

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

權(quán)值不同時，根據(jù)權(quán)值判斷樣式；權(quán)值相同時，根據(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不是塊級元素，不能使用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;

   
   
   
   
    *{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;
    }   

   


    
        
CSS vertical-align 屬性