• <sub id="h4knl"><ol id="h4knl"></ol></sub>
    <sup id="h4knl"></sup>
      <sub id="h4knl"></sub>

      <sub id="h4knl"><ol id="h4knl"><em id="h4knl"></em></ol></sub><s id="h4knl"></s>
      1. <strong id="h4knl"></strong>

      2. CSS-層疊樣式表基礎(chǔ)教程

        時間:2024-08-10 05:17:33 CSS 我要投稿
        • 相關(guān)推薦

        CSS-層疊樣式表基礎(chǔ)教程

          層疊樣式表(Cascading Style Sheets,簡寫CSS),網(wǎng)頁可以使用CSS來決定文件的顏色、字體、排版等顯示特性。CSS最主要的目的是將文件的結(jié)構(gòu)和內(nèi)容(用HTML或其他相關(guān)的語言寫的)與文件的顯示樣式(CSS)分隔開來。比如HTML中H2標(biāo)志這一個二級標(biāo)題,它在級別上比一級標(biāo)題H1低,比三級標(biāo)題H3高,這個就是結(jié)構(gòu)上的信息。
         
          HTML文件中的每一個class或id都可以有自己的顯示特征,而且每一個沒有id特性的HTML結(jié)構(gòu)也可以有自己的顯示特征。這些結(jié)構(gòu)有的是HTML自己需要的,有的是專門為CSS設(shè)置的。
         
          使用CSS的優(yōu)點有:
         
          1.一個整個網(wǎng)站或其中一部分網(wǎng)頁的顯示信息被集中在一個地方,要改變它們很方便;
         
          2.不同的讀者可以有不同的樣式,比如有的讀者需要字體比較大;
         
          3.HTML文件本身的范圍變小了,它的結(jié)構(gòu)簡單了,它不需要包含顯示的信息。
         
          CSS信息可以來自:
         
          1.作者樣式
         
          ①作者可以在HTML文檔<head>標(biāo)簽中使用<link>標(biāo)簽調(diào)用獨立的外部樣式表(CSS文件)
         
          ②作者可以將CSS信息內(nèi)嵌在HTML頁面內(nèi)(元素直接使用style屬性)
         
          ③作者可以在HTML文檔<head>標(biāo)簽中定義嵌入式樣式表
         
          ④作者可以直接在HTML頁面內(nèi)定義+調(diào)用樣式表
         
          2.讀者樣式
         
          ⑤讀者可以在其瀏覽器內(nèi)設(shè)立一個地區(qū)性的CSS文件。這個CSS文件可以用在所有的HTML文件上
         
          3.瀏覽器的樣式
         
          ⑥假如外部沒有特別指定一個樣式的話,一般瀏覽器自己有一個內(nèi)在的樣式。
         
          其優(yōu)先級為:
         
          內(nèi)嵌樣式(在HTML元素內(nèi)部)>
         
          內(nèi)部調(diào)用樣式(在HTML元素周圍)>
         
          內(nèi)部嵌入樣式表(位于<head>標(biāo)簽內(nèi)部)>
         
          外部樣式表>(<link>調(diào)用調(diào)用外部樣式表)
         
          區(qū)域性CSS文件>
         
          瀏覽器缺省設(shè)置
         
          一、CSS規(guī)則由兩個主要的部分構(gòu)成:選擇器,以及一條或多條聲明(屬性+值),也就是調(diào)用+定義。
         
          1.元素選擇器,文檔的元素就是最基本的選擇器。
         
          ---------
         
          <H2><font color="red" bgcolor="white"><i>使用CSS</i></font></H2>
         
          上面的例子可以變成這樣:H2是選擇器,color和background是屬性,red和white是值(如果值為多個單詞,則要加引號)。
         
          <H2>使用CSS</H2>
         
          H2 { color: red; background: white; }
         
          ---------
         
          2.ID選擇器,id選擇器以"#"來定義。
         
          #red {color:red;}
         
          <p id="red">這個段落是紅色。</p>
         
          --------
         
          3.類選擇器,類選擇器以一個點號顯示(類名的第一個字符不能使用數(shù)字)。
         
          .center {text-align: center}
         
          <h1 class="center">
         
          This heading will be center-aligned
         
          </h1>
         
          4.屬性選擇器,對帶有指定屬性的HTML元素設(shè)置樣式。
         
          下面的例子為帶有title屬性的所有元素設(shè)置樣式:
         
          [title]
         
          {
         
          color:red;
         
          }
         
          5.p+CSS
         
          p+css是一種常見的網(wǎng)頁布局方法。p是用來排版的,而css是用來定義p的樣式。p+css通常采用外鏈的方式來調(diào)用層疊樣式表文件(style.css),用id和class來標(biāo)識區(qū)分網(wǎng)頁中不同結(jié)構(gòu)的特征。
         
          二、行內(nèi)樣式表
         
          除在HTML內(nèi)直接「定義+調(diào)用」之外(如上1.2.3.4.),也可于HTML內(nèi)直接使用style屬性。
         
          用style屬性設(shè)置顏色、字體和尺寸如下:
         
          <html>
         
          <body>
         
          <h1 style = "font-family:verdana">文章標(biāo)題</h1>
         
          <p style = "font-family:arial;color:red;font-size:20px;">文字內(nèi)容</p>
         
          <p style="color:red; background:yellow; font-weight:bold;">
         
          這個段落會被顯示為黃底紅字粗體。
         
          </p>
         
          </body>
         
          </html>
         
          1.網(wǎng)頁設(shè)計中常用的CSS屬性
         
          文字或元素的顏色:color
         
          字體:font-family
         
          文字大小:font-size
         
          段落首行縮進(jìn):text-indent(如「p {text-indent: 5em;}」)
         
          文本對齊方式:text-align(如「text-align:center」)
         
          背景顏色:background-color
         
          背景圖像:background-image
         
          列表樣式:list
         
          鼠標(biāo)樣式:cursor
         
          邊框樣式:border
         
          內(nèi)補(bǔ)白:padding
         
          外邊距:margin
         
          2.縮寫規(guī)則
         
          ①顏色縮寫:16進(jìn)制的色彩值,如果每兩位的值相同,可以進(jìn)行縮寫,例如:
         
          000000可以縮寫為#000,#336699可以縮寫為#369;
         
          ②邊框縮寫
         
          邊框的屬性如下:
         
          border-width: 1px;
         
          border-style: solid;
         
          border-color: #000;
         
          可以縮寫為一句:border: 1px solid #000;
         
          ③背景縮寫
         
          background-color: #F00;
         
          background-image: url(background.gif);
         
          background-repeat: no-repeat;
         
          background-attachment: fixed;
         
          background-position: 0 0;
         
          可以縮寫為一句:background: #F00 url(background.gif) no-repeat fixed 0 0;
         
          ④合并相同屬性的元素
         
          所有的標(biāo)題元素都是綠色的,可以這樣縮寫:
         
          h1,h2,h3,h4,h5,h6 {
         
          color: green;
         
          }
         
          三、使用<head>植入樣式表
         
          還可以使用<style>...</style>標(biāo)記在HTML文檔中定義嵌入式樣式表,該標(biāo)記必須放在<head>與</head>標(biāo)記之間。
         
          <html>
         
          <head>
         
          <style type="text/css">
         
          h1 {color:red}
         
          p {color:blue}
         
          </style>
         
          </head>
         
          <body>
         
          <h1>Header-1</h1>
         
          <p>This is a paragraph.</p>
         
          </body>
         
          </html>
         
          四、使用 <link> 標(biāo)簽鏈接調(diào)用外部樣式表
         
          HTML和CSS將網(wǎng)頁文件的結(jié)構(gòu)、內(nèi)容與顯示樣式分隔開來,這里正是樣式表功能發(fā)揮優(yōu)勢的地方。
         
          <head>
         
          <link rel="stylesheet" type="text/css" href="mystyle.css" />
         
          </head>
         
          p+CSS
         
          p+css是一種常見的網(wǎng)頁布局方法。p是用來排版的,而css是用來定義p的樣式。p+css通常采用外鏈的方式來調(diào)用層疊樣式表文件(style.css),用id和class來標(biāo)識區(qū)分網(wǎng)頁中不同結(jié)構(gòu)的特征。
         
          隨著HTML5的到來,無處不在的<p id="header">和<p id="footer">傳統(tǒng)代碼方法,將變成標(biāo)簽<Header>和<footer>。
        《&.doc》
        将本文的Word文档下载到电脑,方便收藏和打印
        推荐度:
        点击下载文档

        【CSS-層疊樣式表基礎(chǔ)教程】相關(guān)文章:

        聲樂的入門基礎(chǔ)教程05-18

        關(guān)于ps的基礎(chǔ)教程04-02

        手繪基礎(chǔ)教程:素描靜物03-13

        PHP入門基礎(chǔ)教程大全03-10

        紋繡入門基礎(chǔ)教程08-10

        美甲彩繪基礎(chǔ)教程03-30

        爵士舞的基礎(chǔ)教程步驟10-21

        美甲的相關(guān)基礎(chǔ)教程步驟03-13

        單反相機(jī)基礎(chǔ)教程03-29

        在线咨询
        国产高潮无套免费视频_久久九九兔免费精品6_99精品热6080YY久久_国产91久久久久久无码
      3. <sub id="h4knl"><ol id="h4knl"></ol></sub>
        <sup id="h4knl"></sup>
          <sub id="h4knl"></sub>

          <sub id="h4knl"><ol id="h4knl"><em id="h4knl"></em></ol></sub><s id="h4knl"></s>
          1. <strong id="h4knl"></strong>

          2. 日韩经典欧美高清一区二区UU | 在线观看领导玩丰满美女 | 在线观看国精产品二区 | 亚洲开心激情在线 | 正在播放酒店精品少妇约 | 亚洲国产一区二区三区精品 |

            CSS-層疊樣式表基礎(chǔ)教程

              層疊樣式表(Cascading Style Sheets,簡寫CSS),網(wǎng)頁可以使用CSS來決定文件的顏色、字體、排版等顯示特性。CSS最主要的目的是將文件的結(jié)構(gòu)和內(nèi)容(用HTML或其他相關(guān)的語言寫的)與文件的顯示樣式(CSS)分隔開來。比如HTML中H2標(biāo)志這一個二級標(biāo)題,它在級別上比一級標(biāo)題H1低,比三級標(biāo)題H3高,這個就是結(jié)構(gòu)上的信息。
             
              HTML文件中的每一個class或id都可以有自己的顯示特征,而且每一個沒有id特性的HTML結(jié)構(gòu)也可以有自己的顯示特征。這些結(jié)構(gòu)有的是HTML自己需要的,有的是專門為CSS設(shè)置的。
             
              使用CSS的優(yōu)點有:
             
              1.一個整個網(wǎng)站或其中一部分網(wǎng)頁的顯示信息被集中在一個地方,要改變它們很方便;
             
              2.不同的讀者可以有不同的樣式,比如有的讀者需要字體比較大;
             
              3.HTML文件本身的范圍變小了,它的結(jié)構(gòu)簡單了,它不需要包含顯示的信息。
             
              CSS信息可以來自:
             
              1.作者樣式
             
              ①作者可以在HTML文檔<head>標(biāo)簽中使用<link>標(biāo)簽調(diào)用獨立的外部樣式表(CSS文件)
             
              ②作者可以將CSS信息內(nèi)嵌在HTML頁面內(nèi)(元素直接使用style屬性)
             
              ③作者可以在HTML文檔<head>標(biāo)簽中定義嵌入式樣式表
             
              ④作者可以直接在HTML頁面內(nèi)定義+調(diào)用樣式表
             
              2.讀者樣式
             
              ⑤讀者可以在其瀏覽器內(nèi)設(shè)立一個地區(qū)性的CSS文件。這個CSS文件可以用在所有的HTML文件上
             
              3.瀏覽器的樣式
             
              ⑥假如外部沒有特別指定一個樣式的話,一般瀏覽器自己有一個內(nèi)在的樣式。
             
              其優(yōu)先級為:
             
              內(nèi)嵌樣式(在HTML元素內(nèi)部)>
             
              內(nèi)部調(diào)用樣式(在HTML元素周圍)>
             
              內(nèi)部嵌入樣式表(位于<head>標(biāo)簽內(nèi)部)>
             
              外部樣式表>(<link>調(diào)用調(diào)用外部樣式表)
             
              區(qū)域性CSS文件>
             
              瀏覽器缺省設(shè)置
             
              一、CSS規(guī)則由兩個主要的部分構(gòu)成:選擇器,以及一條或多條聲明(屬性+值),也就是調(diào)用+定義。
             
              1.元素選擇器,文檔的元素就是最基本的選擇器。
             
              ---------
             
              <H2><font color="red" bgcolor="white"><i>使用CSS</i></font></H2>
             
              上面的例子可以變成這樣:H2是選擇器,color和background是屬性,red和white是值(如果值為多個單詞,則要加引號)。
             
              <H2>使用CSS</H2>
             
              H2 { color: red; background: white; }
             
              ---------
             
              2.ID選擇器,id選擇器以"#"來定義。
             
              #red {color:red;}
             
              <p id="red">這個段落是紅色。</p>
             
              --------
             
              3.類選擇器,類選擇器以一個點號顯示(類名的第一個字符不能使用數(shù)字)。
             
              .center {text-align: center}
             
              <h1 class="center">
             
              This heading will be center-aligned
             
              </h1>
             
              4.屬性選擇器,對帶有指定屬性的HTML元素設(shè)置樣式。
             
              下面的例子為帶有title屬性的所有元素設(shè)置樣式:
             
              [title]
             
              {
             
              color:red;
             
              }
             
              5.p+CSS
             
              p+css是一種常見的網(wǎng)頁布局方法。p是用來排版的,而css是用來定義p的樣式。p+css通常采用外鏈的方式來調(diào)用層疊樣式表文件(style.css),用id和class來標(biāo)識區(qū)分網(wǎng)頁中不同結(jié)構(gòu)的特征。
             
              二、行內(nèi)樣式表
             
              除在HTML內(nèi)直接「定義+調(diào)用」之外(如上1.2.3.4.),也可于HTML內(nèi)直接使用style屬性。
             
              用style屬性設(shè)置顏色、字體和尺寸如下:
             
              <html>
             
              <body>
             
              <h1 style = "font-family:verdana">文章標(biāo)題</h1>
             
              <p style = "font-family:arial;color:red;font-size:20px;">文字內(nèi)容</p>
             
              <p style="color:red; background:yellow; font-weight:bold;">
             
              這個段落會被顯示為黃底紅字粗體。
             
              </p>
             
              </body>
             
              </html>
             
              1.網(wǎng)頁設(shè)計中常用的CSS屬性
             
              文字或元素的顏色:color
             
              字體:font-family
             
              文字大小:font-size
             
              段落首行縮進(jìn):text-indent(如「p {text-indent: 5em;}」)
             
              文本對齊方式:text-align(如「text-align:center」)
             
              背景顏色:background-color
             
              背景圖像:background-image
             
              列表樣式:list
             
              鼠標(biāo)樣式:cursor
             
              邊框樣式:border
             
              內(nèi)補(bǔ)白:padding
             
              外邊距:margin
             
              2.縮寫規(guī)則
             
              ①顏色縮寫:16進(jìn)制的色彩值,如果每兩位的值相同,可以進(jìn)行縮寫,例如:
             
              000000可以縮寫為#000,#336699可以縮寫為#369;
             
              ②邊框縮寫
             
              邊框的屬性如下:
             
              border-width: 1px;
             
              border-style: solid;
             
              border-color: #000;
             
              可以縮寫為一句:border: 1px solid #000;
             
              ③背景縮寫
             
              background-color: #F00;
             
              background-image: url(background.gif);
             
              background-repeat: no-repeat;
             
              background-attachment: fixed;
             
              background-position: 0 0;
             
              可以縮寫為一句:background: #F00 url(background.gif) no-repeat fixed 0 0;
             
              ④合并相同屬性的元素
             
              所有的標(biāo)題元素都是綠色的,可以這樣縮寫:
             
              h1,h2,h3,h4,h5,h6 {
             
              color: green;
             
              }
             
              三、使用<head>植入樣式表
             
              還可以使用<style>...</style>標(biāo)記在HTML文檔中定義嵌入式樣式表,該標(biāo)記必須放在<head>與</head>標(biāo)記之間。
             
              <html>
             
              <head>
             
              <style type="text/css">
             
              h1 {color:red}
             
              p {color:blue}
             
              </style>
             
              </head>
             
              <body>
             
              <h1>Header-1</h1>
             
              <p>This is a paragraph.</p>
             
              </body>
             
              </html>
             
              四、使用 <link> 標(biāo)簽鏈接調(diào)用外部樣式表
             
              HTML和CSS將網(wǎng)頁文件的結(jié)構(gòu)、內(nèi)容與顯示樣式分隔開來,這里正是樣式表功能發(fā)揮優(yōu)勢的地方。
             
              <head>
             
              <link rel="stylesheet" type="text/css" href="mystyle.css" />
             
              </head>
             
              p+CSS
             
              p+css是一種常見的網(wǎng)頁布局方法。p是用來排版的,而css是用來定義p的樣式。p+css通常采用外鏈的方式來調(diào)用層疊樣式表文件(style.css),用id和class來標(biāo)識區(qū)分網(wǎng)頁中不同結(jié)構(gòu)的特征。
             
              隨著HTML5的到來,無處不在的<p id="header">和<p id="footer">傳統(tǒng)代碼方法,將變成標(biāo)簽<Header>和<footer>。