CSS Cascading Style Sheets CSS selector selector property

  • Slides: 14
Download presentation
CSS - Cascading Style Sheets 樣式表語言: 串接樣式表

CSS - Cascading Style Sheets 樣式表語言: 串接樣式表

CSS 樣式語法 ß ß 選取器 (selector) 樣式宣告 selector {property: value} Þ Þ 屬性 (property)

CSS 樣式語法 ß ß 選取器 (selector) 樣式宣告 selector {property: value} Þ Þ 屬性 (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. 5 em; }

CSS Examples body {color: black} p {font-family: "sans serif"; text-indent: 3. 5 em; } p { text-align: center; color: black; font-family: "sans serif", arial } #someid {font-size: 18 pt}. classbw {color: white; background-color: black} p. classbw {color: white; background-color: black} h 1, h 2, h 3 {text-align: center; background-color: #cff} li a {text-decoration: none} a: hover {…} h 1+p {…}

在網頁中加入CSS樣式 ß Inline Style (行內樣式) * 使用HTML之style屬性 ß Internal style sheet (嵌入樣式) Þ ß

在網頁中加入CSS樣式 ß Inline Style (行內樣式) * 使用HTML之style屬性 ß Internal style sheet (嵌入樣式) Þ ß 於<head>中加入<style>元素 External style sheet (外部樣式) Þ Þ 於<head>中使用<link>元素 於<style>中使用@import 指令

Inline Style (行內樣式) ß 使用HTML之style屬性 <h 1 style="text-align: center">…</h 1> <p style="font-size: 18 pt;

Inline Style (行內樣式) ß 使用HTML之style屬性 <h 1 style="text-align: center">…</h 1> <p style="font-size: 18 pt; font-family: '新細明體'; color: #669999; ">…</p>

Internal style sheet (嵌入樣式) Þ 於<head>中加入<style>元素 <style type="text/css"> h 1 {color: red; } p

Internal style sheet (嵌入樣式) Þ 於<head>中加入<style>元素 <style type="text/css"> h 1 {color: red; } p { font-size: 18 px; font-family: '新細明體'; color: #669999; } … <style type="text/css" title="my. Style" </style> media="screen">

External style sheet (外部樣式) ß 於<head>中使用<link>元素 <link href="mycss. css" rel="stylesheet" type="text/css" /> mycss. css

External style sheet (外部樣式) ß 於<head>中使用<link>元素 <link href="mycss. css" rel="stylesheet" type="text/css" /> mycss. css @charset "utf-8"; h 1 { text-align: center; background-color: #cff; } p {…} …

匯入外部CSS樣式 ß 於<style>中使用@import 指令 <style type="text/css"> <!-@import url(stylesheet. css); p {color: #CC 00 FF;

匯入外部CSS樣式 ß 於<style>中使用@import 指令 <style type="text/css"> <!-@import url(stylesheet. css); p {color: #CC 00 FF; } --> </style>

長度單位 Unit % in cm mm em ex pt pc px Description a percentage

長度單位 Unit % in cm mm em ex pt pc px Description a percentage of something inch centimeter millimeter one em is equal to the font size of the current element one ex is the x-height of a font, the x-height is usually about half the font-size point (1 pt is the same as 1/72 inch) pica (1 pc is the same as 12 points) pixels (a dot on the computer screen)

顏色名稱/數值 Unit Description Example 1 Example 2 color_name A color name red yellow rgb(x,

顏色名稱/數值 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, 0) rgb(y%, y%) A rgb percentage value rgb(100%, 0%) rgb(100%, 0% ) #rrggbb A hex number #ff 0000 #rgb A hex number • CSS standard 16 valid color names: #f 00 #ffff 00 #ff 0 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/216 Color. html Other Color names: https: //www. w 3 schools. com/cssref/css_colors. asp

rgba(red, green, blue, alpha) ß 不透明度(opacity): Þ 0. 0 (fully transparent) ~ 1. 0

rgba(red, green, blue, alpha) ß 不透明度(opacity): Þ 0. 0 (fully transparent) ~ 1. 0 (fully opaque) {background-color: rgba(255, 0, 0, 0. 3); } 0. 3 ß {background-color: rgba(255, 0, 0, 0. 8); } 0. 8 https: //www. w 3 schools. com/css/tryit. asp? file name=trycss 3_color_rgba