W3.CSS สี
แบบแผนชุดสีเริ่มต้นที่ใช้ใน W3.CSS ได้รับแรงบันดาลใจจากสีดีไซน์ Material (สีที่ใช้ในการตลาด ป้ายถนน และกระดาษโน้ต)
ระบายสีองค์ประกอบ HTML
คลาส สีw3-และสี w3-text-สามารถใช้เพื่อระบายสีองค์ประกอบ HTML ใดก็ได้:
คอนเทนเนอร์:
ลอนดอนเป็นเมืองที่มีประชากรมากที่สุดในสหราชอาณาจักร โดยมีเขตมหานครที่มีประชากรมากกว่า 9 ล้านคน
ลอนดอนเป็นเมืองที่มีประชากรมากที่สุดในสหราชอาณาจักร โดยมีเขตมหานครที่มีประชากรมากกว่า 9 ล้านคน
ปุ่ม:
ข้อความ:
พรมแดน:
สีแดง
เขียว
สีฟ้า
สีเหลือง
สีเทา
สีดำ
ตาราง:
ชื่อ | คะแนน |
---|---|
Jill Smith | 50 |
อีฟ แจ็คสัน | 94 |
อดัม จอห์นสัน | 67 |
การ์ด:
รถยนต์คือยานยนต์ที่มีล้อขับเคลื่อนด้วยตัวเองซึ่งใช้สำหรับการขนส่ง คำจำกัดความส่วนใหญ่ของคำศัพท์ระบุว่ารถยนต์ได้รับการออกแบบให้วิ่งบนถนนเป็นหลัก โดยมีที่นั่งสำหรับหนึ่งถึงแปดคน และโดยทั่วไปแล้วจะมีสี่ล้อ (วิกิพีเดีย)
สีพื้นหลัง
คลาส สีw3- ตั้งค่า สีพื้นหลังสำหรับองค์ประกอบ HTML ใดๆ:
ลอนดอน
ลอนดอนเป็นเมืองที่มีประชากรมากที่สุดในสหราชอาณาจักร โดยมีเขตมหานครที่มีประชากรมากกว่า 9 ล้านคน
ลอนดอน
ลอนดอนเป็นเมืองที่มีประชากรมากที่สุดในสหราชอาณาจักร โดยมีเขตมหานครที่มีประชากรมากกว่า 9 ล้านคน
ลอนดอน
ลอนดอนเป็นเมืองที่มีประชากรมากที่สุดในสหราชอาณาจักร โดยมีเขตมหานครที่มีประชากรมากกว่า 9 ล้านคน
ตัวอย่าง
<div class="w3-red">
<h2>London</h2>
<p>London is the most populous city in the United Kingdom,
with a metropolitan area of over 9 million inhabitants.</p>
</div>
<div class="w3-yellow">
<h2>London</h2>
<p>London is the most populous city in the United Kingdom,
with a metropolitan area of over 9 million inhabitants.</p>
</div>
<div class="w3-gray">
<h2>London</h2>
<p>London is the most populous city in the United Kingdom,
with a metropolitan area of over 9 million inhabitants.</p>
</div>
สีเทาและสีเทาสามารถใช้แทนกันได้ในคลาส W3.CSS ทั้งหมด
สีข้อความ
คลาส สีw3-text- ตั้งค่า สีข้อความขององค์ประกอบ HTML ใดๆ:
ลอนดอน
ลอนดอนเป็นเมืองที่มีประชากรมากที่สุดในสหราชอาณาจักร โดยมีเขตมหานครที่มีประชากรมากกว่า 9 ล้านคน
ลอนดอน
ลอนดอนเป็นเมืองที่มีประชากรมากที่สุดในสหราชอาณาจักร โดยมีเขตมหานครที่มีประชากรมากกว่า 9 ล้านคน
ตัวอย่าง
<div class="w3-text-red">
<h2>London</h2>
<p>London is the most populous city in the United Kingdom,
with a metropolitan area of over 9 million inhabitants.</p>
</div>
โฮเวอร์สี
คลาส สีw3-hover- กำหนด สีโฮเวอร์พื้นหลังสำหรับองค์ประกอบ HTML ใดๆ:
ลอนดอน
ลอนดอนเป็นเมืองที่มีประชากรมากที่สุดในสหราชอาณาจักร โดยมีเขตมหานครที่มีประชากรมากกว่า 9 ล้านคน
ตัวอย่าง
<div class="w3-container w3-orange w3-hover-red">
<h2>London</h2>
<p>London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.</p>
</div>
คลาส สีw3-hover-text- กำหนด สีโฮเวอร์ข้อความสำหรับองค์ประกอบ HTML ใดๆ:
ลอนดอน
ลอนดอนเป็นเมืองที่มีประชากรมากที่สุดในสหราชอาณาจักร โดยมีเขตมหานครที่มีประชากรมากกว่า 9 ล้านคน
ตัวอย่าง
<div class="w3-container w3-orange w3-hover-text-white">
<h2>London</h2>
<p>London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.</p>
</div>
ห้องสมุดสี
นอกจากสี W3.CSS มาตรฐานแล้ว W3.CSS ยังใช้สีจากไลบรารีสีต่างๆ ได้อีกด้วย:
สีของวินโดว์:
คลิกที่นี่เพื่อเรียนรู้เพิ่มเติมเกี่ยวกับสีของ Windows
แฟชั่นสี:
สีเหลืองพริมโรส
โก้เก๋สีเทา
พีโอนี
พอร์ต
คลิกที่นี่เพื่อเรียนรู้เพิ่มเติมเกี่ยวกับสีแฟชั่น
สีทางหลวง:
คลิกที่นี่เพื่อเรียนรู้เพิ่มเติมเกี่ยวกับไลบรารีสี
คุณจะได้เรียนรู้มากขึ้นเกี่ยวกับสีในบทต่อๆ ไปของบทช่วยสอนนี้