การรวบรวมบทความและเทมเพลต

หน้าแค็ตตาล็อกนี้มีบทความที่เป็นตัวแทนและคอลเลกชันของเทมเพลต Nickgenom ที่ดีที่สุดที่นำมาจากแหล่งที่น่าสนใจต่างๆ บนอินเทอร์เน็ต

css.webp
รหัส, ข้อมูลอ้างอิง

CSS | Khả niym bn wĕbsịt̒

Azkiya
15 กันยายน 2020

ในโอกาสนี้ เราจะพยายามทำความเข้าใจว่า CSS คืออะไร เรามักจะได้ยินเกี่ยวกับ CSS หรือนักพัฒนาเว็บไซต์จะคุ้นเคยกับคำนี้เป็นอย่างมาก Cascading Style Sheets (CSS) เป็นภาษาสไตล์ชีตที่ใช้อธิบายการนำเสนอเอกสารที่เขียนด้วยภาษามาร์กอัป เช่น HTML CSS เป็นเทคโนโลยีหลักสำคัญของเวิลด์ไวด์เว็บ พร้อมด้วย HTML และ JavaScript เป็นที่ทราบกันดีว่า CSS สำหรับนักพัฒนาเว็บไซต์มีประโยชน์สำหรับการจัดสไตล์เว็บไซต์ ฟอนต์ สี ขนาด ระยะห่าง เส้นขอบ พื้นหลัง และเงา เป็นเพียงตัวอย่างบางส่วนที่ปรับแต่งได้โดยใช้ CSS อย่างไรก็ตาม บางคนอาจไม่เข้าใจคำนี้โดยเฉพาะอย่างยิ่งสำหรับนักพัฒนาที่ยังใหม่ต่อโลกของการเขียนโค้ดเว็บไซต์

มีการอ้างอิงจำนวนมากถึงคำ CSS นี้ แต่ในที่นี้ ผู้เขียนจะพยายามลดคำนี้ลงในหน่วยเดียว เพื่อให้เข้าใจได้ง่ายสำหรับนักพัฒนาเว็บไซต์มือใหม่

CSS อย่างที่เราได้ยินมาหลายครั้งแล้วไม่ใช่คำเอกพจน์ที่เป็นแค่คำนั้น มันทำหน้าที่เป็นเครื่องมือจัดรูปแบบเว็บไซต์เท่านั้น และก็เท่านั้น อย่างไรก็ตาม มีคำศัพท์หลายคำที่เราต้องรู้ร่วมกันเพื่อให้เข้าใจเงื่อนไข CSS เหล่านี้อย่างจริงจัง

CSS เราเข้าใจ

CSS คือโค้ดที่ช่วยให้นักพัฒนาเว็บไซต์เปลี่ยนรูปแบบของหน้าเว็บบางส่วนหรือทั้งหมด กำหนดเลย์เอาต์ สร้างสไตล์ข้อความโดยเริ่มจากการกำหนดความหนาของข้อความ สีข้อความ ประเภทข้อความ การเอียงไปยังองค์ประกอบอื่นๆ เป็นต้น . ก่อนหน้านี้สามารถระบุได้เฉพาะในหน้า HTML เท่านั้น

CSS ปัจจุบัน

ขอบคุณที่คุณอยู่ในยุคใหม่ของ CSS ในวันนี้ ถึงเวลาแล้วสำหรับ CSS3 ที่ก้าวข้ามเวลาไปข้างหน้าและมีวิวัฒนาการอย่างมากจากยุค CSS2 ก่อนหน้านี้ ขอบคุณ CSS3 ที่ทำให้มุมโค้งมนและเอฟเฟกต์เงาตกกระทบแสดงในเบราว์เซอร์ CSS3 ยังมีเครื่องมือใหม่สำหรับการอธิบายสีในเอกสาร HSL (Hue-Saturation-Lightness) เป็นส่วนเสริมล่าสุดของ HSLA ที่มีช่องอัลฟ่าเพื่อลดความทึบ

ตัวเลือกแอตทริบิวต์เป็นก้าวสำคัญสำหรับรูปแบบมาร์กอัปแบบตรงไปตรงมา ด้วยรูปแบบโค้ดนี้ คุณสามารถกำหนดเป้าหมายชื่อองค์ประกอบเฉพาะที่มีแอตทริบิวต์ที่มีค่าเฉพาะได้ สิ่งนี้มีประโยชน์ส่วนใหญ่เมื่อทำงานกับมาร์กอัป เช่น XML ซึ่งไม่มีหลักการออกแบบมาตรฐานสำหรับการจัดการโหนด ตัวอย่างด้านล่างเป็นแนวคิดที่ค่อนข้างง่าย :

