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

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

ข้าว. 1.1. หน้าเว็บที่สร้างขึ้นใน HTML เท่านั้น

นี่คือหน้าเว็บปกติที่ได้รับการออกแบบโดยไม่มีการจีบใดๆ เอกสารเดียวกัน แต่ด้วยการเพิ่มสไตล์ทำให้มีรูปลักษณ์ที่แตกต่างไปจากเดิมอย่างสิ้นเชิง (รูปที่ 1.2)

ข้าว. 1.2. หน้าเว็บที่สร้างด้วย HTML และ CSS

การเปลี่ยนแปลงเกิดขึ้นอย่างมาก ดังนั้นเรามาดูโค้ดกันดีกว่าเพื่อทำความเข้าใจว่าความแตกต่างคืออะไร (ตัวอย่าง 1.1)

ตัวอย่างที่ 1.1 ซอร์สโค้ดเอกสาร

HTML5 CSS 2.1 IE Cr Op Sa Fx

เฟล็กกอน เฟล็กกอน

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

โดยการงอเฟล็กกอน เราจะสังเกตพื้นผิวทั้งหมดตามลำดับ

ตัวโค้ด HTML เองยังไม่ได้รับการเปลี่ยนแปลงใดๆ และสิ่งเดียวที่เพิ่มเติมคือบรรทัด มันลิงก์ไปยังไฟล์สไตล์ภายนอกที่เรียกว่า style.css เนื้อหาของไฟล์นี้แสดงอยู่ในตัวอย่างที่ 1.2

