ความแตกต่างระหว่าง CSS และ HTML ความแตกต่างระหว่าง CSS และ HTML

ผู้สร้างหน้าเว็บใช้ CSS3 เพื่อระบุสี แบบอักษร ตำแหน่งบล็อก และลักษณะอื่นๆ ของการนำเสนอ รูปร่างหน้าเว็บเหล่านี้ เป้าหมายหลักของการพัฒนา CSS3 คือการแยกคำอธิบายออกจากกัน โครงสร้างเชิงตรรกะหน้าเว็บ (ซึ่งผลิตจาก โดยใช้ HTMLหรือภาษามาร์กอัปอื่นๆ) จากการอธิบายลักษณะที่ปรากฏของหน้าเว็บนั้น (ซึ่งปัจจุบันผลิตโดยใช้รูปแบบที่เป็นทางการ ภาษาซีเอสเอส 3). การแยกนี้สามารถเพิ่มการเข้าถึงเอกสาร ให้ความยืดหยุ่นและการควบคุมการนำเสนอที่มากขึ้น และลดความซับซ้อนและการซ้ำซ้อนในเนื้อหาเชิงโครงสร้าง นอกจากนี้ CSS3 ยังอนุญาตให้นำเสนอเอกสารเดียวกันในรูปแบบหรือวิธีการแสดงผลที่แตกต่างกัน เช่น การนำเสนอบนหน้าจอ การนำเสนอที่พิมพ์ออกมา การอ่านด้วยเสียง (โดยเบราว์เซอร์เสียงพิเศษหรือโปรแกรมอ่านหน้าจอ) หรือส่งออกโดยอุปกรณ์ที่ใช้อักษรเบรลล์

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

ข้อดี:

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

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

    ง่ายต่อการเปลี่ยนการออกแบบในภายหลัง คุณไม่จำเป็นต้องแก้ไขทุกหน้า เพียงแค่เปลี่ยนไฟล์ CSS

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

ข้อบกพร่อง:

เค้าโครงที่แตกต่างกันจะแสดงในเบราว์เซอร์ที่แตกต่างกัน (โดยเฉพาะรุ่นเก่า) ซึ่งตีความข้อมูล CSS3 เดียวกันแตกต่างกัน

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

ความแตกต่างCSS3:

    สไตล์ใหม่

    ตัวเลือกหลอก

    แอนิเมชั่น

    รองรับผ้าใบ

    การเปลี่ยนแปลง

    การจัดการเนื้อหาแท็ก

    ...และอื่นๆ อีกมากมาย

2.2.3 ภาพรวมโดยย่อของภาษา js และไลบรารี jQuery

จาวาสคริปต์

JavaScript เป็นภาษาการเขียนโปรแกรมสคริปต์เชิงต้นแบบ มันเป็นภาษาถิ่นของภาษา ECMAScript

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

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

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

ชื่อ "JavaScript" เป็นเครื่องหมายการค้าจดทะเบียน ออราเคิลบริษัท.

คุณสมบัติภาษา

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

แม้ว่าไวยากรณ์จะคล้ายกับ C แต่ JavaScript ก็มีความแตกต่างพื้นฐานเมื่อเปรียบเทียบกับภาษา C:

    วัตถุที่มีความเป็นไปได้ที่จะวิปัสสนา

    ทำหน้าที่เป็นวัตถุชั้นหนึ่ง

    การหล่อแบบอัตโนมัติ

    เก็บขยะอัตโนมัติ

ภาษาขาดสิ่งที่มีประโยชน์เช่น:

ระบบโมดูลาร์: JavaScript ไม่มีความสามารถในการจัดการการขึ้นต่อกันและการแยกขอบเขต

ไลบรารีมาตรฐาน: โดยเฉพาะอย่างยิ่ง ไม่มีอินเทอร์เฟซการเขียนโปรแกรมแอปพลิเคชันสำหรับการทำงานกับระบบไฟล์ การจัดการสตรีม I/O หรือประเภทพื้นฐานสำหรับข้อมูลไบนารี

อินเทอร์เฟซมาตรฐานไปยังเว็บเซิร์ฟเวอร์และฐานข้อมูล

ระบบการจัดการแพ็คเกจที่จะติดตามการขึ้นต่อกันและติดตั้งโดยอัตโนมัติ

ความหมายและไวยากรณ์:

ไวยากรณ์ ภาษาจาวาสคริปต์ในหลาย ๆ ด้านคล้ายกับไวยากรณ์ของ C และ Java แต่ในทางความหมายภาษานั้นใกล้เคียงกับ Self, Smalltalk หรือแม้แต่ Lisp มาก

