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

บทความ (Article)

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

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

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

Tag :


CSS syntax

CSS

    จากบทที่แล้วเราคงทราบกับแล้วว่า CSS นั้นก็เป็นตัวที่เข้าไปกำหนดการแสดงผลใน HTML ว่าจะให้แสดงผลแบบไหน สีอะไร ตัวอักษรแบบใด ซึ่งในบทนี้จะเป็นเนื้อหาของรูปแบบของคำสั่ง CSS 

รูปแบบคำสั่ง CSS จะเป็นดังนี้ 

selector {property: value}


รูปแบบของคำสั่ง CSS นั้นจะประกอบไปด้วย 3 ส่วนคือ 

    1.Selector คือ ส่วน HTML tag ที่เราต้องการจะให้แสดงผล เช่น <table> ก็จะแสดงผลในส่วนของตาราง 

    2.Property คือ ส่วนของคุณสมบัติที่เราต้องการให้แสดง เช่น สีตัวอักษร , ชนิดตัวอักษร , ขนาดตัวอักษร 

    3.Value คือ ค่าที่เราต้องการให้แสดง เช่น ตัวอักษรสีแดง , ตัวอักษรแบบ tahoma , ตัวอักษรขนาด 12 pt 

ตัวอย่างรูปแบบการใช้งาน

table { color : red }


การใช้งานเมื่อ value เป็นคำที่มีมากว่า 1 คำ เราจะใส่ value ในเครื่องหมาย ""

p { font - family : "sans serif" }


ถ้ามี property มากกว่า 1 เราจะใช้ ; คั่นระหว่าง property เช่นเราต้องการให้มีการจัดตัวอักษรให้อยู่ กึ่งกลางและตัวอักษรมีสีแดง

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


ถ้ามีหลาย property มากๆ เราอาจเขียนแต่ละอันให้อยู่คนละบรรทัดกันได้

p
{
text - aling : center ;
color : black ;
font-family : arial
}


เราอาจเขียนให้ selectors หลายตัวมี property เหมือนกันก็ได้เช่น เขียนให้สีหัวข้อเป็นสีเขียวทั้งหมด

h1,h2,h3,h4,h5,h6
{
color : green
}




Class selector

ในการกำหนด selector นั้นเราจะใช้ HTML tag ในการกำหนด แต่ถ้าเราต้องการแสดงผลที่ต่างกัน ใน HTML tag ตัวเดียวกัน

ตัวอย่าง เช่น เราต้องการให้ ย่อหน้าในเอกสารจัดตัวอักษรชิดซ้ายในตำแหน่งนึง และจัดชิดขวาในอีกตำแหน่ง 

p.left { text-align : left }
p.right { text-align : right }
p.bold { font-weight: bold }


จะเห็นว่ามี P อยู่ 3 class คือ left , right , bold ซึ่งจะจัดย่อหน้าให้ชิดซ้าย , ชิดขวา , ให้ตัวอักษรเป็นตัวหนา ซึ่งเมื่อเราจะประกาศใช้ใน HTML เราก็จะต้องบอกชื่อด้วยว่าจะใช้ ชื่อ (class) อะไร 

<p class = "right">
ตัวอักษรในย่อหน้านี้จะชิดขวา
</p>
<p class = "left">
ตัวอักษรในย่อหน้านี้จะชิดซ้าย
</p>


ถ้าเราต้องการใช้หลาย class พร้อมกันก็ทำได้ดังนี้

<p class = "left bold">
ตัวอักษรในย่อหน้านี้จะชิดซ้าย และเป็นตัวหนา
</p>


ในการใช้งานแบบ class เราอาจตัดตัว HTML tag ที่อยู่ ด้านหน้าได้เช่น

.center { text - align: center }


เมื่อใช้งานเราก็เขียนชื่อ class ได้เลยเช่น

<h1 class = "center">
ตัวอักษรนี้จะจัดอยู่กึ่งกลาง
</h1>
<p class = "center">
ตัวอักษรนี้จะจัดอยู่กึ่งกลาง
</p>


คำเตือน ห้ามใช้ตัวเลขนำหน้าในชื่อของ class เพราะจะทำให้มีปํญหาเมื่อใช้งานกับ firefox browser 

ในหมวด HTML เราคงได้ใช้ form กันบ้างแล้ว ถ้าเราต้องการประกาศคำสั่งใช้กับ form ทำได้ดังนี้

คำสั่ง HTML

<input type="text" id="text-two" size=:"15" />


คำสั่ง CSS 

input[type="text"] {
border: 1px solid #C00;
}




Id selector

เป็นการกำหนด selector อีกแบบหนึ่ง ซึ่งเราจะใช้สัญลักษณ์ # นำหน้า selector ของเราดังตัวอย่าง 

#green { color : green }


เป็นการสร้าง id ชื่อ green และเก็บค่าสีเขียวเอาไว้

ตัวอย่าง id selector ใน P tag 

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


ซึ่งการใช้งานก็จะเป็นดังนี้

<p id="para1">
ตัวอักษรจัดเข้ากลาง และเป็นสีแดง
</p>


คำเตือน ห้ามใช้ ตัวเลขขึ้นต้นชื่อ id เพราะจะทำให้มีปัญหาใน firefox browser



CSS comments

การเขียนหมายเหตุให้คำสั่ง CSS หมายเหตุ หรือ comment เราจะใช้ในการบรรยาย code ของเราซึ่งส่วนนี้จะไม่แสดงใน brower แต่จะใช้เพื่อบอกเราว่า code ส่วนนี้ใช้เพื่อทำอะไร

ตัวอย่างการใช้งาน

/* กำหนดให้ตัวอักษรสีฟ้า */
.blue { color : blue }
/* กำหนดให้ตัวอักษรสีเขียว */
.green { color : green }



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


เคล็ดลับเขียนเว็บไซต์ 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