เนื้อความ ( ตระกูลแบบอักษร: Arial, Verdana, sans-serif; /* ตระกูลแบบอักษร */ ขนาดแบบอักษร: 11pt; /* ขนาดแบบอักษรของเนื้อหาเป็นจุด */ สีพื้นหลัง: #f0f0f0; /* สีพื้นหลังของหน้าเว็บ * / color: #333; /* สีข้อความเนื้อหา */ ) h1 ( สี: #a52a2a; /* สีส่วนหัว */ ขนาดตัวอักษร: 24pt; /* ขนาดตัวอักษรเป็นจุด */ ตระกูลแบบอักษร: Georgia, Times, serif ; /* ตระกูลแบบอักษร */ font-weight: ปกติ; /* น้ำหนักข้อความปกติ */ ) p ( text-align: justify; /* การจัดตำแหน่งความกว้าง */ ระยะขอบซ้าย: 60px; /* ระยะขอบด้านซ้ายเป็นพิกเซล */ ระยะขอบ- ขวา: 10px; /* ขอบขวาเป็นพิกเซล */ เส้นขอบซ้าย: 1px solid #999; /* พารามิเตอร์บรรทัดซ้าย */ border-bottom: 1px solid #999; /* เยื้องจากบรรทัดด้านซ้ายถึงข้อความ */ padding-bottom: 10px; /* เยื้องจากบรรทัดจากล่างสุดถึงข้อความ */ )

ไฟล์ style.css อธิบายพารามิเตอร์การออกแบบทั้งหมดสำหรับแท็ก เช่น และ

โปรดทราบว่าตัวแท็กนั้นเขียนตามปกติในโค้ด HTML

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

CSS เป็นภาษาของตัวเองที่เหมือนกับ HTML ในบางประเด็นเท่านั้น เช่น วิธีการกำหนดสี

ประเภทสไตล์

มีสไตล์หลายประเภทที่สามารถนำไปใช้ร่วมกันในเอกสารเดียวได้ เหล่านี้คือสไตล์เบราว์เซอร์ สไตล์ผู้เขียน และสไตล์ผู้ใช้

สไตล์เบราว์เซอร์

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

สไตล์นักเขียน

สไตล์ที่นักพัฒนาเพิ่มลงในเอกสาร ตัวอย่างที่ 1.2 แสดงหนึ่งในนั้น วิธีที่เป็นไปได้การเชื่อมต่อสไตล์ของผู้เขียน

สไตล์ผู้ใช้

นี่คือสไตล์ที่ผู้ใช้ไซต์สามารถเปิดใช้งานผ่านการตั้งค่าเบราว์เซอร์ของตน สไตล์นี้มีลำดับความสำคัญสูงกว่าและแทนที่การออกแบบดั้งเดิมของเอกสาร ใน อินเทอร์เน็ตเบราว์เซอร์ Explorer การเชื่อมต่อสไตล์ของผู้ใช้ทำได้ผ่านเมนูเครื่องมือ > ตัวเลือกอินเทอร์เน็ต > ปุ่มลักษณะที่ปรากฏ ดังแสดงในรูป 1.3.

ข้าว. 1.3. การเชื่อมต่อสไตล์ผู้ใช้ในเบราว์เซอร์ อินเทอร์เน็ตเอ็กซ์พลอเรอร์

ใน เบราว์เซอร์โอเปร่าการกระทำที่คล้ายกันเกิดขึ้นผ่านคำสั่ง เครื่องมือ > การตั้งค่าทั่วไป > แท็บ “ขั้นสูง” > เนื้อหา > ปุ่ม “ตัวเลือกสไตล์” (รูปที่ 1.4)

ข้าว. 1.4. การเชื่อมต่อสไตล์ผู้ใช้ในเบราว์เซอร์ Opera

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

คำถามที่ต้องตรวจสอบ

1. คุณต้องตั้งค่าสีของหัวข้อเป็นสีเขียว คุณสมบัติสไตล์ใดที่เหมาะกับจุดประสงค์นี้?

สีตัวอักษร

สี

ตระกูลแบบอักษร

ขนาดตัวอักษร

2. สไตล์คืออะไร?

วิธีย่อโค้ด HTML โดยการถ่ายโอนข้อมูลบางส่วนไปยังไฟล์อื่น

ภาษามาร์กอัปสำหรับเอกสารไฮเปอร์เท็กซ์

ชุดกฎสำหรับการจัดรูปแบบองค์ประกอบของหน้าเว็บ

วิธีการแปลงเอกสารข้อความเป็น HTML

เทคโนโลยีที่แสดงถึงเทคนิคต่างๆ ในการจัดวางโค้ด HTML

3. CSS ย่อมาจากอะไร?

สไตล์ชีทสีสันสดใส

สไตล์ชีทแบบเรียงซ้อน

คอมพิวเตอร์สไตล์ชีท

แผ่นสไตล์สร้างสรรค์

สไตล์ชีตทั่วไป

คำตอบ

2. ชุดกฎสำหรับการจัดรูปแบบองค์ประกอบของหน้าเว็บ

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

CSS ส่งผลต่อ HTML อย่างไร

เว็บเบราว์เซอร์ใช้กฎ CSS กับเอกสารเพื่อส่งผลต่อวิธีการแสดง กฎ CSS ถูกสร้างขึ้นจาก:

• ชุดคุณสมบัติ ซึ่งมีค่าที่กำหนดเพื่ออัปเดตวิธีการแสดงเนื้อหา HTML เช่น ฉันต้องการให้ความกว้างขององค์ประกอบเป็น 50% ขององค์ประกอบหลัก และพื้นหลังเป็นสีแดง.
• ตัวเลือกซึ่ง เลือกองค์ประกอบที่คุณต้องการใช้ค่าคุณสมบัติที่อัปเดต ตัวอย่างเช่น, ฉันต้องการใช้กฎ CSS ของฉันกับ ทั้งหมดย่อหน้าในเอกสาร HTML ของฉัน.

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

ตัวอย่าง CSS ฉบับย่อ

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

(โปรดสังเกตว่ามีการใช้สไตล์ชีทกับ HTML โดยใช้องค์ประกอบ):

การทดลอง CSS ของฉัน สวัสดีชาวโลก!

นี่เป็นตัวอย่าง CSS แรกของฉัน

ตอนนี้เรามาดูตัวอย่าง CSS ง่ายๆ ที่มีกฎสองข้อ:

H1 ( สี: น้ำเงิน; สีพื้นหลัง: เหลือง; ขอบ: 1px สีดำทึบ; ) p ( สี: แดง; )

กฎข้อแรกเริ่มต้นด้วยตัวเลือก h1 ซึ่งหมายความว่าจะใช้ค่าคุณสมบัติกับองค์ประกอบ ประกอบด้วยคุณสมบัติสามประการและค่าต่างๆ (แต่ละคู่คุณสมบัติ/ค่าเรียกว่าการประกาศ ):

อันแรกกำหนดสีข้อความเป็นสีน้ำเงิน

ประการที่สองกำหนดสีพื้นหลังเป็นสีเหลือง

อันที่สามใส่เส้นขอบรอบส่วนหัวที่มีความกว้าง 1 พิกเซล ทึบ (ไม่มีจุดหรือเส้นประ ฯลฯ) และทาสีดำ

กฎข้อที่สองเริ่มต้นด้วยตัวเลือก p ซึ่งหมายความว่าจะใช้ค่าคุณสมบัติของมันกับ

องค์ประกอบ. มีการประกาศหนึ่งรายการซึ่งกำหนดสีข้อความเป็นสีแดง

ในเว็บเบราว์เซอร์ โค้ดด้านบนจะถูกสร้างขึ้น ต่อไปนี้เอาท์พุท:

นี่ไม่ได้สวยเกินไป แต่อย่างน้อยมันก็ทำให้คุณเข้าใจได้ว่า CSS ทำงานอย่างไร

การเรียนรู้เชิงรุก: การเขียน CSS แรกของคุณ

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

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

รหัสที่สามารถเล่นได้ อินพุต HTML สวัสดีชาวโลก!

นี่คือย่อหน้า

• นี่คือ
• รายการ

อินพุต CSS h1 ( ) p ( ) li ( ) เอาต์พุต var htmlInput = document.querySelector(".html-input"); var cssInput = document.querySelector(".css-input"); var รีเซ็ต = document.getElementById("รีเซ็ต"); var htmlCode = htmlInput.value; var cssCode = cssInput.value; var เอาท์พุต = document.querySelector(".output"); โซลูชัน var = document.getElementById("โซลูชัน"); var styleElem = document.createElement("สไตล์"); var headElem = document.querySelector("หัว"); headElem.appendChild(styleElem); ฟังก์ชั่น DrawOutput() ( output.innerHTML = htmlInput.value; styleElem.textContent = cssInput.value; ) reset.addEventListener("คลิก", ​​function() ( htmlInput.value = htmlCode; cssInput.value = cssCode; DrawOutput(); )); Solution.addEventListener("คลิก", ​​function() ( htmlInput.value = htmlCode; cssInput.value = "h1 (\n สี: สีน้ำเงิน;\n สีพื้นหลัง: สีเหลือง;\n เส้นขอบ: 1px สีดำทึบ ;\n)\n\np (\n สี: สีแดง;\n)\n\nli (\n ข้อความ-เงา: 2px 2px 3px สีม่วง;\n)"; drawOutput(); }); htmlInput.addEventListener("input", drawOutput); cssInput.addEventListener("input", drawOutput); window.addEventListener("load", drawOutput); How does CSS actually work? !}