1. div[attrib^="1"] { /* สไตล์ที่นี่ */ }

โค้ดด้านบนเป็นส่วนหนึ่งของไลบรารีตัวเลือก CSS ซึ่งจะส่งผลต่อองค์ประกอบ div ทั้งหมดที่มีแอตทริบิวต์ attrib ซึ่งมีค่า 1 ด้วย หากยังสับสนให้ดูตัวอย่างด้านล่างเพื่อชี้แจง ตามทฤษฎีแล้ว ตัวเลือกทั้งสองนี้ควรทำอย่างเดียวกัน

1. p[id^="primary"] { /* สไตล์ */ }
2. p#primary { /* สไตล์ */ }

ปัจจุบัน CSS ยืนหยัดอย่างภาคภูมิใจในฐานะภาษาที่โดดเด่นสำหรับการจัดสไตล์เว็บไซต์ส่วนหน้าของเรา

ข้อกำหนดที่สำคัญใน CSS

ข้อกำหนดต่อไปนี้อ้างอิงจากบทความ Divya Manian ที่แก้ไขด้วยแหล่งข้อมูลตัวแทนอื่นๆ

คุณสมบัติ คือรูปแบบที่คุณใช้กับตัวเลือก พูดง่ายๆ คือ คุณสมบัติคือสิ่งที่มาก่อนโคลอนในแต่ละบรรทัดของ CSS ในตัวอย่างด้านล่าง คำว่า width เป็นคุณสมบัติ

#box  {
width : 200px; /* คุณสมบัติคือ "width" (ไม่มีเครื่องหมายทวิภาค) */
}

Value คือมูลค่าที่ทรัพย์สินสามารถมีได้ พูดง่ายๆ ก็คือ Value คือสิ่งที่ปรากฏขึ้นหลังโคลอนในแต่ละบรรทัดของ CSS ในตัวอย่างด้านล่าง 200px คือค่า

#box
width : 200px; /* หลังโคลอนไม่มีเซมิโคลอน */
}

Keyword เป็นคำที่กำหนดไว้ในข้อกำหนด CSS ดังนั้นต้องไม่ปรากฏในเครื่องหมายคำพูดเมื่อใช้ ตัวอย่าง : red, solid, dotted คำหลักเป็นค่าสำหรับคุณสมบัติและค่อนข้างเหมือนกับคำสงวนสำหรับคุณสมบัติเฉพาะ คุณสมบัติที่แตกต่างกันมีคำหลักที่แตกต่างกัน และคุณสมบัติทั้งหมดอนุญาตให้ใช้คำหลัก สืบทอด ในตัวอย่างด้านล่าง ค่า auto คือคีย์เวิร์ด

#container {
height: auto; /* "auto" เป็นคีย์เวิร์ด */
}

มีความคิดเห็นที่ยอมรับว่าคำว่า : !important มีคุณสมบัติเป็นคำหลัก โดยพิจารณาจากความแตกต่างของคำหลักจากค่าต่างๆ

Length Units คือค่าที่สามารถประกาศเป็นหน่วย (เช่น 1px, 2%) Functional Notation คือค่าใดๆ ที่ระบุเป็นฟังก์ชัน (identifier ตามด้วย ()) ส่วนใหญ่ใช้เพื่อกำหนดสี, URIs, คุณลักษณะและการแปลงเช่น rgba(0, 0, 0, 0.5), url('im.png'), attr('href'), scale(20)

Identifier คือสิ่งที่ปรากฏเป็น property, id, class, คำหลัก value และat-rule . ในตัวอย่าง ด้านล่างนี้คือ identifiers สี่ตัว:

/* "body", "background", "none" และ "font-size" เป็น identifiers */
body {
  background: none;
  font-size: 14px;
}
/* "14px" ไม่ใช่ identifier */

คำว่า body เป็นตัวระบุหรือตัวระบุ คำว่า background เป็นตัวระบุด้วย คำว่า none เป็นตัวระบุ และคำว่า font-size เป็นตัวระบุ ค่าสุดท้าย 14px ไม่ใช่ตัวระบุ เนื่องจากไม่ใช่คีย์เวิร์ด

