ในฐานะนักเขียนโค้ดรุ่นใหม่ ก่อนอื่นเราเริ่มรวม CSS เข้ากับหน้าเว็บของเราในรูปแบบอินไลน์ เราใช้แอตทริบิวต์ style เพื่อฉีด CSS โดยตรงไปยังองค์ประกอบ HTML ของเรา:
<!DOCTYPE html> <html> <head> <title>Inline Style</title> </head> <body> <h1 style="color:blue;text-align:center;">Star Wars</h1> <h4 style="color:red;text-align:center;">Return of the Jedi</h4> </body> </html>
เมื่อเราย้ายไปยังไซต์ที่ซับซ้อนมากขึ้น เราจะย้ายไปยังการรวม CSS ของเราเป็น CSS ภายใน นี่คือที่ที่เราเขียน CSS ทั้งหมดของเราระหว่าง <style> แท็กใน <head> ส่วนของเอกสาร HTML:
<!DOCTYPE html>
<html>
<head>
<title>Internal CSS</title>
<style>
h1, h4 {
text-align: center;
}
h1 {
color: blue;
}
h4 {
color: red;
}
</style>
</head>
<body>
<h1>Star Wars</h1>
<h4>Return of the Jedi</h4>
</body>
</html> สิ่งนี้จะล้าง HTML ของเราอย่างดี แต่ถ้าเรามี CSS 500 บรรทัดล่ะ ไฟล์นี้จะอ่านยากอย่างรวดเร็ว อย่างไรก็ตาม เราสามารถสร้างสไตล์ชีตภายนอกแล้วเชื่อมโยงไปยังไฟล์ HTML ของเราได้!
การตั้งค่า:
- ในโฟลเดอร์โครงการหลักของคุณที่ index.html . ของคุณ ไฟล์คือ สร้างไฟล์ใหม่ชื่อ index.css ไฟล์ index.css จะเก็บ CSS ทั้งหมดสำหรับไฟล์ index.html ของเรา ฉันชอบตั้งชื่อไฟล์ CSS ของฉันตามชื่อไฟล์ HTML ที่จัดรูปแบบเพื่อให้จัดระเบียบต่างๆ แต่คุณสามารถตั้งชื่อไฟล์เหล่านี้ได้ตามต้องการ ตราบใดที่คุณรู้ว่าพวกเขากำลังจัดรูปแบบไฟล์ใด
- ถ้าคุณมี CSS อยู่ระหว่าง
<style>แท็กใน<head>ของไฟล์ HTML ของคุณ ตัดและวางโค้ด CSS เท่านั้น (ไม่มีแท็ก) ลงในไฟล์ CSS ที่เกี่ยวข้อง - ใน
<head>ของไฟล์ HTML ของคุณ คุณจะต้องสร้างแท็ก ที่ชี้ไปที่ไฟล์ CSS ของคุณ:
<link rel="stylesheet" type="text/css" href="./index.css">
ลิงก์ประกอบด้วยสามส่วน:
- แอตทริบิวต์ rel: สิ่งนี้บอกเราว่าจะมีความสัมพันธ์ระหว่างไฟล์นี้กับไฟล์อื่น และลิงก์นี้จะบอกเราว่าความสัมพันธ์นั้นคืออะไร
- แอตทริบิวต์ประเภท: อธิบายประเภทของความสัมพันธ์ที่ไฟล์ลิงก์มีกับไฟล์ HTML
- แอตทริบิวต์ href: พาธสัมพัทธ์ไปยังไฟล์จากตำแหน่งที่ไฟล์ HTML อยู่ – ตำแหน่งของไฟล์
โปรดจำไว้ว่าแม้ว่าเราจะแยกไฟล์ CSS ออกจากไฟล์ HTML แต่ลักษณะการเรียงซ้อนของ CSS ยังคงมีอำนาจเหนือกว่า ซึ่งหมายความว่าหากคุณมีไฟล์ CSS หลายไฟล์ คุณจะต้อง:
1. มี ที่ชี้ไปที่ไฟล์ CSS แต่ละไฟล์
2. ตรวจสอบให้แน่ใจว่าไฟล์เหล่านั้นอยู่ในลำดับที่คุณต้องการเพื่อให้การจัดสไตล์ที่เหมาะสมแสดงให้เห็น หากจัดวางไม่ถูกต้อง สไตล์อาจไม่ทำงาน
81% ของผู้เข้าร่วมกล่าวว่าพวกเขารู้สึกมั่นใจมากขึ้นเกี่ยวกับโอกาสในการทำงานด้านเทคโนโลยีหลังจากเข้าร่วม bootcamp จับคู่กับ Bootcamp วันนี้
ผู้สำเร็จการศึกษาจากหลักสูตร bootcamp โดยเฉลี่ยใช้เวลาน้อยกว่าหกเดือนในการเปลี่ยนอาชีพ ตั้งแต่เริ่มต้น bootcamp ไปจนถึงหางานแรก
นั่นคือทั้งหมดที่มีให้ ตอนนี้คุณพร้อมสำหรับการสร้างสไตล์ชีตภายนอกสำหรับโครงการของคุณแล้ว!