เมื่อเบราว์เซอร์แสดงเอกสาร จะต้องรวมเนื้อหาของเอกสารเข้ากับข้อมูลสไตล์ โดยจะประมวลผลเอกสารในสองขั้นตอน:

เบราว์เซอร์แปลง HTML และ CSS เข้าไปใน (โมเดลออบเจ็กต์เอกสาร- DOM แสดงถึงเอกสารในหน่วยความจำของคอมพิวเตอร์ โดยผสมผสานเนื้อหาของเอกสารเข้ากับสไตล์

เบราว์เซอร์แสดงเนื้อหาของ DOM

เกี่ยวกับ ดอม

DOM มีโครงสร้างคล้ายต้นไม้ แต่ละองค์ประกอบ คุณลักษณะ และข้อความในภาษามาร์กอัปจะกลายเป็นโหนด DOM ในโครงสร้างแบบต้นไม้ โหนดถูกกำหนดโดยความสัมพันธ์กับโหนด DOM อื่นๆ องค์ประกอบบางอย่างเป็นพาเรนต์ของโหนดย่อย และโหนดย่อยมีพี่น้องกัน

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

การเป็นตัวแทน DOM

แทนที่จะอธิบายยาวและน่าเบื่อ เรามาดูตัวอย่างเพื่อดูว่า DOM และ CSS ทำงานร่วมกันอย่างไร

สมมติว่าโค้ด HTML ต่อไปนี้:

ใน DOM โหนดที่สอดคล้องกับของเรา

องค์ประกอบคือผู้ปกครอง ลูกของมันคือโหนดข้อความและโหนดที่สอดคล้องกับองค์ประกอบของเรา โหนด SPAN ยังเป็น parent โดยมีโหนดข้อความเป็นโหนดลูก:

P ├─ "มาใช้" กันเถอะ:" ├─ SPAN | └─ "แบบเรียงซ้อน" ├─ SPAN | └─ "สไตล์" └─ SPAN └─ "ชีต"

นี่คือวิธีที่เบราว์เซอร์ตีความข้อมูลโค้ด HTML ก่อนหน้า โดยแสดงผลแผนผัง DOM ด้านบน จากนั้นจึงส่งออกผลลัพธ์ในเบราว์เซอร์ดังนี้:

การใช้ CSS กับ DOM

สมมติว่าเราได้เพิ่ม CSS ลงในเอกสารของเราเพื่อจัดรูปแบบ HTML จะเป็นดังนี้:

มาใช้: Cascading Style Sheets

หากเราใช้ CSS ต่อไปนี้:

Span ( เส้นขอบ: 1px สีดำทึบ; สีพื้นหลัง: มะนาว; )

เบราว์เซอร์จะแยกวิเคราะห์ HTML และสร้าง DOM จากนั้นแยกวิเคราะห์ CSS เนื่องจากกฎเดียวที่มีอยู่ใน CSS มีตัวเลือกการขยาย จึงจะใช้กฎนั้นกับแต่ละช่วงหนึ่งในสามช่วง ผลลัพธ์ที่อัปเดตมีดังนี้:

วิธีใช้ CSS กับ HTML ของคุณ

มีสามวิธีในการใช้ CSS กับเอกสาร HTML ที่คุณมักจะพบเจอ ซึ่งบางวิธีก็มีประโยชน์มากกว่าวิธีอื่นๆ เราจะมาตรวจสอบแต่ละวิธีโดยย่อ

สไตล์ชีตภายนอก

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

การทดลอง CSS ของฉัน สวัสดีชาวโลก!

นี่เป็นตัวอย่าง CSS แรกของฉัน

การนำเสนอเอกสารแก่ผู้ใช้หมายถึงการแปลงเอกสารให้เป็นรูปแบบที่ผู้ใช้สามารถเข้าใจได้ เบราว์เซอร์ เช่น Firefox, Chrome หรือ Internet Explorer ได้รับการออกแบบมาเพื่อนำเสนอเอกสารด้วยภาพ เช่น บนหน้าจอคอมพิวเตอร์ โปรเจ็กเตอร์ หรือเครื่องพิมพ์

CSS ส่งผลต่อ HTML อย่างไร

เบราว์เซอร์ใช้กฎ CSS กับเอกสารเพื่ออธิบายวิธีการแสดงเอกสาร กฎ CSS ถูกสร้างขึ้นจาก:

• ชุดคุณสมบัติที่มีค่าที่ระบุวิธีการแสดงเนื้อหา (HTML) เป็นต้น ฉันต้องการให้ความกว้างขององค์ประกอบเป็น 50% ของความกว้าง องค์ประกอบหลักและพื้นหลังก็เป็นสีแดง.
• ตัวเลือกที่เลือก เลือก)องค์ประกอบ/องค์ประกอบที่คุณต้องการใช้ค่าที่เปลี่ยนแปลง ตัวอย่างเช่น, ฉันต้องการใช้กฎ CSS นี้กับทุกย่อหน้าในเอกสาร HTML ของฉัน.

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

