ขั้นที่ 7: การใส่ style sheet แยกไฟล์

ตอนนี้เรามีไฟล์ HTML ที่มี style sheet ฝังอยู่แต่หาก เวบไซด์ของเรามีเนื้อหาเพิ่มมากขึ้นเราอาจจะต้องการให้หน้าแต่ละหน้าสามารถใช้สไตล์ร่วม กันได้ ซึ่งมีวิธีที่ดีกว่าการก๊อปปี้ style sheet ลงไปในทุกๆหน้า นั่นก็คือหากเราใส่ style sheet แยกไฟล์ไว้ทุกๆหน้าเวบก็สามารถเรียกสไตล์มาใช้ได้โดยตรง
ในการสร้างไฟล์สำหรับ style sheet เราต้องสร้างไฟล์ text เปล่าขึ้นมาอีกหนึ่งไฟล์ คุณสามารถทำได้โดยเลือก “New” จากเมนู File ในโปรแกรมแก้ไขเพื่อสร้างหน้าเปล่าขึ้นมาหนึ่งหน้า (ถ้าคุณใช้โปรแกรม TextEdit อย่าลืมว่าต้องแก้ไขให้เป็นข้อความธรรมดาก่อนโดยเลือกได้จากเมนู Format)
หลังจากนั้นให้ตัดและวางทุกส่วนที่อยู่ใน element <style> จากไฟล์ HTML ลงไปยังหน้าใหม่แต่อย่าก๊อปปี้ตัว element <style> และ </style> เอง เพราะเป็นส่วนที่ใช้กับ HTML ไม่ใช่ CSS ในหน้าใหม่ของโปรแกรมแก้ไข ควรจะมี style sheet ที่ครบสมบูรณ์ดังนี้

