คอร์ส IT พื้นฐาน CSS 019_HelloCSS - บันทึกเทคนิคของ zhaoJian

CSS คืออะไร?

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

CSS เป็นส่วนสำคัญของการพัฒนาเว็บ สามารถช่วยคุณสร้างหน้าเว็บที่สวยงามและใช้งานง่าย

โครงสร้างพื้นฐานของ CSS

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

ตัวอย่าง:

1
p {
2
    color: red;
3
}

ผลลัพธ์:

ตัวอย่างผลลัพธ์

วิเคราะห์โครงสร้าง:

ตัวอย่างผลลัพธ์

[!สรุป]

ตัวเลือก (Selector) ชื่อขององค์ประกอบ HTML อยู่ที่จุดเริ่มต้นของชุดกฎ เลือกองค์ประกอบหนึ่งหรือมากกว่าที่ต้องการเพิ่มสไตล์ (ในตัวอย่างนี้คือองค์ประกอบ <p>) หากต้องการเพิ่มสไตล์ให้องค์ประกอบอื่น เพียงเปลี่ยนตัวเลือก

การประกาศ (Declaration) กฎเดี่ยว เช่น color: red; ใช้เพื่อกำหนดคุณสมบัติขององค์ประกอบที่จะเพิ่มสไตล์ การประกาศ CSS ลงท้ายด้วยเครื่องหมายอัฒภาค ; เสมอ และถูกล้อมด้วยวงเล็บปีกกา {}:

คุณสมบัติ (Properties) วิธีการเปลี่ยนสไตล์ขององค์ประกอบ HTML (ในตัวอย่างนี้ color เป็นคุณสมบัติขององค์ประกอบ <p>) ใน CSS ผู้เขียนจะตัดสินใจว่าจะแก้ไขคุณสมบัติใด

ค่าของคุณสมบัติ (Property value) ทางขวาของคุณสมบัติ หลังเครื่องหมายโคลอน คือค่าของคุณสมบัติ ซึ่งเลือกค่าหนึ่งจากลักษณะภายนอกที่เป็นไปได้มากมาย (นอกจาก red ยังมีค่าคุณสมบัติอื่นๆ อีกมากสำหรับ color)

จะรวม CSS อย่างไร?

การรวมแบบอินไลน์:

เขียนโค้ด CSS โดยตรงในแท็ก HTML โดยใช้แอตทริบิวต์ style

การรวมแบบอินไลน์คือการเขียนโค้ดสไตล์ในแท็ก HTML โดยตรง เป็นวิธีที่ง่ายและรวดเร็ว ข้อดี: สะดวกและรวดเร็ว เหมาะสำหรับสไตล์จำนวนน้อย ข้อเสีย:

ไม่เอื้อต่อการนำสไตล์กลับมาใช้ใหม่ ยากต่อการบำรุงรักษา
ไฟล์ HTML ยุ่งเหยิง ไม่เป็นไปตามหลักการแยกส่วน
ไม่เอื้อต่อแคชของเบราว์เซอร์ ส่งผลต่อประสิทธิภาพ

ตัวอย่าง:

1
  <div style="color: red; font-size: 16px;">นี่คือข้อความสีแดง</div>

ผลลัพธ์:

ตัวอย่างผลลัพธ์

การรวมภายใน:

เขียนโค้ด CSS ในแท็ก <style> วางไว้ภายในแท็ก <head>

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

ต้องมีคำขอเครือข่ายเพิ่มเติมเมื่อโหลดหน้า ค่อนข้างไม่มีประสิทธิภาพ
สไตล์และไฟล์ HTML ยังมีการเชื่อมโยงกันอยู่

ตัวอย่าง:

1
div {
2
    color: red;
3
    font-size: 16px;
4
}

1
  <div>นี่คือข้อความสีแดง</div>

ผลลัพธ์:

ตัวอย่างผลลัพธ์

การรวมภายนอก:

เขียนโค้ด CSS ในไฟล์ CSS แยกต่างหาก จากนั้นใช้แท็ก link เพื่อรวมเข้ามา