ตัวระบุทั้งหมดคำนึงถึงขนาดตัวพิมพ์

ชื่อตัวแปรสามารถใช้ตัวอักษร ขีดล่าง สัญลักษณ์ดอลลาร์ และเลขอารบิกได้

ชื่อตัวแปรไม่สามารถขึ้นต้นด้วยตัวเลขได้

หากต้องการจัดรูปแบบความคิดเห็นบรรทัดเดียว // จะใช้ความคิดเห็นแบบหลายบรรทัดและในบรรทัดที่ขึ้นต้นด้วย /* และลงท้ายด้วย */

โครงสร้างภาษา:

ตามโครงสร้างแล้ว JavaScript สามารถแสดงเป็นการรวมกันของสามส่วนที่แยกจากกันอย่างชัดเจน:

เคอร์เนล (ECMAScript)

โมเดลออบเจ็กต์เบราว์เซอร์ (BOM)

โมเดลออบเจ็กต์เอกสาร (DOM)

หากดู JavaScript ในสภาพแวดล้อมที่ไม่ใช่เบราว์เซอร์ โมเดลออบเจ็กต์ของเบราว์เซอร์และโมเดลออบเจ็กต์เอกสารอาจไม่รองรับ

บางครั้ง Document Object Model จะถูกมองว่าเป็นเอนทิตีแยกต่างหากจาก JavaScript ซึ่งสอดคล้องกับคำจำกัดความของ DOM ว่าเป็นอินเทอร์เฟซเอกสารที่ไม่ขึ้นกับภาษา ในทางตรงกันข้าม ผู้เขียนจำนวนหนึ่งพบว่า BOM และ DOM มีความสัมพันธ์กันอย่างใกล้ชิด

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

โมเดลออบเจ็กต์เบราว์เซอร์

โมเดลออบเจ็กต์ของเบราว์เซอร์เป็นส่วนเฉพาะของเบราว์เซอร์ของภาษาที่เป็นเลเยอร์ระหว่างเคอร์เนลและโมเดลออบเจ็กต์เอกสาร วัตถุประสงค์หลัก แบบจำลองวัตถุเบราว์เซอร์ - จัดการหน้าต่างเบราว์เซอร์และสร้างความมั่นใจในการโต้ตอบ หน้าต่างเบราว์เซอร์แต่ละหน้าต่างจะแสดงด้วยวัตถุหน้าต่าง ซึ่งเป็นวัตถุ DOM ส่วนกลาง โมเดลออบเจ็กต์เบราว์เซอร์ ในขณะนี้ไม่ได้มาตรฐาน แต่สเปคอยู่ระหว่างการพัฒนาโดย WHATWG และ W3C

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

การจัดการเฟรม

รองรับความล่าช้าในการเรียกใช้โค้ดและการวนซ้ำล่าช้า

กล่องโต้ตอบของระบบ

การจัดการที่อยู่ของเพจที่เปิดอยู่

การจัดการข้อมูลเบราว์เซอร์

การจัดการข้อมูลการตั้งค่าจอภาพ

การจัดการประวัติการเข้าชมที่จำกัด

รองรับคุกกี้ HTTP

โมเดลออบเจ็กต์เอกสาร

Document Object Model คืออินเทอร์เฟซการเขียนโปรแกรมแอปพลิเคชันสำหรับเอกสาร HTML และ XML ตาม DOM เอกสาร (เช่น เว็บเพจ) สามารถแสดงเป็นแผนผังของออบเจ็กต์ที่มีคุณสมบัติหลายอย่างที่อนุญาตให้มีการปรับเปลี่ยนต่างๆ:

การสร้างและเพิ่มโหนด

รับโหนด

การเปลี่ยนโหนด

การเปลี่ยนการเชื่อมต่อระหว่างโหนด

การลบโหนด

เจคิวรี่ - ไลบรารีจาวาสคริปต์ซึ่งมุ่งเน้นไปที่การโต้ตอบของ JavaScript และ HTML ไลบรารี jQuery ช่วยให้คุณเข้าถึงองค์ประกอบ DOM เข้าถึงแอตทริบิวต์และเนื้อหาได้อย่างง่ายดาย องค์ประกอบ DOMจัดการพวกเขา ไลบรารี jQuery ยังมี API ที่สะดวกสำหรับการทำงานกับ AJAX

ความเป็นไปได้

เอ็นจิ้นตัวเลือก CSS ข้ามเบราว์เซอร์ Sizzle แยกออกเป็นโปรเจ็กต์แยกต่างหาก

