สํารวจแนวคิด CSS

  • 4 นาที

โครงสร้าง CSS

ถ้าคุณต้องการให้หน้า HTML ของคุณแสดงข้อความทั้งหมดระหว่างแท็ก h1 ด้วยสีส้ม คุณสามารถใช้โค้ด CSS ต่อไปนี้ได้

h1 {
    color: orange;
}

โค้ด CSS ด้านบนเริ่มต้นด้วย (h1) ที่เลือก HTML ที่คุณต้องการสไตล์ h1 ในตัวอย่างเรียกว่า ตัวเลือก

โปรดสังเกตโค้ดภายในวงเล็บปีกกา color: orange;t ประกาศว่าควรจัดรูปแบบแท็ก h1 ที่เลือกอย่างไร โค้ด CSS ใน { }วงเล็บปีกกา เช่น color: orange; เรียกว่า การประกาศ

การประกาศตัวอย่างของคุณประกอบด้วยคุณสมบัติ , colorซึ่งคั่นจากค่า , orangeด้วยเครื่องหมายทวิภาค (:) และจุดสิ้นสุดของการตั้งค่าจะถูกทําเครื่องหมายด้วยเครื่องหมายอัฒภาค (;)

โน้ต

ไม่จําเป็นต้องจดจําคุณสมบัติและมูลค่าที่มีอยู่ใน CSS มีเว็บไซต์มากมายที่คุณสามารถอ้างอิงได้ นอกจากนี้ เครื่องมือต่างๆ เช่น vscode.dev หรือ Visual Studio Code ยังมีตัวเลือกการเติมข้อความอัตโนมัติที่สามารถช่วยแนะนําคุณเมื่อคุณสร้าง CSS

ฝังไฟล์ CSS

วิธีที่รวดเร็วในการเพิ่มข้อมูลลักษณะคือ การวางข้อมูลภายในแท็ก head ของเพจ HTML ของคุณโดยใช้แอตทริบิวต์ style วิธีนี้ไม่ถือว่าเป็นแนวทางปฏิบัติที่ดีที่สุด แต่สามารถใช้สําหรับการเรียนรู้และการทดสอบได้

ตัวอย่างต่อไปนี้จะเพิ่มแท็ก <style> ที่มีข้อมูลการกําหนดลักษณะสําหรับ h1 ใด ๆ เพื่อแสดงเป็นสีเทา เนื่องจากเป็นสไตล์เพียงรูปแบบเดียว ส่วนที่เหลือของ HTML จะแสดงด้วยการกําหนดลักษณะเริ่มต้นของเบราว์เซอร์

<!DOCTYPE html>
<html>
    <head>
        <!-- Here's the styling information -->
        <style>
            h1 {
                color: gray;
               }
        </style>
    </head>
    <body>
        <h1>Welcome</h1>
        <p>This is my site</p>
    </body>
</html>

เมื่อดูในเบราว์เซอร์ ข้อความ "ยินดีต้อนรับ" ในแท็ก <h1> จะแสดงเป็นสีเทา

สกรีนช็อตของหน้า H T M L ที่แสดงแสดงหัวเรื่อง 1 ในสีเทา

นําลักษณะไปใช้กับ HTML โดยใช้ CSS

เมื่อคุณเพิ่มสไตล์ไปยัง Hypertext Markup Language (HTML) วิธีที่ดีที่สุดคือการทําการกําหนดลักษณะของคุณในไฟล์ CSS ที่แยกต่างหาก เมื่อไฟล์ HTML หลายไฟล์ใช้ CSS เดียวกัน ไฟล์เหล่านั้นจะมีรูปลักษณ์ที่สอดคล้องกัน นอกจากนี้การอัปเดตไฟล์ CSS หนึ่งไฟล์จะง่ายกว่าการอัปเดตแต่ละไฟล์ HTML

เพื่ออ้างอิงไฟล์ CSS คุณใช้องค์ประกอบ link

link มีสองแอตทริบิวต์ rel และ href rel ถูกใช้เพื่อระบุชนิดทรัพยากรที่คุณกําลังอ้างอิง สไตล์ชีต สําหรับสไตล์ชีต href ถูกใช้เพื่อระบุเส้นทางไปยังไฟล์ CSS ถ้าไฟล์ CSS ของคุณอยู่ในโฟลเดอร์เดียวกันกับไฟล์ HTML ของคุณ และมีชื่อ style.cssคุณสามารถใช้สิ่งต่อไปนี้เพื่ออ้างอิงจากเพจของคุณ

<link rel="stylesheet" href="style.css">

ตอนนี้คุณมีไฟล์อย่างน้อยสองไฟล์ ไฟล์และ.html.cssไฟล์ ตัวอย่างก่อนหน้านี้จะมีไฟล์ HTML ที่เชื่อมโยงไปยัง CSS

<!DOCTYPE html>
<html>
    <head>
        <title>Welcome</title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <h1>Welcome</h1>
        <p>This is my site</p>
    </body>
</html>