CSS - Background

ทุกแท็กใน HTML สามารถใส่สีหรือรูปเป็นพื้นหลังได้ เช่น <body>, <table>, <font>, <butt0n>, <textarea>, <span>, <p>, <div> เป็นต้น แต่การกำหนดรูปแบบด้วย HTML อย่างเดียวไม่พอ ต้องนำสไตล์ชีตมาช่วยด้วย

background-image:url

เป็นคุณสมบัติที่ใช้กำหนดพื้นหลังรูปภาพ โดยระบุเส้นทางและชื่อไฟล์ใน url เช่น

background01.htm

<html><head>

<style type="text/css>

   body {background-image:url('picture/bg01.jpg')}

   textarea {background-image:url('picture/bg02.jpg')}

</style>

</head>

<body><textarea>ทดสอบสไตล์ background-image</textarea></body>

</html>

จะกำหนดสไตล์ล่วงหน้าที่แท็ก <head> ฉะนั้นในแท็กอื่นๆ ของเอกสาร HTML ทุกแท็กจะใช้สไตล์นี้ทั้งหมด

background02.htm

<html>

<body style="background-image:url('picture/bg01.jpg')”>

   <textarea style=”background-image:url('picture/bg02.jpg')">ทดสอบสไตล์ backgroundn-image</textarea>

</body>

</html>

เป็นสไตล์เฉพาะตัวของแท็กนั้น ไม่มีผลกับแท็กอื่น

background-color:

เป็นการกำหนดคุณสมบัติของสีพื้นหลัง โดยใช้ชื่อสี เช่น black, blue หรือรหัสเลขฐานสิบหก เช่น #0000ff หรือรหัสเลขฐานสิบ เช่น rbg(0,0,255) เป็นต้น

รูปแบบการใช้งาน

background-color:back	ใช้ชื่อสีเป็นภาษาอังกฤษ
background-color:#0000ff	ใช้รหัสเลขฐานสิบหก
background-color:rgb(0,255,0)	ใช้รหัสเลขฐานสิบ
background-color:rgb(0%,100%,0%)	ใช้รหัสเลขฐานสิบแบบคิดเป็นเปอร์เซ็นต์

การโหลดไฟล์ HTML ของบราวเซอร์จะโหลดสีพื้นหลังก่อนเสมอ

background-attachment:

เป็นคุณสมบัติที่ใช้ยึดพื้นหลังมีค่าที่เป็นไปได้คือ fixed ค่านี้จะช่วยให้ภาพพื้นหลังอยู่ตำแหน่งเดิมเมื่อเราเลื่อนหน้าเพจ และอีกค่า คือ scroll ค่านี้จะทำให้ภาพเลื่อนตามเนื้อหาของเพจ ปกติจะกำหนดเป็นค่า scroll

background-attachment:fixed

background-repeat:

เป็นคุณสมบัติในการแสดงภาพซ้ำ

รูปแบบการใช้งาน

background-repeat:repeat	แสดงภาพเต็มพื้นที่
background-repeat:repeat-x	แสดงภาพซ้ำในแนวนอน
background-repeat:repeat-y	แสดงภาพซ้ำในแนวตั้ง
background-repeat:no-repeat	แสดงภาพเพียงภาพเดียว

background-position:

ใช้กำหนดพิกัดหรือตำแหน่งของภาพ เพื่อใช้ในการวางรูปพื้นหลัง สามารถกำหนดได้ดังนี้

