การทำเว็บไซต์สำหรับเด็ก - CSS

() translation by (you can also view the original English article)

ยินดีต้อนรับเข้าสู่บทเรียนที่ห้าของซีรีย์การทำเว็บไซต์สำหรับเด็กของเรา วันนี้เราจะมาเรียนเรื่อง CSS กัน

เราได้ทำงานอย่างหนักบนเนื้อหาภายใน HTML งั้นถึงเวลาแล้วที่เราจะทำให้มันดูสวยจริงๆ เสียที เราได้เพิ่มหลายสิ่งเข้าไปในหน้า HTML ที่นี่ และที่ต้องทำถัดจากนี้คือสร้างไฟล์ใหม่ชื่อไฟล์ CSS

ลองดูเว็บไซต์ที่เรากำลังจะสร้างเมื่อเสร็จสมบูรณ์แล้ว ไฟล์สำหรับบทเรียนนี้ สามารถดาวโหลดน์ได้ที่นี่ และต้องอย่าลืมที่จะถามคำถามในกล่องคอมเม้นต์ด้านล่างได้เลย

จริงๆ แล้ว CSS คืออะไร

ก่อนที่เราจะเริ่มเขียนโค้ด เราต้องเข้าใจจริงๆก่อนว่า CSS คืออะไร CSS นั้นย่อมาจาก Cascading Style Sheets และมันเป็นภาษาที่ช่วยให้เราเปลี่ยนหน้าตาของเพจ HTML ที่เราเขียนขึ้นได้

จากภาพด้านบน เบราว์เซอร์ด้านซ้ายจะแสดงเว็บไซต์ที่ไม่มี CSS หรือไม่มีการใส่สไตล์ ขณะที่ด้านขวาจะมีการใส่สไตล์เข้ามา การใส่สไตล์นั้นควรเขียนไว้ในไฟล์ CSS จะเป็นการดีที่สุด

CSS นั้นถูกเขียนด้วยไฟล์แยกโดยใช้ text editor ขณะที่เอกสาร HTML นั้นถูกเซฟด้วยนามสกุล .html แต่ไฟล์ CSS จะถูกเซฟด้วยนามสกุล .css

การสร้างไฟล์ CSS

เรายังต้องการที่จะสร้างเอกสารใหม่ใน text editor ของเรา จากนั้นบันทึกมันชื่อ "tutstown.css" ใน "tutsfolder" อยู่ข้างๆ ไฟล์ "index.html" และโฟลเดอร์ "images"

HTML และ CSS

ในการที่จะให้ไฟล์ CSS นั้นใส่สไตล์ไปที่เอกสาร HTML เราต้องทำการเชื่อมมันเข้าด้วยกัน อันนี้สามารถทำได้โดยใช้ <link> ใส่ในอิลิเมนต์ head ซึ่งอยู่ส่วนบนสุดของเอกสาร HTML

เราจะเพิ่มลิ้งค์นี้เข้าไปในใต้ title ของเรา

1	<head>
2	<title>Tuts Town</title>
3	<link type="text/css" rel="stylesheet" href="tutstown.css" />
4	</head>

นอกจากนี้ยังมีแอตทริบิวต์ที่สำคัญๆ ที่จะใส่ภายในอิลิเมนต์ที่ปิดด้วยตัวเองอันนี้ ตัวแรกเลยคือ type แอตทริบิวต์ type นั้นจะบอกให้เบราว์เซอร์รู้ว่าเราจะลิ้งค์กับไฟล์แบบไหนหรือ type อะไร ในกรณีนี้คือไฟล์ text/css

ในแอตทริบิวต์ตัวที่สองนั้นคือ rel ที่ซึ่งจะบอกให้เบราว์เซอร์รู้ความสัมพันธ์ระหว่าง HTML ของเรากับไฟล์ที่ถูกลิ้งค์ (ในที่นี้คือ CSS นั่นเอง) ไฟล์ CSS ของเราคือสไตล์ชีท (stylesheet) ของ HTML ดังนั้นเราจะใส่มันไว้แบบนี้

สุดท้ายแล้วเราจะใช้ href ที่ซึ่งคุณน่าจะจำได้จาก <a> นั่นเอง มันจะชี้ไปที่ๆ หนึ่ง ในกรณีนี้ มันจะบอกเบราว์เซอร์เกี่ยวกับตำแหน่งของ CSS ที่ลิ้งค์ไป

