CSS คืออะไร?

 

CSS มาจากคำว่า Cascading Style Sheets คือ ภาษาที่ถูกเขียนขึ้นเพื่อใช้จัดการรูปแบบเอกสาร HTML ให้มีความสวยงาม เช่น สี ขนาด ของตัวหนังสือ เป็นต้น

 

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

การเขียน CSS จะต้องมีการกำหนด selector และระบุ declarations อาจระบุ declarations 1 ตัวหรือมากกว่านั้นก็ได้ ระหว่าง declarations จะต้องคั่นด้วยเครื่องหมายอัฒภาค (;)

 

 

ตัวอย่าง

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

 

หรือ

 

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

 

 

หากต้องการแทรกข้อความช่วยจำ หรือคอมเมนท์ใน CSS ให้กำหนดข้อความอยู่ใน สัญลักษณ์  /*  ......  */  เช่น

 

/*This is a comment*/
p
{
text-align:center;
/*This is another comment*/
color:black;
font-family:arial;
}

 

 

นอกจาก selector เรายังกำหนดการเขียน CSS ด้วย Class และ ID

หาก HTML element มีการกำหนดเป็น ID เวลาเขียน CSS จะต้องขึ้นต้นด้วยเครื่องหมาย # แล้วตามด้วยชื่อ ID แล้วค่อยระบุค่า declarations เช่น

 

#para1
{
text-align:center;
color:red;
}

 

 

หาก HTML element มีการกำหนดเป็น Class เวลาเขียน CSS จะต้องขึ้นต้นด้วยเครื่องหมาย . แล้วตามด้วยชื่อ Classแล้วค่อยระบุค่า declarations เช่น

 

.para2
{
text-align:center;
color:red;
}

 

บางครั้งเราอาจระบุให้ selector ใช้ Style ของ Class ก็ได้ เช่น

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

 

 

***  หมายเหตุ ***

สำหรับ HTML element สามารถกำหนด Selector ID ชื่อหนึ่งๆ ได้เพียงครั้งเดียวในหน้านั้น หากมีการกำหนดมากกว่า 1 จะถือว่าใช้อันที่อยู่ล่างสุด  ส่วน Selector Class สามารถระบุได้หลายๆครั้งในหน้าหนึ่งๆ

 

 

Portfolios กับ CSS

เราสามารถใช้ CSS เข้ามาจัดการหน้า Portfolios ของเราให้สวยงามได้ เพื่อเพิ่มสีสันให้มีความสะดุดตา ึ่งจะกล่าวในบทความถัดไปครับ

 

 

 

Views: 112

Comment

You need to be a member of PORTFOLIOS*NET to add comments!

Join PORTFOLIOS*NET

© 2009-2022   PORTFOLIOS*NET by CreativeMOVE.   Powered by

Badges  |  Report an Issue  |  Terms of Service