Declaration คือชุดของชื่อและค่าคุณสมบัติ โดยปกติแล้วจะเป็นบรรทัดเดียวของ CSS ที่ปรากฏระหว่างวงเล็บปีกกา ไม่ว่าจะเป็นตัวย่อหรือเขียนด้วยลายมือ ในตัวอย่างด้านล่าง ทุกอย่างหลังวงเล็บปีกกาแรก และก่อนวงเล็บปีกกาสุดท้าย (ไม่รวมความคิดเห็น) คือการประกาศ :

body {
  font-family: Arial, sans-serif; /* บรรทัดนี้เป็นการประกาศ */
  background: red; /* บรรทัดนี้เป็นการประกาศ */
}

ในตัวอย่างต่อไปนี้ มีการประกาศสองอย่างระหว่างเครื่องหมาย {} :

body {
  font-family: Arial, sans-serif; /* หนึ่งประกาศ */
  color: #555; /* ประกาศอีก */
}

Declaration Block คือส่วนของ CSS ที่มีคู่คุณสมบัติ/ค่าปรากฏขึ้น ในตัวอย่างด้านล่าง ทั้งหมดที่พบระหว่าง {} (ไม่รวมความคิดเห็น) คือบล็อกการประกาศ :

body {
  font-family: Arial, sans-serif; /* ขึ้นต้นด้วยเส้นนี้ */
  color: #555;
  font-size: 14px;
  line-height: 20px; /* จบตรงนี้ก่อนปิดเฝือก */
}

Rule or Rule Set คือตัวเลือกหรือตัวเลือกตามด้วยบล็อกการประกาศ นี่คือส่วนหนึ่งของ CSS ซึ่งรวมถึงตัวเลือก แฟล็ก {} และบรรทัดต่างๆ ที่มีคุณสมบัติและค่าต่างๆ รหัสในตัวอย่างด้านล่างประกอบด้วยชุดของกฎ :

body {
  font-family: Arial, sans-serif;
  color: #555;
  font-size: 14px;
}

#responsive {
clear: both;
color: #000;
background-color: chocolate;
}

Selector คือวิธีที่คุณประกาศว่าองค์ประกอบใดควรมีการจัดรูปแบบ โดยเฉพาะอย่างยิ่ง ตัวเลือกคือส่วนหนึ่งของบรรทัด CSS ที่เลือกองค์ประกอบเป้าหมายด้วยคู่ property/value ในตัวอย่างด้านล่าง #container, #box คือ selector :

/* ตัวเลือกคือทุกอย่างในบรรทัดแรก */
/* ไม่รวมเหล็กค้ำยันเปิด */
#container #box {
  width: 200px;
}

Element Type Selector คือตัวเลือกที่กำหนดเป้าหมายองค์ประกอบตามชื่อแท็ก ตัวเลือกในตัวอย่างด้านล่างคือตัวเลือกประเภทองค์ประกอบ เนื่องจากไม่ได้ใช้คลาส ID หรือตัวเลือกอื่นๆ เพื่อใช้สไตล์ที่กำหนด แต่จะกำหนดเป้าหมายองค์ประกอบการนำทาง HTML5 ทั้งหมดโดยตรงแทน :

/* จับคู่องค์ประกอบ HTML ตามชื่อ */
nav {
font-family: Arial, sans-serif;
color: #555;
font-size: 14px;
}

Class Selector คือตัวเลือกที่ใช้บ่อยที่สุด ตัวอย่าง : .style, .pen, .mystyle และอื่นๆ เพื่อเลือกองค์ประกอบที่มีชื่อคลาสว่า style, pen, mystyle, นั่น. อนุญาตให้มีองค์ประกอบมากกว่า 1 รายการที่มีชื่อคลาสเดียวกัน ตัวเลือกในตัวอย่างด้านล่างกำหนดเป้าหมายองค์ประกอบตามชื่อคลาส ดังนั้นองค์ประกอบใด ๆ ที่มีคลาส "navigation" จะได้รับสไตล์ที่ต้องการ :

/* จับคู่องค์ประกอบ HTML กับ class="navigation" */
.navigation {
  width: 960px;
  margin: 0 auto;
}

