แบบทดสอบ Online

สถิติผู้เข้าชม

506783
TodayToday158
YesterdayYesterday290
This WeekThis Week2142
This MonthThis Month4841
All DaysAll Days506783

ROBOT TEAM


warayuphat panumphan 'Kru Pu', Powered by Joomla!
11css PDF Print E-mail
Written by Administrator   
Tuesday, 16 October 2018 06:49

พื้นฐาน CSS
CSS เป็นคำสั่งเสริมที่ใช้คู่กับ HTML เพื่อใช้จัดรูปแบบของเว็บเพจ ให้มีหน้าตา สีสัน ตัวอักษร เส้นขอบ พื้นหลัง ระยะห่าง ฯลฯ อย่างที่เราต้องการ ด้วยการกำหนดคุณสมบัติให้กับ Element ต่างๆ ของ HTML

บทนำ CSS

CSS ย่อมาจาก Cascading Style Sheets เป็นคำสั่งที่เข้ามาเสริมการแสดงผลของ HTML ซึ่งมีข้อดีมากมายเช่น

1. สามารถแก้ไขเว็บเพจได้หลายๆหน้า พร้อมกัน

2. ลดปัญหาการแสดงผลที่ผิดเพี้ยน เช่น ภาษาต่างดาว

3. ช่วยให้การทำเว็บมีประสิทธิภาพมากขึ้น

4. ช่วยให้การทำเว็บ เช่น อาจไม่ต้องใช้คำสั่ง table ของ HTML ซึ่งจะทำให้การแสดงผล มีความถูกต้องและยืดหยุ่นมากขึ้น

5. การกลับมาแก้ไขเว็บเพจ ทำได้ง่ายขึ้น

CSS syntax

CSS เป็นตัวกำหนดการแสดงผลใน HTML ว่าจะให้แสดงผลแบบไหน สีอะไร ตัวอักษรแบบใด

รูปแบบคำสั่ง CSS ประกอบไปด้วย 3 ส่วน ดังนี้

selector {property: value}

1.Selector คือ ส่วน HTML tag ที่เราต้องการจะให้แสดงผล เช่น <table> ก็จะแสดงผลในส่วนของตาราง

2.Property คือ ส่วนของคุณสมบัติที่เราต้องการให้แสดง เช่น สีตัวอักษร , ชนิดตัวอักษร , ขนาดตัวอักษร

3.Value คือ ค่าที่เราต้องการให้แสดง เช่น ตัวอักษรสีแดง , ตัวอักษรแบบ tahoma , ตัวอักษรขนาด 12 pt

ตัวอย่างรูปแบบการใช้งาน

table { color : red }

การใช้งานเมื่อ value เป็นคำที่มีมากว่า 1 คำ เราจะใส่ value ในเครื่องหมาย ""

p { font - family : "sans serif" }

ถ้ามี property มากกว่า 1 ใช้ ; คั่นระหว่าง property เช่น ต้องการให้มีการจัดตัวอักษรให้อยู่กึ่งกลาง และตัวอักษรมี สีแดง

p { text - align : center ; color : red }

ถ้ามีหลาย property มากๆ อาจเขียนแต่ละอัน ให้อยู่คนละบรรทัดกันได้

p
{
text - aling : center ;
color : black ;
font-family : arial
}

อาจเขียนให้ selectors หลายตัวมี property เหมือนกันก็ได้เช่น เขียนให้สีหัวข้อ เป็นสีเขียว ทั้งหมด

h1,h2,h3,h4,h5,h6
{
color : green
}

 

แบบฝึกหัด

1. css ย่อมาจาก

2. การกำหนด Style HTML ด้วย CSS สามารถกำหนดได้กี่แบบอะไรบ้าง

3. การกำหนด <style> </style> ใน Tag <head> </head> คือการกำหนด Style HTML ด้วยวิธีใด

4. การกำหนด External CSS ในไฟล์ HTML จะมีการติดต่อกับ CSS อย่างไร

5. การเขียน CSS file ควรมี Tag HTML หรือไม่

6. CSS Syntax มีส่วนประกอบอะไรบ้าง พร้อมยกตัวอย่าง

 

 

Last Updated on Wednesday, 19 December 2018 01:56
 

Poll กรุณาตอบคำถามค่ะ

คุณเขียนโปรแกรมบ่อยแค่ไหน
 

Poll สื่อการสอน

สื่อแบบไหน ที่คุณชอบ
 

จำนวนผู้ชมที่ online ขณะนี้

We have 40 guests online

analogclock

search engine

Banner
Banner
Banner
Banner
Banner
Banner
Banner
Banner
Banner
Banner
Banner