CSS เบอ้ื งตน้
• ทาไมตอ้ งมี CSS?
ก่อนหนา้ น้ี เรารู้แลว้ วา่ HTML คือโครงสร้างของ
เน้ือหาในเวบ็ เพจ หรือพดู ง่ายๆ กค็ ือ HTML เอาไว้
บอกวา่ ในหนา้ เวบ็ น้นั มีเน้ือหาอะไรบา้ ง
โดยทว่ั ไปแลว้ web browsers จะมีการกาหนด
“สไตล”์ ใหก้ บั เน้ือหาเหล่าน้ีเอาไวอ้ ยแู่ ลว้ แต่มนั อาจจะ
ไม่ค่อยสวยเท่าไรนกั
ในการปรับเปล่ียน “สไตล”์ ใหก้ บั เน้ือหา เราจะใชส้ ิ่งท่ีเรียกวา่
“CSS (Cascading Style Sheets)” เขา้ มาช่วย ไม่
วา่ จะเป็นการจดั ตาแหน่งของเน้ือหา ปรับขนาดของตวั อกั ษร
หรือเปล่ียนสีพ้นื หลงั สิ่งเหลา่ น้ี ลว้ นทาผา่ น CSS ท้งั สิ้น หรือ
พดู ง่ายๆ กค็ ือ
CSS มีไวบ้ อก web browsers วา่ เน้ือหาต่างๆ ควร
แสดงผลออกมาอยา่ งไร
CSS Rule
• อยา่ ลืมวา่ เน้ือหาต่างๆ ในหนา้ เวบ็ น้นั ถกู สร้างมาจาก “HTML
Elements” การจะตกแตง่ สไตลใ์ หก้ บั เน้ือหา กค็ ือการใส่สไตลใ์ หก้ บั
HTML Elements นน่ั เอง
• วธิ ีการกค็ ือ เราจะตอ้ งสร้าง “กฎเกณฑ”์ หรือสิ่งท่ีเรียกวา่ “CSS Rule”
ข้ึนมา ซ่ึง CSS Rule น้ีเอง ท่ีจะเป็นตวั บอกวา่ HTML
Elements
• ไหนท่ีเราอยากจะปรับ และอยากปรับใหเ้ ป็นแบบไหน โดยมนั จะแบ่ง
ออกเป็น 4 ส่วน ดว้ ยกนั ดงั น้ี
• Selector
• คือส่วนทเี่ อาไวร้ ะบุ HTML Element ท่ีเราตอ้ งการจะปรับสไตล์ สมมติวา่ เราอยากจะ
เปลยี่ นสไตลข์ อง h1 ใหเ้ รากาหนด Selector ใหเ้ ป็น h1
• Curly Brackets
• เราสามารถกาหนดสไตลห์ ลายๆ ดา้ น ไดใ้ น CSS Rule เดียว การกาหนดสไตลเ์ หล่าน้ีจะ
เรียกว่า “CSS Declarations” ซ่ึงเราจะตอ้ งครอบมนั ท้งั หมดดว้ ยปี กกา
• Property
• เป็นการระบุว่าเราอยากปรับลกั ษณะอะไร สมมติว่า เราอยากปรับ “การจดั ตาแหน่งขอ้ ความ” กจ็ ะ
ไดว้ ่า “text-align” คือ Property
• Value
• เป็นการระบุวา่ เราอยากปรับลกั ษณะน้นั ใหเ้ ป็นแบบไหน สมมติวา่ เราอยากปรับ “การจดั
ตาแหน่งขอ้ ความ” ใหเ้ ป็น “ก่ึงกลาง” เราจะไดว้ ่า “center” คือ Value
<html>
<head>
<title>CSS Tutorials</title>
</head>
<body>
<h1>CSS Tutorials</h1>
<p>Go to Google.com
<a href="http://www.google.com">Google.com</a>
</p>
</body>
</html>
• เปลี่ยน “สีพ้ืนหลงั ” ของ body จากเดิม “สีขาว ” มาเป็น “สีดา”
• เปล่ียน “สีตวั อกั ษร” ของ body จากเดิม “สีดา” มาเป็น “สีส้ม”
• เปิ ด Notepad พิมพ์
body {
background-color: #000;
color: #eb8c4a;
}
ลงไป แลว้ เซฟวา่ style.css
<html>
<head>
<title>CSS Tutorials</title>
</head>
<body>
<link rel="stylesheet" type="text/css" href="style.css">
<h1>CSS Tutorials</h1>
<p>Go to Google.com
<a href="http://www.google.com">Google.com</a>
</p>
</body>
</html>
• กาหนด “แบบตวั อกั ษร” ของ body ใหเ้ ป็น “Arial”
• กาหนด “ขนาดตวั อกั ษร” ของ body ใหเ้ ป็น “24px”
body {
background-color: #000;
color: #eb8c4a;
font-family: Arial;
font-size: 24px;
}
กาหนด “การจดั ตาแหน่งตวั อกั ษร” ของ body
จากเดิม “ชิดซา้ ย” มาเป็น “ก่ึงกลาง
body {
background-color: #000;
color: #eb8c4a;
font-family: Arial;
font-size: 24px;
text-align: center;
}
เปลี่ยน “สีตวั อกั ษร” ของ h1 จากเดิม “สีสม้ ” มาเป็น “สี
เหลือง”
h1 {
color: #ffcc57;
}
• เปล่ียน “สีตวั อกั ษร” ของ a จากเดิม “สีน้าเงิน” มาเป็น “สีฟ้ า”
• เปล่ียน “น้าหนกั ตวั อกั ษร” ของ a จากเดิม “ตวั ปกติ” มาเป็น
“ตวั หนา”
a{
color: #00ACEE;
font-weight: bold;
}
The words you are searching are inside this book. To get more targeted content, please make full-text search by clicking here.
CSS เบื้องต้น
Discover the best professional documents and content resources in AnyFlip Document Base.
Search
CSS เบื้องต้น
- 1 - 12
Pages: