ดาวน์โหลดงานนำเสนอ
งานนำเสนอกำลังจะดาวน์โหลด โปรดรอ
1
CSS
2
CSS (Cascading Style Sheets)
ข้อดี แก้ไขง่ายและทำงานได้สะดวก เว็บเพจมีขนาดเล็กลง ใช้งานได้หลายครั้ง Usability เป็นการกำหนดเฉพาะ มีการตกแต่งมากมายให้เลือกใช้
3
Syntax selector { property : value; property2 : value2; } Example
h2 { color : yellow; font-size : 13px;}
4
Selector Type body{ background-color:#00FF00; }
1. Type Selector body{ background-color:#00FF00; } 2. Class Selector ( . ) .header1 { color:#0000FF; } <p class=‘header1’>Text</p>
5
#greenlink{ color:#00FF00; }
3. ID Selector ( # ) #greenlink{ color:#00FF00; } <a href=‘./index.html’ id=‘greenlink’>Home</a> 4. Contextual Selector div p { color:#FF0000; } <div> Hello <p>World</p> </div>
6
5. Pseudo Element และ Pseudo Class Selector
first-child คือ Element ที่ตามมาเป็นตัวแรก first-line คือ บรรทัดแรกของ Element นั้น first-letter คือ ตัวอักษรแรกของ Element นั้น before คือ ก่อน Element นั้น after คือ หลัง Element นั้น p:first-letter {color:#ff0000;font-size:xx-large} p:first-line {color:#0000ff}
7
- Pseudo Class มักใช้กับสถานะของลิงก์ link ลิงก์ที่ยังไม่เคยคลิก
visited ลิงก์ที่คลิกไปแล้ว hover ลิงก์เมื่อเมาส์อยู่บนลิงก์ active ลิงก์ขณะที่กดคลิก a:link { color:#FF0000; } a:visited { color:#FF00FF; } a:hover { color:#FFFF00; } a:active { color:#00FF00; }
8
.sidebar > p { color : #0066cc; }
Direct Child Selector มีผลเฉพาะ Element ที่อยู่ภายในโดยตรงเท่านั้น .sidebar > p { color : #0066cc; } <div class="sidebar"> <p>This is p1</p> <p>This is p2</p> <div id="xxx"> <p>This is p3</p> </div> </div> <div class="sidebar"> <p>This is p1</p> <p>This is p2</p> <div id="xxx"> <p>This is p3</p> </div> </div>
9
Adjacent Slibling Selector ให้แสดงผลเหมือนกัน
h2+h3 { color : yellow ; } Universal Selector กำหนดทุก element พร้อมกัน #box2 *{ color : red; background : blue; } Attribute Selector a[href] { font-weight : bold; } a[href][target] { font-weight : bold; text-decoration : underline ; } input[type=‘text’] { font-weight : bold; color : blue; }
10
Grouping h1,h2,h3 { line-height : 22px; color : green; } h1 {
11
การใช้งาน CSS 1. Inline Style
<p style=‘color:#FF0000;’>Hello!!</p> 2. Internal Style / Header Style <head> <style type=“text/css”> p {color:#FF0000; } </style> </head> 3. External Style <link rel=“stylesheet” href=“style1.css” type=“text/css”>
12
ลักษณะการเขียน CSS ที่ดี
ควรเขียนให้เป็นระเบียบ body { background:#00FF00; color: #FFFF00; } ควรเขียน comment เพิ่มเติม .greenlink { color:#00FF00; } /* for link in left menu*/ กำหนดชื่อ ควรกำหนดให้สื่อความหมาย .backmenu { color:#FF0000; } .xxx{ color:#FF0000; }
13
หน่วยใน CSS ขนาด pixel px em em point pt pica pc inch in millimeter mm
14
สี (Color) ชื่อสี black, red, blue #rrggbb #00ccaf #rgb #00f
rgb(x,x,x) rgb(225,0,0) rgb(y%,y%,y%) rgb(0%,100%,0%)
15
การตกแต่งข้อความ การโหลด Font เพื่อใช้งาน
@font-face{ font-family : “TH SARABUN” ; src : url(fonts/sarabun.ttf); }
16
p { font:italic bold 13px Georgia, serif;}
Text Property ของ Font font-family เลือกฟอนต์เพื่อใช้งาน font-style เพื่อการตกแต่งเพิ่มเติม font-variant เพื่อทำเอฟเฟ็กต์ font-weight เพื่อทำให้ตัวอักษรหนาขึ้น หรือ บางลง font-size ปรับขนาดของฟอนต์ font กำหนดทุกอย่างที่เกี่ยวกับฟอนต์ไปพร้อมกันในคำสั่งเดียว p { font:italic bold 13px Georgia, serif;}
17
font-family p { font-family : Verdana, Tahoma, “Time New Roman”; }
.normallink {font-family : Geneva, “MS serif”; }
18
Font-weight p { font-weight:bold; } p { font-weight:500; }
Relative : บอกด้วยคำเฉพาะ เช่น normal, bold, bolder, lighter; Absolute : บอกด้วยขนาด เช่น 100, 200, … , 900 p { font-weight:bold; } p { font-weight:500; }
19
font-size Absolute font size div{ font-size: 13px; }
div{ font-size: small; } xx-small x-small small medium large x-large xx-large 9px 10px 13px 16px 19px 24px 32px
20
font-size Relative size font ขนาดที่สัมพันธ์กับขนาดที่ใช้อยู่ เช่น larger หรือ smaller Length บอกด้วยตัวเลขความยาวพร้อมหน่วย Percentage เปอร์เซ็นต์ Inherit ใช้ขนาดเดียวกับ Parent Element
21
font-style italic ตัวเอียง หากไม่มี จะใช้ฟอนต์ปกติ
oblique ตัวเอียงที่มาจาก oblique font normal ค่าปกติ Inherit แบบเดียวกับที่ Parent ใช้อยู่
22
Formatting Text letter-spacing : ระยะห่างระหว่างตัวอักษร
word-spacing : ระยะห่างระหว่างคำ text-indent : ย่อหน้าหรือเว้นว่างหน้าข้อความ text-align : จัดตำแหน่ง text-decoration : ขีดเส้นใต้ เหนือ หรือขีดตรงกลางข้อความ text-transform : แปลงตัวพิมพ์เล็กหรือตัวพิมพ์ใหญ่ white-space : ควบคุมลักษณะการพิมพ์ตัวอักษร line-height : กำหนดช่องว่างระหว่างบรรทัด
23
text-decoration none ไม่กำหนดการขีดเส้นใดๆ
overline ขีดเส้นเหนือข้อความ line-through ขีดเส้นผ่าน/ทับข้อความ underline ขีดเส้นใต้ข้อความ
24
<p>Welcome to CSS Class</p>
text-transform : <p>Welcome to CSS Class</p> capitalize ตัวอักษรใหญ่ในตัวอักษรแรกของคำ uppercase ตัวอักษรใหญ่ทั้งหมด lowercase ตัวอักษรเล็กทั้งหมด
25
white-space : pre คงทุกอย่างไว้เช่นเดิม
Example CSS.Example CSS.Example CSS.Example CSS. </p> pre คงทุกอย่างไว้เช่นเดิม normal จัดทั้งหมดให้อยู่ภายในกรอบ nowrap ไม่จัดเป็นหลายบรรทัด รวมเป็นบรรทัดเดียว
งานนำเสนอที่คล้ายกัน
