WUTTHIPHON PROJECTS SITE

ตกแต่งเว็บไซต์ด้วย CSS

การใช้งาน css มี 3 แบบคือ

  1. inline – การเรียกใช้ในบรรทัดเป็น attribute หนึ่งชื่อ style=””
  2. internal – การเรียกใช้ภายในไฟล์เดียวกัน โดยกำหนด style ไว้ที่หัวของไฟล์
  3. external – การเรียก css จากไฟล์อื่นมาใช้ โดยจะเป็นไฟล์ .css
โดยหากเรียงลำดับความสำคัญจะได้ inline > internal > external

Inline

Inline เป็นการใช้งาน css ผ่าน attribute style บน tag นั้น ๆ เช่น

<a href="#" style="color: red">A</a>

โดยสามารถเรียกใช้ซ้อนหลาย ๆ tag ได้ โดยที่ tag ที่อยู่ในสุดจะมีความสำคัญมากที่สุด เช่น

<div style="color: blue">
    Blue
    <span style="color: red>But this red</span>
</div>

Internal

Internal เป็นการใช้งาน css ในรูปแบบที่ประกาศไว้บนหัวของไฟล์นั้น ๆ โดยจะอยู่ภาย tag <style></style> ซึ่งอยู่ภายใต้ tag head โดยสามารถเรียกใช้งานได้ 3 รูปแบบ

  1. Class จะเรียกใช้ผ่าน attribute class บน css โดบใช้ . เป็นตัวกำหนด และตามด้วยชื่อซึ่งเราสามารถตั้งได้เอง
  2. ID จะเรียกใช้ผ่าน attribute id โดยบน css ใช้ # เป็นตัวกำหนด และตามด้วยชื่อซึ่งเราสามารถตั้งได้เอง
  3. ชื่อของ tag เช่น h1 h2 h3 h4 a b div span …

ข้อแตกต่างของ Class กับ ID คือ class สามารถเรียกใช้งานได้หลายครั้งแต่ ID จะเรียกใช้ได้ครั้งเดียว (จะมีผลในการทำฟอร์มที่มี input)

ตัวอย่าง

<html>
    <head>
        ...
        <style>
        .c1 {
            color: red;
        }

        .c2 {
            color: blue;
        }

        #d1 {
            color: orange;
        }

        span {
            color: green;
        }
        </style>
    </head>
    <body>
        <div class="c1">This is Class</div>
        <div class="c2">This is Class</div>
        <div id="d1">This is ID</div>
        <span>Span</span>
    </body>
</html>

External

External เป็นการใช้งาน css ในรูปแบบที่แยกไฟล์ css ออกมาข้างนอก

| - index.html
| - assets
|    - style.css

โดยเป็นไฟล์ .css มีการเรียกหรือ Import เพื่อใช้งานที่ tag head

<head>
    ...
    <link rel="stylesheet" href="./assets/style.css" type="text/css" />
    ...
</head>

และมีการกำหนดค่าต่าง ๆ เหมือนกับแบบ inline ซึ่งมี 3 แบบคือ

  1. Class จะเรียกใช้ผ่าน attribute class บน css โดบใช้ . เป็นตัวกำหนด และตามด้วยชื่อซึ่งเราสามารถตั้งได้เอง
  2. ID จะเรียกใช้ผ่าน attribute id โดยบน css ใช้ # เป็นตัวกำหนด และตามด้วยชื่อซึ่งเราสามารถตั้งได้เอง
  3. ชื่อของ tag เช่น h1 h2 h3 h4 a b div span …

ข้อแตกต่างของ Class กับ ID คือ class สามารถเรียกใช้งานได้หลายครั้งแต่ ID จะเรียกใช้ได้ครั้งเดียว (จะมีผลในการทำฟอร์มที่มี input)

ตัวอย่าง

ที่ไฟล์ index.html

<html>
    <head>
        <link rel="stylesheet" href="./assets/style.css" type="text/css" /> 
    </head>
    <body> 
        <div class="c1">This is Class</div>
        <div class="c2">This is Class</div>
        <div id="d1">This is ID</div>
        <span>Span</span> </body>
    </body>
</html>

ที่ไฟล์ assets/style.css

.c1 {
    color: red;
}

.c2 {
    color: blue;
}

#d1 {
    color: orange;
}

span {
    color: green;
}

การใช้งาน CSS

ในการใช้งาน css จะต้องรู้จักวิธีการเรียกใช้ก่อน 3 รูปแบบคือ Class, ID และแบบเรียกผ่าน Tag ตรง ๆ หรือ selector  จากนั้นจึงเรียนรู้การกำหนดค่าภายในนั้น ๆ ในการกำหนด css นั้นเราต้องคำนึงถึงความสำคัญของแต่ละองค์ประกอบที่เราจะเรียกใช้ด้วยเช่น หากตั้งการแต่ง ข้อความ ๆ หนึ่ง ณ จุด ๆ หนึ่งบนไฟล์ ๆ เดียวก็ใช้แบบ inline แต่หากต้องการใช้หลายจุดบนหน้าเดียวกันก็อาจใช้แบบ internal และเรียกเป็น class ณ จุดที่ต้องการ แต่หากหลายไฟล์ใช้ร่วมกันใช้รูปแบบเดียวกันและ class ชื่อเดียวกันการทำแบบ external อาจเหมาะสมกว่า

ในการกำหนดค่าให้กับ css นั้น ๆ จะมีหลาย property โดย มี syntax ดังนี้ เช่น

color: blue;

<property>: <value>;

color คือ property
blue คือ value

Post Views: 130
Wutthiphon Tassana
Wutthiphon Tassana