บทที่ 1 ความรู้เบื้องต้นเกี่ยวกับ CSS3
CSS ย่อมาจาก Cascading style sheet คือภาษาที่ใช้เป็นส่วนของการจัดรูปแบบการแสดงผลเอกสาร HTML เช่น สีอักษร สีพิ้นหลัง ขนาดตัวอักษร จัดการเลย์เอ้าท์ ให้สวยงามและอื่นๆ ปัจจุบันที่ใช้กันคือ css3 ซึ่งโค้ด CSS3 ก็ถูกพัฒนามาจาก CSS แบบธรรมดา สามารถกำหนดทำอะไรได้มากขึ้น สวยงามขึ้น และบางโค้ดอาจสั้นลง เพื่อการจดจำง่าย ไม่ยุ่งยากและซับซ้อนน้อยลง
ใน CSS3 นั้น ระบบการทำงานแต่ละอย่างจะถูกแยกออกมาเป็น Module เดี่ยวๆ ของใครของมัน รวมไปถึง Selectors ของ CSS3 เองด้วย ใน CSS2 Selectors นั้น W3C ได้รวมเอา Selectors เป็นองค์ประกอบหลักของการเขียน CSS ใน ทุกๆ Models (CSS2 เรียก Model ส่วน CSS3 เรียก Module) CSS3 นั้นแยกเนื้อหาออกเป็น Modules ซึ่งในแต่ละ Module นั้นจะมี CSS Properties และ Values เพื่อใช้ในการควบคุมการแสดงผล ของ HTML โดยสื่อสารผ่าน Selectors ซึ่งใน CSS3 ทาง W3C ได้ยกเรื่องของ Selectors ออกมาเป็น CSS Selectors Module Level 3 ซึ่งถือเป็น Module แรกสุดของ CSS3 ที่ประกาศเป็นสถานะ PR (Proposed Recommendation) แต่ในขณะเดียวกัน CSS2.1 ยังอยู่ในสถานะ CR (Candidate Recommendation) อยู่เลย
CSS3 มี Feature ใหม่เพิ่มขึ้นมา ดังนี้ (มีจะสอนวิธีการใช้งานในบทเรียนถัดไป)
- Border Radius ง
- Border Images
- Box Shadow
- Multi-Column Layout
- Font-face
- Attribute Selectors
- Opacity and RGBA
Module หลักๆ ของ css3 มีดังนี้
-Selectors
-Box Model
-Backgrounds and Borders
-Text Effects
-2D/3D Transformations
-Animations
-Multiple Column Layout
-User Interface
ข้อมูลอ้างอิง
http://www.phpparty.com
http://www.w3schools.com
- คุณอยู่ที่:
- บทเรียนออนไลน์
- บทเรียน CSS
- บทที่ 1 ความรู้เบื้องต้นเกี่ยวกับ CSS3 ใช้จัดรูปแบบการแสดงผลให้สวยงามขึ้น
- grid-auto-columns ช้เพื่อระบุขนาดสำหรับคอลัมน์ของคอนเทนเนอร์กริด
- การฟิคแถบ Navbar ในโหมดมือถือโดยเลือกฟิคส่วนที่ต้องการเท่านั้น
- Tips CSS : การฟิคแถบ Navbar โดยใช้ JavaScript
- วิธีกำหนดขนาดช่อง Description ใน Thumbnail
- Media Query หรือ การเขียนเงื่อนไขใน CSS3 กำหนดขนาดมุมมองอุปกรณ์
- วิธีปรับระยะห่างของวัตถุด้วย Margin
- บทที่ 1 ความรู้เบื้องต้นเกี่ยวกับ CSS3 ใช้จัดรูปแบบการแสดงผลให้สวยงามขึ้น
- บทที่ 2 CSS3 Borders ตอนที่ 2 ใส่เงาให้กรอบรูปภาพ
- บทที่ 2 CSS3 Borders ตอนที่1 ทำเส้นขอบให้โค้ง
- บทที่ 2 CSS3 Borders ตอนที่ 3 ใช้รูปแบบทำเป็นกรอบรูป
- บทที่ 3 CSS3 Backgrounds สร้างพื้นหลังบนหน้าเว็บ
- บทที่ 4 CSS3 Text Effects ตอน1 ใส่เอฟเฟคเงาให้ตัวอักษร
- บทที่ 4 CSS3 Text Effects ตอน 2 จัดข้อความไม่ให้ล้นกรอบ
- บทที่ 5 CSS3 fonts ตอน 1 @font-face นำฟอนต์สวยๆ มาใส่ในเว็บไซต์
- บทที่ 5 CSS3 fonts ตอน 2 การใช้งาน font ที่แปลงด้วย @font-face แล้ว
- บทที่ 6 CSS3 2D Transforms ตอน 1 ทำวัตถุให้เอียง
- บทที่ 6 CSS3 2D Transforms ตอน 2 ปรับขนาดให้วัตถุ
- บทที่ 6 CSS3 2D Transforms ตอน 3 การย้ายตำแหน่งวัตถุ
- บทที่ 6 CSS3 2D Transforms ตอน 4 การพลิกวัตถุ
- บทที่ 6 CSS3 2D Transforms ตอน 5 ปรับเปลี่ยนรูปแบบ Matrix Transform
- บทที่ 7 CSS3 3D Transforms การสร้างรูป 3 มิติ
- บทที่ 8 CSS3 Transitions การใส่เอฟเฟค เพื่มลูกเล่นให้เว็บไซต์
- บทที่ 9 CSS3 Animations ตอน 1 สร้างภาพเคลื่อนไหวและเปลี่ยนสีตามที่ต้องการ
- บทที่ 9 CSS3 Animations ตอน 2 คำสั่งที่เพิ่มลูกเล่นให้หลากหลายกับ Animations
- CSS Box Sizing การกำหนดขนาดของกล่อง Element ใน CSS
- บทที่ 10 CSS3 Multiple Columns ตอน 1 การแบ่งคอลัมน์
- บทที่ 10 CSS3 Multiple Columns ตอน 2 การกำหนดระยะห่างของคอลัมน์
- บทที่ 10 CSS3 Multiple Columns ตอน 3 สร้างเส้นขั้นระหว่างคอลัมน์
- บทที่ 11 CSS3 User Interface
- วิธีทำเมนู Drop Down ที่รองรับการใช้งานบนมือถือ
- การใช้งาน background-position จัดตำแหน่งพื้นหลังในกรณีพื้นหลังเป็นรูปภาพ
- การปรับค่า Opacity (โอพาซิตี้) หรือความทึบแสง ใน CSS
- วิธี Fix แถบ Navbar ให้อยู่คงที่เมื่อเลื่อนเนื้อหาในหน้าเว็บด้วย Bootstrap
- การสร้างแถบเมนูและแถบเมนูย่อยใน Bootstrap (บูธสแทร็ป)
- การทำวีดีโอให้ย่อตามขนาดของหน้าจอ
- การเปลี่ยนสีของตัวอักษรเมื่อนำเม้าส์ (Mouse) ไปชี้
- เทคนิคการเปลี่ยนกรอบรูปจากสี่เหลี่ยมให้กลายเป็นวงกลมใน CSS
- หมวดหลัก: บทเรียน - เขียนโปรแกรม เบื้องต้น
- หมวด: บทเรียน CSS
ให้เรตสมาชิก: 3 / 5





เนื้อหาใกล้เคียง
- 2547-09-22 - แท็กที่เกี่ยวกับตัวอักษร HTML
- 2547-09-22 - แท็กรูปแบบพารากราฟ Paragraph ใน HTML
- 2547-08-30 - โครงสร้างภาษา HTML (HyperText Markup Language)
- 2547-09-22 - แท็กการสร้างฟอร์ม HTML เอชทีเอ็มเเอล
- 2547-09-22 - แท็กรูปแบบตาราง Table ใน HTML มีทั้งหมด 4 รูปแบบ
กระทู้ล่าสุดจากเว็บบอร์ด