ความแตกต่างระหว่างรหัสและคลาสคืออะไร CSS - มันคืออะไร

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

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

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

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

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

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

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

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

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

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

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

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

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

เพื่อให้เข้าใจถึงความแตกต่างระหว่าง CSS และ ความแตกต่างของ HTMLคุณต้องเข้าใจว่า CSS คืออะไร และ HTML คืออะไร
CSS แปลจากภาษาอังกฤษแปลว่า "Cascading Style Sheets" CSS เป็นเทคโนโลยีสำหรับจัดการการออกแบบหน้าเว็บ มีตัวเลือกมากมายในการอธิบายลักษณะที่ปรากฏของหน้า และยังช่วยให้คุณทำให้ลักษณะที่ปรากฏง่ายขึ้นอย่างมาก หน้า HTMLโดยการโอนการออกแบบองค์ประกอบของหน้าไปเป็นไฟล์ CSS CSS อนุญาตให้คุณใช้การออกแบบเดียวโดยไม่จำกัดจำนวน องค์ประกอบ HTMLหน้า สิ่งนี้ช่วยให้คุณสามารถเปลี่ยนการออกแบบในทุกหน้าของไซต์ในทุกหน้าที่ใช้คลาสเดียวในการออกแบบโดยเปลี่ยนหนึ่งครั้งต่อ ไฟล์ซีเอสเอสวิธีนี้จะสะดวกมากหากไซต์มีมากกว่า 50 หน้า คุณไม่จำเป็นต้องเปลี่ยนการออกแบบองค์ประกอบในแต่ละหน้า
มันคืออะไร HTML- แปลจากภาษาอังกฤษ HTML แปลว่า "ภาษามาร์กอัป HyperText" HTML คือ ภาษามาตรฐานเครื่องหมาย เอกสาร HTML- ภาษามาร์กอัปไฮเปอร์เท็กซ์ถูกใช้โดยตรงกับโครงสร้าง เนื้อหา HTMLหน้า ด้วยความช่วยเหลือนี้ คุณสามารถสร้างตาราง ออกแบบ สร้างการออกแบบสำหรับข้อความ ฯลฯ
หน้า HTML โดยไม่ใช้ ซีเอสเอสมีความซับซ้อนและสับสนเนื่องจากการออกแบบสำหรับแต่ละองค์ประกอบถูกเขียนใหม่ซึ่งจะเพิ่มปริมาณข้อความอย่างมาก ตัวอย่างเช่น มีหน้า HTML ที่มีข้อความ 3 ส่วนที่ต้องจัดรูปแบบให้เหมือนกัน (ขนาด สี) แต่ไม่สามารถใช้แท็ก HTML เพื่อจัดรูปแบบทั้งสามส่วนพร้อมกันได้ เนื่องจากส่วนย่อยเหล่านี้อยู่ใน สถานที่ที่แตกต่างกันหน้า HTML ในการจัดรูปแบบข้อความดังกล่าว จำเป็นต้องใช้โค้ดในแต่ละครั้งสำหรับแต่ละส่วนแยกกัน
เมื่อใช้ CSS เราจะสร้างการออกแบบสำหรับคลาสหนึ่งครั้ง จากนั้นในโค้ดหน้า HTML เราจะกำหนดคลาสนี้ให้กับแต่ละแฟรกเมนต์ทั้งสามส่วน ตอนนี้โค้ด HTML ดูเทอะทะน้อยลงแล้วใช่ไหม โดยการเปลี่ยนเพียงอันเดียว องค์ประกอบ CSSเราสามารถเปลี่ยนการออกแบบหน้าเว็บไซต์ทั้งหมดได้ในคราวเดียว และอาจมีเพจเหล่านี้ได้หลายพันหน้า

เว็บไซต์สรุป

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

