CSS的基礎(chǔ)使用方法有哪些

小編給大家分享一下CSS的基礎(chǔ)使用方法有哪些，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

創(chuàng)新互聯(lián)成立于2013年，先為船山等服務(wù)建站，船山等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為船山企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。

第一部分：CSS的基本使用

（1）CSS是什么？

CSS全稱Cascading Style Sheets，翻譯：層疊（級(jí)聯(lián)）樣式表。
如果說HTML是網(wǎng)頁的結(jié)構(gòu)，那么CSS就是網(wǎng)頁化妝師。

（2）CSS寫在哪里？

CSS有三種寫法：

  1. 直接寫在標(biāo)簽內(nèi)

  2. 寫在style標(biāo)簽內(nèi)

  3. 使用外部.css文件

（對(duì)應(yīng)CSS的三種寫法，就有三種引入CSS的方式，見下：）

（3）CSS的三大引入方式：

1.直接寫在標(biāo)簽內(nèi)（直接在標(biāo)簽內(nèi)設(shè)置）

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>CSS的引入方式1</title>
</head>
<body>

<!--第一種引入方式：行內(nèi)樣式-->
<!--注意：只能寫在開始標(biāo)簽或者自閉合標(biāo)簽里，不能寫在結(jié)束標(biāo)簽里哦-->
<!-- 直接給標(biāo)簽添加style屬性，style的屬性值里書寫樣式——樣式與樣式之間用分號(hào)隔開；樣式的名稱與樣式值用冒號(hào)隔開！ -->
<!-- 注意：嵌套標(biāo)簽設(shè)置了最外層的樣式，其內(nèi)所有標(biāo)簽都會(huì)應(yīng)用此樣式！ -->
<p style="color:red;font-size:30px;">我是段落標(biāo)簽</p>

<!-- 優(yōu)勢(shì)：直觀，很容易區(qū)分是給哪個(gè)標(biāo)簽添加的樣式 -->
<!-- 劣勢(shì)：代碼冗余，樣式過多的話，代碼的可讀性很差-->
<!-- 一般用于測(cè)試，不用于實(shí)際開發(fā)頁面中  -->

</body>
</html>
小知識(shí)點(diǎn)：

在設(shè)置屬性color屬性時(shí)，如下圖操作，可以對(duì)顏色進(jìn)行更加直觀詳細(xì)的選擇：
CSS的基礎(chǔ)使用方法有哪些

2.寫在style標(biāo)簽內(nèi)（在< head > 標(biāo)簽內(nèi)加入< style >標(biāo)簽進(jìn)行設(shè)置）

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>CSS的引入方式2</title>
        <!--第二種引入方式：內(nèi)部樣式-->
        <!-- 優(yōu)勢(shì)：實(shí)現(xiàn)了標(biāo)簽和樣式的分離，讓代碼的可讀性更高 -->
    <style>
        p{
            color: #c481ff
        }
    </style></head><body><p>我是段落標(biāo)簽</p></body></html>

3.使用外部.css文件設(shè)置css文本，如1.css

第一種：用@import "1.css"將css文件引入；
第二種：通過< link >將css文件引入。

本處用的1.css文件內(nèi)容：
CSS的基礎(chǔ)使用方法有哪些

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>CSS的引入方式3</title>

    <!--第一種：鏈接式(建議使用)-->
    <!--rel屬性（relation）是當(dāng)前這個(gè)HTML頁面與鏈接進(jìn)來的樣式表之間的關(guān)系，在此鏈接進(jìn)來的是本頁面的樣式表
        href屬性寫樣式表的路徑-->
    <link rel="stylesheet" href="1.css">

    <!--第二種：導(dǎo)入式(不建議使用)-->
    <style>
        @import "1.css";
    </style></head><body><!--第三種引入方式：外部樣式（有兩種）--><!--小提示：新建.css文件的方法，在pycharm中是新建Stylesheet文件--><!-- 優(yōu)勢(shì):實(shí)現(xiàn)了html文件和樣式的分離，讓代碼的可讀性更高，而且讓代碼的復(fù)用性也更高！ --><p>我是段落標(biāo)簽2</p></body></html>