ID Selector คือการใช้เท่าที่จำเป็น คุณไม่สามารถใช้รหัสซ้ำในหน้าเดียวกันได้ และใช้เพื่อระบุองค์ประกอบที่ไม่ซ้ำเท่านั้น ตัวอย่าง : ตัวเลือกในตัวอย่างด้านล่างกำหนดเป้าหมายองค์ประกอบตามรหัส ดังนั้นองค์ประกอบใดๆ ที่มี ID navigation จะได้รับสไตล์ที่เป็นปัญหา : Universal Selector ตัวเลือกสากลตรงกับองค์ประกอบใดๆ ในบริบทที่วางไว้ในตัวเลือก ในตัวอย่างด้านล่าง อักขระ * คือตัวเลือกสากล : ดังนั้นองค์ประกอบใดๆ ที่ปรากฏเป็นไฟล์ลูกหลานขององค์ประกอบรายการที่ไม่เรียงลำดับภายในองค์ประกอบที่มีคลาส navigation จะได้รับรูปแบบที่ประกาศไว้ โดยทั่วไปไม่แนะนำให้ใช้ตัวเลือกสากลสำหรับเหตุผลด้านประสิทธิภาพ.

Attribute Selector คือหากคุณใช้แอตทริบิวต์อื่นที่ไม่ใช่คลาสหรือรหัสเพื่อระบุองค์ประกอบในสไตล์ชีต คุณจะใช้ตัวเลือกแอตทริบิวต์ คุณยังสามารถทำการจับคู่แม่แบบในตัวเลือกแอตทริบิวต์ (ดังนั้น หากคุณต้องการดำเนินการจับคู่แม่แบบสำหรับตัวเลือกโดยใช้แอตทริบิวต์คลาสหรือ ID คุณสามารถใช้ตัวเลือกแอตทริบิวต์ได้) ตัวอย่าง :

<div class="text-center gaya" id=ini-idselektor></div>

ID Selector คือการใช้เท่าที่จำเป็น คุณไม่สามารถใช้รหัสซ้ำในหน้าเดียวกันได้ และใช้เพื่อระบุองค์ประกอบที่ไม่ซ้ำเท่านั้น ตัวอย่าง : ตัวเลือกในตัวอย่างด้านล่างกำหนดเป้าหมายองค์ประกอบตามรหัส ดังนั้นองค์ประกอบใดๆ ที่มี ID navigation จะได้รับสไตล์ที่เป็นปัญหา : Universal Selector ตัวเลือกสากลตรงกับองค์ประกอบใดๆ ในบริบทที่วางไว้ในตัวเลือก ในตัวอย่างด้านล่าง อักขระ * คือตัวเลือกสากล : ดังนั้นองค์ประกอบใดๆ ที่ปรากฏเป็นไฟล์ลูกหลานขององค์ประกอบรายการที่ไม่เรียงลำดับภายในองค์ประกอบที่มีคลาส navigation จะได้รับรูปแบบที่ประกาศไว้ โดยทั่วไปไม่แนะนำให้ใช้ตัวเลือกสากลสำหรับเหตุผลด้านประสิทธิภาพ.

Attribute Selector คือหากคุณใช้แอตทริบิวต์อื่นที่ไม่ใช่คลาสหรือรหัสเพื่อระบุองค์ประกอบในสไตล์ชีต คุณจะใช้ตัวเลือกแอตทริบิวต์ คุณยังสามารถทำการจับคู่แม่แบบในตัวเลือกแอตทริบิวต์ (ดังนั้น หากคุณต้องการดำเนินการจับคู่แม่แบบสำหรับตัวเลือกโดยใช้แอตทริบิวต์คลาสหรือ ID คุณสามารถใช้ตัวเลือกแอตทริบิวต์ได้) ตัวอย่าง :

/* matches HTML element with id="navigation" */
#navigation {
  width: 960px;
  margin: 0 auto;
}

ID Selector คือการใช้เท่าที่จำเป็น คุณไม่สามารถใช้รหัสซ้ำในหน้าเดียวกันได้ และใช้เพื่อระบุองค์ประกอบที่ไม่ซ้ำเท่านั้น ตัวอย่าง : ตัวเลือกในตัวอย่างด้านล่างกำหนดเป้าหมายองค์ประกอบตามรหัส ดังนั้นองค์ประกอบใดๆ ที่มี ID navigation จะได้รับสไตล์ที่เป็นปัญหา : Universal Selector ตัวเลือกสากลตรงกับองค์ประกอบใดๆ ในบริบทที่วางไว้ในตัวเลือก ในตัวอย่างด้านล่าง อักขระ * คือตัวเลือกสากล : ดังนั้นองค์ประกอบใดๆ ที่ปรากฏเป็นไฟล์ลูกหลานขององค์ประกอบรายการที่ไม่เรียงลำดับภายในองค์ประกอบที่มีคลาส navigation จะได้รับรูปแบบที่ประกาศไว้ โดยทั่วไปไม่แนะนำให้ใช้ตัวเลือกสากลสำหรับเหตุผลด้านประสิทธิภาพ.

