หน้าแรก>การสอนการออกแบบเว็บไซต์>กวดวิชา HTML

วิธีการใช้งานสี่วิธีสำหรับการฝังสไตล์ CSS ใน HTML

ผู้เขียน：Eve Cole เวลาอัปเดต：2024-12-20 13:37:02

สไตล์ CSS สามารถนำไปใช้กับเอกสาร HTML เป็นไฟล์แยก (ไฟล์ประเภท .css ) หรือเขียนโดยตรงในเอกสาร HTML โดยสามารถแบ่งคร่าวๆ ได้เป็นสี่วิธีดังต่อไปนี้:

สไตล์อินไลน์: ใช้แอตทริบิวต์ style ของแท็ก HTML เพื่อกำหนดสไตล์ CSS; ใช้แท็ก <style> เพื่อกำหนดสไตล์ CSS ที่ส่วนหัวของเอกสาร HTML (ระหว่างลิงก์ <head> และ <head>); style: ใช้แท็ก <link> แนะนำไฟล์สไตล์ชีต CSS ภายนอก นำเข้า: ใช้คำสั่ง @import เพื่อนำเข้าไฟล์สไตล์ชีต CSS ภายนอก

วิธีแรกและวิธีที่สองเขียนสไตล์ CSS ลงในเอกสาร HTML ปัจจุบัน วิธีที่สามและสี่วางสไตล์ CSS ในไฟล์ภายนอกแล้วนำเข้าลงในเอกสาร HTML ปัจจุบัน

1. สไตล์อินไลน์ (สไตล์อินไลน์)

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

[ตัวอย่างที่ 1] ใช้สไตล์อินไลน์ CSS กับย่อหน้า, แท็ก <h2>, แท็ก <em>, แท็ก <strong> และแท็ก <div> ตามลำดับ

 <!doctype html>
<html>
<หัว>
<meta charset="UTF-8">
<title>รูปแบบอินไลน์</title>
</หัว>
<ร่างกาย>
    <p style="พื้นหลัง-สี: #999900">องค์ประกอบแบบอินไลน์ ย่อหน้าควบคุม-1</p>
    <h2 style="พื้นหลังสี: #FF6633">องค์ประกอบแบบอินไลน์ องค์ประกอบชื่อ h2</h2>
    <p style="พื้นหลัง-สี: #999900">องค์ประกอบแบบอินไลน์ ควบคุมย่อหน้า-2</p>
    <strong style="font-size:30px;">องค์ประกอบแบบอินไลน์ strong มีประสิทธิภาพมากกว่า em</strong>
    <div style="พื้นหลัง-สี:#66CC99; color:#993300; height:30px; line-height:30px;">องค์ประกอบแบบอินไลน์ องค์ประกอบระดับบล็อก div</div>
    <em style="font-size:2em;">องค์ประกอบแบบอินไลน์ เน้น em</em>
</ร่างกาย>
</html>

ผลการสาธิตหน้ามีดังต่อไปนี้:

ในตัวอย่างข้างต้น สไตล์อินไลน์ถูกฝังโดยแอตทริบิวต์ style ขององค์ประกอบ HTML นั่นคือโค้ด CSS สามารถวางไว้ภายในเครื่องหมายคำพูด style="" และค่าแอตทริบิวต์ CSS หลายค่าจะถูกคั่นด้วยเครื่องหมาย ; ตัวอย่างเช่น แท็ก <div> ในตัวอย่าง:

 <div style="พื้นหลัง-สี:#66CC99; color:#993300; height:30px; line-height:30px;">องค์ประกอบแบบอินไลน์ องค์ประกอบระดับบล็อก div</div>