小知識(shí)點(diǎn)：

@import導(dǎo)入式不推薦使用，因?yàn)榇嬖谌毕荩涸谡麄€(gè)網(wǎng)頁裝載完之后再裝載.CSS文件，如果網(wǎng)頁文件過大時(shí)，會(huì)導(dǎo)致先出現(xiàn)無樣式的頁面，閃爍以后再出現(xiàn)樣式網(wǎng)頁。
而推薦使用< link >，因?yàn)樗窍妊b載.css文件，再裝載網(wǎng)頁

總結(jié)—上述三種引入方式的異同：

在實(shí)際開發(fā)中我們不使用行內(nèi)樣式！
使用最多的是外部樣式。

一般寫demo的時(shí)候使用內(nèi)部樣式————因?yàn)榻o別人發(fā)demo的時(shí)候，只發(fā)一個(gè)文件即可。  


無論是外部樣式，內(nèi)部樣式還是行內(nèi)樣式，都會(huì)生效，它們共同為標(biāo)簽添加樣式。

如果一個(gè)標(biāo)簽通過外部樣式，內(nèi)部樣式設(shè)置了同一類樣式（值不同），會(huì)產(chǎn)生覆蓋效果————覆蓋的原則：后寫的樣式覆蓋先寫的樣式！

第二部分：選擇器

（1）選擇器權(quán)重：

現(xiàn)實(shí)生活中—誰的權(quán)利大，就聽誰的，同理，選擇器權(quán)重也是一樣，誰的權(quán)重值高，應(yīng)用誰的。這里的權(quán)重高低通過精確度評(píng)判，精確度越高，權(quán)重越大。

（2）選擇器的用處：

用于準(zhǔn)確的選中元素（就是HTML種講的標(biāo)簽），并賦予樣式。

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

作用：根據(jù)標(biāo)簽的名字找到標(biāo)簽；
注意：它會(huì)找到所有的同名標(biāo)簽。
<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>標(biāo)簽選擇器</title>
    
    <style>
        /*標(biāo)簽選擇器。直接把頁面中的標(biāo)簽當(dāng)做一個(gè)選擇器進(jìn)行選擇*/
        p{
            color: chartreuse;

        }
    </style>
    </head><body><p>我是段落標(biāo)簽1</p><p>我是段落標(biāo)簽2</p></body></html>
注意：

你可以理解為下圖這個(gè)整體叫做選擇器！??！
CSS的基礎(chǔ)使用方法有哪些

2.類選擇器（class選擇器）

通過標(biāo)簽的class屬性，選擇對(duì)應(yīng)的元素，借助了一個(gè)類的概念，一處定義，可以多處使用。
使用場(chǎng)景：它的作用對(duì)多個(gè)標(biāo)簽（往往需要相同的樣式）設(shè)置樣式。
一個(gè)標(biāo)簽可以設(shè)置多個(gè)class值，值與值之間用空格隔開，這個(gè)標(biāo)簽會(huì)具有所有class包含的樣式。
<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>類選擇器</title>

    <style>
        /*類選擇器，也稱class選擇器。通過.進(jìn)行選擇*/
        .p1{
            color:red;
        }
    </style></head><body><p class="p1">我是段落標(biāo)簽</p></body></html>
小tip：

類選擇器可以選擇多個(gè)，因?yàn)閏lass屬性不唯一；
但是id選擇器只能選擇一個(gè)，因?yàn)閕d是唯一的。

3.id選擇器

通過標(biāo)簽的id屬性，選擇對(duì)應(yīng)的元素。
<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>id選擇器</title>

    <style>
         /*第三種選擇器：id選擇器  通過#進(jìn)行選擇*/
        #p2{
            color:cadetblue;
        }
    </style></head><body><p id="p2">我是段落標(biāo)簽</p></body></html>
小tip：

以上三個(gè)選擇器的權(quán)重： id選擇器 > 類選擇器 >標(biāo)簽選擇器