ถ้าเราทำทุกอย่างถูกต้อง หน้าเพจจะดูแตกต่างเมื่อเรารีเฟรชในเบราว์เซอร์

เกี่ยวกับคลาส (Class)

ในไฟล์ CSS ของเรา เราสามารถระบุอิลิเมนต์ HTML ที่เราได้เคยใช้ไปและดูว่ามันแสดงผลออกมาอย่างไร ยังมีวิธีจำนวนมากมายที่จะเลือกไปที่อิลิเมนต์ที่เราต้องการ และการใช้ class ของ HTML ก็เป็นหนึ่งในวิธีเหล่านั้น

class ของ HTML คือแอตทริบิวต์ที่เราสามารถเพิ่มเข้าไปในอิลิเมนต์ เมื่ออิลิเมนต์นั้นมีชื่อ class แล้ว เราก็สามารถใช้มันได้ใน CSS

ซึ่ง class ที่เราตัวชื่อควรจะเป็นตัวอธิบายเนื้อหาภายในอิลิเมนต์นั้น

เพิ่ม class ไปที่ <header> ของเรา ด้วยวิธีการประมาณนี้

1	<header class="primary-header"> </header>

class นั้นไม่ unique หมายถึงอิลิเมนต์อื่นๆ สามารถใช้ class นั้นซ้ำได้ นี่ทำให้การเพิ่มสไตล์เดียวกันเข้าไปในอิลิเมนต์หลายๆ อันนี้เป็นไปได้ เราจะใช้วิธีเหล่านี้เมื่อเราต้องการเก็บรูปภาพ

เราจะเขียน CSS ได้อย่างไร

กฏของเขียนโค้ดนั้นเราเรียกมันว่า syntax ไม่ใช่แค่ HTML แต่ CSS ก็ยังต้องการวิธีการเขียนที่ถูกต้องเพื่อให้มันทำงานได้

งั้นกระโดดที่ไปไฟล์ CSS ของเรา และลองเปลี่ยน background-color ของส่วนหัวให้เป็นสีฟ้า blue ดู

1	.primary-header {
2	background-color: blue;
3	}

ยังมีอีกหลายส่วนมากที่ต้องทำให้ถูกต้อง

ดังที่ CSS ของเรานั้นรู้ว่าสิ่งที่เราระบุนั้นคือชื่อ class เราจำเป็นต้องทำสิ่งเล็กๆ น้อยๆ เหล่านี้

เราต้องใส่จุด . ไว้ข้างหน้าชื่อ class
คำสั่งของสไตล์ต้องอยู่ภายใต้เครื่องหมายปีกกา { }
คำสั่งที่เราเขียนสไตล์ (เช่น background-color) นั้นต้องถูกต่อท้ายด้วยโคล่อนทันที :
จากนั้นเราสามารถใส่ค่า (เช่นสีฟ้าหรือ blue ได้ในกรณีนี้)
แต่ละสไตล์จะปิดท้ายด้วยเซมิโคล่อน ;

มันง่ายมากเลยที่จะลืมสิ่งเหล่านี้!

เซฟไฟล์ CSS นี้แล้วรีเฟรชเบราว์เซอร์ ถ้าคุณไม่มีเบราว์เซอร์ตัวใดที่เปิดอยู่ คุณสามารถดับเบิ้ลคลิกที่ "index.html" ได้เลย ไฟล์นั้นจะอยู่ใน "tutsfolder" เป็นระเบียบใช่ไหมหล่ะ!

สำคัญมาก จากนี้ให้ลบสไตล์ของเว็บไซต์ออกไม่ให้มันมีสีฟ้าอีก

วิธีเขียนคอมเม้นท์

CSS นั้นยังอนุญาตให้เราใส่คอมเม้นท์ไว้ในไฟล์ของเราที่เบราว์เซอร์จะไม่สนใจมัน แต่มันจะดูแตกต่างจากคอมเม้นท์ของ HTML ที่ทั่วไปของเรา

การคอมเม้นท์ใน CSS จะใช้สัญลักษณ์เหล่านี้ /* */