แท็กย่อหน้า <p> ตั้งค่าสีพื้นหลังเป็นสีน้ำตาล (สีพื้นหลัง: #999900) และแท็กชื่อ <h2> ตั้งค่าสีพื้นหลังเป็นสีแดง (สีพื้นหลัง: #FF6633)

แท็ก <strong> ตั้งค่าแบบอักษรเป็น 30 พิกเซล (font-size:30px;) แท็ก <div> ตั้งค่าความสูงและความสูงของบรรทัดเป็น 30 พิกเซล และตั้งค่าสีพื้นหลังและสี (สีพื้นหลัง: #66CC99; color : #993300 ; height:30px; line-height:30px;) แท็ก <em> กำหนดขนาดตัวอักษรเป็นหน่วยสัมพันธ์ (font-size: 2em;)

แม้ว่าเนื้อหาของแท็ก <p> สองย่อหน้าจะแตกต่างกัน แต่ก็ใช้การตั้งค่าสีพื้นหลังเหมือนกัน แต่เพิ่มแอตทริบิวต์อินไลน์ CSS สองครั้งเพื่อตั้งค่าสีพื้นหลัง สีพื้นหลัง: #999900

แม้ว่าองค์ประกอบอินไลน์จะเขียนได้ง่าย แต่สามารถพบข้อบกพร่องต่อไปนี้ได้จากตัวอย่าง:

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

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

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

2. สไตล์แบบฝัง

สไตล์อินไลน์เขียน CSS ไว้ที่ส่วนหัวของไฟล์ต้นฉบับของหน้าเว็บ นั่นคือระหว่าง <head> และ <head> และล้อมรอบโดยใช้แท็ก <style> ในแท็ก HTML ลักษณะเฉพาะของมันคือสไตล์เท่านั้นที่สามารถทำได้ ใช้ที่นี่ ใช้เพจเพื่อแก้ไขข้อเสียของการเขียนสไตล์อินไลน์หลายครั้ง

[ตัวอย่างที่ 2] ตั้งค่าวิธีการเขียนสไตล์อินไลน์สำหรับย่อหน้าเพื่อลดจำนวนโค้ด

 <!doctype html>
<html>
<หัว>
<meta charset="utf-8">
<title>ฝัง</title>
<style type="text/css">
พี{
    การจัดตำแหน่งข้อความ: ซ้าย; /*ข้อความจัดชิดซ้าย*/
    ขนาดตัวอักษร: 18px; /*ขนาดตัวอักษร 18 พิกเซล*/
    ความสูงบรรทัด: 25px; /*ความสูงของบรรทัด 25 พิกเซล*/
    text-indent: 2em; /*เยื้องบรรทัดแรกด้วยช่องว่างขนาดข้อความ 2 ช่อง*/
    ความกว้าง: 500px; /*ความกว้างของย่อหน้า 500 พิกเซล*/
    ระยะขอบ: 0 อัตโนมัติ; /*อยู่กึ่งกลางใต้เบราว์เซอร์*/
    ขอบล่าง: 20px; /*ขอบล่างของย่อหน้า 20 พิกเซล*/
-
</สไตล์>
</หัว>
<ร่างกาย>
    <p>ชื่อของบริษัท "ไป่ตู้" มาจากบทกวีของราชวงศ์ซ่ง "ตามหาเขาในไป่ตู้นับพัน" (ห้องประชุมของบริษัท Baidu มีชื่อว่า Qingyu Case ซึ่งเป็นบัตรคำของบทกวีนี้) แนวคิดของไอคอน "อุ้งเท้าหมี" มาจากการกระตุ้นของ "นักล่าลาดตระเวนอุ้งเท้าหมี" ซึ่งคล้ายกับ "เทคโนโลยีการค้นหาเชิงวิเคราะห์" ของดร. หลี่ มาก จึงก่อให้เกิดแนวคิดการค้นหาของไป่ตู้ และกลายเป็นภาพไอคอนของไป่ตู้ในที่สุด หลังจากนั้น เนื่องจากเครื่องมือค้นหาส่วนใหญ่แสดงด้วยรูปภาพสัตว์ เช่น สุนัขจิ้งจอกของ SOHU เช่น สุนัขของ GOOGLE Baidu จึงเรียกมันว่าหมี Baidu Bear ได้กลายเป็นภาพลักษณ์ของบริษัท Baidu </p>
    <p>ในแผนการเปลี่ยนโลโก้ของไป่ตู้ การออกแบบโลโก้ใหม่สามแบบที่เสนอโดยไป่ตู้ล้วนถูกปฏิเสธจากการโหวตของชาวเน็ต </p>
    <p>มีการโหวตทั้งหมดสามรอบเพื่อเปลี่ยนโลโก้ จนกระทั่งสิ้นสุดการโหวตรอบที่สอง โลโก้ใบหน้ายิ้มใหม่มีข้อได้เปรียบอย่างแน่นอน แต่ในการโหวตรอบสุดท้าย โลโก้อุ้งเท้าหมีแบบเดิมได้รับคะแนนโหวตมากที่สุดจากชาวเน็ตอย่างมาก ดังนั้นจึงปฏิเสธแผนโลโก้ใหม่ทั้งสามแบบโดยสิ้นเชิง </p>
</ร่างกาย>
</html>

ผลการสาธิตหน้ามีดังต่อไปนี้:

ในตัวอย่างข้างต้น ย่อหน้าจะถูกตั้งค่าดังนี้: ข้อความถูกจัดชิดซ้าย, แบบอักษรมีขนาด 14, ความสูงของบรรทัดคือ 25 พิกเซล, ความกว้างคือ 500 พิกเซล, ระยะขอบด้านล่างคือ 20 พิกเซล, เบราว์เซอร์อยู่ตรงกลางใต้ เบราว์เซอร์ และบรรทัดแรกจะเยื้องด้วยช่องว่างขนาดข้อความสองช่อง การเยื้องบรรทัดแรกใช้หน่วยสัมพันธ์ จุดประสงค์ของการตั้งค่านี้คือ เมื่อขนาดตัวอักษรเปลี่ยนแปลง (เช่น font-size: 18px; ) ยังสามารถเยื้องได้ด้วยช่องว่างขนาดข้อความสองช่อง

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

style ไม่เพียงแต่สามารถกำหนดสไตล์ CSS เท่านั้น แต่ยังรวมถึงสคริปต์ JavaScript ด้วย ดังนั้นคุณต้องใส่ใจเมื่อใช้สไตล์ เมื่อค่าประเภทของ style คือ text/css สไตล์ CSS จะถูกเขียนภายใน หากค่าประเภทของ style คือ text/javascript สคริปต์ JavaScript จะถูกเขียนภายใน

แอตทริบิวต์ชื่อเรื่องของแท็กสไตล์

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

[ตัวอย่างที่ 3] ตั้งค่าขนาดตัวอักษรสองรูปแบบสำหรับเบราว์เซอร์ Firefox ตามลำดับ และแก้ไขผ่านเมนู "มุมมอง" ของ Firefox

 <!doctype html>
<html>
<หัว>
<meta charset="utf-8">
<style type="text/css" title="ขนาดตัวอักษร 14">
พี{
    การจัดตำแหน่งข้อความ: ซ้าย; /*ข้อความจัดชิดซ้าย*/
    ขนาดตัวอักษร: 14px; /*ขนาดตัวอักษร 14 พิกเซล*/
    ความสูงบรรทัด: 25px; /*ความสูงของบรรทัด 25 พิกเซล*/
    text-indent: 2em; /*เยื้องบรรทัดแรกด้วยช่องว่างขนาดข้อความสองช่อง*/
    ความกว้าง: 500px; /*ความกว้างของย่อหน้า 500 พิกเซล*/
    ระยะขอบ: 0 อัตโนมัติ; /*อยู่กึ่งกลางใต้เบราว์เซอร์*/
-
</สไตล์>
<style type="text/css" title="ขนาดตัวอักษร 18">
พี{
    การจัดตำแหน่งข้อความ: ซ้าย; /*ข้อความจัดชิดซ้าย*/
    ขนาดตัวอักษร: 18px; /*ขนาดตัวอักษร 18 พิกเซล*/
    ความสูงบรรทัด: 25px; /*ความสูงของบรรทัด 25 พิกเซล*/
    text-indent: 2em; /*เยื้องบรรทัดแรกด้วยช่องว่างขนาดข้อความสองช่อง*/
    ความกว้าง: 500px; /*ความกว้างของย่อหน้า 500 พิกเซล*/
    ระยะขอบ: 0 อัตโนมัติ; /*อยู่กึ่งกลางใต้เบราว์เซอร์*/
    สี: #6699FF; /*เปลี่ยนสีตัวอักษร*/
-
</สไตล์>
</หัว>
<ร่างกาย>
    <p>ชื่อของบริษัท "ไป่ตู้" มาจากบทกวีของราชวงศ์ซ่ง "ตามหาเขาในไป่ตู้นับพัน" (ห้องประชุมของบริษัท Baidu มีชื่อว่า Qingyu Case ซึ่งเป็นบัตรคำของบทกวีนี้) แนวคิดของไอคอน "อุ้งเท้าหมี" มาจากการกระตุ้นของ "นักล่าลาดตระเวนอุ้งเท้าหมี" ซึ่งคล้ายกับ "เทคโนโลยีการค้นหาเชิงวิเคราะห์" ของดร. หลี่ มาก จึงก่อให้เกิดแนวคิดการค้นหาของไป่ตู้ และกลายเป็นภาพไอคอนของไป่ตู้ในที่สุด </p>
</ร่างกาย>
</html>

ผลการสาธิตหน้าแสดงในรูปด้านล่าง

ในตัวอย่างข้างต้น มีการกำหนดขนาดตัวอักษรสองขนาดผ่าน <style type="text/css" title="名称"> และมีสองตัวเลือกในเมนูย่อย "Page Style" ใต้เมนู "View" ใน Firefox : Font ขนาด 14 ขนาดตัวอักษร 18 โดยค่าเริ่มต้น <style type="text/css" title="名称"> จะแสดงขึ้น สามารถเปลี่ยนสไตล์ของหน้าได้ผ่านเมนู

3. เชื่อมโยงแล้ว

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

[ตัวอย่างที่ 4] ใช้รูปแบบลิงก์เพื่อนำสไตล์ไปใช้กับโค้ด HTML ซึ่งง่ายต่อการเขียนและเปลี่ยนแปลง

 <!doctype html>
<html>
<หัว>
<meta charset="utf-8">
<title></title>
<link href="lianjie.css" type="text/css" rel="stylesheet" />
<link href="lianjie-2.css" type="text/css" rel="stylesheet" />
</หัว>
<ร่างกาย>
    <p>ฉันถูกควบคุมโดยไฟล์ lianjie-2.css แล้วคุณล่ะที่ชั้นล่าง? - </p>
    <h3>ที่ชั้นบน ไฟล์ <span>lianjie.css</span> ให้ชุดสีสันสดใสแก่ฉัน </h3>
</ร่างกาย>
</html>

ผลการสาธิตหน้ามีดังต่อไปนี้:

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

รหัสไฟล์ lianjie.css:

 h3{
    Font-weight: Normal; /*ยกเลิกเอฟเฟกต์ตัวหนาเริ่มต้นของชื่อ*/
    สีพื้นหลัง: #66CC99; /* ตั้งค่าสีพื้นหลัง*/
    height: 50px; /*กำหนดความสูงของป้ายกำกับ*/
    line-height:50px; /* กำหนดความสูงของบรรทัดของป้ายกำกับ*/
-
ช่วง{
    สี: #FFOOOO; /* สีตัวอักษร*/
    แบบอักษร-น้ำหนัก:ตัวหนา; /* แบบอักษรตัวหนา*/
-

รหัสไฟล์ lianjie-2.css:

 พี{
    สี: #FF3333; /*การตั้งค่าสีตัวอักษร*/
    ตัวอักษร-น้ำหนัก: ตัวหนา; /* ตัวอักษรตัวหนา*/
    ขอบล่าง: 3px ประ #009933; /* กำหนดเส้นขอบด้านล่าง*/
    line-height: 30px; /* กำหนดความสูงของบรรทัด*/
-

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

ประโยชน์ของการเชื่อมโยงสไตล์ CSS ที่นำเข้า:

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

4. นำเข้าสไตล์

การนำเข้าสไตล์ ใช้คำสั่ง @import เพื่อนำเข้าสไตล์ชีตภายนอก มีวิธีการเขียนสำหรับสไตล์ที่นำเข้า 6 วิธี:

 @นำเข้า daoru.css;
@นำเข้า 'daomxss';
@นำเข้า "daoru.css";
@นำเข้า URL (daoru.css);
@import url('daoru.css');
@import url("daoru.css");

[ตัวอย่างที่ 5] นำเข้าสไตล์ชีต lianjie.css และ daoru.css และเขียนสีพื้นหลังของแท็ก <body> โปรดทราบว่าสไตล์ชีตที่นำเข้าและสไตล์แท็ก <body> ไม่สามารถย้อนกลับได้

 <html>
<หัว>
<meta charset="utf-8">
<title></title>
<style type="text/css">
    @นำเข้า URL (lianjie.css);
    @นำเข้า URL (daoru.css);
    เนื้อความ { สีพื้นหลัง: #e4e929; }
</สไตล์>
</หัว>
<ร่างกาย>
    <div>
        <p>ฉันถูกควบคุมโดยไฟล์ lianjie-2.css แล้วคุณล่ะที่ชั้นล่าง? - </p>
        <h3>บนแจ็คเก็ต ไฟล์ <span>lianjie.css</span> ให้ชุดลายดอกไม้แก่ฉัน </h3>
    </div>
</ร่างกาย>
</html>

ผลการสาธิตหน้าแสดงในรูปด้านล่าง

ในตัวอย่างข้างต้น จะต้องเป็น @import url("lianjie-2.css"); p{text-indent: 3em;} แต่ไม่ใช่ p{text-indent:3em;} @import url("lianjie-2.css"); มิฉะนั้นเอฟเฟกต์การนำเข้าจะไม่ถูกต้อง ในไฟล์ CSS จะต้องวาง @import ที่ด้านหน้าและเพิ่มสไตล์ CSS ที่ส่วนท้าย มิฉะนั้นจะไม่ถูกต้อง

รหัสไฟล์ lianjie.css เช่นเดียวกับตัวอย่างก่อนหน้า นั่นคือประเภทลิงก์

รหัสไฟล์ daoru.css:

 @import url("lianjie-2.css");
p { เยื้องข้อความ: 3em;

นี่เป็นการสรุปบทความนี้เกี่ยวกับวิธีการใช้งานสี่วิธีของสไตล์ HTML ที่ฝังไว้ สำหรับสไตล์ CSS ที่ฝัง HTML ที่เกี่ยวข้องเพิ่มเติม โปรดค้นหาบทความก่อนหน้าใน downcodes.com หรือเรียกดูบทความที่เกี่ยวข้องต่อไปนี้ ฉันหวังว่าคุณจะอ่านเพิ่มเติมในอนาคต สนับสนุน downcodes.com!

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