Attribute Selector คือหากคุณใช้แอตทริบิวต์อื่นที่ไม่ใช่คลาสหรือรหัสเพื่อระบุองค์ประกอบในสไตล์ชีต คุณจะใช้ตัวเลือกแอตทริบิวต์ คุณยังสามารถทำการจับคู่แม่แบบในตัวเลือกแอตทริบิวต์ (ดังนั้น หากคุณต้องการดำเนินการจับคู่แม่แบบสำหรับตัวเลือกโดยใช้แอตทริบิวต์คลาสหรือ ID คุณสามารถใช้ตัวเลือกแอตทริบิวต์ได้) ตัวอย่าง :

/* เครื่องหมายดอกจันคือตัวเลือกสากล */
.navigation ul * {
  width: 100px;
  float: left;
}

ID Selector คือการใช้เท่าที่จำเป็น คุณไม่สามารถใช้รหัสซ้ำในหน้าเดียวกันได้ และใช้เพื่อระบุองค์ประกอบที่ไม่ซ้ำเท่านั้น ตัวอย่าง : ตัวเลือกในตัวอย่างด้านล่างกำหนดเป้าหมายองค์ประกอบตามรหัส ดังนั้นองค์ประกอบใดๆ ที่มี ID navigation จะได้รับสไตล์ที่เป็นปัญหา : Universal Selector ตัวเลือกสากลตรงกับองค์ประกอบใดๆ ในบริบทที่วางไว้ในตัวเลือก ในตัวอย่างด้านล่าง อักขระ * คือตัวเลือกสากล : ดังนั้นองค์ประกอบใดๆ ที่ปรากฏเป็นไฟล์ลูกหลานขององค์ประกอบรายการที่ไม่เรียงลำดับภายในองค์ประกอบที่มีคลาส navigation จะได้รับรูปแบบที่ประกาศไว้ โดยทั่วไปไม่แนะนำให้ใช้ตัวเลือกสากลสำหรับเหตุผลด้านประสิทธิภาพ.

Attribute Selector คือหากคุณใช้แอตทริบิวต์อื่นที่ไม่ใช่คลาสหรือรหัสเพื่อระบุองค์ประกอบในสไตล์ชีต คุณจะใช้ตัวเลือกแอตทริบิวต์ คุณยังสามารถทำการจับคู่แม่แบบในตัวเลือกแอตทริบิวต์ (ดังนั้น หากคุณต้องการดำเนินการจับคู่แม่แบบสำหรับตัวเลือกโดยใช้แอตทริบิวต์คลาสหรือ ID คุณสามารถใช้ตัวเลือกแอตทริบิวต์ได้) ตัวอย่าง :

<!DOCTYPE html>
<html>
<head>
<!-- CSS -->
<style>
a[target] {
background-color: yellow;

}
</style>
<!-- CSS -->
</head>
<body>
<p>Links with the "target" attribute receive a yellow background:</p>
<a href="https://www.google.com">Google Internasional</a>
<!-- yellow background -->
<a href="https://www.google.co.id" target="_blank">Google Indonesia</a>
<a href="https://www.google.org" target="_top">Google Organization</a>
<!-- yellow background -->
</body>
</html>

Pseudo-Classes คือ class ที่ใช้กับองค์ประกอบตามข้อมูลที่ไม่ได้อยู่ในมาร์กอัป เช่น :first-child หรือ :last-child`` `. คุณไม่สามารถใช้ส่วนของบทความ:first-childเพื่อเลือกการเกิดขึ้นครั้งแรกของบทความได้ หากรายการย่อยของหัวข้อเป็น h1 ไม่ใช่บทความ ในทำนองเดียวกันกับ:nth-childและ:last-childpseudo-class```.

Pseudo-Elements เป็นองค์ประกอบ Pseudo ที่แตกต่างจาก Pseudo-Classes โดยที่พวกเขาสร้างองค์ประกอบในแผนผังเอกสาร นี่เป็นตัวอย่างแรกของ CSS ที่ปรับเปลี่ยนโครงสร้างเอกสาร HTML ตามหลักการแล้ว คุณควรใช้องค์ประกอบหลอกกับ :: แทน : (แต่เบราว์เซอร์ส่วนใหญ่ยอมรับสัญลักษณ์ : สำหรับองค์ประกอบหลอก CSS 2.1) องค์ประกอบหลอกคือ : :: first-line, ::first-letter, ::before, ::after.

