jizzyou中国少妇高潮,性欧美1819HD,好涨好爽好大视频免费,国产高潮大叫在线播放,18ppp禁止欧美视频,老师翘臀高潮流白浆,非洲人又粗又硬配种视频,国产一级AV教师,真实乱子伦露脸自拍,国产精品情侣奶水

HTML 21 天入門：樣式與樣式表

當(dāng)前位置：點晴教程→知識管理交流 →『技術(shù)文檔交流』

admin

2024年10月19日 22:10 本文熱度 166

樣式

前一節(jié)里，在講 head 元素時，提到 style 和 link 元素。在 HTML 屬性里也提到 style 屬性。

這些都和樣式有關(guān)。

樣式是什么呢？還記得 HTML 是超文本標(biāo)識語言吧。

既然是超文本，那么顯示內(nèi)容比文本豐富就是自然的。這里的豐富體現(xiàn)在樣式上。

比如說，style 屬性為元素添加樣式，可以改變元素的顏色（color），字體（font），尺寸（size），背景色（background color）等等。

新建一個文件，命名成 2-2.html，把以下代碼敲到 body 元素里，試試效果吧。

<div style="background-color:powderblue;">   <h1>淡藍色背景下的 h1。</h1>   <p>淡藍色背景下的段落。</p>   <p style="color:red;">淡藍色背景下文字是紅色的段落。</p> </div> <div>   <p style="font-family:courier;">改變字體為courier的段落。</p>   <p style="font-size:24px;">改變字號為24px的段落。</p>   <p style="text-align:center;">內(nèi)容居中的段落。</p> </div>

看到效果如下：

它比白底黑字看起來就豐富多彩多了。

CSS

CSS 全稱 Cascading Style Sheets，翻譯過來是 層疊式樣式表。

它用于渲染上面提到的樣式，解析和應(yīng)用元素的樣式。

CSS 有以下幾種方式應(yīng)用到元素上：

內(nèi)聯(lián)樣式：即上面講的在元素中使用 style 屬性。
內(nèi)部樣式表：即前面講到的在 head 中使用 style 元素。
外部引用：即在 head 內(nèi)使用 link 引用另一個 CSS 文件。

?? 在實際的項目中，更多的是使用外部引用的方式對樣式進行統(tǒng)一管理和維護。但是在此教程的學(xué)習(xí)階段，為了方便我們使用前兩種方式。

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

這種樣式的應(yīng)用在元素級別，前面的例子里提到的都是屬于這類使用。

<p style="font-family:courier;">改變字體為courier的段落。</p> <p style="font-size:24px;">改變字號為24px的段落。</p> <p style="text-align:center;">內(nèi)容居中的段落。</p>

內(nèi)部樣式表

內(nèi)部樣式表寫在 head 區(qū)域，它的應(yīng)用范圍是整個個文件。

<head>   <style type="text/css">     body {       background-color: blue;     }     p {       color: white;     }   </style> </head>

上面這個例子，為文件定義了藍色背景，以及指定了段落文本的顏色為白色。

把上述樣式應(yīng)用到前面的例子里，效果就變成了如下：

外部引用

外部引用的樣式表，是一個獨立的文件。既然是獨立的文件，它就能被不同的網(wǎng)頁引用。

通常一個網(wǎng)站會有很多個網(wǎng)頁，這時外部引用的樣式表就能發(fā)揮出它的功能。既能為整個網(wǎng)站維持統(tǒng)一的外觀，又能方便的管理所有的樣式。

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

參考文件 2-2-3.html，去掉 head 中的 style，添加樣式文件 style-2-2.css。這樣得到文件如下：

body {   background-color: forestgreen; }  p {   color: white; }

<head>   <meta charset="UTF-8" />   <meta name="viewport" content="width=device-width, initial-scale=1.0" />   <title>我的第一個頁面</title>   <link rel="stylesheet" href="style-2-2.css" type="text/css" /> </head>  <body>   <div style="background-color:powderblue;">     <h1>淡藍色背景下的 h1。</h1>     <p>淡藍色背景下的段落。</p>     <p style="color:red;">淡藍色背景下文字是紅色的段落。</p>   </div>   <div>     <p style="font-family:courier;">改變字體為courier的段落。</p>     <p style="font-size:24px;">改變字號為24px的段落。</p>     <p style="text-align:center;">內(nèi)容居中的段落。</p>   </div> </body>