การสำรวจแผนผัง DOM รวมถึงการสนับสนุน XPath เป็นปลั๊กอิน

กิจกรรม

เอฟเฟ็กต์ภาพ

โปรแกรมเสริม AJAX

ปลั๊กอินจาวาสคริปต์

การทำงานกับ jQuery แบ่งได้เป็น 2 ประเภท คือ

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

    การเรียกเมธอดโกลบอลบนอ็อบเจ็กต์ $ เช่น ตัววนซ้ำอาร์เรย์ที่สะดวก

หนึ่งในที่สุด คำถามที่พบบ่อยในกระบวนการทำความรู้จักกับมาตรฐานใหม่ - อะไรคือความแตกต่างระหว่างแอตทริบิวต์ "id" และ "class" ขององค์ประกอบ HTML ท้ายที่สุดแล้วเอฟเฟกต์ก็ดูเหมือนจะเหมือนเดิม

พวกมันมีผลเหมือนกันส่วนใหญ่เท่านั้น กรณีง่ายๆใช้ใน CSS ในความเป็นจริงมีความแตกต่างมากมาย

สาระสำคัญ

id คือชื่อเฉพาะขององค์ประกอบบนหน้าเว็บ กล่าวคือ ไม่ควรมีองค์ประกอบหลายรายการในหน้าเว็บที่มีรหัสเดียวกัน ตัวอย่างเช่น สามารถกำหนดบล็อกที่มีส่วนหัวของไซต์ id="title" ได้

class เป็นแอตทริบิวต์อิสระที่มักจะมอบให้กับองค์ประกอบหลายอย่างเพื่อแยกความแตกต่างจากองค์ประกอบอื่น ตัวอย่างเช่น รูปภาพที่มาพร้อมกับข้อความสามารถกำหนดได้ class="decor" และรูปภาพที่สำคัญต่อการทำความเข้าใจข้อความก็สามารถให้ class="content" ได้

ผลที่ตามมา

จากสาระสำคัญนี้โดยตรงหรือโดยอ้อมตามความแตกต่างอื่น ๆ ที่ปรากฏใน HTML, CSS และสคริปต์

...

