CSS常用樣式有哪些-創(chuàng)新互聯(lián)

這篇文章主要為大家展示了“CSS常用樣式有哪些”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“CSS常用樣式有哪些”這篇文章吧。

專注于為中小企業(yè)提供成都網(wǎng)站設(shè)計、成都網(wǎng)站制作、外貿(mào)網(wǎng)站建設(shè)服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)阜南免費做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動了近千家企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設(shè)實現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

1、CSS

層疊樣式表，用于對頁面進(jìn)行美化。

在HTML中的方式有三種：元素內(nèi)聯(lián)、頁面嵌入、外部引入。

(1)、元素內(nèi)聯(lián)：對其特定標(biāo)簽的樣式進(jìn)行設(shè)置；

(2)、頁面嵌入：在其<style>...</style>中寫入樣式，對其整個頁面內(nèi)的標(biāo)簽均可設(shè)置；

(3)、外部引入：就是寫到了一個文件中(.css)，對需要這種樣式時引入文件即可。

2、常見樣式

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

含義：其后出現(xiàn)的所有這種標(biāo)簽都是這種樣式

div{
    color: red;
}

(2)、class選擇器

.logo{
    background-color: red;
    font-size: 18px;
    border: 1px;
}

后面調(diào)用：<div class = 'logo'></div>

(3)、id選擇器

注意：每個標(biāo)簽的id號是唯一的。

#logo{
    background-color: red;
    font-size: 18px;
    border: 1px;
}

后面調(diào)用：<div id = 'logo'></div>

(4)、關(guān)聯(lián)選擇器(以空格分開)

div p{
    
}

后面調(diào)用：<div><p></p></div> :就是div標(biāo)簽下面的p標(biāo)簽是這個樣式

(5)、組合選擇器(以,分開)

p, div{
    color: red;
}

：后面出現(xiàn)p/div標(biāo)簽的都是這個樣式

(6)、屬性選擇器

input[type = 'text']{

}

使用：凡是出現(xiàn)input標(biāo)簽中帶有type='text'的都使用這個樣式

(7)、需要注意的：

<style>
    .logo{
        background-color:#EEAD0E;font-size:18px;border:1px;
    }
    .logo a,.logo p{
        font-size:56px;
    }
    以上的含義：在logo下的a/p標(biāo)簽使用這個樣式
    .logo a,p{
        font-size:56px;
    }
    這個的含義是：在logo下的a標(biāo)簽或所有的p標(biāo)簽使用這個樣式
</style>

關(guān)于以上樣式的完整代碼：

<!DOCTYPE html>

<html>
    <head>
        <title>頁面一</title>
        <link rel = 'stylesheet' href = 'conmon.css' />
        
        <style>
            .logo{
                background-color: red;
                font-size: 18px;
                border: 1px;
            }
            .logo a{
            
            }
            #logo{
                background-color: red;
                font-size: 18px;
                border: 1px;
            }
            div{
                color: red;
            }
            a{
                color: red;
            }
            a, div{
                color: red;
            }
            
            a div{
                
            }
            input[type = 'text']{

            }

        </style>
    </head>
        
    <body>
        <div class = 'logo'>
            <a></a>
        </div>
    
        <div style = 'background-color: red;'>123</div>
        <div class = 'logo'>123</div>
        <div id = 'logo'>123</div>
        
        <a>
            <input />
            <div></div>
        </a>
    </body>
</html>

///////////////////////////////////////////////////////////////////////////
<!DOCTYPE html>

<html>
    <head>
        <title>頁面一</title>
        <style>
            .logo{
                background-color:#EEAD0E;font-size:18px;border:1px;
            }
            .logo a,.logo p{
                font-size:56px;
            }
            <!--
            .logo a,p{
                font-size:56px;
            }
            -->
        </style>
    </head>
    
    <body>
        <p>p標(biāo)簽</p>
        <div class='logo'>
            <div>div標(biāo)簽</div>
            <a>a標(biāo)簽</a>
            <p>p標(biāo)簽</p>
        </div>  
    </body>
</html>

3、背景圖片

(1)、原生的引入圖片

<p_w_picpath src = '1.png'>   #雙引號中寫的是當(dāng)前路徑下的圖片

(2)、背景圖片的引入：background;

注意：使用background時，要注意將背景圖片放到盒子中，就是必須指明寬、高。

<div ></div>

運行結(jié)果

CSS常用樣式有哪些

4、邊框

border：線的寬度實/虛(solid/dotted) 顏色；后面可以設(shè)置邊框的寬度和高度;

margin：與外邊框的距離；里面的邊框相距外邊框的距離;