body {
  padding-left: 11em;
  font-family: Georgia, "Times New Roman",
        Times, serif;
  color: purple;
  background-color: #d8da3d }
ul.navbar {
  list-style-type: none;
  padding: 0;
  margin: 0;
  position: absolute;
  top: 2em;
  left: 1em;
  width: 9em }
h1 {
  font-family: Helvetica, Geneva, Arial,
        SunSans-Regular, sans-serif }
ul.navbar li {
  background: white;
  margin: 0.5em 0;
  padding: 0.3em;
  border-right: 1em solid black }
ul.navbar a {
  text-decoration: none }
a:link {
  color: blue }
a:visited {
  color: purple }
address {
  margin-top: 1em;
  padding-top: 1em;
  border-top: thin dotted }

ให้เลือก “Save As…” จากเมนู File ต้องแน่ใจว่าได้เซฟไว้อยู่ในส่วนหรือแฟ้มเดียวกันกับไฟล์ mypage.html และให้เซฟ style sheet เป็น “mystyle.css”
ตอนนี้ให้กลับไปยังหน้าที่มีโคด HTML ให้เอาทุกอย่างออกเริ่มตั้งแต่ tag <style> จนถึง tag </style> และแทนที่ด้วย element <link> ดังนี้

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>My first styled page</title>
  <link rel="stylesheet" href="mystyle.css">
</head>

<body>
[etc.]

ส่วนนี้จะเป็นส่วนที่บอกบราวเซอร์ว่า style sheet จะอยู่ในไฟล์ที่ชื่อว่า “mystyle.css” และเนื่องจากไม่ได้มีการบอกถึงส่วนที่เก็บไฟล์ บราวเซอร์จะดูจากส่วน ที่เก็บไฟล์เดียวกันกับไฟล์ HTML
หากคุณเซฟไฟล์ HTML และโหลดใหม่ในบราวเซอร์ คุณอาจจะมองไม่เห็นถึงความแตกต่างเพราะหน้าเวบยังคงมีสไตล์เดิมแต่ตอนนี้สไตล์จะมาก จากไฟล์ที่อยู่ข้างนอก

ผลสุดท้ายที่ได้

ขั้นตอนต่อไปก็คือการวางทั้งไฟล์ mypage.html และ mystyle.css บนเวบไซด์ของคุณ (ซึ่งคุณอาจจะต้องการแก้ไขก่อนเล็กน้อย) แต่ส่วนวิธีการวางอย่าง ไรนั้นขึ้นอยู่กับผู้ให้บริการอินเตอร์เน็ทของคุณ

Read full post »

ขั้นที่6: การเพิ่มเส้นแบ่งในแนวนอน

ส่วนที่เราจะเพิ่มเป็นส่วนสุดท้ายใน style sheet คือการใส่เส้นแบ่งในแนวนอนเพื่อแยกข้อความออกจากส่วนของลายเซ็นต์ในส่วนท้าย เราจะใช้'border-top' เพื่อเพิ่มเส้นแบ่งแบบจุดในส่วนบนของ element <address>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>My first styled page</title>
  <style type="text/css">
  body {
    padding-left: 11em;
    font-family: Georgia, "Times New Roman",
          Times, serif;
    color: purple;
    background-color: #d8da3d }
  ul.navbar {
    list-style-type: none;
    padding: 0;
    margin: 0;
    position: absolute;
    top: 2em;
    left: 1em;
    width: 9em }
  h1 {
    font-family: Helvetica, Geneva, Arial,
          SunSans-Regular, sans-serif }
  ul.navbar li {
    background: white;
    margin: 0.5em 0;
    padding: 0.3em;
    border-right: 1em solid black }
  ul.navbar a {
    text-decoration: none }
  a:link {
    color: blue }
  a:visited {
    color: purple }
  address {
    margin-top: 1em;
    padding-top: 1em;
    border-top: thin dotted }
  </style>
</head>

<body>
[etc.]

ตอนนี้การใส่สไตล์ของเราก็เสร็จสมบูรณ์ต่อไปเราจะมาดูว่าเราจะแยก style sheet ไว้อีกไฟล์ได้อย่างไรเพื่อที่ว่าหน้าอื่นสามารถใช้สไตล์ร่วมกันได้

Read full post »

ขั้นที่2: การใส่สีเพิ่มเติม

คุณอาจจะเห็นว่ามีข้อความสีดำอยู่บนพื้นหลังสีขาวแต่ทั้งนี้ก็ขึ้นอยู่กับการอ่านค่าของบราวเซอร์ ดังนั้นวิธีที่ง่ายวิธีหนึ่งที่เราสามารถสร้างสไตล์ ให้กับหน้าเวบได้คือการใส่สี (ให้เปิดบราวเซอร์ทิ้งไว้เพราะเราจะต้องใช้อีกภายหลัง)
เราจะเริ่มต้นจาการใส่ style sheet ที่อยู่ในไฟล์เดียวกันกับ HTML ก่อน ภายหลังเราจะแยกไฟล์ HTML กับ CSS ออกจากกัน การแยกไฟล์ นั้นมีข้อดีเนื่องจากเราสามารถนำ style sheet เดียวกันมาใช้กับไฟล์ HTML ได้หลายไฟล์ได้ง่ายโดยที่เขียน style sheet เพียงแค่ครั้งเดียว แต่สำหรับขั้นตอนนี้ เราจะเก็บทุกอย่างไว้ในไฟล์เดียวกัน
เราต้องใส่ element <style>ในไฟล์ HTML style sheet style sheet จะอยู่ภายใน element นี้ ดังนั้นให้กลับไปยังหน้าต่างในโปรแกรม แก้ไขและเพิ่มบรรทัดต่อไปนี้ 5 บรรทัดในส่วน head ของไฟล์ HTML บรรทัดที่ใส่เพิ่มจะเป็นตัวสีแดง

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>My first styled page</title>
  <style type="text/css">
  body {
    color: purple;
    background-color: #d8da3d }
  </style>
</head>

<body>
[etc.]

บรรทัดแรกบอกไว้ว่า style sheet ดังกล่าวเขียนขึ้นใน CSS (“text/css”) บรรทัดที่สองบอกว่าเราได้เพิ่ม style ลงไปใน element “body” บรรทัดที่สามเป็นตัวกำหนดสีของข้อความให้เป็นสีม่วงและบรรทัดถัดไปเป็นตัวกำหนดพื้นหลังให้เป็นสีประมาณเหลืองอมเขียว

Style sheets ใน CSS นั้นสร้างขึ้นมาจากกฎ กฏแต่ละกฏประกอบไปด้วยสามส่วนดังนี้

1. selector (จากตัวอย่างคือ “body”) ซึ่งเป็นตัวบอกบราวเซอร์ว่าส่วนใดของเอกสารที่มีการนำกฏมาใช้
2. property (จากตัวอย่างคือ 'color' และ 'background-color' ซึ่งเป็น property ทั้งสองตัว) ซึ่งเป็นตัวบอกว่าเราจะกำหนด layoutในรูปแบบไหน
3. และ value ('purple' and '#d8da3d')ซึ่งเป็นตัวบอกค่า value ของ style property

ตัวอย่างข้างล่างนี้แสดงให้เห็นการรวมกันของกฏ เราได้กำหนด property ไว้สองตัวดังนั้นเราจึงได้แยกกฏออกมาเป็น 2 กฏดังนี้

body { color: purple }
body { background-color: #d8da3d }

แต่เนื่องจากกฎทั้งสองใช้กับ body ทั้งคู่ดังนั้นเราจะเขียน “body” แค่เพียงครั้งเดียวเท่านั้นและใส่ propert และ value ไว้ด้วยกันสำหรับเรื่องเกี่ยวกับ selector ให้อ่านเพิ่มได้ในบทที่2 ของ Lie &Bos.

นอกจากนี้พื้นหลังของ element body ยังเป็นพื้นหลังของเอกสารทั้งหมด หากเราไม่ได้กำหนดพื้นหลังที่เฉพาะให้กับ element อื่นๆเช่น (p, li, address…) ตามค่า default แล้วก็จะไม่มีค่าพื้นหลัง (หรืออาจจะเป็นแบบโปร่งแสง) ค่า property 'color' จะเป็นตัวกำหนด สีของข้อความสำหรับ element body แต่สำหรับ element อื่นๆที่อยู่ภายใน body จะมีสีตามค่า body เช่นกันยกเว้นว่าจะมีการกำหนดค่าไว้ต่างหาก (ซึ่งเราจะเพิ่มสีอื่นๆเข้าไปในภายหลัง)
ตอนนี้ให้เซฟไฟล์ดังกล่าวไว้ (โดยใช้คำสั่ง “Save” จากเมนู File) และกลับไปยังหน้าบราวเซอร์หากคุณกดปุ่ม “Reload” หน้าตา ของเวบจะเปลี่ยนไปจากหน้าตาที่ธรรมดาและน่าเบื่อเป็นหน้าที่มีสี (แต่ก็ยังดูค่อนข้างหน้าเบื่อ) นอกจากรายชื่อของลิงค์ด้านบน ตอนนี้ ข้อความควรจะเป็นสีม่วงซึ่งตัดกับสีพื้นหลังคือสีเหลืองอมเขียว

ภาพตัวอย่างเป็นการแสดงให้เห็นว่าบราวเซอร์แสดงผลอย่างไรเมื่อได้มีการเพิ่มสีเข้าไปบางส่วน

เราสามารถกำหนดสีใน CSS ได้หลายวิธี ตัวอย่างข้างต้นได้แสดงไว้ทั้งสองวิธีคือใช้ทั้งชื่อ (“purple”) และค่าโคด hexadecimal (“#d8da3d”)สามารถใช้ชื่อสีได้ประมาณ 140 ชื่อและ ค่าโคด hexadecimal สามารถใช้สีได้มากกว่า 16 ล้านสี ในส่วนของการเพิ่มสไตล์ ได้มีการอธิบายเกี่ยวกับส่วนนี้ไว้

Read full post »