1	/* This is a comment in CSS */

ไฟล์ CSS ใน ไฟล์แบบฝึกหัดของเรา นั้นจะมีคอมเม้นท์ที่มีประโยชน์ใส่ไว้ในนั้นด้วย

ส่วน Body

ในส่วนแรกของของการสไตล์ที่เราสามารถทำบนเว็บไซต์ของเราได้คือเปลี่ยนสีพื้นหลังหรือ background-color ให้เป็นสีเหลืองสว่างสดใส มีสีบางสีสามารถเขียนชื่อสีไปใน CSS ได้โดยตรง อย่างเช่น blue ที่แสดงสีฟ้าในตัวอย่างด้านบน และแน่นอนเบราว์เซอร์สามารถเข้าใจมันได้ สำหรับสีที่ไม่เป็นที่นิยม เราจะใช้สิ่งที่เรียกว่า hexadecimal หรือเรียกสั้นๆ ว่า hex ซึ่งเป็นรหัสสีเลขฐานสิบหกแทน

สีทั้งหมดจะมีรหัสเลขฐานสิบหกที่เข้าคู่กัน เบราว์เซอร์จะไม่เข้าในชื่อสีหลายสีที่เขียนลงไปแต่มันจะเข้าใจรหัสสีที่เป็นเลขฐานสิบหกได้เป็นอย่างดี รหัสสีฐานสิบหกสำหรับสีเหลืองอ่อนๆ คือ #FAF8DA และเราต้องการที่จะใส่ไว้ในส่วนของ <body> ของทั้งหน้าเพจ

1	body {
2	background-color: #FAF8DA;
3	}

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

ถ้าคุณอยากรู้เพิ่มเติมเกี่ยวกับรหัสสี เว็บนี้ นี่เหมาะเลย

รูปแบบตัวอักษร (Fonts)

เราสามารถตั้งค่ารูปแบบตัวอักษร (font) สำหรับเว็บไซต์ของเราที่ body ได้ โดยใช้ CSS

ทั้งหมดที่เราต้องรู้เกี่ยวกับจุดนี้คือเราต้องเชื่อม (link) รูปแบบตัวอักษรจาก Google ไปที่เอกสาร HTML ของเรา เมื่อเราทำการเชื่อมแล้ว เบราว์เซอร์จะเข้าใจและใช้งานมันได้

นี่คือสิ่งที่เราจะเห็นเมื่อเราใส่มันไว้ในส่วนของ <head> ใน HTML (จุดเดียวกับที่เราเชื่อมไฟล์ CSS นั่นแหละ)

1	<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>

จากนั้นเราสามารถเซฟและไปทำงานที่ไฟล์ CSS ต่อได้เลย

1	body {
2	font-family: 'Open Sans';
3	}

โค้ดนี้จะทำการ set font ทั้งหมดบนหน้าเพจให้เป็น Open Sans

ส่วน Header

ภายในส่วนของ header เราจะเปลี่ยนสีและขนาดของตัวอักษรให้เข้ากับขนาดรูปเมืองของเรา

อย่างแรกเลย เราต้องเพิ่ม HTML class ไปที่อิลิเมนต์โดยตรงในส่วนของ header จากนั้นเราสามารถใช้มันได้ใน CSS

ภายในแท็กเปิด <h1> ลองใส่ class ชื่อ main-heading และภายใน <img> ลองใส่ class ชื่อ town-preview ลงไป

1	<header>
2	<h1 class="main-heading">Welcome To Tuts+ Town</h1>
3	<img class="town-preview" src="images/townheader.svg" alt="An illustration of Tuts Town tower." />
4	</header>

ในไฟล์ CSS เราสามารถยิงตรงไปที่อิลิเมนต์เหล่านี้ผ่านชื่อ class ที่เราตั้งตอนเริ่มต้นสไตล์

เราจะตั้งค่าขนาดของตัวอักษรที่ค่อนข้างใหญ่ไว้ที่ 70px px หรือ pixel นี่คือหน่วยของจุดเล็กๆบนหน้าจอ จุดเหล่านี้จะถูกใส่ด้วยสีและถูกใช้เป็นหน่วยวัด รูปภาพของเมืองเราค่อนข้างใหญ่ ดังนั้นเราจะตั้งค่ามันไว้ที่ความกว้าง 650px