拓展：如果一個(gè)標(biāo)簽同時(shí)通過id選擇器和類選擇器設(shè)置了同一個(gè)樣式，而我們想要其類選擇器設(shè)置的樣式（background-color）生效，但是看上面選擇器權(quán)重——類選擇器的權(quán)重是低于id選擇器的，應(yīng)該是id選擇器設(shè)置的樣式生效。但是我們可以通過在指定樣式后添加!import來使其生效?。?！

!important是權(quán)重最大的！??！
注意：!important只能作用于單個(gè)樣式的值，它不是選擇器！
CSS的基礎(chǔ)使用方法有哪些

4.群組選擇器

群組選擇器是可以同時(shí)選擇多個(gè)標(biāo)簽的選擇器。
<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>群組選擇器</title>

    <style>
        /*第四種選擇器：群組選擇器  不同選擇器之間用逗號(hào)隔開。*/
        p,span{
            color: #ff82c1;
        }
    </style></head><body><p>我是段落標(biāo)簽</p><span>我是文本標(biāo)簽</span><h2>我是一級(jí)標(biāo)簽</h2></body></html>

5.全選擇器

顧名思義，選擇所有標(biāo)簽！
<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>全選擇器</title>

    <style>
        /*第五種選擇器：全選擇器 通過*選擇此頁面的所有元素，進(jìn)行統(tǒng)一的樣式設(shè)置*/
        *{
            color: #a3ff50
        }
    </style></head><body><p>我是段落標(biāo)簽</p><h2>我是一級(jí)標(biāo)題</h2><h3>我是二級(jí)標(biāo)簽</h3><span>我是文本標(biāo)簽</span></body></html>

6.層次選擇器（分為后代，子代，相鄰和兄弟四種選擇器）

注       意：塊狀標(biāo)簽可以嵌套內(nèi)聯(lián)標(biāo)簽和其他塊狀標(biāo)簽；內(nèi)聯(lián)標(biāo)簽只能嵌套文本和其他內(nèi)聯(lián)標(biāo)簽,但不能嵌套塊狀標(biāo)簽。
有個(gè)特例：p標(biāo)簽和h標(biāo)簽不能嵌套塊狀標(biāo)簽，也不能嵌套本身，只能嵌套內(nèi)聯(lián)標(biāo)簽?。?！

（1）后代選擇器

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>后代選擇器</title>

    <style>
        /*層次選擇器第一種：后代選擇器  用空格隔開*/
        /*后代是它里面嵌套的所有標(biāo)簽*/
        /*此例就是p標(biāo)簽里的所有的ol標(biāo)簽，不管ol里嵌套多少ol，都是p的后代*/
        p ol{
            list-style: none;
        }
    </style>
    </head><body><p>
    <ol>
        <li>我是有序列表1</li>
        <li>我是有序列表2</li>
        <li>我是有序列表3            <ol>
                <li>我是有序列表111</li>
                <li>我是有序列表222</li>
            </ol>
        </li>
    </ol></p></body></html>

（2）子代選擇器（可以往里一層一層的選）

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>子代選擇器</title>

    <style>
        /*層次選擇器第二種：子代選擇器 用>隔開*/
        /*子代選擇器只能選擇他的兒子，在此就是選擇id為ul1的無序列表的兒子*/
        /* 上述語法格式中的選擇器可以是id選擇器，class選擇器也可以是標(biāo)簽名選擇器 */
        #ul1>li{
            list-style: none;       /*這個(gè)屬性作用是去除列表的樣式，代表去掉無序列表前面的小圓圈*/
        }
    </style></head><body><!--子代選擇器  顏色，字體等等在子代選擇器里會(huì)繼承。所以此處用list-style屬性進(jìn)行觀察--><ul id="ul1">
    <li>1</li>
    <li>2</li>
    <li>3    <ul>
        <li>11</li>
        <li>22</li>
        <li>33</li>
    </ul>
    </li></ul></body></html>

（3）兄弟選擇器

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>兄弟選擇器</title>

    <style>
        /*層次選擇器第三種：兄弟選擇器  用~進(jìn)行選擇*/
        /*只要是有同一個(gè)父親的就稱為兄弟*/
        /*在本例中，id為p2的父親是body，所以body里都是他的兄弟
        又因?yàn)榇a是從上向下執(zhí)行的，所以不會(huì)選中  我是段落標(biāo)簽1*/
        #p2~p{
            color:#ff8971        }
    </style></head><body><p>我是段落標(biāo)簽1</p><p id="p2">我是段落標(biāo)簽2</p><p>我是段落標(biāo)簽3</p><p>我是段落標(biāo)簽4</p></body></html>

（4）相鄰選擇器（相鄰兄弟選擇器）

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>相鄰兄弟選擇器</title>

    <style>
        /*層次選擇器第四種：相鄰選擇器（相鄰兄弟選擇器）  用+進(jìn)行選擇*/
        /*先是找兄弟，然后選擇其中相鄰的*/
        /*在本例中，因?yàn)榇a是從上向下執(zhí)行的，所以不會(huì)選中  我是段落標(biāo)簽1*/
        #p2+p{
            color:#ff8971
        }
    </style></head><body><p>我是段落標(biāo)簽1</p><p id="p2">我是段落標(biāo)簽2</p><p>我是段落標(biāo)簽3</p><p>我是段落標(biāo)簽4</p></body></html>

7.屬性選擇器

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>屬性選擇器</title>

    <style>
        /*屬性選擇器  選中所有p標(biāo)簽里有name屬性的   常用于Input里
           如果只想選中   我是段落標(biāo)簽1  ，那么就改為p[name="p1"]即可*/
        p[name]{
            color: red;
        }
    </style></head><body><p name="p1">我是段落標(biāo)簽1</p><p name="p2">我是段落標(biāo)簽2</p><p name="p3">我是段落標(biāo)簽3</p><p>我是段落標(biāo)簽4</p></body></html>

選擇器的一個(gè)使用總結(jié)：

權(quán)重大小比較總結(jié)一句話：越具體（就是一開始說的準(zhǔn)確度）權(quán)重越大；越模糊權(quán)重越??！
CSS的基礎(chǔ)使用方法有哪些
CSS的基礎(chǔ)使用方法有哪些

8.偽類選擇器

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>偽類選擇器</title>
    
    <!--偽類選擇器-->
    <!-- 語法格式——  選擇器：偽類名 -->
    <!-- 如果要給一個(gè)元素加4個(gè)偽類，一定要遵守一個(gè)順序（link  visited  hover   active） -->
    <style>
        /*未訪問超鏈接時(shí)的樣式    有超鏈接地址時(shí)（僅適用于a標(biāo)簽）*/
        a:link{
            color: #ff25ec;
        }
        /*鼠標(biāo)懸浮時(shí)的樣式     適用于所有標(biāo)簽*/
        a:hover{
            color: #3b29ff;
        }
        /*激活狀態(tài)時(shí)，即點(diǎn)擊的時(shí)候    適用于所有標(biāo)簽*/
        a:active{
            color: #ff9d47;

        }
        /* 訪問過后，點(diǎn)擊完超鏈接之后 （僅適用于a標(biāo)簽）*/
        a:visited{
            color:green;
        }
    </style>
    </head><body><!--#表示空鏈接--><a href="#">我是超鏈接</a></body></html>

第三部分：常用的字體的樣式

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>字體的常用樣式</title>
    <style>
        p{
            /*字體的類型（例如：黑體，宋體，仿宋...）*/
            font-family: 黑體;
            
            /*字體的大小（默認(rèn)字號(hào)是16px）*/
            font-size: 30px;
            
            /*字體的樣式（斜體italic  或者   正常normal）*/
            font-style: italic;
            
            /*字體的粗細(xì)（默認(rèn)粗細(xì)是normal——400）    bold是粗體*/
            font-weight: bold;
            
            /*字體的小大寫  把英文小寫字母變?yōu)榇髮懽帜?nbsp; 大小不變*/
            font-variant: small-caps;
            
            /*字體的復(fù)合樣式，要注意順序,其實(shí)就是上面樣式的一個(gè)總寫
            順序?yàn)椋簊tyle variant weight size/height family  可以少寫！*/
            font:italic small-caps normal 50px 黑體;
        }
    </style></head><body><p>我是段落標(biāo)簽</p><p>HELLO</p><p>hello</p></body></html>