padding：與內(nèi)邊框的距離；里面的文字距離自己里面邊框的距離;

<!DOCTYPE html>

<html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8">
        <title>頁面一</title>
        <style>
        
        </style>
    </head>
    
    <body>
        <div style = 'border:1px solid red;height:49px;border-top-style:dotted;
        border-right-style; border-bottom-style; border-left-style'>  
        
        </div>
        
        <div style = 'border:1px solid red;height:200px;'>
            <div style = 'height:30px;background-color:#999;margin-top:20px;
            margin-left:20px;margin-right:20px;padding-top:120px;padding-left:250px;
            padding-bottom:20px'>西安市</div>
        
        </div>

    </body>

</html>

運行結(jié)果

CSS常用樣式有哪些

5、display

常見的就三種形式：

(1)、display:none; #隱藏顯示

(2)、display:block; #以塊級標(biāo)簽的形式顯示

(3)、display:inline; #以內(nèi)聯(lián)標(biāo)簽的形式打印

<!DOCTYPE html>

<html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8">
        <title>頁面一</title>
        <style>
            .logo{
                display:none;
                display:block;
                display:inline;
            }
        </style>
    </head>
        
    <body>
        <span style = 'display:none;'>不會出現(xiàn)的</span>
        <span style = 'display:block;'>內(nèi)聯(lián)標(biāo)簽</span>
        <div style = 'display:inline;'>塊級標(biāo)簽</div>
        <div style = 'display:inline;'>塊級標(biāo)簽</div>
    </body>

</html>

運行結(jié)果

CSS常用樣式有哪些

6、cursor

使用目的：在鼠標(biāo)到達(dá)這個位置時，鼠標(biāo)會出現(xiàn)不同的風(fēng)格形式；

<!DOCTYPE html>

<html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8">
        <title>頁面一</title>

    </head>
        
    <body>
        <span style = 'cursor:pointer;'>小手</span>
        <span style = 'cursor:wait;'>1</span>
        <span style = 'cursor:move;'>2</span>
        <span style = 'cursor:crosshair;'>3</span>
        <span style = 'cursor:mine;'>4</span>   #可以自定義形式(小圖標(biāo))
    </body>

</html>

這個截圖看不出效果，就是不同的形式展現(xiàn)，鼠標(biāo)在不同的文字上出現(xiàn)時;

7、float

一般使用left和right;

使用目的：劃分區(qū)域，可以使之飄起來，是以堆疊的形式展現(xiàn)；

<!DOCTYPE html>

<html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8">
        <title>頁面一</title>
        <style>
            .clearfix:after{   #在父標(biāo)簽的下面，子標(biāo)簽有float，使用這個class可以讓其子標(biāo)簽使用父標(biāo)簽的樣式(方法1)
                content:'.';
                display:block;
                height:0;
                clear:both;
                visibility:hidden;
            }
        </style>
    </head>
    
    <body>
    <!--  float出現(xiàn)時，標(biāo)簽就會出現(xiàn)堆疊
        <div style = 'background-color:red;float:left;width:50%;height:120px'>
        div1
        </div>
        <div style = 'background-color:#999;float:right:width:50%;height:120px'>
        div2
        </div>
    -->    
        <div style = 'background-color:red;' class = 'clearfix'>
        <!--只要子類里邊哪個有float,哪個就飄起來了,此時你的父標(biāo)簽對其就不起作用了 -->
            <div style = 'float:left'>div1</div>
            <div style = 'float:left'>div2</div>
            <div style = 'clear:both'></div> #解決子標(biāo)簽有float,還能使用父標(biāo)簽樣式的方法2
        </div>
    </body>

</html>

運行結(jié)果

CSS常用樣式有哪些

8、position

常用的就三種：

(1)、position:fixed 固定的位置，不在改變

(2)、position:relative

(3)、position:absolute relative和absolute一般聯(lián)合使用；

<!DOCTYPE html>

