| 內嵌樣式 | 基本文法 | DIV標記 | Cpoyright | |
| 內部樣式表 | 字型屬性 | 長度單位 | 我的部落格 | |
| 外部樣式表 | 文字屬性 | 塊元素和行元素 | 給我發郵件 | |
| 樣式的優先順序 | 常用屬性 | v512工作室 | 中科院新科海學校 |
CSS(Cascading Style Sheets)HTML標記專門用於定義網頁的內容，CSS專門用來設定其顯示效果
CSS分類：內嵌樣式(Inline Style) 內部樣式表(Internal Style Sheet) 外部樣式表(External Style Sheet)
內嵌樣式(只對其所在的標記有效)
以屬性的形式直接在HTML標記中給出，用於設定該標記所定義資訊的顯示效果
舉例：<body style="background-color:#ccffee">(該樣式並不比原來HTML 屬性設定的方式更簡潔)
<P style="font-size:16px;color:red">第一段文字</p>(它的重用性也並沒有得到提高)
<p style="font-sytle:italic;font-size:20px;color:#bb22cc">第二段文字</p>
</body>
內部樣式表(只對所在的網頁有效)
在HTML頁面的頭資訊元素<head>中給出，可以同時設定多個標記所定義資訊的顯示效果
舉例：<html>
<head>
<style type="text/css">(標明當前標記的類型是文字格式設定的，它的內容是文字格式設定的樣式表)
body {background-color:#ccffee}(設定body標記的樣式為{...}，該設定將作用於整個body)
h2 {text-align:center; color:red}(若文中使用h2號標題文字，那麼它將自動套用這個設定)
p.mystyle1{font-size:20px;color:blue}(針對同一標記(這裡為p)設定兩種不同的顯示效果)
p.mystyle2{font-size:40px;color:#dd44aa;text-align:center}
</style>
</head>
<body>(若此時body內還嵌套了內部的不同的設定，則以內部的顯示效果更優先)
<p class="mystyle1">第一段文字。</p>(class="使用者自訂的樣式名")
<p class="mystyle2">第二段文字。</p>(應用之前設定的不同樣式)
</body>
</html>
外部樣式表(為純文字檔案，尾碼".css"。可被應用到多個頁面中)
將樣式設定儲存到獨立的外部檔案中，然後在要使用這些樣式的HTML頁面中進行引用
舉例：body{background-color:#ccffee}
p.mystyle1{font-size:20px;color:blue}
p.mystyle2{font-sytle:italic;font-size:40px;color:#dd44aa;text-align:center}
<html>(link常用來引入或關聯到外部樣式表)(rel標明當前HTML頁面跟所引用的檔案之間的關係)
<head><link href="m1.css" rel="stylesheet" type="text/css"></head>
<body>(type標明所要關聯的m1.css的內容是一個文字格式設定即CSS性質的)
<p class="mystyle1">第一段文字。</p>
<p class="mystyle2">第二段文字。</p>
</body>
</html>
樣式的優先順序(高→低：內嵌樣式→內部樣式表→外部樣式表→瀏覽器預設樣式)
同優先順序的，後出現的覆蓋先前的設定(出現嵌套的時候會有這種情況)
如果不同樣式的作用範圍出現重疊，則高優先順序樣式將覆蓋低優先順序的設定
CSS基本文法(CSS注釋：/*...*/(顯示時，所有注釋資訊將被過濾掉))
CSS樣式主要由三部分組成：選取器(Selector) 屬性名稱(Property) 屬性值(Value)
選取器可理解成就是一個HTML標記。也可以加上一個子標記以區分不同的樣式
注意：可同時設定多個標記或它的子標記顯示同一效果。舉例：h1,h3,,p.mystyle3{text-align:center;}
另外就是不加上具體標記，而進行通用的設定。如：.mystyle{color:red}，適用於各類型的元素
CSS字型屬性(用於設定字型的類型、大小、顏色及顯示風格等)
font-family：設定字型類型，如"Arial"、"宋體"等
font-size：設定字型大小，常用度量單位pt和px
font-style：設定字型風格，可選值為normal,italic和oblique
font-weight：設定字型"重量"，常用值為normal和bold(即字型線條的粗細程度，也可用數值表示它的粗細)
font：綜合設定上述各種字型屬性(用起來可讀性要稍微差點)(如：p.mystyle{font:normal bold 20pt 黑體})
說明：normal：正常。具體使用時若某種字型不支援italic方式，可以考慮換成oblique
italic：斜體字。二者區別很微妙，大致可認為italic是字型中的斜體字。有的字型就沒有斜體字
oblique：斜體字。而oblique可認為是以傾斜的方式顯示任何的字型
CSS常用文字屬性(用於設定文本的對齊和縮排方式、行高、字間距、文本顏色和修飾效果等)
text-align：設定文本對齊，可選值left,center,right,justify(justify：左右對齊)
text-indent：設定首行縮排，其值可採用絕對或相對的長度單位及百分比
line-height：設定行高，其值可採用絕對或相對的長度單位及百分比
letter-spacing：設定字元間距，其值可採用絕對或相對的長度單位
color：設定文字顏色
說明：letter-spacing=2em設定字元的間距為正常間距的2倍或理解為兩個字元的寬度
CSS的長度單位
絕對長度單位：in：英寸Inches(1英寸=2.54厘米)
cm：厘米Centimeters
mm：毫米Millimeters
pt：點Points(1點=1/72英寸)(常用的是pt，因為它在列印的時候不至於失真)
pc：皮卡Picas(1皮卡=12點)
相對長度單位：em：元素的字型高度(寬度)
ex：字母x的高度(是小x的高度)(不同字母的高度、寬度是有差異的)
px：像素Pixels(與螢幕解析度有關係)
%：百分比Percentage
DIV標記(division)(也可稱為塊標記，是一個HTML標記，用於表示一塊可顯示HTML資訊的地區)
使用CSS+DIV可以實現結構化的頁面配置
如果不使用任何CSS樣式設定的話，div標記的效果與分區段標記p基本相同
舉例：<div>第一段文字</div> <div align="center">第二段文字</div>
說明：div標記中的內容在開頭和結尾會自動的換行，於是被稱為塊標記
div預設的情況下它不能容忍跟別的成分位於同一水平的行中。跟p用法是相同的
補充：*{margin:0px;padding:0px;} *是萬用字元，使所有元素均採用該設定。
margin：元素外面與其他元素之間的空隙的大小
padding：元素內部的內容和元素邊框之間留的空隙的大小
.main.top{width:800px;height:40px;background:#ffaaff;border:1px solid #dddddd}
.main.nav{float:left;width:100px;height:300px;background:#bbeeff;border:1px solid #dddddd}
這裡：所有的標記均可使用main樣式。也可以使用它的子樣式top或nav(使用時class="top"即可)
solid是說明該實線條的顏色，它的顏色為#ddddd，float使元素浮動並靠左對齊
float設定元素浮動後，元素不會始終固定在某位置，這樣可以讓多個元素在同一行中排列
塊元素和行元素
HTML元素按其顯示方式可分為"塊級"(block)元素和"行內"(inline)元素兩種
區塊層級元素：前後換行、可設定塊大小(寬度和高度)、塊的定位、塊邊框、塊間距、塊內和塊邊框間空隙等。如body,p,tr,td,div等
行內元素：位於當前行中，前後不換行，不單獨定位。如span元素：前後不會出現換行的效果(跟p、div不同)
舉例：<p>一段文字中的<span style="font-size:20pt;color:red">一部分顯示效果有所不同</span>，可以採用span元素來實現</p>
可以使用CSS的display屬性設定/修改元素的顯示方式，其常用屬性取值為：block、inline和none(預設為inline)
說明：block：按照塊的方式顯示 inline：設定為行內的方式顯示 none：不顯示(隱藏當前的元素)
CSS其他常用屬性
背景屬性：background-color(背景顏色) background-image(背景圖片) background-repeat(背景圖片是否重複)
background-position(背景圖片的位置) background(綜合設定前面的幾種屬性)
邊框屬性：border-style(邊框風格) border-width(邊框寬度) border-color(邊框顏色) border(綜合設定)
單邊邊框屬性：border-top-width(頂部的邊框的寬度)(其他底部等屬性依次類推)
邊距屬性：組件外邊緣和其他組件之間的空隙 margin-top(頂部) margin-bottom(底部) margin-left(左) margin-right(右) margin(綜合設定)
間隙屬性：組件內部的內容和組件邊框之間留的間隙 padding-top padding-bottom padding-left padding-right padding
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