ตัวอย่าง CSS โดยย่อ

คำอธิบายที่ให้ไว้ข้างต้นอาจไม่ชัดเจน ดังนั้นเรามาสนับสนุนทฤษฎีด้วยตัวอย่างเชิงปฏิบัติเล็กๆ น้อยๆ กัน ก่อนอื่น มาดูเอกสาร HTML ธรรมดาที่มี และ

(โปรดทราบว่าสไตล์ชีตถูกนำไปใช้กับ HTML โดยใช้องค์ประกอบ):

การทดลองของฉันกับ CSS Hello World!

นี่เป็นตัวอย่าง CSS แรกของฉัน

ตอนนี้เรามาดูตัวอย่าง CSS ง่ายๆ ที่มีกฎสองข้อ:

กฎข้อแรกเริ่มต้นด้วยตัวเลือก h1 ซึ่งหมายความว่าจะถูกนำไปใช้กับองค์ประกอบ ประกอบด้วยสามคุณสมบัติและสามค่า (แต่ละคู่คุณสมบัติ/ค่าเรียกว่าการประกาศ):

โฆษณาชิ้นแรกเปลี่ยนสีข้อความเป็นสีน้ำเงิน

ส่วนที่สองกำหนดพื้นหลังสีเหลืองให้กับข้อความ

