欧美成人精品手机在线观看_69视频国产_动漫精品第一页_日韩中文字幕网 - 日本欧美一区二区

LOGO OA教程 ERP教程 模切知識(shí)交流 PMS教程 CRM教程 開發(fā)文檔 其他文檔  
 
網(wǎng)站管理員

HTML 21 天入門：樣式與樣式表
admin
2024年10月19日 22:10 本文熱度 471

樣式

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

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

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

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

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

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

<div style="background-color:powderblue;">   <h1>淡藍(lán)色背景下的 h1。</h1>   <p>淡藍(lán)色背景下的段落。</p>   <p style="color:red;">淡藍(lán)色背景下文字是紅色的段落。</p> </div> <div>   <p style="font-family:courier;">改變字體為courier的段落。</p>   <p style="font-size:24px;">改變字號(hào)為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 引用另一個(gè) CSS 文件。

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

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

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

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

內(nèi)部樣式表

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

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

上面這個(gè)例子，為文件定義了藍(lán)色背景，以及指定了段落文本的顏色為白色。

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

外部引用

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

通常一個(gè)網(wǎng)站會(huì)有很多個(gè)網(wǎng)頁，這時(shí)外部引用的樣式表就能發(fā)揮出它的功能。既能為整個(gè)網(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>我的第一個(gè)頁面</title>   <link rel="stylesheet" href="style-2-2.css" type="text/css" /> </head>  <body>   <div style="background-color:powderblue;">     <h1>淡藍(lán)色背景下的 h1。</h1>     <p>淡藍(lán)色背景下的段落。</p>     <p style="color:red;">淡藍(lán)色背景下文字是紅色的段落。</p>   </div>   <div>     <p style="font-family:courier;">改變字體為courier的段落。</p>     <p style="font-size:24px;">改變字號(hào)為24px的段落。</p>     <p style="text-align:center;">內(nèi)容居中的段落。</p>   </div> </body> 

它的結(jié)果和前面完全一樣。

樣式應(yīng)用的優(yōu)先級

既然 CSS 是層疊式，就形象的理解為，它是一層一層的堆疊，最上面那層就是看到的效果，而底下的，被覆蓋了。

三種方式應(yīng)用樣式，就會(huì)有一個(gè)先后順序。

如果為同一個(gè)元素在三個(gè)地方應(yīng)用了同樣的樣式，但值不同的話，最終應(yīng)用的會(huì)是哪一個(gè)呢？

咱們從應(yīng)用的范圍上來說，應(yīng)用范圍越小，優(yōu)先級越高。

也就是，先 外部引用，再 內(nèi)部樣式表，最后 內(nèi)聯(lián)樣式。

練習(xí)比較簡單，可以自行通過修改前面的例子自己試一試。

另外，還有一個(gè)由 CSS 提供的功能，是通過 import 提高樣式的應(yīng)用優(yōu)先級，它是最高的，不過因?yàn)槭?CSS 的內(nèi)容，這里只是提一下，不展開說，大家了解一下即可。

總結(jié)

  • ?? 樣式用于改變文本的呈現(xiàn)，比如顏色，大小等等。

  • ?? CSS 用于渲染樣式，它的使用方式分成 內(nèi)聯(lián)樣式，內(nèi)部樣式表和外部引用三種。

  • ?? 樣式應(yīng)用有先后順序，先 外部引用，再 內(nèi)部樣式表，最后 內(nèi)聯(lián)樣式。


該文章在 2024/10/22 12:38:05 編輯過
關(guān)鍵字查詢
相關(guān)文章
正在查詢...
點(diǎn)晴ERP是一款針對中小制造業(yè)的專業(yè)生產(chǎn)管理軟件系統(tǒng),系統(tǒng)成熟度和易用性得到了國內(nèi)大量中小企業(yè)的青睞。
點(diǎn)晴PMS碼頭管理系統(tǒng)主要針對港口碼頭集裝箱與散貨日常運(yùn)作、調(diào)度、堆場、車隊(duì)、財(cái)務(wù)費(fèi)用、相關(guān)報(bào)表等業(yè)務(wù)管理，結(jié)合碼頭的業(yè)務(wù)特點(diǎn)，圍繞調(diào)度、堆場作業(yè)而開發(fā)的。集技術(shù)的先進(jìn)性、管理的有效性于一體，是物流碼頭及其他港口類企業(yè)的高效ERP管理信息系統(tǒng)。
點(diǎn)晴WMS倉儲(chǔ)管理系統(tǒng)提供了貨物產(chǎn)品管理,銷售管理,采購管理,倉儲(chǔ)管理,倉庫管理,保質(zhì)期管理,貨位管理,庫位管理,生產(chǎn)管理,WMS管理系統(tǒng),標(biāo)簽打印,條形碼,二維碼管理,批號(hào)管理軟件。
點(diǎn)晴免費(fèi)OA是一款軟件和通用服務(wù)都免費(fèi)，不限功能、不限時(shí)間、不限用戶的免費(fèi)OA協(xié)同辦公管理系統(tǒng)。
Copyright 2010-2025 ClickSun All Rights Reserved