top left	กำหนดตำแหน่งตามความหมายคำศัพท์ เช่น center center  คือตรงกลวงหน้าจอ (ถ้ากำหนดแค่คีย์เวิร์ดแรกไม่กำหนดคีย์เวิร์ดตัวที่สอง จะถือว่าคีย์เวิร์ดตัวที่สองเป็น center เสมอ เช่น top จะหมายถึง top center)
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
x-%  y-%	กำหนดตำแหน่งเป็นเปอร์เซ็นต์ โดยมุมบนซ้ายของเอกสารจะเป็นตำแหน่ง 0% 0% มุมล่างขวาจะเป็น 100% 100% และตรงกลางจะเป็น 50% 50% (ถ้าใส่ค่าแรกค่าเดียวค่าที่สองจะเป็น 50% เสมอ)
x-pos  y-pos	กำหนดตำแหน่งเป็นตัวเลขเจาะจง เช่น 0 0 คือมุมบนซ้าย ส่วนล่างขวาไม่สามารถเจาะจงได้ เพราะขึ้นอยู่กับขนาดจอบนบราวเซอร์ และเราสามารถผสมระหว่างตัวเลขกับเปอร์เซ็นต์ หรือคำศัพท์กับตัวเลขก็ได้ เช่น top 250

รูปแบบการกำหนดค่า

background-position:top	ภาพจะอยู่ตำแหน่ง top center
background-position: 50% 0%	ภาพจะอยู่ตำแหน่ง 50% แกน x และ 0% แกน y
background-position:right 150px	ภาพจะอยู่ตำแหน่ง 100% แกน c และ 150px แกน y

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

background-position: 150px -50px   นับจากทางขวาที่ตำแหน่งมุมบนซ้าย นับเพิ่มไปอีก 150 จุดสี แล้วจึงเริ่มวางภาพ (px=pixel หรือ จุด)

ในสไตล์ไม่ว่าจะเป็นการกำหนดระยะห่าง หรือขนาดความกว้าง ความยาว ก็จะใช้หน่วยวัดระยะเหมือนกันดังนี้

หน่วย	ความหมาย
%	แสดงระยะหรือขนาดเป็นเปอร์เซ็นต์ เช่น 50%
in	แสดงระยะหรือขนาดเป็นนิ้ว
cm	แสดงระยะหรือเป็นเซ็นติเมตร
mm	แสดงระยะหรือขนาดเป็นมิลลิเมตร
em	แสดงระยะหรือขนาดเป็น em (1em = 1 เท่าของขนาดตัวอักษรในเวลานั้น)
ex	แสดงระยะหรือขนาดเป็น ex (1ex = ครึ่งเท่าของตัวอักษรในเวลานั้น)
pt	แสดงระยะหรือขนาดเป็น point (1pt = 1/72 นิ้ว)
pc	แสดงระยะหรือขนาดเป็น pica (1pc = 12pt = 1/6 นิ้ว)
px	แสดงระยะหรือขนาดเป็น pixels (1px = 1 จุดสีบนจอภาพ)

   

เราไม่ควรกำหนดค่าระยะหรือขนาดด้วยตัวเลขเปล่า ๆ แต่ควรใส่หน่วยกำกับทุกครั้ง เพื่อป้องกันการสับสนของบราวเซอร์บางตัว

background:

เป็นคุณสมบัติรวมที่สามารถกำหนดหลายๆ คุณสมบัติพร้อมกันได้ ดังนี้

background:url('picture/bg01.jpg') rbg(255,255,255) fixed no-repeat 50px right;

background03.htm

<html><head>

<style type="text/css">

   body {background:url('picture/bg01.jpg') rbg(255,255,255) fixed repeat-x 0px 0%}

   textarea {background-image:url('picture/bg02.jpg');

      background-color:rbg(200,200,200);

      background-attachment:fixed;

      background-repeat:repeat-y;

      background-position: 0px 0px;

      height:150 }

</style>

</head>

<body><textarea></textarea></body>

</html>

การกำหนดคุณสมบัติหลายๆ ตัวพร้อมกันจะใช้ semicolon (;) คั่น ยกเว้นตัวสุดท้ายจะใส่หรือไม่ก็ได้

CSS - รู้จัก Cascading Style Sheet หรือ CSS

Cascading Style Sheet หรือ CSS คือ รูปแบบที่ช่วยให้เราสามารถเพิ่มความสามารถในการแสดงผลได้มากขึ้น มากกว่าการใช้ HTML เพียงอย่างเดียว ปกติเราจะใช้ CSS กำหนดลักษณะการแสดงผล การเล่นสี การจัดเรียง

