CSS - Cascading Style Sheets 樣式表語言: 串接樣式表
CSS樣式 CSS (Cascading Style Sheets) 優點 W3C標準，用來定義網頁文件之外觀 CSS: Presentation Layer, HTML: Structural Layer CSS 1, CSS 2, CSS 2.1, CSS 3 優點 提供HTML元素/屬性無法達到的特性 讓網頁結構更清晰易懂 同一樣式可應用於不同元素上 可將CSS樣式獨立存於不同文件
CSS 樣式語法 選取器 (selector) 樣式宣告 屬性 (property) 值 (value) selector {property: value} selector {property: value; property: value} selector { property: value; … property: value }
CSS Examples body {color: black} p {font-family: "sans serif"; text-indent: 3.5em;} p { text-align: center; color: black; font-family: "sans serif", arial } #someid {font-size: 18pt} .classbw {color: white; background-color: black} p.classbw {color: white; background-color: black} h1, h2, h3 {text-align: center; background-color: #cff} li a {text-decoration: none} a:hover {…} h1+p {…}
在網頁中加入CSS樣式 Inline Style (行內樣式) Internal style sheet (嵌入樣式) * 使用HTML之style屬性 Internal style sheet (嵌入樣式) 於<head>中加入<style>元素 External style sheet (外部樣式) 於<head>中使用<link>元素 於<style>中使用@import 指令
Inline Style (行內樣式) 使用HTML之style屬性 <h1 style="text-align: center">…</h1> <p style="font-size: 18pt; font-family: '新細明體'; color: #669999;">…</p>
Internal style sheet (嵌入樣式) 於<head>中加入<style>元素 <style type="text/css"> <!-- h1 {color: red;} p { font-size: 18px; font-family: '新細明體'; color: #669999; } --> </style> <style type="text/css" title="myStyle" media="screen">
External style sheet (外部樣式) 於<head>中使用<link>元素 mycss.css @charset "utf-8"; h1 { text-align: center; background-color: #cff; } p {…} … <link href="mycss.css" rel="stylesheet" type="text/css" />
匯入外部CSS樣式 於<style>中使用@import 指令 <style type="text/css"> <!-- @import url(stylesheet.css); p {color: #CC00FF;} --> </style>
CSS樣式套用優先順序 當數個不同樣式來源指定至同一元素，後面出現的樣式覆蓋前面樣式 同時有Inline, Internal,及External樣式指定至同一元素，套用優先順序： Inline > Internal > External !important 最優先 h1 {color: red !important;}
長度單位 Unit Description % a percentage of something in inch cm centimeter mm millimeter em one em is equal to the font size of the current element ex one ex is the x-height of a font, the x-height is usually about half the font-size pt point (1 pt is the same as 1/72 inch) pc pica (1 pc is the same as 12 points) px pixels (a dot on the computer screen)
顏色名稱/數值 CSS standard 16 valid color names: Unit Description Example 1 Example 2 color_name A color name red yellow rgb(x,x,x) A rgb value rgb(255,0,0) rgb(255,255,0) rgb(y%, y%, y%) A rgb percentage value rgb(100%,0%,0%) rgb(100%,100%,0%) #rrggbb A hex number #ff0000 #ffff00 #rgb #f00 #ff0 CSS standard 16 valid color names: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow. The 216 "Safety" Colors: http://ycchen.im.ncnu.edu.tw/www/216Color.html Other Color names: https://www.w3schools.com/cssref/css_colors.asp
rgba(red, green, blue, alpha) 不透明度(opacity): 0.0 (fully transparent) ~ 1.0 (fully opaque) https://www.w3schools.com/css/tryit.asp?filename=trycss3_color_rgba {background-color:rgba(255,0,0,0.3);} {background-color:rgba(255,0,0,0.8);}
CSS 註解 /* 單行註解 */ /* 多行註解 第二行 … … */ /* 單行註解 */ /* 多行註解 第二行 … … */ * 注意事項： 勿在<style></style>中使用html註解 方式！ <!-- … --> 會導致css解譯錯誤！