การรวมภายนอกคือการเขียนโค้ดสไตล์ในไฟล์ CSS แยกต่างหาก เป็นวิธีมาตรฐาน ข้อดี: สไตล์และไฟล์ HTML แยกกันโดยสิ้นเชิง บำรุงรักษาง่าย นอกจากนี้การเร่งความเร็ว CDN สามารถเพิ่มความเร็วในการโหลด การรวมภายนอกยังรองรับการบีบอัดและการรวมเพื่อลดขนาดไฟล์ ข้อเสีย:

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

ตัวอย่าง:

1
<head>
2

3
<!-- ในไดเรกทอรีปัจจุบัน อ้างอิงไฟล์สไตล์ชีตในโฟลเดอร์ย่อย styles -->
4
<link rel="stylesheet" href="style.css" />
5

6
<!-- ในไดเรกทอรีปัจจุบัน อ้างอิงไฟล์สไตล์ชีตใน styles/general -->
7
<link rel="stylesheet" href="/style.css" />
8

9
<!-- ในไดเรกทอรีหลัก อ้างอิงไฟล์สไตล์ชีตในโฟลเดอร์ย่อย styles -->
10
<link rel="stylesheet" href="../styles/style.css" />
11

12
</head>

1
div {
2
    color: red;
3
    font-size: 16px;
4
}

ผลลัพธ์:

ตัวอย่างผลลัพธ์

ลำดับการเรียงซ้อนและลำดับความสำคัญ

ลำดับการเรียงซ้อน CSS (Cascading Order) และความจำเพาะ (Specificity) เป็นสองปัจจัยสำคัญที่กำหนดผลของสไตล์ CSS ที่แสดง

ลำดับการเรียงซ้อน: ลำดับการเรียงซ้อน CSS กำหนดน้ำหนักของกฎสไตล์ จากสูงไปต่ำ:

ความสำคัญ (!important): กฎสไตล์ที่ประกาศด้วย !important มีลำดับความสำคัญสูงสุด ควรใช้อย่างระมัดระวัง เพราะการใช้มากเกินไปจะทำให้บำรุงรักษายาก
สไตล์ผู้เขียน (Author Styles): สไตล์ที่กำหนดโดยนักพัฒนาเว็บ รวมถึงสไตล์ชีตภายนอก ภายใน และสไตล์อินไลน์ ลำดับความสำคัญอยู่ระหว่างสไตล์ผู้ใช้และสไตล์ตัวแทนผู้ใช้
สไตล์ผู้ใช้ (User Styles): สไตล์ที่ผู้ใช้กำหนดผ่านปลั๊กอินหรือการตั้งค่าเบราว์เซอร์ ลำดับความสำคัญสูงกว่าสไตล์ตัวแทนผู้ใช้ เช่น: ปลั๊กอินฟอนต์
สไตล์ตัวแทนผู้ใช้ (User Agent Styles): สไตล์เริ่มต้นของเบราว์เซอร์ ลำดับความสำคัญต่ำสุด เช่น: ฟอนต์

ลำดับความสำคัญ: เมื่อมีกฎสไตล์หลายรายการในระดับเดียวกันหรือกฎที่ขัดแย้งกัน CSS จะแสดงสไตล์ตามลำดับความสำคัญ

สไตล์อินไลน์ (Inline Styles): สไตล์ที่กำหนดภายในแท็ก HTML ลำดับความสำคัญสูงสุด
ตัวเลือก ID (id): สไตล์ที่กำหนดโดยตัวเลือก ID เช่น: #header
ตัวเลือกคลาส แอตทริบิวต์ และ pseudo-class (class): ผ่านตัวเลือกคลาส เช่น: .container ผ่านตัวเลือกแอตทริบิวต์ เช่น: [type="text"] ผ่านตัวเลือก pseudo-class เช่น: :hover
ตัวเลือกองค์ประกอบ: ตัวเลือกที่มีชื่อองค์ประกอบ HTML เช่น: div, p

ในกรณีที่ลำดับความสำคัญเท่ากัน กฎที่กำหนดทีหลังจะมีลำดับความสำคัญสูงกว่า

ตัวอย่าง:

1
#header {
2
    color: red;
3
}
4

5
.container p {
6
    color: blue;
7
}
8

9
p {
10
    color: green;
11
}

การสืบทอด CSS

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

คุณสมบัติ CSS ที่สืบทอดได้ส่วนใหญ่ ได้แก่:

คุณสมบัติข้อความ: font-family, font-size, font-weight, font-style, color, text-decoration, text-align, line-height, letter-spacing, word-spacing
คุณสมบัติสี: background-color, border-color, color, outline-color
คุณสมบัติเส้นขอบ: border-width, border-style, border-color
คุณสมบัติโมเดลกล่อง: margin, padding, width, height, display, float, position, z-index

คุณสมบัติ CSS ที่ไม่สืบทอด ได้แก่ width, height, margin, padding และคุณสมบัติโมเดลกล่องอื่นๆ การวางตำแหน่ง (position), การลอย (float), การล้างการลอย (clear) และคุณสมบัติเลย์เอาต์อื่นๆ

คุณสมบัติ CSS ที่ใช้บ่อยและหน้าที่:

คุณสมบัติพื้นฐาน width, height: กำหนดความกว้างและความสูงขององค์ประกอบ margin: กำหนดระยะขอบขององค์ประกอบ padding: กำหนดระยะเว้นภายในขององค์ประกอบ color, background-color: กำหนดสีและสีพื้นหลังขององค์ประกอบ font-size, font-family, font-weight, font-style: กำหนดขนาด ตระกูล น้ำหนัก และสไตล์ของฟอนต์

คุณสมบัติเลย์เอาต์ display: กำหนดโหมดการแสดงผลขององค์ประกอบ float: กำหนดพฤติกรรมการลอยขององค์ประกอบ position: กำหนดตำแหน่งขององค์ประกอบ top, left, right, bottom: กำหนดตำแหน่งบน ซ้าย ขวา และล่าง z-index: กำหนดลำดับการซ้อนขององค์ประกอบ

คุณสมบัติข้อความ text-align: กำหนดการจัดตำแหน่งข้อความ text-decoration: กำหนดการตกแต่งข้อความ line-height: กำหนดความสูงของบรรทัด font-variant: กำหนดรูปแบบฟอนต์ text-transform: กำหนดการแปลงข้อความ letter-spacing, word-spacing: กำหนดระยะห่างระหว่างตัวอักษรและคำ

คุณสมบัติเส้นขอบ border: กำหนดสไตล์เส้นขอบขององค์ประกอบ border-width: กำหนดความกว้างเส้นขอบ border-style: กำหนดสไตล์เส้นขอบ border-color: กำหนดสีเส้นขอบ border-radius: กำหนดรัศมีมุมเส้นขอบ

คุณสมบัติพื้นหลัง background: กำหนดพื้นหลังขององค์ประกอบ background-color: กำหนดสีพื้นหลัง background-image: กำหนดรูปภาพพื้นหลัง background-repeat: กำหนดโหมดการทำซ้ำรูปภาพพื้นหลัง background-position: กำหนดตำแหน่งรูปภาพพื้นหลัง background-size: กำหนดขนาดรูปภาพพื้นหลัง

คุณสมบัติการเปลี่ยนผ่าน transition: กำหนดเอฟเฟกต์การเปลี่ยนผ่านขององค์ประกอบ transition-property: กำหนดคุณสมบัติการเปลี่ยนผ่าน transition-duration: กำหนดระยะเวลาการเปลี่ยนผ่าน transition-timing-function: กำหนดฟังก์ชันการเปลี่ยนผ่าน transition-delay: กำหนดการหน่วงเวลาการเปลี่ยนผ่าน

CSS คืออะไร?

โครงสร้างพื้นฐานของ CSS

วิเคราะห์โครงสร้าง:

จะรวม CSS อย่างไร?

การรวมแบบอินไลน์:

การรวมภายใน:

การรวมภายนอก:

ลำดับการเรียงซ้อนและลำดับความสำคัญ

การสืบทอด CSS

คุณสมบัติ CSS ที่ใช้บ่อยและหน้าที่:

ความคิดเห็น