整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          兩種常用的CSS樣式文件引用方法

          兩種常用的CSS樣式文件引用方法

          疊樣式表(英文全稱:Cascading Style Sheets)是一種用來表現HTML或XML等文件樣式的計算機語言。CSS不僅可以靜態地修飾網頁,還可以配合各種腳本語言動態地對網頁各元素進行格式化。CSS 能夠對網頁中元素位置的排版進行像素級精確控制,支持幾乎所有的字體字號樣式,擁有對網頁對象和模型樣式編輯的能力。

          下面簡單介紹一下外部引用CSS兩種方式:link和@import。

          XML/HTML代碼

          <link rel="stylesheet" rev="stylesheet" href="CSS文件" type="text/css" media="all" />

          XML/HTML代碼

          <style type="text/css" media="screen">

          @import url("CSS文件");

          </style>

          兩者都是外部引用CSS的方式,但是存在一定的區別:

          區別1:默認的差別。link是XHTML標簽,除了加載CSS外,還可以定義RSS等其他事務;@import屬于CSS范疇,只能加載CSS。

          區別2:加載順序的差別。當一個頁面被加載的時候(就是被瀏覽者瀏覽的時候),link引用的CSS會同時被加載,而@import引用的CSS會等到頁面全部被下載完再被加載。所以有時候瀏覽@import加載CSS的頁面時開始會沒有樣式(就是閃爍),網速慢的時候還挺明顯

          區別3:兼容性的差別。由于@import是CSS2.1提出的所以老的瀏覽器不支持,@import只有在IE5以上的才能識別,而link標簽無此問題。

          區別4:使用dom控制樣式時的差別。當使用javascript控制dom去改變樣式的時候,只能使用link標簽,因為@import不是dom可以控制的。   @import可以在css中再次引入其他樣式表,比如可以創建一個主樣式表,在主樣式表中再引入其他的樣式表,如:   

          main.css ———————-

          @import “sub1.css”;

          @import “sub2.css”;

          sub1.css ———————-

          p {color:red;}

          sub2.css ———————-

          .myclass {color:blue}

          這樣更利于修改和擴展。

          更多 長沙網站開發 原創內容,請關注長沙蒲公英網絡。

          原創文章鏈接:http://www.0731pgy.com/a/news/IndustryNews/429.html

          SS文本屬性

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

          • 文本顏色

          屬性名:color。

          屬性值

          顏色英文單詞:color:red;

          16進制顏色值:color:#000000;

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

          一般在開發中常用的是十六進制寫法。

          代碼示例:

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

          代碼運行界面

          • 文本對齊方式

          屬性名:text-align。

          屬性值

          “text-align: left”:默認值,文本左對齊。

          “text-align:center”:文本居中對齊。

          “text-align:right”:文本右對齊。

          代碼示例:

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

          運行界面:

          • 文本裝飾

          屬性:text-decoration。

          屬性值

          “text-decoration:none”:默認值,沒有裝飾線。

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

          注意:a標簽中自帶下劃線,可以使用默認值屬性去除a標簽的下劃線。

          “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">文本裝飾線:默認狀態</p>
              <p class="underl">文本裝飾線:文本添加下劃線</p>
              <p class="lineTh">文本裝飾線:文本添加刪除線</p>
              <p class="upl">文本裝飾線:文本添加上劃線</p>
              <a href="#">我是超鏈接標簽,文本自帶下劃線</a><br>
              <a href="#" class="nor">我是超鏈接標簽,文本自帶下劃線。使用默認值屬性,可去除文本下劃線</a>
          </body>

          運行界面:

          • 文本縮進

          屬性名:text-indent。通常指段落首行縮進。

          屬性值:px或em。

          em是一個相對單位,

          如果當前元素已經設置文字大小,就按照當前元素1個文字的大小顯示縮進。

          如果當前元素中沒有設置,則按照父元素的1個文字大小,即1個em=16px顯示縮進。

          代碼示例:

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

          運行界面:

          • 行間距

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

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

          行間距調整就是設置的上下間距的高

          屬性值:px或em。

          代碼示例:

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

          運行界面:

          CSS引入方式

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

          • 行內樣式表:

          位置:直接寫在元素的開始標簽中。

          特點:書寫內容少,權重級別高,只能控制一個標簽,結構樣式混亂。

          語法:style=”color: red;”

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

          代碼示例:

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

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

          特點:部分結構與樣式相分離,還是在同一html文件上。

          語法:

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

          代碼示例:

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

          第一步:創建index.css文件,在文件中輸入樣式屬性,不用任何標簽。

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

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

          特點:結構和樣式全局分離,一個css文件可以控制多個html頁面。

          注意:在css文件中只有樣式沒有標簽,即直接書寫標簽器和屬性,不要寫style標簽。

          代碼示例:

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

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

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

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

          第三步:在標簽中調用屬性。

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

          運行界面:


          以上就是今天學習的內容,明天繼續學習CSS的相關內容,今天就到這里了,各位晚安!


          主站蜘蛛池模板: 亚洲av高清在线观看一区二区 | 麻豆一区二区99久久久久| 老熟妇高潮一区二区三区| 亚洲一区二区免费视频| 国产精品无圣光一区二区| 日韩人妻无码一区二区三区综合部 | 国产成人一区二区三区在线| 国产精品亚洲一区二区无码 | 国产精品一区二区AV麻豆| 亚洲爆乳精品无码一区二区| 天堂一区二区三区精品| 无码人妻精品一区二区三区9厂 | 亚洲一区二区高清| 色欲精品国产一区二区三区AV| 一区二区三区日韩精品| 免费精品一区二区三区在线观看| 一区二区三区精品视频| 一区二区三区观看| 亚洲乱码av中文一区二区| 精品国产高清自在线一区二区三区 | 国模私拍一区二区三区| 国产福利酱国产一区二区| 一区视频在线播放| 久久久久人妻一区二区三区| 国产一区二区在线观看麻豆 | 任你躁国语自产一区在| 国产精品乱码一区二区三 | 国产乱人伦精品一区二区| 久久久人妻精品无码一区| 中文字幕人妻AV一区二区| 国产在线精品一区二区三区直播 | 武侠古典一区二区三区中文| 99久久精品午夜一区二区| 在线观看国产区亚洲一区成人| 国产精品一区二区在线观看| 日韩国产免费一区二区三区| 日本在线一区二区| 亚洲日韩国产精品第一页一区| 国产麻豆精品一区二区三区| 亚洲AV成人一区二区三区在线看| 国产av熟女一区二区三区|