งานนำเสนอกำลังจะดาวน์โหลด โปรดรอ

งานนำเสนอกำลังจะดาวน์โหลด โปรดรอ

CSS. CSS (Cascading Style Sheets) ข้อดี 1. แก้ไขง่ายและทำงานได้สะดวก 2. เว็บเพจมีขนาดเล็กลง 3. ใช้งานได้หลายครั้ง 4.Usability เป็นการกำหนดเฉพาะ 5. มีการตกแต่งมากมายให้เลือกใช้

งานนำเสนอที่คล้ายกัน


งานนำเสนอเรื่อง: "CSS. CSS (Cascading Style Sheets) ข้อดี 1. แก้ไขง่ายและทำงานได้สะดวก 2. เว็บเพจมีขนาดเล็กลง 3. ใช้งานได้หลายครั้ง 4.Usability เป็นการกำหนดเฉพาะ 5. มีการตกแต่งมากมายให้เลือกใช้"— ใบสำเนางานนำเสนอ:

1 CSS

2 CSS (Cascading Style Sheets) ข้อดี 1. แก้ไขง่ายและทำงานได้สะดวก 2. เว็บเพจมีขนาดเล็กลง 3. ใช้งานได้หลายครั้ง 4.Usability เป็นการกำหนดเฉพาะ 5. มีการตกแต่งมากมายให้เลือกใช้

3 Syntax selector { property : value; property2 : value2; } Example h2 { color : yellow; font-size : 13px;}

4 Selector Type 1. Type Selector body{ background-color:#00FF00; } 2. Class Selector (. ).header1 { color:#0000FF; } Text

5 3. ID Selector ( # ) #greenlink{ color:#00FF00; } Home 4. Contextual Selector div p { color:#FF0000; } Hello World

6 5. Pseudo Element และ Pseudo Class Selector - Pseudo Element 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 6.Direct Child Selector มีผลเฉพาะ Element ที่อยู่ ภายในโดยตรงเท่านั้น.sidebar > p { color : #0066cc; } This is p1 This is p2 This is p3  This is p1 This is p2 This is p3 

9 7.Adjacent Slibling Selector ให้แสดงผล เหมือนกัน h2+h3 { color : yellow ; } 8.Universal Selector กำหนดทุก element พร้อมกัน #box2 *{ color : red; background : blue; } 9.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 { line-height : 22px; color : green; } h2 { line-height : 22px; color : green; } h3 { line-height : 22px; color : green; } h1,h2,h3 { line-height : 22px; color : green; }

11 การใช้งาน CSS 1. Inline Style Hello!! 2. Internal Style / Header Style p {color:#FF0000; } 3. External Style

12 ลักษณะการเขียน CSS ที่ดี ควรเขียนให้เป็นระเบียบ body {background:#00FF00; color: #FFFF00; } ควรเขียน comment เพิ่มเติม.greenlink { color:#00FF00; } /* for link in left menu*/ กำหนดชื่อ ควรกำหนดให้สื่อ ความหมาย.backmenu { color:#FF0000; } .xxx{ color:#FF0000; } 

13 หน่วยใน CSS ขนาด pixelpxem pointpt picapc inchin millimetermm

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 : “TH SARABUN” ; src : url(fonts/sarabun.ttf); }

16 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 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-smallx-smallsmallmediumlargex-largexx-large 9px10px13px16px19px24px32px

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 text-transform : capitalize ตัวอักษรใหญ่ในตัวอักษรแรกของ คำ uppercase ตัวอักษรใหญ่ทั้งหมด lowercase ตัวอักษรเล็กทั้งหมด Welcome to CSS Class

25 white-space : pre คงทุกอย่างไว้เช่นเดิม normal จัดทั้งหมดให้อยู่ภายในกรอบ nowrap ไม่จัดเป็นหลายบรรทัด รวม เป็นบรรทัดเดียว Example CSS.Example CSS.Example CSS.Example CSS.


ดาวน์โหลด ppt CSS. CSS (Cascading Style Sheets) ข้อดี 1. แก้ไขง่ายและทำงานได้สะดวก 2. เว็บเพจมีขนาดเล็กลง 3. ใช้งานได้หลายครั้ง 4.Usability เป็นการกำหนดเฉพาะ 5. มีการตกแต่งมากมายให้เลือกใช้

งานนำเสนอที่คล้ายกัน


Ads by Google