[x]ปิดหน้าต่าง

บทความ (Article)

  [ ดูบทความทั้งหมด ]
หมวดหมู่: เคล็ดลับเขียนเว็บไซต์
การใช้งาน CSS  
ศุกร์ ที่ 2 เดือน กันยายน พ.ศ.2559

ให้คะแนนบทความนี้

บทความหมายเลข 260 | คะแนน Rating: 2.0/5 ดาว (จากจำนวนโหวต 5 votes)

Tag :


การใช้งาน CSS

CSS

ในบทที่แล้วเราได้รู้แล้วว่าการเขียน CSS นั้นเขียนอย่างไร ในบทนี้จะเป็นการนำ CSS ไปใช้ การใช้งาน CSS จะแบ่งได้ 2 แบบคือ

คลิกที่หัวข้อเพื่อดูตัวอย่าง

1. การเขียน CSS ในเอกสาร HTML ของเราเลย

การเขียนแบบนี้ไม่เป็นที่นิยมเพราะถ้าเราต้องการแก้ไข ก็ต้องแก้ไขในทุกหน้าซึ่งจะทำให้เสียเวลา ตัวอย่างการเขียน CSS ในเอกสาร HTML

<head>
<style type="text/css">
<!--
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}
-->
</style>
</head>


เราจะเขียน CSS ในส่วนของ <HEAD> จะเห็นได้ว่ามีการใช้ Comment HTML <!-- --> อยู่ด้วย เราใส่เพื่อป้องการผู้ใช้งาน browser ตัวเก่า ที่ยังไม่รู้จัก CSS จะแสดงผล Code CSS ของเรา ซึ่งเราจะใส่หรือไม่ก็ได้ 

อีกแบบหนึ่งของการเขียน CSS ในเอกสาร HTML คือการเขียนใน HTML tag เลยดังตัวอย่าง 

<p style = " color: blue ; margin-left: 20px ">
ตัวอักษรนี้สีฟ้า และห่างจากขอบทางขวามือ 20px
</p>


คำเตือน เมื่อมีหน่วยใน value ของเราเช่น margin-left: 20px หน่วยคือ px (pixel) จะต้องเขียนให้ค่าและหน่วยติดกันเสมอ ถ้าเว้นวรรคจะทำให้การแสดงผลผิดพลาดได้ 

2.การเขียน CSS แยกเป็นอีก 1 ไฟล์

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

ตัวอย่างคำสั่งที่ใช้นำเข้าไฟล์ CSS จากภายนอก 

<head>
<link rel = "stylesheet" type = "text/css" href = "ชื่อไฟล์ CSS ของเรา" >
</head>


ตัวอย่างจะเป็นการนำเข้าไฟล์ CSS จากภายนอกซึ่งเราจะเขียนในส่วน <Head> เช่นเดียวกันกับแบบแรก 

ตัวอย่างไฟล์ CSS 

hr {color: sienna}
p {margin-left: 20px}


เนื้อหาในไฟล์ก็เป็นคำสั่ง CSS ธรรมดาซึ่งเรานิยม save ไฟล์นี้ในนามสกุล .css เพื่อสะดวกในการค้นหาและแก้ไข เช่น อาจตั้งชื่อเป็น style.css 

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

คำสั่ง CSS ที่โหลดเข้ามา 

h3 
{
color: red;
text-align: left;
font-size: 8pt
}


คำสั่ง CSS ที่อยู่ในเอกสาร HTML 

h3 
{
text-align: right;
font-size: 20pt
}


คำสั่ง CSS ที่แสดงผล 

color: red;
text-align: right;
font-size: 20pt



เข้าชม : 158662    [ ขึ้นบน ]