第四部分：文本的常用樣式

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>文本常用樣式</title>
    <style>
        p{
            /*用于設(shè)置標(biāo)簽內(nèi)的文本的對(duì)齊方式————left（左對(duì)齊，默認(rèn)）；center（居中對(duì)齊）;right（右對(duì)齊）*/
            text-align: left;
			
			/* 用于設(shè)置標(biāo)簽內(nèi)單行文本的高度*/
			line-height:40px;			

            /*首行縮進(jìn)  em是一個(gè)中文字距  也可以用px單位   1em=16px*/
            text-indent:2em;

            /*文本線   underline是下劃線；  line-through稱為刪除線  overline（上劃線）  none為去除文本線*/
            text-decoration: underline;

            /*字與字之間的距離*/
            letter-spacing: 1em;

            /*詞距  在底下p標(biāo)簽里寫文本，空格隔開就是一個(gè)單詞*/
            word-spacing:50px;

            /*行高     可以撐起高度*/
            /*撐起高度就是可以通過設(shè)置行高把元素的高度撐到行高那么高*/
            /*有個(gè)應(yīng)用：?jiǎn)涡形谋敬怪本又校ㄔ诖怪狈较蚓又校焊叨?行高*/
            line-height: 50px;		
			
			/* 用于設(shè)置換行模式————normal（默認(rèn)，滿了一行后正常換行）；nowrap（不換行）*/
			white-space: normal;
			
			/* 用于設(shè)置內(nèi)容超出標(biāo)簽的處理辦法————hidden（超出部分隱藏）;*/
			overflow: hidden;
			
			/* 用于設(shè)置文本溢出標(biāo)簽時(shí)，文本要做什么事情————ellipsis（用于設(shè)置顯示省略號(hào)） */
			text-overflow: ellipsis; 
        }

        a{
            /*用于設(shè)置文本的裝飾模式————underline（下劃線）；line-through（中劃線）;overline（上劃線）*/
            /* 可以通過設(shè)置為none去除超鏈接下的下劃線！ */
            text-decoration: none;
        }

    </style></head><body><!--注意：如果是內(nèi)聯(lián)標(biāo)簽，比如span是內(nèi)聯(lián)標(biāo)簽，始終都是居中狀態(tài)，改對(duì)齊方式?jīng)]用。
因?yàn)閮?nèi)聯(lián)元素設(shè)置寬高無效，只與內(nèi)容有關(guān)。--><p>我是一個(gè)段落標(biāo)簽</p><p>中國 上海 河南</p><a href="">111</a></body></html>

行高的應(yīng)用之實(shí)現(xiàn)單行文本垂直居中：

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>行高的一個(gè)應(yīng)用</title>
    <style>
        p{
            /*通過讓行高=高度，實(shí)現(xiàn)單行文本的垂直居中*/
            height: 200px;  /*高度*/
            line-height: 200px;  /*行高*/
        }
    </style></head><body><p>我是段落標(biāo)簽</p></body></html>