Anchor Links หากคุณต้องการใส่ลิงค์ไปยังองค์ประกอบบางอย่างบนเพจ คุณเพียงแค่ต้องระบุ ID ให้กับองค์ประกอบนั้น ( - หลายป้าย

องค์ประกอบสามารถกำหนดได้หลายคลาสโดยคั่นด้วยช่องว่าง: - นอกจากนี้ยังสามารถใช้แยกกันได้:

/* องค์ประกอบที่สำคัญทั้งหมด */ .important (สี:สีแดง;)

และเมื่อรวมกัน:

/* องค์ประกอบที่มีความสำคัญและอยู่กึ่งกลางในเวลาเดียวกัน */ .important.centered (border:solid black 1px;)

โปรดทราบว่าไม่มีช่องว่างระหว่างคลาสในกฎ CSS

น้ำหนักที่แตกต่างกันใน CSS

แต่ละกฎใน CSS มี "น้ำหนัก" ที่กำหนดลำดับการใช้งาน id มีน้ำหนักมากขึ้น ดังนั้นหากองค์ประกอบมีทั้งรหัสและคลาส:

...

กฎข้อใดข้อหนึ่งทั้งสองข้อ

#about (color:green;).important (สี:red;)

คนแรกชนะสีชื่อจะเป็นสีเขียว (น้ำหนักของกฎเป็นเรื่องราวแยกต่างหาก โดยจะมีบทความเกี่ยวกับเรื่องนี้ในเวลาที่กำหนด)

การค้นหาในสคริปต์ องค์ประกอบที่มี "id" สามารถพบได้ง่ายในสคริปต์โดยใช้ฟังก์ชัน document.getElementById() ไม่มีฟังก์ชันดังกล่าวสำหรับชั้นเรียน

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

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

บัตรประจำตัวประชาชน

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

ตัวอย่างที่ 1: ไม่แนะนำให้ใช้ตัวระบุ (ID) อย่างไร

<พี ไอดี = "my_id_r7t" >บล็อกข้อความที่เลือก</พี>

<พี ไอดี = "my_id_r7t" >บล็อกข้อความที่เลือก</พี>

ตัวอย่างที่ 2: วิธีไม่ใช้ตัวระบุ (ID)

<p id = "my_id_r7t" id = "my_id_r9t" >ไม่อนุญาตให้กำหนดรหัสตั้งแต่สองรหัสขึ้นไปให้กับองค์ประกอบที่ 1</พี>

ในกรณีที่มีการใช้ id และคลาสกับองค์ประกอบเดียวพร้อมกัน ลำดับความสำคัญของ ID จะสูงกว่าคลาส:

การกำหนดสไตล์ CSS

#my_id_r7t ( สี : เขียว ; น้ำหนักแบบอักษร : ตัวหนา ; )

ย่อหน้านี้ถูกกำหนดคลาส my_class และตัวระบุ my_id

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

หากเราเพิ่มเข้าไปในคำอธิบาย <หน้า>สไตล์ยัง: <คลาส p = "my_class_r7t" style = "สี: สีเทา" id = "my_id_r7t" >แล้วผลลัพธ์จะเป็นดังนี้:

มากที่สุด ลำดับความสำคัญสูงมีสไตล์ที่กำหนดให้กับคำอธิบายโดยใช้ style="..."

ตัวอย่างที่ดีของลำดับความสำคัญมีระบุไว้ในเอกสารประกอบ CSS อย่างเป็นทางการ (อังกฤษ) กล่าวโดยย่อ ลำดับความสำคัญตามลำดับจากมากไปน้อย ได้แก่: สไตล์, id, คลาส, สไตล์แท็ก

องค์ประกอบ id สามารถใช้เป็นจุดยึด HTML แทนโครงสร้างแบบโบราณได้ <ชื่อ = "name_jakorya"> เพื่อให้คุณสามารถเชื่อมโยงไปยังส่วนใดส่วนหนึ่งของหน้าโดยไม่ต้องโหลดซ้ำโดยใช้ <a href = "#imya_jakorya">สูงสุด</ก>- หากมีรหัสที่เหมือนกันหลายรายการบนหน้าเว็บ สถานการณ์ที่ไม่ชัดเจนจะเกิดขึ้น

เมื่อเขียนโปรแกรมเพจโดยใช้ JS มักใช้ฟังก์ชัน getElementById () ซึ่ง "คาดหวัง" ด้วยว่าตัวระบุจะต้องไม่ซ้ำกัน มิฉะนั้นอาจเกิดข้อผิดพลาดในโค้ด

ระดับ

เมื่อใช้ ระดับสามารถกำหนดลักษณะ HTML descriptor หนึ่งตัวจากหลายคลาสพร้อมกันได้:

My_class_r7t ( สี : น้ำเงิน ; รูปแบบตัวอักษร : ตัวเอียง ; )
.my_class_ffR5 ( color : black ; background-color : #fafafa ; padding : 3px ; border : 1px solid #757575 ; margin-left : 30px ; )

ชื่อของคลาสต่างๆ เขียนโดยคั่นด้วยช่องว่าง:

<คลาส p = "my_class_ffR5 my_class_r7t" >ตัวอย่างการใช้ 2 คลาสที่แตกต่างกันสำหรับ 1 แท็ก HTML</พี>

ผลลัพธ์ของการใช้สองคลาสที่แตกต่างกันกับตัวอธิบาย HTML ตัวแรก

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

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

My_class_bbbb755 ( น้ำหนักแบบอักษร : ตัวหนา ; )
.my_class_ffR5 .my_class_bbbb755 ( การจัดแนวข้อความ : ขวา ; )

การจัดตำแหน่งที่ถูกต้องจะใช้ก็ต่อเมื่อมีการกำหนดคำอธิบาย HTML หนึ่งคลาส 2 คลาสในคราวเดียว:

"my_class_ffR5 my_class_bbbb755"> ตัวอย่างการใช้สไตล์กับคลาสคอมโพสิต

ดูด้านล่างว่ามีลักษณะอย่างไร:

ตัวอย่างการใช้สไตล์กับคลาสคอมโพสิต

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

<คลาส div = "my_class_ffR5">...</div>
<คลาส p = "my_class_ffR5">...</พี>
<คลาส h5 = "my_class_ffR5">...</h5>
<คลาส div = "my_class_ffR5">...</div>
<คลาส p = "my_class_ffR5">...</พี>

คลาสหรือรหัส - จะใช้อะไร?

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

เป้า การสร้างซีเอสเอส

นำมาหลายไซต์

เค้าโครงโดยใช้ CSS

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

เทคโนโลยีที่ช่วยให้คุณแสดงเว็บไซต์ที่มีสีสันในเบราว์เซอร์ของคุณเรียกว่า CSS

CSS เป็นตัวย่อสำหรับ Cascading Style Sheets - แปลว่า Cascading Style Sheets ภาษาทางการสำหรับการอธิบายลักษณะที่ปรากฏของเอกสารที่เขียนโดยใช้ภาษามาร์กอัป

ส่วนใหญ่ใช้เป็นวิธีอธิบายและออกแบบรูปลักษณ์ของหน้าเว็บที่เขียนด้วยภาษา มาร์กอัป HTMLและ XHTML

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

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

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

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

จำนวนผู้ใช้อินเทอร์เน็ตเพิ่มขึ้นทุกเดือน ข้อกำหนดการออกแบบที่จริงจังมากขึ้นถูกหยิบยกขึ้นมาเช่น การออกแบบภายนอกหน้า ในไม่ช้า นักพัฒนาก็ได้คิดค้นแท็กใหม่ๆ เช่น:

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

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

1. คำจำกัดความของ CSS

ซีเอสเอส(จากภาษาอังกฤษ "Cascading Style Sheets", cascading style sheet) - รายการสไตล์สำหรับไซต์ในรูปแบบ html

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

แต่นี่เป็นเพียงส่วนเล็กๆ ของความเป็นไปได้เท่านั้น CSS มีหน้าที่รับผิดชอบในการแสดงภาพแท็ก html ทั้งหมด แม้กระทั่งสำหรับ การเปลี่ยนแปลงแบบไดนามิก: เมนูแบบเลื่อนลง เน้นลิงก์เมื่อโฮเวอร์

รายการสไตล์ทั้งหมดมักเรียกว่า "สไตล์ชีต CSS" ในสำนวนของผู้ดูแลเว็บ

2. เป้าหมายและวัตถุประสงค์ของ CSS

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

3. ไวยากรณ์ CSS (ตัวเลือก)

คุณสมบัติและสไตล์แต่ละรายการมีการอธิบายผ่าน "ตัวเลือก" ไวยากรณ์ของมันมีดังนี้

ตัวเลือก (แอตทริบิวต์: ค่า;)

ตัวเลือก- อาจเป็นชื่อของสไตล์หรือแท็ก ใน วงเล็บปีกกามีการอธิบายกฎเฉพาะ คำอธิบายเป็นไปตามมาตรฐานเดียวกันเสมอ: “ชื่อแอตทริบิวต์: ค่า” ทุกกฎจะต้องลงท้ายด้วยเครื่องหมายอัฒภาค

ตัวอย่างเช่น

.style_name ( คุณลักษณะ1 : ค่า 1; คุณลักษณะ 2 : ค่า 2; ... );

มีตัวเลือกมากมายสำหรับการระบุสไตล์ CSS ลองดูสิ่งที่ได้รับความนิยมสูงสุดพร้อมตัวอย่าง

/*การตั้งค่าสไตล์โดยรวม*/ .global_style ( font-size : 12px ; color : red ; ) /**/ font.style1 ( font-size : 10px ; color : blue ; ) /* การตั้งค่าสไตล์ทั่วไปเฉพาะสำหรับ แท็กแบบอักษร */ #global_style2 ( ขนาดตัวอักษร : 14px ; สี : สีแดง ; ) h1 ( ขนาดตัวอักษร : 19px ; )

สไตล์ global_style สามารถใช้เป็นคลาสสำหรับแท็กทั้งหมด ตัวอย่างเช่น,

.

style1 สามารถใช้ได้กับแท็กเท่านั้น เนื่องจากระบุfont.style1ไว้ในคำจำกัดความ

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

ในตัวเลือกสุดท้าย เราเพียงแค่ระบุชื่อแท็ก

และทรงกำหนดแบบฉบับให้เขา ซึ่งหมายความว่าตอนนี้แท็กทั้งหมด

จะสืบทอดคุณค่าของสไตล์นี้

4. วิธีและสถานที่ในการตั้งค่าสไตล์ CSS

5. ข้อดีของการใช้ CSS คืออะไร

  • ง่ายต่อการเปลี่ยนการออกแบบ แค่เปลี่ยนสไตล์ก็เพียงพอแล้วและจะเปลี่ยนในทุกหน้าของเว็บไซต์
  • นี้ วิธีเดียวเท่านั้นเปลี่ยนการออกแบบบนเว็บไซต์
  • ไวยากรณ์ภาษาอย่างง่าย

6. ปัญหา CSS กับเบราว์เซอร์

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

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

7. คำตอบสำหรับคำถามที่พบบ่อย

7.1. CSS3 คืออะไร

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

7.2. CSS และ HTML แตกต่างกันอย่างไร?

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



บทความที่เกี่ยวข้อง