您的位置：360文档中心› $CSS

$CSS

合集下载
  1. 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

邊框 (border) 屬性有以下幾種：
border-style border-width border-color border-top-, border-left-, border-bottom-, borderrightborder
border-style 屬性指定邊框的樣式
CSS 樣百度文库 顯現結果
<lonk …href=ext.css>
H3{color:red}
<lonk …href=ext.css>
如何把CSS加到網頁中呢？依照用途有三種用 法：
2.1 直接加在HTML標籤中 2.2 作成樣式表加在網頁中 2.2.1宣告HTML標籤的外觀樣式 2.2.2 訂class樣式 2.2.3 訂ID樣式 2.3 獨立成一個CSS檔
margin-top (上邊界) margin-right (右邊界) margin-bottom (下邊界) margin-left (左邊界)
所有四個邊的邊界可以同時由 margin 屬性設 定。它的語法如下：
margin: [上面邊界] [右邊邊界] [下面邊界] [左邊邊界]
有三種方式可以設定邊界，分別為長度、百分 比、以及 'auto‘ css: #container {
.自訂樣式名稱 { 屬性1:值; 屬性2:值; }
<html><head><title>網頁標題</title> <style type="text/css"> .keyword { color: red; background-color: yellow; font-weight: bold; border: 1px; padding: 2px; } </style></head> <body> 這裡是<font class="keyword">關鍵字</font>， 這裡一樣是套用 <span class="keyword">keyword樣式 </span>。 </body> </html>
Result:
在 CSS ，長度單位可以分為兩大類：絕對 (absolute) 單位以及相對 (relative) 單位。
相對單位包括：
px: pixels em: em ex: x 字母的高度
絕對單位包括
in: 吋 cm: 公分 mm: 公厘 pt: points, 1 pt = 1/72 吋 pc: picas, 1 pc = 12 pt
在類別中特定標籤才能套用的樣式 <style=text/css> 元素名稱.類別名稱 {屬性1：值1;屬性2：值2;…} </style>
<style type = text/css> h2.red { color : red; font-size : 20pt;} p.blue { color : blue; font-size : 20pt;} </style> <h2 class=red>AAA</h2> … <h3 class=red>BBB</h3> … <p class=blue>CCC</p> 請問上面那些字的顏色及大 小?
Style.css 內容: HTML標籤{ 屬性1:值; 屬性2:值; } 自訂樣式{ 屬性1:值; 屬性2:值; }
My.css: 網頁:
p { color: red; font-size:20px; } .title{ color:blue; font-size:40px; } <html> <head> <title>網頁標題</title> <link rel=stylesheet type="text/css“ href="my.css"> </head> <body> <p>HTML標籤套用CSS</p> <p class=“title”>自定class</p> </body> </html> <head> <style type = text/css> @import url(my.css); </style> </head> <body> <p>HTML標籤套用CSS</p> <p class=“title”>自定class</p> </body>
下載並修改自: 資工系涂世俊老師教學網站
CSS是用來控制網頁外觀的！
傳統的HTML碼對於網頁外觀的控制能力不足。例 如，HTML裡面，文字的大小最大只到7，如：
<font size=7>文字</font>， 即使您填size=700也沒用，最大就是7而已。
若想要比7大的字該怎麼辦？答：請用CSS！
盒子模式 (box model) 是在 CSS 中一個很重 要的觀念。描述一個元素是如何組成的。
邊界(margin)是用來設定各個元素之間的距離。 相關的 CSS 指令為 margin、border、以及 padding
邊界 (margin) 是在邊框之外，並且是用來設定各 個元素之間的距離。 一個盒子有四個邊：
h1, h2, h3.red { color : red }
有何意義?
div
將內容分為不同的區域，而每一個區域可以根據 CSS 中的宣告而有自己的樣式。 Div 是一個區塊級容器 (block-level container)，這 代表在 </div> 標籤後會換行。
span
將內容分為不同的區域。用 <span> 來調整單一文 字的樣式。 在 </span> 之後並不會換行。
獨立成一個CSS檔，如： style.css
網頁中<head>...</head>中則需 要加入: <link rel=stylesheet type="text/css" href="CSS檔名 稱.css"> 另外也可用 @import <style type=text/css> @import url(style.css) </style>
<p style=“border-style:solid”>實線</p> <p style=“border-style:dashed”>虛線</p> <p style=“border-style:double”>雙線</p> <p style=“border-style:dotted”>點線</p> <p style=“border-style:groove”>凹線</p> <p style=“border-style:ridge”>凸線</p> <p style=“border-style:inset”>嵌入線</p> <p style=“border-style:outset”>浮出線</p>
margin-top: 5px; margin-left: 10%; margin-right: auto; margin-bottom:20px; border: 1px solid 000000; }
HTML: Result:
<div id="container">這是邊界的例子。</div> <p>這是邊界的例子</p>
設定的外觀可以同時讓同網頁中的元件可以重 複套用 一般是加在<head></head>之間，實際上，加 在哪裡都無所謂，只要在套用樣式之前都可以
<head> … <style type="text/css"> … </style> … </head>
HTML標籤名稱 { 屬性1: 值; 屬性2: 值; ： }
<起始標籤 style=“CSS屬性1:值; CSS屬性2:值; CSS屬性3:值; ... ">…</結束標籤> <font style=“color: red; font-size: 20px“>大小為20像素的紅色文字</font>
優先權最高！對於要控制的東西也最直接！缺點 其樣式設定無法給其他網頁元件套用。 若把所有「大小為20像素的紅色文字」變成「大 小為30像素的藍色文字」，那麼，若是網頁中有 50個「大小為20像素的紅色文字」，那麼您就得 修改50次！所以，若是這種情況，適合用下一單 元介紹的方式，也就是可以讓樣式重複套用
<link>與@import都可載入外部css檔，但是兩 者有以下差異：
<link> Browser載入 css的時機 應用範圍 @import
讀到<link>時暫不載入， 讀到@import就立即載 直到要解釋樣式時才載入 入css檔的內容 css檔的內容 只能寫在HTML檔 可以寫在HTML檔或css 檔
<font style="font-size:700px">文字</font>
避免重覆程式碼
(用CSS定義文字為紅色， 用 定義文字為紅色， 因此不必一一指定) 因此不必一一指定 <body> <h3>XXX</h3> … <h3>YYY</h3> … <h3>ZZZ</h3> … </body>
也是自訂外觀的一種，不過比較不那麼常用， 須用在HTML的標籤元件中有設定ID的時候， 同一個網頁中ID是不能重複的，所以，設定的 這個外觀可能只有一個元件用得到（而class 樣式則可以無限套用！） 『自訂ID樣式名稱』請用英文，前面一定要有 一個「#」 #自訂ID樣式名稱 {
屬性1:值; 屬性2:值; ：
<body> <h3 color=red>XXX</h3> … <h3 color=red>YYY</h3> … <h3 color=red>ZZZ</h3> … </body>
縮小網頁體積，簡化網頁維護
H3{color:red}
H3{color:red} H3{color:red} <lonk …href=ext.css>
A 、B類網頁共用樣式 Common.css
A 類網頁專用樣式 a.css
B 類網頁專用樣式 b.css
@import url(a.css)
@import url(common.css)
A 、B類網頁共用樣 式
A類網頁 a.css
Common.css
類別內所有元素都能套用樣式 *.類別名稱 {屬性1：值1;屬性2：值2;…} or .類別名稱 {屬性1：值1;屬性2：值2;…} Example: .red_text { color : red; font-size : 20pt;} <p class = red_text>…</p>
CSS 樣式：
.large { color: #00FF00; font-family: Arial; font-size: 4pt; }
HTML:
<div class="large">這是 DIV 範例。</div> 這是 範例。 Span 不是<span class="large">區塊級的</span>
border-width 屬性是用來設定邊框的寬度。 可用的值為 thin (薄)、medium (中等)、thick (厚)，或是一個數字。
CSS 樣式 顯現結果
<p style=“border-width: 9px; border-style: solid;”> 邊框寬度為 9px</p> <p style=“border-width: medium; border-style: dashed;”> 邊框寬度為中等</p>
}
在標籤裏，使用 id=“自訂樣式名稱 “ 套用CSS樣式
<html> <head> <title>網頁標題</title> <style type="text/css"> #keyword { color: red; background-color: yellow; font-weight: bold; border: 1px; padding: 2px; } </style> </head> <body> 這裡是<font id="keyword">關鍵字 </font>。 </body> </html>
body { color: gray; font-size: 12px; font-weight: bold; }
h1{ color: blue;} h2 { color: blue;} h3 { color: blue;} 可合併如下 h1 h2 h3 { color: blue};
『自訂樣式名稱』請用 英文，前面一定要有一 個「.」 在標籤裏，使用 class= “自訂樣式名稱 “ 套用CSS樣式
相关文档
最新文档