Combinators คือการเลือกองค์ประกอบตามการเกิดขึ้นที่สัมพันธ์กับองค์ประกอบอื่นๆ (เลือกโดยตัวเลือก combinator : space, >, + หรือ ~).

CSS มีตัวผสมที่แตกต่างกันสี่ตัว :

  • ตัวเลือกลูกหลาน (ช่องว่าง)
  • ตัวเลือกเด็ก (>)
  • ตัวเลือกพี่น้องที่อยู่ติดกัน (+)
  • ตัวเลือกพี่น้องทั่วไป (~)

คำสี่คำข้างต้นหมายความว่าอย่างไร :

  • Descendant Combinator นี่คือการใช้งานทั่วไป เช่น #responsive h1

  • Child Combinator คือตัวเลือกย่อยที่เลือกองค์ประกอบทั้งหมดที่เป็นลูกขององค์ประกอบเฉพาะ ตัวอย่างต่อไปนี้เลือกองค์ประกอบ <p> ทั้งหมดที่เป็นลูกขององค์ประกอบ <div> :

    div > p {
     background-color: yellow;
    }
  • Adjacent Sibling Combinator เป็นองค์ประกอบที่อยู่ติดกับองค์ประกอบอื่นโดยตรง.

  • General Sibling Combinator เป็นองค์ประกอบที่อยู่ติดกัน แต่ไม่ใช่กับองค์ประกอบอื่นโดยตรง.

  • At-Rules เป็นกฎที่ขึ้นต้นด้วยอักขระ @, เช่น : @import, @page, @media และ @font-face.

  • Media Features ใช้กับข้อความค้นหาสื่อ คุณสามารถกำหนดเป้าหมายรูปแบบโดยขึ้นอยู่กับคุณลักษณะสื่อ การใช้งานคุณลักษณะสื่อที่ได้รับความนิยมคือ min-width และ max-width เพื่อตรวจจับอุปกรณ์ iOS

  • Vendor-specific Extension ตรงตามที่ระบุไว้ มีฟังก์ชันการทำงานเฉพาะสำหรับผู้จำหน่ายเฉพาะ (เช่น เบราว์เซอร์) ไม่จำเป็นต้องแสดงถึงคุณลักษณะที่ประกาศไว้ในมาตรฐาน.

  • Comment หรือ Statement เป็นภาษาที่อธิบายโค้ด CSS ที่คอมไพล์ด้านล่าง ตัวอย่าง: ความคิดเห็นที่นี่พูดเกี่ยวกับ 4 สิ่ง :

    1. Bootstrap v4.3.1 (https://getbootstrap.com/)
    2. Copyright 2011-2019 The Bootstrap Authors
    3. Copyright 2011-2019 Twitter, Inc.
    4. Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)

ให้ความสนใจกับรหัสนี้ :

/*!
  Bootstrap v4.3.1 (https://getbootstrap.com/)
  Copyright 2011-2019 The Bootstrap Authors
  Copyright 2011-2019 Twitter, Inc.
  Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */:root {
    --blue: #007bff;
    --indigo: #6610f2;
    --purple: #6f42c1;
    --pink: #e83e8c;
    --red: #dc3545;

ทิ้งข้อความไว้

คำพูดของภูมิปัญญา

" ถ้าคุณคิดว่าฉันขี้เกียจ คุณคิดผิด! อันที่จริงฉันกำลังใช้โหมดประหยัดพลังงาน "

อ้างอิง บทความ :

คอลเลกชันเทมเพลตเว็บไซต์ :

We Build

แท็ก โพสต์: Bootstrap, การดัดแปลง, เทมเพลต 04 สิงหาคม 2021

Above - Template Pendidikan

แท็ก โพสต์: Bootstrap, เทมเพลต 04 สิงหาคม 2021

Portfolio - (เทมเพลตพิมพ์เขียว)

แท็ก โพสต์: HTML5, เทมเพลต 04 สิงหาคม 2021

Coming Sssoon + Mods

แท็ก โพสต์: Bootstrap, การดัดแปลง, เทมเพลต 30 ตุลาคม 2020

Mobster + Mods

แท็ก โพสต์: Bootstrap, เทมเพลต 29 ตุลาคม 2020

SB Admin + Kār prạb pelī̀yn

แท็ก โพสต์: Bootstrap, การดัดแปลง, เทมเพลต 06 ตุลาคม 2020