整合營銷服務(wù)商

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費(fèi)咨詢熱線:

          HTML 中引入 CSS 的方式

          4 種方式可以在 HTML 中引入 CSS。其中有 2 種方式是在 HTML 文件中直接添加 CSS 代碼,另外兩種是引入 外部 CSS 文件。下面我們就來看看這些方式和它們的優(yōu)缺點(diǎn)。

          內(nèi)聯(lián)方式

          內(nèi)聯(lián)方式指的是直接在 HTML 標(biāo)簽中的 style 屬性中添加 CSS。

          示例:

          <div style="background: red"></div>
          

          這通常是個(gè)很糟糕的書寫方式,它只能改變當(dāng)前標(biāo)簽的樣式,如果想要多個(gè) <div> 擁有相同的樣式,你不得不重復(fù)地為每個(gè) <div> 添加相同的樣式,如果想要修改一種樣式,又不得不修改所有的 style 中的代碼。很顯然,內(nèi)聯(lián)方式引入 CSS 代碼會(huì)導(dǎo)致 HTML 代碼變得冗長,且使得網(wǎng)頁難以維護(hù)。

          嵌入方式

          嵌入方式指的是在 HTML 頭部中的 <style> 標(biāo)簽下書寫 CSS 代碼。

          示例:

          <head>
           <style>
           .content {
           background: red;
           }
           </style>
          </head>
          

          嵌入方式的 CSS 只對(duì)當(dāng)前的網(wǎng)頁有效。因?yàn)?CSS 代碼是在 HTML 文件中,所以會(huì)使得代碼比較集中,當(dāng)我們寫模板網(wǎng)頁時(shí)這通常比較有利。因?yàn)椴榭茨0宕a的人可以一目了然地查看 HTML 結(jié)構(gòu)和 CSS 樣式。因?yàn)榍度氲?CSS 只對(duì)當(dāng)前頁面有效,所以當(dāng)多個(gè)頁面需要引入相同的 CSS 代碼時(shí),這樣寫會(huì)導(dǎo)致代碼冗余,也不利于維護(hù)。

          鏈接方式

          鏈接方式指的是使用 HTML 頭部的 <head> 標(biāo)簽引入外部的 CSS 文件。

          示例:

          <head>
           <link rel="stylesheet" type="text/css" href="style.css">
          </head>
          

          這是最常見的也是最推薦的引入 CSS 的方式。使用這種方式,所有的 CSS 代碼只存在于單獨(dú)的 CSS 文件中,所以具有良好的可維護(hù)性。并且所有的 CSS 代碼只存在于 CSS 文件中,CSS 文件會(huì)在第一次加載時(shí)引入,以后切換頁面時(shí)只需加載 HTML 文件即可。

          導(dǎo)入方式

          導(dǎo)入方式指的是使用 CSS 規(guī)則引入外部 CSS 文件。

          示例:

          <style>
           @import url(style.css);
          </style>
          

          比較鏈接方式和導(dǎo)入方式

          鏈接方式(下面用 link 代替)和導(dǎo)入方式(下面用 @import 代替)都是引入外部的 CSS 文件的方式,下面我們來比較這兩種方式,并且說明為什么不推薦使用 @import

          • link 屬于 HTML,通過 <link> 標(biāo)簽中的 href 屬性來引入外部文件,而 @import 屬于 CSS,所以導(dǎo)入語句應(yīng)寫在 CSS 中,要注意的是導(dǎo)入語句應(yīng)寫在樣式表的開頭,否則無法正確導(dǎo)入外部文件;
          • @import 是 CSS2.1 才出現(xiàn)的概念,所以如果瀏覽器版本較低,無法正確導(dǎo)入外部樣式文件;
          • 當(dāng) HTML 文件被加載時(shí),link 引用的文件會(huì)同時(shí)被加載,而 @import 引用的文件則會(huì)等頁面全部下載完畢再被加載;

          小結(jié):我們應(yīng)盡量使用 <link> 標(biāo)簽導(dǎo)入外部 CSS 文件,避免或者少用使用其他三種方式。

          ss怎么引入html

          在HTML中引入CSS的方法主要有四種:

          1. 內(nèi)聯(lián)方式:直接在HTML標(biāo)簽中的style屬性中添加CSS,即采用行內(nèi)樣式。例如:<p style="color:red;">這是紅色文字</p>。這種方式的優(yōu)點(diǎn)是可以直接在HTML文件中看到效果,但缺點(diǎn)是不夠模塊化,不便于復(fù)用和維護(hù)。

          2. 內(nèi)嵌樣式:使用<style>標(biāo)簽在HTML文檔頭部(<head><head>之間)定義CSS樣式。例如:

          <head>

          <style>

          p {

          color: red;

          }

          </style>

          </head>

          <body>

          <p>這是紅色文字</p>

          </body>

          這種方式的優(yōu)點(diǎn)是可以將CSS樣式與HTML內(nèi)容分離,提高代碼可讀性,但同樣存在復(fù)用和維護(hù)的問題。

          3. 鏈接式:使用<link>標(biāo)簽引入外部CSS樣式表文件。具體操作步驟如下:新建一個(gè)HTML文件和一個(gè)CSS文件,將新建的CSS文件保存在一個(gè)文件夾中,回到HTML文件中,在<title><title>下方添加<link>標(biāo)簽并設(shè)置其屬性為CSS文件的路徑,保存后便實(shí)現(xiàn)了引入外部CSS文件。這種方式的優(yōu)點(diǎn)是可以實(shí)現(xiàn)代碼的復(fù)用和維護(hù),但需要提前準(zhǔn)備好CSS文件。

          4. 導(dǎo)入式:使用@import命令導(dǎo)入外部CSS樣式表。例如:<style type="text/css"> @import"mystyle.css"; </style>。需要注意的是,這里的路徑需要是正確的。這種方式可以在同一個(gè)HTML文件中引入多個(gè)CSS文件,但瀏覽器對(duì)@import的支持程度不同,可能會(huì)出現(xiàn)兼容性問題。

          SS文本屬性

          CSS text(文本)屬性就是設(shè)置文本的外觀,比如字體顏色對(duì)齊方式縮進(jìn)行間距等。

          • 文本顏色

          屬性名:color。

          屬性值

          顏色英文單詞:color:red;

          16進(jìn)制顏色值:color:#000000;

          RGB代碼:color: rgb(255,255,255)或rgb(100%,0%,0%)

          一般在開發(fā)中常用的是十六進(jìn)制寫法。

          代碼示例:

          <head>
            <style>
            		/* 文本顏色屬性 */
                  .red {
                      color: red;
                  }
                  .colorNum {
                      color: #f00;
                  }
                  .colorRgb{
                      color: rgb(255, 0, 0);
                  }
            </style>  
          </head>
          <body>
               <!-- 文本顏色屬性 -->
              <p class="red">我是文本屬性的單詞顏色設(shè)置</p>
              <p class="colorNum">我是文本屬性的16進(jìn)制顏色設(shè)置</p>
              <p class="colorRgb">我說文本屬性的rgb顏色設(shè)置</p>
          </body>

          代碼運(yùn)行界面

          • 文本對(duì)齊方式

          屬性名:text-align。

          屬性值

          “text-align: left”:默認(rèn)值,文本左對(duì)齊。

          “text-align:center”:文本居中對(duì)齊。

          “text-align:right”:文本右對(duì)齊。

          代碼示例:

          <head>
            <style>
            		/* 文本對(duì)齊方式 */
                  .l {
                      text-align: left;
                  }
                  .cen {
                      text-align: center;
                  }
                  .ri {
                      text-align: right;
                  }
            </style>  
          </head>
          <body>
              <!-- 文本對(duì)齊方式 -->
              <p class="l">文本左對(duì)齊</p>
              <p class="cen">文本居中對(duì)齊</p>
              <p class="ri">文本右對(duì)齊</p>
          </body>

          運(yùn)行界面:

          • 文本裝飾

          屬性:text-decoration。

          屬性值

          “text-decoration:none”:默認(rèn)值,沒有裝飾線。

          “text-decoration:underline”:給文本添加下劃線。

          注意:a標(biāo)簽中自帶下劃線,可以使用默認(rèn)值屬性去除a標(biāo)簽的下劃線。

          “text-decoration:overline”:給文本添加上劃線。

          “text-decoration:line-through”:給文本添加刪除線。

          代碼示例:

          <head>
            <style>
            		/* 文本裝飾線 */
                  .nor {
                      text-decoration: none;
                  }
                  .underl {
                      text-decoration: underline;
                  }
                  .upl {
                      text-decoration: overline;
                  }
                  .lineTh {
                      text-decoration: line-through;
                  }
            </style>  
          </head>
          <body>
              <!-- 文本裝飾 -->
              <p class="nor">文本裝飾線:默認(rèn)狀態(tài)</p>
              <p class="underl">文本裝飾線:文本添加下劃線</p>
              <p class="lineTh">文本裝飾線:文本添加刪除線</p>
              <p class="upl">文本裝飾線:文本添加上劃線</p>
              <a href="#">我是超鏈接標(biāo)簽,文本自帶下劃線</a><br>
              <a href="#" class="nor">我是超鏈接標(biāo)簽,文本自帶下劃線。使用默認(rèn)值屬性,可去除文本下劃線</a>
          </body>

          運(yùn)行界面:

          • 文本縮進(jìn)

          屬性名:text-indent。通常指段落首行縮進(jìn)。

          屬性值:px或em。

          em是一個(gè)相對(duì)單位,

          如果當(dāng)前元素已經(jīng)設(shè)置文字大小,就按照當(dāng)前元素1個(gè)文字的大小顯示縮進(jìn)。

          如果當(dāng)前元素中沒有設(shè)置,則按照父元素的1個(gè)文字大小,即1個(gè)em=16px顯示縮進(jìn)。

          代碼示例:

          <head>
            <style>
            		/* 文本縮進(jìn) */
                  .indEm {
                      text-indent: 2em;
                      /* em是一個(gè)相對(duì)單位,
                      在沒有設(shè)置文字大小時(shí),按照默認(rèn)字體大小,即16px顯示。
                      設(shè)置了文字大小,則按照設(shè)置的文字大小,幾個(gè)em就是幾個(gè)文字大小進(jìn)行顯示。
                      */
                  }
                  .indPx {
                      /* 像素是絕對(duì)單位,設(shè)置幾就是幾 */
                      text-indent: 32px;
                  }
            </style>  
          </head>
          <body>
              <!-- 文本縮進(jìn) -->
              <p class="indPx">我是段落標(biāo)簽,試試首行縮進(jìn)屬性。一般指的是首行縮進(jìn),段落的第一行進(jìn)行縮進(jìn)。
                  我是段落標(biāo)簽,試試首行縮進(jìn)屬性。一般指的是首行縮進(jìn),段落的第一行進(jìn)行縮進(jìn)。
                  我是段落標(biāo)簽,試試首行縮進(jìn)屬性。一般指的是首行縮進(jìn),段落的第一行進(jìn)行縮進(jìn)。
                  我是段落標(biāo)簽,試試首行縮進(jìn)屬性。一般指的是首行縮進(jìn),段落的第一行進(jìn)行縮進(jìn)。
                  我是段落標(biāo)簽,試試首行縮進(jìn)屬性。一般指的是首行縮進(jìn),段落的第一行進(jìn)行縮進(jìn)。
                  我是段落標(biāo)簽,試試首行縮進(jìn)屬性。一般指的是首行縮進(jìn),段落的第一行進(jìn)行縮進(jìn)。
                  我是段落標(biāo)簽,試試首行縮進(jìn)屬性。一般指的是首行縮進(jìn),段落的第一行進(jìn)行縮進(jìn)。
              </p>
              <p class="indEm">我是段落標(biāo)簽,試試首行縮進(jìn)屬性。一般指的是首行縮進(jìn),段落的第一行進(jìn)行縮進(jìn)。
                  我是段落標(biāo)簽,試試首行縮進(jìn)屬性。一般指的是首行縮進(jìn),段落的第一行進(jìn)行縮進(jìn)。
                  我是段落標(biāo)簽,試試首行縮進(jìn)屬性。一般指的是首行縮進(jìn),段落的第一行進(jìn)行縮進(jìn)。
                  我是段落標(biāo)簽,試試首行縮進(jìn)屬性。一般指的是首行縮進(jìn),段落的第一行進(jìn)行縮進(jìn)。
                  我是段落標(biāo)簽,試試首行縮進(jìn)屬性。一般指的是首行縮進(jìn),段落的第一行進(jìn)行縮進(jìn)。
                  我是段落標(biāo)簽,試試首行縮進(jìn)屬性。一般指的是首行縮進(jìn),段落的第一行進(jìn)行縮進(jìn)。
                  我是段落標(biāo)簽,試試首行縮進(jìn)屬性。一般指的是首行縮進(jìn),段落的第一行進(jìn)行縮進(jìn)。
              </p>
          </body>

          運(yùn)行界面:

          • 行間距

          屬性名:ling-height。用于設(shè)置文本的行高。即行與行之間的距離。

          行間距=文本高度+上間距+下間距。(上間距=下間距)

          行間距調(diào)整就是設(shè)置的上下間距的高

          屬性值:px或em。

          代碼示例:

          <head>
            <style>
            		/* 行間距 */
                  .lH {
                      line-height: 3em;
                  }
            </style>  
          </head>
          <body>
              <!-- 行間距 -->
              <p class="lH">
                  我是段落標(biāo)簽,測試行間距屬性。我是段落標(biāo)簽,測試行間距屬性。我是段落標(biāo)簽,測試行間距屬性。
                  我是段落標(biāo)簽,測試行間距屬性。我是段落標(biāo)簽,測試行間距屬性。我是段落標(biāo)簽,測試行間距屬性。
                  我是段落標(biāo)簽,測試行間距屬性。我是段落標(biāo)簽,測試行間距屬性。我是段落標(biāo)簽,測試行間距屬性。
                  我是段落標(biāo)簽,測試行間距屬性。我是段落標(biāo)簽,測試行間距屬性。我是段落標(biāo)簽,測試行間距屬性。
                   我是段落標(biāo)簽,測試行間距屬性。我是段落標(biāo)簽,測試行間距屬性。我是段落標(biāo)簽,測試行間距屬性。
                    我是段落標(biāo)簽,測試行間距屬性。我是段落標(biāo)簽,測試行間距屬性。我是段落標(biāo)簽,測試行間距屬性。
              </p>
          </body>

          運(yùn)行界面:

          CSS引入方式

          分為三類:行內(nèi)樣式表(行內(nèi)式)內(nèi)部樣式表(內(nèi)嵌式)外部樣式表(鏈接式)

          • 行內(nèi)樣式表:

          位置:直接寫在元素的開始標(biāo)簽中。

          特點(diǎn):書寫內(nèi)容少,權(quán)重級(jí)別高,只能控制一個(gè)標(biāo)簽,結(jié)構(gòu)樣式混亂。

          語法:style=”color: red;”

          注意:多個(gè)屬性之間使用空格分隔。

          代碼示例:

          <p style="color: red;">行內(nèi)樣式表:在使用屬性的元素開始標(biāo)簽中直接設(shè)置屬性。如給字體設(shè)置紅色屬性。</p>
          
          <p style="color: red; font-size:28px;">行內(nèi)樣式表:在使用屬性的元素開始標(biāo)簽中直接設(shè)置屬性。如給字體設(shè)置紅色屬性和字體28px。</p>
          • 內(nèi)部樣式表(內(nèi)嵌式)

          位置:在head標(biāo)簽下,和title標(biāo)簽并列。樣式屬性均包含在style標(biāo)簽中。

          特點(diǎn):部分結(jié)構(gòu)與樣式相分離,還是在同一html文件上。

          語法:

          <style>
          p {
          color: red;
          font-size: 28px;
          }
          </style>

          代碼示例:

          <head>
           	<title></title>
          	<style>
                  .styleP {
                      color: red;
                      font-size: 32px;;
                  }
          	</style>
          </head>
          <body>
          	<!-- 內(nèi)部樣式表 -->
              <p class="styleP">內(nèi)部樣式表:樣式屬性寫在同一個(gè)html文件中的head標(biāo)簽里,和title標(biāo)簽并列。</p>
          </body>
          • 外部樣式表(鏈接式)

          第一步:創(chuàng)建index.css文件,在文件中輸入樣式屬性,不用任何標(biāo)簽。

          第二步:在html文件的head標(biāo)簽中,添加link標(biāo)簽,引入css文件。

          第三步:給html文件中需要添加屬性的元素添加選擇器名稱。

          特點(diǎn):結(jié)構(gòu)和樣式全局分離,一個(gè)css文件可以控制多個(gè)html頁面。

          注意:在css文件中只有樣式?jīng)]有標(biāo)簽,即直接書寫標(biāo)簽器和屬性,不要寫style標(biāo)簽。

          代碼示例:

          第一步:新建index.css文件,設(shè)置樣式屬性。

          * {
              margin: 0;
              padding: 0;
          }
          .linC {
              font-size: 32px;
              color: blue;
          }

          第二步:在html文件的head標(biāo)簽中添加link標(biāo)簽引用css文件。

          <head>
            	<title>CSS樣式引入方式</title>
              <!-- 外部樣式表 -->
              <link rel="stylesheet" href="./index.css">
          </head>

          第三步:在標(biāo)簽中調(diào)用屬性。

          <body>
             	<!-- 外部樣式表 -->
              <p class="linC">
                  外部樣式表:<br>
                  第一步:新建一個(gè)css文件,文件中直接編輯樣式屬性,不需要添加style標(biāo)簽。<br>
                  第二步:使用css文件的html文檔,應(yīng)該在其head標(biāo)簽中添加link標(biāo)簽選擇css文件的存儲(chǔ)位置,<br>
                  第三步:調(diào)用css文件中的樣式。
              </p>
          </body>

          運(yùn)行界面:


          以上就是今天學(xué)習(xí)的內(nèi)容,明天繼續(xù)學(xué)習(xí)CSS的相關(guān)內(nèi)容,今天就到這里了,各位晚安!


          主站蜘蛛池模板: 国产欧美色一区二区三区| 日本成人一区二区| 制服中文字幕一区二区| 韩国福利影视一区二区三区| 国产一区三区二区中文在线 | 亚洲国产一区在线观看| 久久久久国产一区二区三区| 日韩aⅴ人妻无码一区二区| 亚洲AV无码一区二区二三区入口| 色狠狠AV一区二区三区| 精品无码国产AV一区二区三区| 亚洲日韩国产精品第一页一区| 午夜无码视频一区二区三区| 国产在线第一区二区三区| 亚洲AV成人一区二区三区观看| 久久久国产精品亚洲一区| 日本不卡一区二区三区视频| 国产一区二区三区免费| 久久国产一区二区| 亚洲成AV人片一区二区| 国精品无码一区二区三区在线| 伊人久久精品无码av一区| 亚洲毛片αv无线播放一区| 国产在线无码一区二区三区视频| 激情内射日本一区二区三区| 中文字幕亚洲一区二区va在线| 嫩B人妻精品一区二区三区| 中文字幕一精品亚洲无线一区| 国产乱码精品一区二区三区中文 | 婷婷亚洲综合一区二区| 成人精品一区二区三区电影| 日本一区二区三区久久| 免费无码AV一区二区| 久久精品一区二区三区中文字幕| 中文字幕一区二区区免| 免费视频精品一区二区三区| 亚洲一区二区三区无码国产| 亚洲国产AV无码一区二区三区| 国产日韩精品一区二区在线观看| 一区二区三区在线观看中文字幕 | 波多野结衣一区二区免费视频|