พร้อพเพอร์ตี้ color นั้นตั้งค่าสีของตัวอักษรที่ซึ่ง (#205D76) นั้นคือสีฟ้าเข้ม

.main-heading {
    font-size: 70px;
    color: #205D76;
}

.town-preview {
    width: 650px;
}

ส่วน Main

จำได้ไหม ภายใน main เราต้องการส่วน section เล็กๆ ที่มีรูปภาพและข้อความสั้นๆ เราต้องตั้งค่ารูปภาพเหล่านี้และสไตล์ส่วนของหัวข้อและรายการด้วย CSS

รูปภาพทั้งหมด

สิ่งสำคัญอย่างแรกที่เราต้องการคือตั้งค่าขนาดของภาพตึก เพื่อเซ็ตขนาดภาพไปพร้อมกัน เราสามารถใช้ชื่อ class เดียวกันในแต่ละอิลิเมนต์

เราจะต้องการเพิ่มชื่อ class ชื่อ building ไปที่รูปตึกใน HTML ของเรา จากนั้นปรับขนาดพวกมันด้วย CSS ในครั้งเดียวแบบนี้

1	.building {
2	width: 200px;
3	}

ส่วนของ heading

สามส่วนหัวเล็กๆ นั้นสามารถมีชื่อ class ที่เหมือนกัน เรายังสามารถใช้เพื่อเปลี่ยนสี (color) และขนาดตัวอักษร (font-size) ของข้อความได้

1	.category-heading {
2	color: #205D76;
3	font-size: 30px;
4	}

ลิสต์รายการและลิ้งค์ (Lists and Links)

หลังจากส่วนหัวที่อยู่ภายใต้แต่ละ section เรานั้นมีลิสต์ของร้านค้าที่เป็นแบบไม่เรียงลำดับ (unordered list) ยังจำมันได้ไหม เพิ่มเติม เพื่อที่จะเปลี่ยนขนาดและสีของลิ้งค์ที่นี่ เรายังต้องการเปลี่ยนสีการรายการที่จุดกลมๆ (bullet point)

ลองเพิ่ม class ชื่อ store-list ไปที่ <ul> และ store-link ไปที่ <a> ในเอกสาร HTML ของเราจากนั้นกดเซฟ

.store-list {
    color: #FFC122; /* Changes list’s bullet point color */
}

.store-link {
    color: #EA6E2F;
    font-size: 20px;
}

คุณจะสังเกตเห็นว่า ระหว่างที่เรามองเว็บไซต์ในเบราว์เซอร์ มันไม่มีเนื้อที่ว่างมากมายระหว่าง list item ทำให้มันดูอึดอัด เราจะยังพูดคุยทั้งหมดเกี่ยวกับช่องว่างและการจัดเลเอ้าท์ถัดไปในซีรีย์นี้

ส่วน Footer

หลังจากที่เราเพิ่มคลาส primary-footer ไปที่ <footer> และ created-by ไปที่อิลิเมนต์ <p> ภายใน footer เรายังสามารถประกาศ background-color และประกาศ color หรือสีของตัวอักษรและขนาดของมัน (font-size) ได้

.primary-footer {
    background-color: #FFC122;
}

.created-by {
    color: #FFFFFF;
    font-size: 20px;
}

สรุป

ในบทเรียนนี้เราได้เรียนรู้เกี่ยวกับการเชื่อม HTML และ CSS เข้าด้วยกัน จากนั้นเราได้ใส่สไตล์สวยๆ น่ารักๆ เข้าไปในอิลิเมนต์ของเราโดยใช้ class จากจุดนี้ อะไรก็ตามที่เราเห็นในเบราว์เซอร์จะไม่ตรงกับตัวต้นแบบที่เราได้เห็นไว้ แต่ลองมองดูความต่างของสีและขนาดอักษรที่เราได้ทำไปแล้วดู มันกำลังจะดีขึ้นเรื่อยๆ

ถัดไปเราจะย้ายเนื้อหาของเราไปในหน้าจอโดยใช้เทคนิคเจ๋งๆ ที่เรียกว่า CSS Layout

แล้วเจอกันที่ตัวเมืองเช่นเดิม