คุณกำลัง login ด้วย [ เปลี่ยนชื่อ | ออกระบบ ]
 กระทู้ Top5 วันนี้ | นิยาย | ค้นหานิยาย | บอร์ดนักเขียน | บอร์ด AF | บอร์ด TheStar | ของที่ระลึก Dek-D | App อ่านนิยายบนมือถือ New! |
  นิยายรักหวานแหวว | นิยายรักเศร้าๆ | นิยายซึ้งกินใจ | นิยายแฟนตาซี | นิยายผจญภัย | เรื่องสบายๆคลายเครียด | แฟนฟิค | วรรณกรรมเยาวชน |
เข้าสู่ My.iD Control สมัครเป็นนักเขียนใหม่ | วิธีลงบทความ กฏเกณฑ์การใช้งาน | การควบคุมเรตติ้ง

Code และเทคนิคตกแต่ง My.iD2 และหน้าบทความ [Writer]

ตอนที่ 89 : [lesson] CSS > Introduction & syntax ... เบื้องต้นของ CSS


     อัพเดท 27 มิ.ย. 53
กลับไปหน้าหลักของบทความ
แจ้งเนื้อหาในตอนไม่เหมาะสม
นิยาย-เรื่องยาว: ไลฟ์สไตล์/ดีไซน์ กราฟิก
Tags: โค้ด, code, แต่งไอดี, ไอดี, แต่ง id, id, My.iD, My.iD2, ตกแต่ง, นิยาย
ผู้แต่ง : Caje ดูเน็ตเวิร์คอื่นๆ ของ Caje
My.iD: https://my.dek-d.com/Caje
< Review/Vote > Rating : 95% [ 233 mem(s) ]
This month views : 59 Overall : 219,381
4,449 Comment(s), [ แฟนพันธุ์แท้ 5120 คน ]

[ ตอนก่อนหน้า | กลับไปหน้าหลักของบทความ | ตอนถัดไป ] [ บันทึกเป็น Favorite ] [ ปิดหน้าต่างนี้ ]
Code และเทคนิคตกแต่ง My.iD2 และหน้าบทความ [Writer] ตอนที่ 89 : [lesson] CSS > Introduction & syntax ... เบื้องต้นของ CSS , ผู้เข้าชมตอนนี้ : 1629 , โพส : 8 , Rating : 100% / 1 vote(s)

ขนาดตัวอักษร : เพิ่มขนาด | ลดขนาด



ที่จริงก็ว่าจะสอนนานแล้ว แต่เพราะความขี้เกียจส่วนตัว เลยเพิ่งจะหยิบเอามาทำตอนนี้ล่ะค่ะ

* เขียนขึ้นจากความเข้าใจ พยายามเขียนให้เข้าใจง่าย อาจจะไม่ครอบคลุมทุกเรื่อง เพราะเลือกมาแต่เรื่องที่คิดว่าควรรู้ไว้

* หวังว่าจะทำให้ทุกท่านอ่านแล้วเข้าใจโค้ด และดัดแปลงโค้ดใช้เองได้มากยิ่งขึ้น อะไรที่พอทำเองได้ จะได้ไม่ต้องพึ่งต้องขอคนอื่นมากนัก

* ถ้าอ่านแล้วไม่เข้าใจตรงไหนก็ถามได้ค่ะ แต่ขอให้พยายามทำความเข้าใจ หรือแก้ปัญหาด้วยตนเองก่อน ลองผิดของถูกดูบ้างก็ดี เพราะประสบการณ์การเขียนโค้ดก็มาจากตรงนั้นแหละค่ะ


อ้างอิงข้อมูลจากหน้านี้นะคะ

http://www.w3schools.com/css/css_intro.asp
http://www.w3schools.com/css/css_syntax.asp

(ส่วนใหญ่จะคงคำทับศัพท์ไว้ เพราะคิดคำไทยไม่ออกจริงๆ)

CSS คืออะไร ?
- CSS ย่อมาจาก Cascading Style Sheets
- CSS กำหนดการแสดงผลของ HTML


รูปแบบการเขียน CSS



Selector คือ html element ที่เราต้องการจะปรับเปลี่ยน
การประกาศ (Declaration) แต่ละครั้ง จะประกอบด้วยคุณสมบัติ (Property) และค่า (Value)
Property เป็นรูปแบบที่เราต้องการจะเปลี่ยน แต่ละ Property จะมี Value เป็นตัวกำหนด

จากภาพตัวอย่างก็คือ เราจะเปลี่ยน h1 ให้มีสีน้ำเงิน และขนาดอักษร 12px นั่นเองค่ะ

สรุปรูปแบบ...

selector {property : value;}

ระหว่าง property กับ value จะมี : (colon) คั่น
เมื่อจบ declaration หนึ่งๆ จะปิดประโยคด้วย ; (semicolon) เสมอ
หนึ่ง selector สามารถมีได้หลาย declaration โดยจะจัดรวมกันอยู่ในวงเล็บปีกกา { }


ถ้าลองสังเกตโค้ด css เรื่อยๆ ก็จะเห็นว่ามีรูปแบบอย่างนี้เสมอค่ะ

เริ่มต้นเท่านี้ก่อนล่ะค่ะ ต่อไปจะค่อยเข้าเรื่อง id & class นะคะ





Dek-D Writer APP : แอพอ่านนิยาย Dek-D บน iPhone , Android Phone
มาแล้ว!! เวอร์ชั่น iPad และ Android Tablet
Code และเทคนิคตกแต่ง My.iD2 และหน้าบทความ [Writer] ตอนที่ 89 : [lesson] CSS > Introduction & syntax ... เบื้องต้นของ CSS , ผู้เข้าชมตอนนี้ : 1629 , โพส : 8 , Rating : 100% / 1 vote(s)
Vote ให้คะแนนตอนนี้ Vote ได้ 1 ครั้ง / 1 ชม.
[ ตอนก่อนหน้า | กลับไปหน้าหลักของบทความ | ตอนถัดไป ] [ บันทึกเป็น Favorite ] [ ปิดหน้าต่างนี้ ]
หน้าที่ 1
# 8 : ความคิดเห็นที่ 4099
ขอบคุณมากๆค่ะ รู้สึกว่าหายากจริงๆบทความที่จะเอาความรู้มาสอนให้เข้าใจง่ายๆแบบนี้
สำหรับคนที่กำลังเริ่มต้น ขอบคุณจริงๆค่ะ^^
PS.  "ความรักเป็นสิ่งที่ขาดไม่ได้" มันก็อาจจะจริง แต่จะให้มันมาก้าวก่ายหรือทำร้ายชีวิตเราก็ "ไม่ได้" เช่นกัน
Name : ice_suppha < My.iD > ดูเน็ตเวิร์คอื่นๆ ของ ice_suppha [ IP : 124.122.7.85 ]
ส่งข้อความลับ
วันที่: 13 ตุลาคม 2556 / 17:39
# 7 : ความคิดเห็นที่ 2557
เข้าใจง่ายมากเลยครับ ><
PS.  ไม่ว่าแกจะทำผิดยังไง...แกยังเป็นน้องสาวพี่อยู่เสมอนะ เนรุ
Name : In your dream < My.iD > ดูเน็ตเวิร์คอื่นๆ ของ In your dream [ IP : 124.122.110.186 ]
ส่งข้อความลับ
วันที่: 20 ตุลาคม 2554 / 14:55
# 6 : ความคิดเห็นที่ 781
จะรอติดตามอ่านต่อเหมือนกัน

อยากศึกษาเรื่องพวกนี้ดูบ้าง
PS.  เอสผู้น่าสงสาร บทก็ไม่ค่อยมี ยังมาตายอีก โอดัจจิใจร้าย ToT ไม่เห็นแก่แฟนคลับเอสบ้างเลย อาคาอินุ+หนวดดำ แกทั้งสองจงเตรียมตัวตายยยย!!!
Name : Mr.cupid < My.iD > ดูเน็ตเวิร์คอื่นๆ ของ Mr.cupid [ IP : 183.89.241.106 ]
ส่งข้อความลับ
วันที่: 30 มิถุนายน 2553 / 20:26
# 5 : ความคิดเห็นที่ 773

ตามรออ่านต่อฮะ //
.
.
.
#771
อ้าวต้นกล้า -_-
แล้วบทความที่เรารอตามอ่านเล่า
/me เกาหัว


PS.  "นักเขียนไม่มีสิทธิ์เป็นคนแปลกหน้ากับผู้อ่าน" -- รงค์ วงษ์สวรรค์
Name : ดรรชนี < My.iD > ดูเน็ตเวิร์คอื่นๆ ของ ดรรชนี [ IP : 202.29.54.58 ]
ส่งข้อความลับ
วันที่: 28 มิถุนายน 2553 / 12:32
# 4 : ความคิดเห็นที่ 771
ขอบคุณมากๆค่ะ ><
PS.  ●FICKLE●
Name : ɴȯ.ʙeer < My.iD > ดูเน็ตเวิร์คอื่นๆ ของ ɴȯ.ʙeer [ IP : 202.137.149.180 ]
ส่งข้อความลับ
วันที่: 27 มิถุนายน 2553 / 18:05
# 3 : ความคิดเห็นที่ 769
สุดยอดไปเลยค่ะ
จะรอตอนต่อไปนะคะ ^^

PS.  อยากหันไปรักคนที่เขารักเรา แต่มันก็ตัดใจจากคนที่เรารักเขา แต่เขาไม่เคยสนใจเราไม่ได้
Name : *_~LoveLove~_* < My.iD > ดูเน็ตเวิร์คอื่นๆ ของ *_~LoveLove~_* [ IP : 61.90.118.223 ]
ส่งข้อความลับ
วันที่: 27 มิถุนายน 2553 / 15:05
# 2 : ความคิดเห็นที่ 767
ขอบคุณมากค่ะ  ตอนนี้กำลังศึกษาเจ้าพวกนี้อยู่พอดีเลย

จะรอตอนต่อไปนะค่ะ ^^
Name : คุณเชย < My.iD > ดูเน็ตเวิร์คอื่นๆ ของ คุณเชย [ IP : 58.147.122.149 ]
ส่งข้อความลับ
วันที่: 27 มิถุนายน 2553 / 09:26
# 1 : ความคิดเห็นที่ 765
ติดตามๆ (ก๊าก)

ผมเคยสอนอยู่พักนึงเหมือนกัน แต่เลิกไปแล้ว (เพราะ...ขี้เกียจ)
Name : Fantasier < My.iD > ดูเน็ตเวิร์คอื่นๆ ของ Fantasier [ IP : 124.121.43.62 ]
ส่งข้อความลับ
วันที่: 27 มิถุนายน 2553 / 06:53
หน้าที่ 1
Post your comment : แสดงความคิดเห็น
ส่วนที่ 1: Message ข้อความ

ส่วนที่ 2 : Name ลงชื่อ
  โพสความเห็นด้วย member Login name Password
  โพสความเห็นไม่แสดง member : ชื่อ* email รูปตัวแทน
            พิมพ์เลขที่เห็น

เธซเธ™เธฑเธ‡เธชเธทเธญเนƒเธซเธกเนˆเธ›เธฃเธฐเธˆเธณเน€เธ”เธทเธญเธ™เธžเธคเธฉเธ เธฒเธ„เธก 2561

ข้อตกลง & เงื่อนไขการใช้งาน

  • กรณีที่ผลงานชิ้นนี้เป็นผลงานที่แต่งโดยผู้ลงผลงานเอง ลิขสิทธิ์ของผลงานนี้จะ
    เป็นของผู้ลงผลงานโดยตรง ห้ามมิให้คัดลอก ทำซ้ำ เผยแพร่ ก่อนได้รับอนุญาต
    จากผู้ลงผลงาน

  • กรณีที่ผลงานชิ้นนี้กระทำการคัดลอก ทำซ้ำ มาจากผลงานของบุคคลอื่นๆ ผู้ลง
    ผลงานจะต้องทำการอ้างอิงอย่างเหมาะสม และต้องรับผิดชอบเรื่องการจัดการ
    ลิขสิทธิ์แต่เพียงผู้เดียว

  • ข้อความและรูปภาพที่ปรากฏอยู่ในผลงานที่ท่านเห็นอยู่นี้ เกิดจากการส่งเข้าระบบ
    โดยอัตโนมัติจากบุคคลทั่วไป ซึ่งเด็กดีดอทคอมมิได้มีส่วนร่วมรู้เห็น ตรวจสอบ
    หรือพิสูจน์ข้อเท็จจริงใดๆ ทั้งสิ้น ผู้ใดพบเห็นการลงผลงานละเมิดลิขสิทธิ์ หรือ
    ไม่เหมาะสมโปรดแจ้งผู้ดูแลระบบเพื่อดำเนินการทันที
    Email: contact(at)dek-d.com ( ทุกวัน 24 ชม ) หรือ
    Tel: 0-2860-1142 ( จ-ศ 0900-1800 )

App อ่านนิยายบน iPad iPhone และ Android