CSS เป็นเพียงส่วนประกอบหนึ่งของการทำ DHTML โดยมากจะใช้ CSS ร่วมกับ JavaScript เสมอ เพื่อสร้างลูกเล่นแปลกๆ ใหม่ๆ ให้กับหน้าเวบ

การใช้ CSS จะทำให้เวบมีมาตราฐาน เพราะ CSS สร้างสไตล์ล่วงหน้าได้ และทุกหัวข้อที่นำสไตล์ไปใช้ จะมีลักษณะการแสดงผลเหมือนๆ กัน และถ้ามีการแก้ไขสไตล์ การแสดงผลในหัวข้อทุกหัวข้อจะเปลี่ยนไปตามสไตล์ที่แก้ไข

ตำแหน่งในการกำหนดสไตล์ชีต

การกำหนดสไตล์ชีตแบบ Embedding

เป็นการกำหนดแบบฝังไว้ในไฟล์โค้ด HTML สามารถกำหนดไว้ในส่วนต่างๆ ได้ดังนี้

1. ส่วนหัว (head)

    <head>

        <style>

             font {color:blue;font-size:16;font-family:AngsanaUPC;}

              button {width:150;color:#ff0000;background-color:#999900}

         </style>

      </head>

2. ส่วนเอกสาร (body)

    <body>

        <style>

            font {color:bule;font-size:16;font-family:AngsanaUPC,LilyUPC,IrisUPC;}

            button {width:150;color:#ff0000;background-color:#999900}

        </style>

    </body>

3. ในสคริปต์ เช่น ใช้กับ JavaScript

     <head>

         <script language="JavaScript">

             document.write("<font style=color:blue;font-family:AngsanaUPC>");

             document.write("Hello, world.</font><br>");

         </script>

     </head>

4. ในแท็กแบบ Inline

     <body style="color:blue;font-size:16;font-family:AngsanaUPC">

        <button style="width:150;color:#ff0000">Click Me!</button>

    </body>

กำหนดสไตล์ชีตแบบ Linking

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

ไฟล์สไตล์ชีตชื่อ style01.css

<style type="text/css">

    font {color:blue;font-size:26;font-family:LilyUPC,IrisUPC}

    button {width:150;color:#ff0000;backgroup-color:#990099}

    span {color:#ff00ff;font-size:90;font-family:LilyUPC,IrisUPC}

</style>

ไฟล์ HTML ชื่อ stylesheet_link.html

<html><head>

   <link href="style01.css" rel="stylesheet" type="text/css">

</head><body>

   <span>Hello, world!</span><br>

   <font><input type="text" value="DHTML is easy."><br><button>GO</button></font>

</body></html>

การกำหนดสไตล์ชีตแบบ Import

เป็นการกำหนดสไตล์ชีตแยกไว้ตามหากจากไฟล์ HTML โดยไฟล์ HTML จะดึงข้อกำหนดเหล่านี้มาใช้ด้วยคำสั่ง @import ซึ่งมีวิธีการกำหนดสไตล์ชีตแบบ link ต่างกันแค่วิธีการ @import ในไฟล์ HTML ต้องสร้างแท็ก <style>...</style> ไว้รองรับ และยังสามารถกำหนดสไตล์เฉพาะที่ใช้ในเพจนี้เพิ่มได้ตามต้องการอีกด้วย... ตัวอย่าง

<html><head>

   <style>

       @import URL(style01.css); <!-- สามารถนำเข้าได้มากกว่า 1 ไฟล์ได้ เช่น เพิ่ม @import URL(style02.css); -->

       div {font-weigth:border} <-- เป็นส่วนกำหนดเพิ่มเติมหากต้องการเพิ่มสไตล์ในส่วนที่ @import เข้ามาไม่มี -->

       table {background-color:gray;color:back}

   </style>

</head><body>

   <span>Hello, world!!!</span><br>

   <font><input type="text" value="DHTML is easy."><br><button>GO</button></font>

    <div>This is my c0ntent.</div>

</body></html>

Update: 10 มค. 12