เคล็ดลับเขียนเว็บไซต์ 15 อันดับล่าสุด

      วิธีสร้างแผนที่ google map เพื่อติดในเว็บไซต์ของคุณ 8 / มิ.ย. / 2560
      วิธีสร้างแผนที่ google map เพื่อติดในเว็บไซต์ของคุณ 8 / มิ.ย. / 2560
      วิธีเปลี่ยนเว็บไซต์ให้แสดงเป็น ขาว-ดำ เพื่อรวมไว้อาลัยกับการสวรรคตของ "ในหลวง" รัชกาลที่ ๙ 14 / ต.ค. / 2559
      Title tags กับการทำ Search Engine Optimization (SEO) 2 / ก.ย. / 2559
      การทำ SEO คืออะไร 2 / ก.ย. / 2559
      ลงโปรแกรมเพื่อจำลองเครื่องของเราให้เป็น Web Server ตอนที่ 2 2 / ก.ย. / 2559
      ลงโปรแกรมเพื่อจำลองเครื่องของเราให้เป็น Web Server ตอนที่ 1 2 / ก.ย. / 2559
      PHP คืออะไร 2 / ก.ย. / 2559
      table จัดรูปแบบของตารางด้วยคำสั่ง css 2 / ก.ย. / 2559
      เปลี่ยนสัญลักษณ์หน้า list CSS 2 / ก.ย. / 2559
      padding จัดระยะห่างระหว่างขอบของวัตถุ และเนื้อหา CSS 2 / ก.ย. / 2559
      Margin กำหนดระยะห่างระหว่างวัตถุ CSS 2 / ก.ย. / 2559
      คำสั่งที่เกี่ยวกับเส้นขอบ CSS 2 / ก.ย. / 2559
      คำสั่งจัดการฟอนต์ (font) 2 / ก.ย. / 2559
      คำสั่งที่ใช้กับข้อความ (text) CSS 2 / ก.ย. / 2559



  เพิ่มความคิดเห็น
ชื่อ/อีเมลล์ :  สมาชิกไม่ต้องกรอก
ใส่รหัสยืนยัน
ไอคอน : ย่อหน้า จัดซ้าย จัดกลาง จัดขวา ตัวหนา ตัวเอียง เส้นใต้ ตัวยก ตัวห้อย ตัวหนังสือเรืองแสง ตัวหนังสือมีเงา สีแดง สีเขียว สีน้ำเงิน สีส้ม สีชมพู สีเทา
อ้างอิงคำพูด เพิ่มเพลง เพิ่มวีดีโอคลิป เพิ่มรูปภาพ เพิ่มไฟล์ Flash เพิ่มลิงก์ เพิ่มอีเมล์
ข้อความ :




ข้อความที่ท่านได้อ่าน เกิดจากการเขียนโดยสาธารณชน และส่งขึ้นมาแบบอัตโนมัติ เจ้าของระบบไม่รับผิดชอบต่อข้อความใดๆทั้งสิ้น เพราะไม่สามารถระบุได้ว่าเป็นความจริงหรือ ชื่อผู้เขียนที่ได้เห็นคือชื่อจริง ผู้อ่านจึงควรใช้วิจารณญาณในการกลั่นกรอง และถ้าท่านพบเห็นข้อความใดที่ขัดต่อกฎหมายและศีลธรรม กรุณาแจ้งที่ Webmasterเพื่อให้ผู้ควบคุมระบบทราบและทำการลบข้อความนั้น ออกจากระบบต่อไป

แจกฟรีแนวข้อสอบภาค ก ท้องถิ่น ความรู้ความสามารถทั่วไป 1866 ข้อ
แชร์ด่วน! แจกฟรี ไม่มีลิขสิทธิ์ แนวข้อสอบท้องถิ่น ปี2560 จำนวน 417ข้อ+เฉลยครบทุกข้อ
แบ่งปันความรู้ สู่ความก้าวหน้า แจกแนวข้อสอบท้องถิ่น #ฟรี (พร้อมเฉลย) ใช้ได้ทุกตำแหน่ง
วิธีสร้างแผนที่ google map เพื่อติดในเว็บไซต์ของคุณ
วิธีสร้างแผนที่ google map เพื่อติดในเว็บไซต์ของคุณ
กศน.กำแพงเพชร ร่วมพิธีวางพวงมาลาเนื่องในวันคล้ายวันสวรรคตสมเด็จพระนเรศวรมหาราช

 

ครูเชนดอทคอม เว็บไซต์แห่งการแลกเปลี่ยนของครู กศน. ครูนอกระบบ ครูในระบบ  

ติดต่อลงข่าวสาร  โฆษณา โทร.081-1077987
## MAXSITE 1.10 plus ##   | ADMIN | by ครูเชนดอทคอม | Facebook | Youtube | Google plus+ | IOS | Android | สร้าง QR code