ส่วนที่สามจะสร้างเส้นขอบรอบข้อความที่มีความกว้าง 1 พิกเซล ทึบ (ไม่มีจุดหรือจุด) และเป็นสีดำ

กฎข้อที่สองเริ่มต้นด้วยตัวเลือก p ซึ่งหมายความว่าจะใช้กับองค์ประกอบ

- มีโฆษณาหนึ่งรายการที่เปลี่ยนสีข้อความเป็นสีแดง

โค้ดด้านบนจะปรากฏในเบราว์เซอร์ดังนี้:

มันไม่ได้สวยงามมาก แต่มันแสดงให้เห็นว่า CSS ทำงานอย่างไร

การเรียนรู้เชิงรุก: การเขียน CSS แรกของเรา

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

หากคุณทำผิดพลาด คุณสามารถรีเซ็ตได้ตลอดเวลาโดยใช้ปุ่ม รีเซ็ตหากคุณรู้สึกว่าติดขัด คุณสามารถคลิก "แสดงวิธีแก้ปัญหา" เพื่อดูวิธีแก้ปัญหา

รหัสที่สามารถเล่นได้ อินพุต HTML สวัสดีชาวโลก!

นี่คือย่อหน้า

• นี่คือ
• รายการ

อินพุต CSS h1 ( ) p ( ) li ( ) เอาต์พุต var htmlInput = document.querySelector(".html-input"); var cssInput = document.querySelector(".css-input"); var รีเซ็ต = document.getElementById("รีเซ็ต"); var htmlCode = htmlInput.value; var cssCode = cssInput.value; var เอาท์พุต = document.querySelector(".output"); โซลูชัน var = document.getElementById("โซลูชัน"); var styleElem = document.createElement("สไตล์"); var headElem = document.querySelector("หัว"); headElem.appendChild(styleElem); ฟังก์ชั่น DrawOutput() ( output.innerHTML = htmlInput.value; styleElem.textContent = cssInput.value; ) reset.addEventListener("คลิก", ​​function() ( htmlInput.value = htmlCode; cssInput.value = cssCode; DrawOutput(); )); Solution.addEventListener("คลิก", ​​function() ( htmlInput.value = htmlCode; cssInput.value = "h1 (\n สี: สีน้ำเงิน;\n สีพื้นหลัง: สีเหลือง;\n เส้นขอบ: 1px สีดำทึบ ;\n)\n\np (\n สี: สีแดง;\n)\n\nli (\n ข้อความ-เงา: 2px 2px 3px สีม่วง;\n)"; drawOutput(); }); htmlInput.addEventListener("input", drawOutput); cssInput.addEventListener("input", drawOutput); window.addEventListener("load", drawOutput); Как на самом деле работает CSS? !}

เมื่อเบราว์เซอร์แสดงผลเอกสาร มันจะรวมเนื้อหาของเอกสารเข้ากับข้อมูลการจัดรูปแบบ ประมวลผลเอกสารในสองขั้นตอน:

เบราว์เซอร์แปลง HTML และ CSS เป็น DOM โมเดลออบเจ็กต์เอกสาร- DOM แสดงถึงเอกสารในหน่วยความจำคอมพิวเตอร์และใช้สไตล์กับเนื้อหา

เบราว์เซอร์แสดงผลเนื้อหาของ DOM

เกี่ยวกับ โดม

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

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

การเป็นตัวแทน DOM

แทนที่จะอธิบายยาวและน่าเบื่อ ลองดูตัวอย่างที่จะแสดงให้เห็นว่า DOM และ CSS ทำงานร่วมกันอย่างไร

ลองดูโค้ด HTML ที่ให้มา:

ใน DOM โหนดที่สอดคล้องกับองค์ประกอบ

เป็นผู้ปกครอง. ลูกของมันคือโหนดข้อความและสอดคล้องกับองค์ประกอบ โหนด SPAN ก็เป็นผู้ปกครองเช่นกัน และลูก ๆ ของพวกเขาก็เป็นองค์ประกอบข้อความ:

P ├─ "มาใช้" กันเถอะ:" ├─ SPAN | └─ "แบบเรียงซ้อน" ├─ SPAN | └─ "สไตล์" └─ SPAN └─ "ชีต"

หลังจากตีความแผนผัง DOM ด้วยเบราว์เซอร์ ผลลัพธ์ที่เราได้รับคือ:

การใช้ CSS กับ DOM

มาใช้: Cascading Style Sheets

เราจะใช้ CSS นี้กับมัน:

Span ( เส้นขอบ: 1px สีดำทึบ; สีพื้นหลัง: มะนาว; )

เบราว์เซอร์จะแยกวิเคราะห์ HTML และสร้าง DOM จากนั้นจัดการกับ CSS เนื่องจากเรามีเพียงกฎเดียวที่อธิบายตัวเลือกช่วง มันจะถูกนำไปใช้กับโหนดเอกสารทั้งหมดที่มีตัวเลือกนั้น นี่คือสิ่งที่เราได้รับตามมา

วิธีใช้ CSS ของคุณกับ HTML ของคุณ

มีสามตัวเลือกที่แตกต่างกันในการใช้ CSS กับเอกสาร HTML ที่พบบ่อยที่สุด ที่นี่เราจะดูแต่ละรายการ

สไตล์ชีตภายนอก

คุณเคยเห็นสไตล์ชีตภายนอกในบทความนี้แล้ว แต่คุณไม่ได้เรียกอย่างนั้น สไตล์ชีตภายนอกคือ แยกไฟล์ด้วยนามสกุล .css ซึ่งเป็นที่เก็บ CSS คุณอ้างอิงถึงมันจาก HTML โดยใช้นามสกุล . HTML มีลักษณะดังนี้:

การทดลอง CSS ของฉัน สวัสดีชาวโลก!

นี่เป็นตัวอย่าง CSS แรกของฉัน

มาเพิ่มไฟล์ CSS:

H1 ( สี: น้ำเงิน; สีพื้นหลัง: เหลือง; ขอบ: 1px สีดำทึบ; ) p ( สี: แดง; )

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

สไตล์ชีตภายใน

สไตล์ชีตภายในมีอยู่ภายในองค์ประกอบและไม่จำเป็นต้องมีไฟล์ภายนอกรวมอยู่ด้วย มีอยู่ในแท็ก head HTML HTML ด้วยวิธีการเชื่อมต่อสไตล์ที่คล้ายกันมีลักษณะดังนี้:

การทดลอง CSS ของฉัน h1 ( สี: น้ำเงิน; สีพื้นหลัง: เหลือง; เส้นขอบ: 1px สีดำทึบ; ) p ( สี: แดง; ) สวัสดีชาวโลก!

นี่เป็นตัวอย่าง CSS แรกของฉัน

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

สไตล์ในตัว

สไตล์อินไลน์คือการประกาศ CSS ที่ใช้กับองค์ประกอบเดียวเท่านั้น และมีอยู่ในแอตทริบิวต์ style:

การทดลอง CSS ของฉัน สวัสดีชาวโลก!

นี่เป็นตัวอย่าง CSS แรกของฉัน

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

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