<html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8">
        <title>頁面一</title>
    </head>
    
    <body>
        <!--
        relative absolute fixed固定 有position出現(xiàn)時,塊級標(biāo)簽不再占100%,得自己指定寬度
        relative absolute 這2個一般一起用,一個距一個有多遠(yuǎn)
        <div style = 'position:fixed;height:45px;width:100%;background-color:#333;top:0px'></div>   
        <div style = 'height:1000px'></div>     
        <div style = 'margin-top:16px;'>
            <div style = 'float:left;width:20%;background-color:#666;'>left</div>
            <div style = 'float:left;width:80%;'>
                <p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p><p>9</p>
                <p>10</p><p>11</p><p>12</p><p>13</p><p>14</p><p>15</p><p>16</p><p>17</p><p>18</p><p>19</p>
                <p>20</p><p>21</p><p>22</p><p>23</p><p>24</p><p>25</p><p>26</p>
            </div>
                       
        <div style = 'margin-top:16px;'>
            <div style = 'width:200px;background-color:#666;position:fixed;top:60px;bottom:0px'>left</div>
            <div style = 'margin-left:200px'>
                <p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p><p>9</p>
                <p>10</p><p>11</p><p>12</p><p>13</p><p>14</p><p>15</p><p>16</p><p>17</p><p>18</p><p>19</p>
                <p>20</p><p>21</p><p>22</p><p>23</p><p>24</p><p>25</p><p>26</p>
            </div>
            
        </div>
                 
        <div style = 'width:200px;position:fixed;top:0;left:0;bottom:0;background-color:red;'></div>
             
        <div style = 'width:200px;position:absolute;top:0;left:0;bottom:0;background-color:red;'></div>
        -->
        
        <div style = 'position:relative;width:500px;height:200px;background-color:#ddd'>
            <div style = 'width:20px;height:20px;position:absolute;top:0;left:0;bottom:0;background-color:red;'></div>        
            <!--此時,absolute只占relative所規(guī)劃的范圍里面  -->
        </div>
        
    </body>

</html>

分別看幾種運行結(jié)果

CSS常用樣式有哪些

9、opacity(透明度)

使用目的：一般設(shè)置圖片/背景顏色的亮度；

.p_w_picpath{
    opacity:0.4;    
}

10、模擬一個對話框

寫一個小例子，就是出現(xiàn)對話框，讓我們自己選擇的那種；

<!DOCTYPE html>

<html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8">
        <title>頁面一</title>
        <style>
            .shade{
                position:fixed;
                top:0;
                right:0;
                bottom:0;
                left:0;
                background-color:#333;
                opacity:0.6;
        <!--    z-index:20;   就是看層疊的樣式,哪個在上邊,通過這個可以自己設(shè)置  -->
            }
            .delete{
                position:fixed;  <!-- fixed永遠(yuǎn)是當(dāng)前頁面占50%-->
                top:50%;
                left:50%;
                width:400px;
                height:300px;
                background-color:white;
                margin-left:-200px;
                margin-top:150px;    
        <!--    z-index:10;-->
            }
            .hide{
                display:none;
            }
        </style>
    </head>
    
    <body>
        <table>
            <tr>
                <th>IP</th>
                <th>編輯</th>
            </tr>
            <tr>
                <td>11.11.11.11</td>
                <td>刪除</td>
            </tr>
            <tr>
                <td>11.11.11.12</td>
                <td>刪除</td>
            </tr>
        </table>
        
        <!-- 遮罩層開始-->
        <div class = 'shade'></div>
        <!-- 遮罩層結(jié)束-->
        
        <!-- 刪除層開始-->
        <div class = 'delete'>
            <div>提示</div>
            <div>確定要刪除嗎?</div>
            <div>
                <input type = 'button' value = '取消' />
                <input type = 'button' value = '確定' />
            </div>
        </div>
        <!-- 刪除層結(jié)束-->
            
    </body>

</html>

運行結(jié)果
CSS常用樣式有哪些

以上是“CSS常用樣式有哪些”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)網(wǎng)站制作公司行業(yè)資訊頻道！

創(chuàng)新互聯(lián)www.cdcxhl.cn，專業(yè)提供香港、美國云服務(wù)器，動態(tài)BGP最優(yōu)骨干路由自動選擇，持續(xù)穩(wěn)定高效的網(wǎng)絡(luò)助力業(yè)務(wù)部署。公司持有工信部辦法的idc、isp許可證，機(jī)房獨有T級流量清洗系統(tǒng)配攻擊溯源，準(zhǔn)確進(jìn)行流量調(diào)度，確保服務(wù)器高可用性。佳節(jié)活動現(xiàn)已開啟，新人活動云服務(wù)器買多久送多久。

名稱欄目：CSS常用樣式有哪些-創(chuàng)新互聯(lián)
文章鏈接：http://aaarwkj.com/article10/dihcdo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供標(biāo)簽優(yōu)化、網(wǎng)站建設(shè)、商城網(wǎng)站、品牌網(wǎng)站制作、移動網(wǎng)站建設(shè)、外貿(mào)建站

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

欧美一级特黄大片做受成人-亚洲成人一区二区电影-激情熟女一区二区三区-日韩专区欧美专区国产专区

CSS常用樣式有哪些-創(chuàng)新互聯(lián)