第五部分：背景的常用樣式

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>背景的常用樣式</title>
    <style>
        p{
            /*設(shè)置p的寬高*/
            /* 行元素?zé)o法設(shè)置寬高；塊元素或者行級(jí)塊元素可以設(shè)置寬高。如果不設(shè)置寬高，那么使用默認(rèn)寬度——和父標(biāo)簽的寬度一樣；如果不設(shè)置高度，那么使用默認(rèn)高度是由內(nèi)容撐起！  */
            width:300px;
            height:300px;

            /*設(shè)置背景顏色*/
            /* 背景顏色的寫法：1.代表顏色的英文單詞（例如：red,yellow...）；
            				2.#加6位16進(jìn)制數(shù)（6位中前兩位是紅，中間兩位是綠，后兩位是藍(lán)。紅綠藍(lán)的取值范圍是00~FF/ff）————開發(fā)中最常用的寫法；
            				3.rgb（紅，綠，藍(lán)）函數(shù)獲取一個(gè)顏色————一般用于JS代碼；
            				4.rgba（紅，綠，藍(lán)，不透明度）函數(shù)獲取一個(gè)顏色————一般用于JS代碼  */
            background-color: #a3ff50;

            /*背景圖片 url寫圖片的路徑*/
            background-image: url("");

            /*設(shè)置背景的大小  也可使用百分比，是參照它的容器*/
            background-size:100px 100px;

            /*背景平鋪  不平鋪 平鋪意思：如果背景圖很小，那么就可以在這個(gè)p上放多個(gè)。不平鋪就是只放一個(gè)*/
            background-repeat: no-repeat;

            /*背景定位  可以使用百分比定位（兩個(gè)百分比數(shù)據(jù)，第一個(gè)是相對(duì)于左，第二個(gè)是相對(duì)于上）*/
            background-position: center;

            /*復(fù)合樣式 也要按照順序（中間空格隔開，如果不想定位而設(shè)置大小，將定位的那個(gè)屬性值寫為0）
            屬性的順序是：background-color bacfground-image background-repeat background-position/background-size */
            background:red url("")  ;

        }
    </style></head><body><p></p></body></html>

小拓展：使用CSS實(shí)現(xiàn)漸變色：

（1）漸變色之線性漸變

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>漸變色之線性漸變</title>
    <style>
        #p1{
            width:300px;
            height: 300px;
            /*linear-gradient()函數(shù)用于實(shí)現(xiàn)線性漸變*/
            /*注意：顏色的漸變實(shí)現(xiàn)是靠漸變的圖像實(shí)現(xiàn)的，在函數(shù)里可以放多個(gè)顏色實(shí)現(xiàn)漸變*/
            /*漸變的效果默認(rèn)是從上往下漸變填入的顏色
            to right,to left,to top,to buttom right(從左上往右下漸變)
            也可以以一定角度進(jìn)行漸變，格式為：度數(shù)deg,比如：90deg */
            background-image: linear-gradient(to left,skyblue,pink);
        }
    </style></head><body><p id="p1" class="p2"></p></body></html>

（2）漸變色之徑向漸變

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>漸變色之徑向漸變</title>
    <style>
        #p1{
            width: 200px;
            height: 300px;
            /*radial-gradient()函數(shù)用于實(shí)現(xiàn)徑向漸變*/
            /*注意：顏色的漸變實(shí)現(xiàn)都是靠漸變的圖像實(shí)現(xiàn)的*/
            /*默認(rèn)是從最中心向外發(fā)散進(jìn)行漸變（ellipse是橢圓形狀的漸變）
                						circle(形狀變?yōu)閳A)*/
            background-image: radial-gradient(ellipse,skyblue,pink,white);

        }
    </style></head><body><p id="p1"></p></body></html>

（3）拓展一個(gè)文本漸變色的實(shí)現(xiàn)：

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>漸變色之文字漸變</title>
    <style>
        span{
            /*給背景設(shè)置漸變色*/
            /*默認(rèn)文字的顏色漸變是從上往下漸變的
                改漸變的方向的話在顏色前面加，比如：to right*/
            background-image: linear-gradient(to right,blue,black);
            /*規(guī)定這個(gè)背景漸變色繪制的區(qū)域 在此設(shè)置為文本那個(gè)區(qū)域*/
            -webkit-background-clip: text;
            /*把原本的文字設(shè)置為透明的*/
            color: transparent;
        }
    </style></head><body><!--文字本身是不能設(shè)置漸變的，我們是通過設(shè)置背景的漸變來實(shí)現(xiàn)文字的漸變的--><span>我是漸變的文字，我超級(jí)帥！</span></body></html>

以上是“CSS的基礎(chǔ)使用方法有哪些”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

分享文章：CSS的基礎(chǔ)使用方法有哪些
文章轉(zhuǎn)載：http://muchs.cn/article36/pisisg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供域名注冊(cè)、響應(yīng)式網(wǎng)站、用戶體驗(yàn)、網(wǎng)站營銷、ChatGPT、App開發(fā)

廣告

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

成都網(wǎng)站建設(shè)公司