อะไรต่อไป

ณ จุดนี้ คุณควรจะเข้าใจว่า CSS ทำงานอย่างไร และเบราว์เซอร์ทำงานอย่างไร ต่อไปคุณจะได้เรียนรู้เกี่ยวกับ

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

1. หลีกเลี่ยงการใช้ตารางสำหรับเค้าโครงหน้า

ต่อไปนี้เป็นเหตุผล 6 ประการว่าทำไมจึงควรใช้ CSS แทนที่จะใช้ตารางสำหรับการจัดวางหน้า:

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

ปุ่มและป้ายกำกับส่วนใหญ่สามารถแสดงผลได้โดยใช้ CSS ลองดูตัวอย่าง:

A:link.example, a:visited.example, a:active.example (
สี:#fff;
พื้นหลัง:#f90;
ขนาดตัวอักษร:1.2em;
แบบอักษรน้ำหนัก: ตัวหนา;
การตกแต่งข้อความ: ไม่มี;
ช่องว่างภายใน:0.2em;
เส้นขอบ:4px #00f เริ่มแรก
}
a:hover.example (
สี:#fff;
พื้นหลัง:#fa1;
ขนาดตัวอักษร:1.2em;
แบบอักษรน้ำหนัก: ตัวหนา;
การตกแต่งข้อความ: ไม่มี;
ช่องว่างภายใน:0.2em;
เส้นขอบ:4px #00f สิ่งที่ใส่เข้าไป
CSS นี้กำหนดปุ่มธรรมดาที่เปลี่ยนรูปลักษณ์เมื่อวางเมาส์เหนือ ด้วยวิธีนี้คุณสามารถสร้างวัตถุที่ซับซ้อนมากขึ้นได้

บาง ภาพพื้นหลังโหลดผ่าน CSS ดีกว่าครับ ตัวอย่างเช่น หากต้องการแสดงรูปภาพขนาด 200x100 คุณสามารถใช้โค้ดต่อไปนี้:

และ CSS ที่เกี่ยวข้อง:

รูปภาพสวย ๆ ( พื้นหลัง: url(filename.gif); ความกว้าง: 200px; ความสูง: 100px )

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

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

4. การใช้สไตล์ตามบริบท

รหัสนี้ใช้ไม่ได้ผล:

นี่คือประโยค

นี่เป็นอีกประโยคหนึ่ง

นี่เป็นอีกประโยคหนึ่ง

นี่เป็นอีกประโยคหนึ่ง

ข้อความ ( สี: #03c; ขนาดตัวอักษร:2em )

แทนที่จะกำหนดคลาสให้กับแต่ละย่อหน้า พวกมันสามารถจัดกลุ่มเป็นองค์ประกอบ DIV เดียวที่มีคลาสเดียวกันได้:

นี่คือประโยค

นี่เป็นอีกประโยคหนึ่ง

นี่เป็นอีกประโยคหนึ่ง

นี่เป็นอีกประโยคหนึ่ง

ข้อความ p ( color: #03c; font-size:2em )

รหัสนี้บอกเบราว์เซอร์ว่าแต่ละย่อหน้าภายในองค์ประกอบที่มีข้อความคลาสจะมีสี #03c และขนาดตัวอักษร 2em

คุณอาจสังเกตเห็นว่าสีที่นี่ระบุด้วยอักขระเพียงสามตัว แทนที่จะเป็นหกตัว ในกรณีนี้ #03c เป็นการย่อค่าสี #0033cc

5. การใช้คำย่อ

ดีกว่าที่จะเขียน:

แบบอักษร: 1em/1.5em ตัวหนา ตัวเอียง serif

แทน

ขนาดตัวอักษร: 1em;
ความสูงของเส้น: 1.5em;
น้ำหนักตัวอักษร: ตัวหนา;
รูปแบบตัวอักษร: ตัวเอียง;
ตระกูลฟอนต์: serif

ขอบ: 1px สีดำทึบ

แทน

ความกว้างของขอบ: 1px;
ขอบสี: สีดำ;
ลักษณะเส้นขอบ: ทึบ

พื้นหลัง: #fff url(image.gif) ไม่ทำซ้ำด้านซ้ายบน

แทน

สีพื้นหลัง: #fff;
ภาพพื้นหลัง: url (image.gif);
พื้นหลังซ้ำ: ไม่ซ้ำ;
ตำแหน่งพื้นหลัง: ซ้ายบน;

ช่องว่างภายในและเส้นขอบ

ใช้:

ระยะขอบ: 2px 1px 3px 4px
(บน, ขวา, ล่าง, ซ้าย)

แทน

ขอบบน: 2px
ขอบขวา: 1px;
ขอบล่าง: 3px;
ขอบขวา: 4px

เช่นเดียวกัน:

ระยะขอบ: 5em 1em 3em
(บน, ซ้ายและขวา, ล่าง)

แทน

ขอบด้านบน: 5em;
ขอบล่าง: 1em;
ขอบขวา: 1em;
ขอบขวา: 4em

มาร์จิ้น: 5% 1% (บนและล่าง, ซ้ายและขวา)

แทน

มาร์จิ้นบน: 5%;
ขอบล่าง: 5%;
ขอบขวา: 1%;
ขอบขวา: 1%

กฎเหล่านี้ใช้กับแอตทริบิวต์ระยะขอบ เส้นขอบ และช่องว่างภายใน

6. ย่อช่องว่าง การขึ้นบรรทัดใหม่ และความคิดเห็นให้เหลือน้อยที่สุด

อักขระแต่ละตัว - ตัวอักษรหรือช่องว่าง - ใช้หนึ่งไบต์ อักขระพิเศษแต่ละตัวจะเพิ่มขนาดของหน้าเท่านั้น ดังนั้นให้ลองกด Enter และ Tab ให้น้อยลงในระหว่างกระบวนการจัดวาง นอกจากนี้อย่าลืมรวมสไตล์ CSS เข้าด้วยกัน

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

- เรียกรูทเพจของเว็บไซต์ http://www.URL.com
- การเรียกเพจในไดเรกทอรีราก http://www.URL.com/filename.html
- ไฟล์ในไดเรกทอรีย่อย "root" http://www.URL.com/directory/filename.html
- การเข้าถึงไดเร็กทอรีปัจจุบันและ index.html
- ไดเร็กทอรีหลักของ current และ index.html
- สิ่งเดียวกันคือระบุไฟล์
- index.html ในสองไดเร็กทอรีที่อยู่เหนือไดเร็กทอรีปัจจุบัน
8. อย่าหลงไปกับการใช้แท็ก META

แท็ก META ส่วนใหญ่ไม่จำเป็นเลย หากสนใจสามารถเข้าไปดูได้ทุกอย่างครับ ตัวเลือกที่มีอยู่ แท็กที่สำคัญที่สุด (คำสำคัญและคำอธิบาย) ใช้ในการเพิ่มประสิทธิภาพกลไกค้นหา เมื่อใช้แอตทริบิวต์เนื้อหาในแท็ก META พยายามทำให้มีความยาวไม่เกิน 200 อักขระ คำอธิบายขนาดใหญ่และอีกมากมาย คำหลักเครื่องมือค้นหาอาจถูกมองว่าเป็นสแปม

9. เก็บ CSS และ JavaScript ไว้ในไฟล์แยกกัน

ทุกคนรู้สิ่งนี้ แต่พวกเขาไม่ได้ใช้มันเสมอไป นี่คือลักษณะของการเรียก CSS จากไฟล์ภายนอก:

และตาม JavaScript:

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

10. วาง / (สแลช) ที่ส่วนท้ายของลิงก์ไดเร็กทอรี

คุณต้องเขียนดังนี้:

นี่เป็นคำอธิบายที่ง่ายมาก ในกรณีแรก เบราว์เซอร์ไม่ทราบว่าลิงก์นำไปสู่อะไร: ไฟล์หรือไดเร็กทอรี “Slash” จะทำให้ชัดเจนทันทีว่าลิงก์นี้นำไปสู่ไดเร็กทอรี และไม่จำเป็นต้องมีการตรวจสอบเพิ่มเติม