เพื่อให้เข้าใจความแตกต่างระหว่าง CSS และ HTML คุณต้องเข้าใจว่า CSS คืออะไรและ HTML คืออะไร
CSS แปลจากภาษาอังกฤษแปลว่า "Cascading Style Sheets" CSS เป็นเทคโนโลยีสำหรับจัดการการออกแบบหน้าเว็บ มีตัวเลือกมากมายในการอธิบายลักษณะที่ปรากฏของหน้า และยังช่วยให้คุณทำให้รูปลักษณ์ของหน้า HTML ง่ายขึ้นอย่างมากด้วยการถ่ายโอนการออกแบบองค์ประกอบของหน้าไปยังไฟล์ CSS . CSS ทำให้สามารถใช้การออกแบบเดียวสำหรับองค์ประกอบหน้า HTML ได้ไม่จำกัดจำนวน ทำให้คุณสามารถเปลี่ยนการออกแบบในทุกหน้าของเว็บไซต์ในทุกหน้าที่ใช้คลาสเดียวในการออกแบบโดยเปลี่ยนครั้งเดียวในไฟล์ CSS จะสะดวกมากหากเว็บไซต์มีมากกว่า 50 หน้าคุณไม่จำเป็นต้องเปลี่ยน การออกแบบองค์ประกอบในแต่ละองค์ประกอบ
มันคืออะไร HTML- แปลจากภาษาอังกฤษ HTML แปลว่า "ภาษามาร์กอัป HyperText" HTML เป็นภาษามาร์กอัปมาตรฐานสำหรับเอกสาร HTML ภาษามาร์กอัปไฮเปอร์เท็กซ์ถูกใช้โดยตรงในการจัดโครงสร้างเนื้อหาของหน้า HTML ด้วยความช่วยเหลือนี้ คุณสามารถสร้างตาราง ออกแบบ สร้างการออกแบบสำหรับข้อความและเอกสารไฮเปอร์เท็กซ์ได้
หน้า HTML โดยไม่ใช้ ซีเอสเอสมีความซับซ้อนและสับสนเนื่องจากการออกแบบสำหรับแต่ละองค์ประกอบถูกเขียนใหม่ซึ่งจะเพิ่มปริมาณข้อความอย่างมาก ตัวอย่างเช่น มีหน้า HTML ที่มีข้อความ 3 ส่วนที่ต้องจัดรูปแบบในลักษณะเดียวกัน (ขนาด สี) แต่ไม่สามารถใช้แท็ก HTML เพื่อจัดรูปแบบทั้งสามส่วนพร้อมกันได้ เนื่องจากส่วนย่อยเหล่านี้อยู่ ในตำแหน่งต่างๆ ในหน้า HTML ในการจัดรูปแบบข้อความดังกล่าว จำเป็นต้องใช้โค้ดในแต่ละครั้งสำหรับแต่ละส่วนแยกกัน
เมื่อใช้ CSS เราจะสร้างการออกแบบสำหรับคลาสหนึ่งครั้ง จากนั้นในโค้ดหน้า HTML เราจะกำหนดคลาสนี้ให้กับแต่ละแฟรกเมนต์ทั้งสามส่วน ตอนนี้โค้ด HTML ดูเทอะทะน้อยลงแล้วใช่ไหม ด้วยการเปลี่ยนองค์ประกอบ CSS เพียงรายการเดียว เราสามารถเปลี่ยนการออกแบบของทุกหน้าของเว็บไซต์ได้ในคราวเดียว และอาจมีเพจเหล่านี้ได้หลายพันหน้า

ดังนั้น TheDifference.ru จึงพบความแตกต่างระหว่าง HTML และ CSS ดังต่อไปนี้:

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

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

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

สาระสำคัญ

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

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

ผลที่ตามมา

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

...

Anchor Links หากคุณต้องการใส่ลิงค์ไปยังองค์ประกอบบางอย่างบนเพจ คุณเพียงแค่ต้องระบุ ID ให้กับองค์ประกอบนั้น ( ) และลิงก์ไปยังจุดนั้นด้วยจุดยึด (http://site/path/#about) นี่เป็นวิธีที่ต้องการมากกว่าวิธีเก่า

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

- นอกจากนี้ยังสามารถใช้แยกกันได้:

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

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

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

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

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

...

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

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

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

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

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

บทความนี้เป็นส่วนหนึ่งของซีรีส์ที่กำลังดำเนินการภายใต้ชื่อผลงาน "ตำราเรียน" ฉันขอแนะนำให้คุณอ่านบทความอื่น ๆ ที่อยู่ในหมวด "ตำราเรียน" ซึ่งตอนนี้รวบรวมตามลำดับเวลาย้อนกลับ บทความเบื้องต้นเกี่ยวกับ 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 จึงมีพื้นฐานที่แตกต่างกัน แต่ก็มีความเกี่ยวข้องกัน กฎของรูปแบบที่ดีคือการแยกโค้ดออกจากกันเพื่อไม่ให้ปะปนกันในหน้าเดียว



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