CSS | Khả niym bn wĕbsịt̒ 0 ครั้งที่เห็น

คำอธิบาย

ในโอกาสนี้เราจะพยายามทำความเข้าใจว่า 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 ซึ่งมีช่อง Alpha เพื่อลดความทึบ

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

1. div[attrib^="1"] { /* styles here */ }

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

1. p[id^="primary"] { /* styles */ }
2. p#primary { /* styles */ }

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

คำสำคัญใน CSS

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

  • Property คือสไตล์ที่คุณใช้กับตัวเลือก พูดง่ายๆคือคุณสมบัติคือสิ่งที่ปรากฏก่อนเครื่องหมายจุดคู่ของ CSS แต่ละบรรทัด ในตัวอย่างด้านล่างคำว่า "width" คือคุณสมบัติ
#box  {
   width : 200px; /* คุณสมบัติ คือ "width" (ไม่มีเครื่องหมายทวิภาค) */ 
}
  • Value คือมูลค่าที่ทรัพย์สินสามารถมีได้ พูดง่ายๆคือค่าคือสิ่งที่ปรากฏหลังเครื่องหมายจุดคู่ใน CSS แต่ละบรรทัด ในตัวอย่างด้านล่าง "200px" คือค่า
#box  {
   width : 200px; /* หลังลำไส้ใหญ่โดยไม่มีเครื่องหมายอัฒภาค */ 
}
  • Keyword เป็นคำที่กำหนดไว้ในข้อกำหนด CSS ดังนั้นจึงไม่ควรปรากฏในเครื่องหมายคำพูดเมื่อใช้ ตัวอย่าง: สีแดงทึบจุด คีย์เวิร์ดเป็นค่าคุณสมบัติและคล้ายกับคำสั่งสำหรับคุณสมบัติเฉพาะ คุณสมบัติที่แตกต่างกันมีคำหลักที่แตกต่างกันและคุณสมบัติทั้งหมดอนุญาตให้ใช้คีย์เวิร์ด "สืบทอด" ในตัวอย่างด้านล่างค่า "อัตโนมัติ" คือคำหลัก
#container {
  height: auto; /* "auto" คือ keyword */
}

บางคนโต้แย้งว่า:! สิ่งสำคัญมีคุณสมบัติเป็นคำหลักโดยพิจารณาจากความแตกต่างจากมูลค่า

  • Length Units คือค่าที่สามารถประกาศเป็นหน่วย (ตัวอย่าง: 1px, 2%)
  • Functional Notation คือค่าใด ๆ ที่กำหนดเป็นฟังก์ชัน (ตัวระบุตามด้วย ()) ส่วนใหญ่ใช้ในการกำหนดสี URI แอตทริบิวต์และการแปลง: rgba(0, 0, 0, 0.5), url('im.png'), attr('href'), scale(20).
  • Identifier คืออะไรก็ได้ที่ปรากฏเป็นคุณสมบัติ id คลาสค่าคีย์เวิร์ดและ at-rule ในตัวอย่างด้านล่างคือตัวระบุสี่ตัว:
/* "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 ที่เลือกว่าองค์ประกอบเป้าหมายใดที่มีคู่คุณสมบัติ / ค่า ในตัวอย่างด้านล่าง "#container #box" คือตัวเลือก:
/* the selector is everything on the first line */
/* excluding the opening curly brace */
#container #box {
  width: 200px;
}
  • Element Type Selector เป็นตัวเลือกที่กำหนดเป้าหมายองค์ประกอบด้วยชื่อแท็ก ตัวเลือกในตัวอย่างด้านล่างเป็นตัวเลือกประเภทองค์ประกอบเนื่องจากไม่ได้ใช้คลาส ID หรือตัวเลือกอื่นเพื่อใช้สไตล์ที่กำหนด แต่จะกำหนดเป้าหมายองค์ประกอบการนำทาง HTML5 ทั้งหมดโดยตรง:
/* matches an HTML element by name */
nav {
  font-family: Arial, sans-serif;
  color: #555;
  font-size: 14px;
}
  • Class Selector เป็นตัวเลือกที่ใช้บ่อยที่สุด ตัวอย่าง: .style, .pen, .mystyle และอื่น ๆ เพื่อเลือกองค์ประกอบที่มี style classname, pen, mystyle, that อนุญาตให้ใช้ได้มากกว่า 1 องค์ประกอบที่มีชื่อคลาสเดียวกัน ตัวเลือกในตัวอย่างด้านล่างกำหนดเป้าหมายองค์ประกอบตามชื่อคลาส ดังนั้นแต่ละองค์ประกอบที่มีคลาส "navigation" จะได้รับสไตล์ที่ต้องการ:
/* matches HTML element with class="navigation" */
.navigation {
  width: 960px;
  margin: 0 auto;
}
  • ID Selector คือการใช้มันเท่าที่จำเป็น คุณไม่สามารถใช้ ID ซ้ำในเพจเดียวกันได้และใช้เพื่อระบุองค์ประกอบที่ไม่ซ้ำกันเท่านั้น ตัวอย่าง:
<div class="text-center gaya" id=ini-idselektor></div>

ตัวเลือกในตัวอย่างด้านล่างกำหนดเป้าหมายองค์ประกอบตาม ID ดังนั้นแต่ละองค์ประกอบที่มี ID "navigation" จะได้รับรูปแบบที่ต้องการ:

/* matches HTML element with id="navigation" */
#navigation {
  width: 960px;
  margin: 0 auto;
}
  • Universal Selector ตัวเลือกสากลจะจับคู่องค์ประกอบใด ๆ ในบริบทที่วางไว้ในตัวเลือก ในตัวอย่างด้านล่างอักขระ * เป็นตัวเลือกสากล:
/* the asterisk character is the universal selector */
.navigation ul * {
  width: 100px;
  float: left;
}

ดังนั้นองค์ประกอบใด ๆ ที่ปรากฏเป็นลูกหลานขององค์ประกอบรายการที่ไม่ได้เรียงลำดับภายในองค์ประกอบที่มีคลาส "การนำทาง" จะได้รับรูปแบบที่ประกาศ โดยทั่วไปตัวเลือกสากลไม่ได้รับการสนับสนุนเนื่องจากเหตุผลด้านประสิทธิภาพ

  • Attribute Selector คือถ้าคุณใช้แอตทริบิวต์อื่นที่ไม่ใช่ class หรือ id เพื่อระบุองค์ประกอบในสไตล์ชีตคุณจะใช้ Attribute Selectors คุณยังสามารถจับคู่แม่แบบในตัวเลือกแอตทริบิวต์ (ดังนั้นหากคุณต้องการจับคู่เทมเพลตสำหรับตัวเลือกโดยใช้แอตทริบิวต์คลาสหรือ ID คุณสามารถใช้ตัวเลือกแอตทริบิวต์ได้) ตัวอย่าง:
<!DOCTYPE html>
<html>
<head>
<!-- CSS -->
<style>
a[target] {
  background-color: yellow;
}
</style>
<!-- CSS -->
</head>
<body>

<p>ลิงก์ที่มีแอตทริบิวต์ "target" จะได้รับพื้นหลังสีเหลือง:</p>

<a href="https://www.google.com">Google Internasional</a>

<!-- พื้นหลังสีเหลือง -->
<a href="https://www.google.co.id" target="_blank">Google Indonesia</a>
<a href="https://www.google.org" target="_top">Google Organisasi</a>
<!-- พื้นหลังสีเหลือง -->

</body>
</html>
  • Pseudo-Classes เป็นคลาสที่ใช้กับองค์ประกอบตามข้อมูลที่ไม่ได้อยู่ในมาร์กอัปตัวอย่างเช่น: ลูกคนแรกหรือ: ลูกคนสุดท้าย คุณไม่สามารถใช้บทความ: ส่วนลูกคนแรกเพื่อเลือกเหตุการณ์ที่เกิดขึ้นครั้งแรกของบทความถ้าลูกคนแรกของส่วนนี้เป็น 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:

  1. Descendant selector (space)
  2. Child selector (>)
  3. Adjacent sibling selector (+)
  4. General sibling selector (~)

สี่คำศัพท์ข้างต้นหมายถึงอะไร:

  1. Descendant Combinator นี่คือการใช้งานที่พบบ่อยที่สุดเช่น #responsive h1
  2. Child Combinator คือตัวเลือกลูกจะเลือกองค์ประกอบทั้งหมดที่เป็นลูกขององค์ประกอบเฉพาะ ตัวอย่างต่อไปนี้เลือก

    องค์ประกอบทั้งหมดที่เป็นลูกของ

    องค์ประกอบ:
div > p {
  background-color: yellow;
}
  1. Adjacent Sibling Combinator เป็นองค์ประกอบที่อยู่ติดกับองค์ประกอบอื่นโดยตรง
  2. General Sibling Combinator เป็นองค์ประกอบที่อยู่ติดกัน แต่ไม่ใช่องค์ประกอบอื่นโดยตรง
  • At-Rules คือกฎที่ขึ้นต้นด้วย @character เช่น @import, @page, @media และ @font-face.
  • Media Features ด้วยแบบสอบถามสื่อคุณสามารถกำหนดเป้าหมายรูปแบบขึ้นอยู่กับคุณสมบัติของสื่อ การใช้คุณลักษณะสื่อที่เป็นที่นิยม ได้แก่ ความกว้างต่ำสุดและความกว้างสูงสุดในการตรวจจับอุปกรณ์ iOS
  • Vendor-specific Extension คือสิ่งที่พูด มีฟังก์ชันการทำงานเฉพาะสำหรับผู้จำหน่ายเฉพาะ (เช่นเบราว์เซอร์) ซึ่งไม่ได้แสดงถึงคุณลักษณะที่ประกาศไว้ในมาตรฐานเสมอไป
  • Comment atau 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;

Tags: รหัส ข้อมูลอ้างอิง บน 15 กันยายน 2020

แสดงความคิดเห็น

Forum Diskusi

Post a reply
3464 views

ตอบกลับการสนทนานี้