เมื่อยังไม่มีสไตล์ชีต แท็กจะถูกใช้เพื่อกำหนดขนาดตัวอักษรและแบบอักษร แบบอักษร- อย่างไรก็ตามใน ในขณะนี้ไม่แนะนำให้ใช้แท็กนี้ ด้านล่างนี้เป็นตัวอย่างของการใช้แท็กนี้:
ขนาดข้อความขั้นต่ำ
ขนาดข้อความสูงสุด
เฮลเวติกา
อาเรียล
สีแดง
ดูเหมือนว่า:
ขนาดข้อความขั้นต่ำขนาดข้อความสูงสุด
เฮลเวติกา
อาเรียล
สีแดง
การใช้สไตล์ชีตเพื่อวัตถุประสงค์เหล่านี้สะดวกและถูกต้องกว่ามาก ไม่ว่าในกรณีใด คุณจะมั่นใจได้ว่าไซต์ของคุณจะแสดงอย่างถูกต้องในทุกเบราว์เซอร์
เนื่องจาก, ไฟล์ซีเอสเอสเป็น เอกสารข้อความแล้วในกรณีที่ไม่มีอยู่ โปรแกรมพิเศษคุณสามารถเขียนมันแบบง่ายๆ ได้ โปรแกรมแก้ไขข้อความเช่น ใน Notepad
มาสร้างไฟล์ด้วยชื่อกัน 03.cssและวางไว้ในไดเร็กทอรีเดียวกันกับไฟล์ตัวอย่างของเรา (เนื่องจากจะมีตัวอย่างมากมาย ไฟล์ตัวอย่างแต่ละไฟล์จะมีสไตล์ชีตของตัวเอง) ในสไตล์ชีต เรากำหนดขนาด สี และแบบอักษรสำหรับหน้า HTML ทั้งหมด - ในแท็ก ร่างกาย
หน้าเว็บจะเป็นอย่างไรหากไม่มี CSS: ตัวอย่างที่ 2
หน้าเว็บจะมีลักษณะอย่างไรเมื่อใช้ CSS: ตัวอย่างที่ 3
ส่วนของโค้ด HTML ที่แก้ไขของหน้า(เพิ่มเฉพาะแท็ก META ที่เชื่อมต่อไฟล์สไตล์ชีต ไม่มีการเปลี่ยนแปลงใดๆ กับหน้า):
ไม่มีชื่อ
body (ตระกูลฟอนต์: Verdana, Tahoma, Arial, Helvetica, sans-serif; สี: สีเทา; ขนาดฟอนต์: 8pt;)
อย่างที่พวกเขาพูดรู้สึกถึงความแตกต่าง! ไฟล์สไตล์ชีตเพียงบรรทัดเดียวเปลี่ยนลักษณะที่ปรากฏทั้งหมดของหน้า HTML ได้ทันที (หากไซต์มีหน้าเว็บหลายสิบ หลายร้อย หลายพันหน้า อย่างไรก็ตาม การเปลี่ยนแปลงจะปรากฏในทุกหน้าของไซต์)
มาดูบรรทัดในไฟล์ CSS กันดีกว่า:
- ร่างกาย- บอกเบราว์เซอร์ว่าการจัดรูปแบบมีผลกับเนื้อหาทั้งหมดของหน้า HTML (นั่นคือ ทุกอย่างที่อยู่ระหว่างแท็ก และ);
- {} (วงเล็บปีกกา) - คุณลักษณะการจัดรูปแบบสไตล์ทั้งหมดอธิบายไว้ข้างใน วงเล็บปีกกาและคั่นด้วยเครื่องหมายอัฒภาค ( ; );
- ตระกูลแบบอักษร:- ระบุแบบอักษรของแบบอักษร (ชื่อแบบอักษรจะแสดงอยู่หลังเครื่องหมายทวิภาค คั่นด้วยเครื่องหมายจุลภาค) ในกรณีนี้เบราว์เซอร์จะพยายามแสดงแบบอักษรแรก (Verdana) หากแบบอักษรดังกล่าวไม่ได้อยู่ในคอมพิวเตอร์ของผู้ใช้ เบราว์เซอร์จะพยายามแสดงแบบอักษรถัดไป (Tahoma) ฯลฯ
- สี:- ระบุสีตัวอักษร (เป็นไปได้ ตัวเลือกต่างๆการสะกด: สีเทา; #808080);
- ขนาดตัวอักษร:- ระบุขนาดตัวอักษร (มีตัวเลือกต่างๆ ให้เลือก: pt, px, pc, mm...);
“เล่น” ด้วย พารามิเตอร์ต่างๆค่านิยมและดูว่าเพจของคุณเปลี่ยนแปลงไปอย่างไรในทันที
เมื่อใช้สไตล์ คุณสามารถสร้าง "เคล็ดลับ" เล็กๆ น้อยๆ ที่ผู้ใช้ที่เข้าชมเว็บไซต์ของคุณจะมองเห็นได้ แต่จะ "มองไม่เห็น" เครื่องมือค้นหา(โดย อย่างน้อยในขณะที่เขียน ของวัสดุนี้- ดังที่คุณทราบ โปรแกรมค้นหาจะจัดอันดับข้อความที่อยู่ในส่วนหัวระดับแรก (tag
- แต่ข้อความที่อยู่ในแท็กนี้อาจดูไม่เป็นที่ยอมรับเสมอไป เนื่องจากมีขนาดใหญ่และหนามาก สิ่งนี้สามารถเปลี่ยนแปลงได้ เช่น การใช้แอตทริบิวต์ สไตล์:
การจัดรูปแบบส่วนหัวระดับแรก: ตัวอย่างหมายเลข 4 - ส่วนหัวแรกจะแสดง "โดยค่าเริ่มต้น" ส่วนที่สองถูกจัดรูปแบบโดยใช้แอตทริบิวต์ สไตล์.
รหัส HTML ของหน้า:
ไม่มีชื่อ
แหวนทองคำแห่งรัสเซีย
แหวนทองคำแห่งรัสเซีย
“แหวนทองคำแห่งรัสเซีย” (ในสมัยโบราณ Zalesye) เส้นทางท่องเที่ยวรวมถึงเครือข่ายเมืองรัสเซียโบราณ: Sergiev Posad, Pereslavl-Zalessky, Rostov the Great, Yaroslavl, Kostroma, Ples, Vladimir, Bogolyubovo, Suzdal, Yuryev-Polskoy , อุกลิช. ชื่อ Zalesie นั้นมีพื้นฐานมาจากภูมิศาสตร์ มันหมายถึงทุกสิ่งที่ "อยู่นอกป่า" ที่เกี่ยวข้องกับ Kyivan Rus
เอฟเฟกต์เดียวกัน แต่ใช้สไตล์ชีตภายนอก (ไม่มีการเปลี่ยนแปลงโค้ดเพจด้านบน ไฟล์ CSS เปลี่ยนไป) ตัวอย่างที่ 5
เนื้อหาของไฟล์ CSS:
body (กลุ่มแบบอักษร: Verdana, Tahoma, Arial, Helvetica, sans-serif; สี: สีเทา; ขนาดตัวอักษร: 8pt;) H1 (สี: สีเขียว; ขนาดตัวอักษร: 130%;)
สังเกตได้ง่ายว่าสไตล์ชีตกำหนดส่วนหัวระดับแรก สีเขียวและกำหนดขนาดตัวอักษรเป็น 130% ของขนาดหลักที่ตั้งไว้ 8แต้ม.
การใช้แอตทริบิวต์ ขนาดตัวอักษร(ขนาดตัวอักษร) เป็นไปได้ กำหนดขนาดตัวอักษรในหน่วยดังต่อไปนี้:
- % (ร้อยละ, มูลค่าสัมพัทธ์);
- ซม(หน่วยเป็นเซนติเมตร เป็นค่าสัมบูรณ์)
- em(ความสูงของตัวอักษร ของแบบอักษรนี้, ญาติ ใน-บน);
- อดีต(ความสูงของอักขระ “x” ของแบบอักษรนี้ สัมพันธ์กับใน)
- ใน(นิ้ว, หน้าท้องอินนา);
- มม(มิลลิเมตร, หน้าท้องอินนา);
- พีซี(ซิเซโร, หน้าท้อง in-na);
- จุด(จุด, หน้าท้อง, อินออน);
- พิกเซล(pixel, abs. in-on)
ผู้ดูแลเว็บมีสองตัวเลือกสุดท้าย โปรดทราบว่าเมื่อระบุค่าที่ไม่ใช่จำนวนเต็ม คุณต้องใช้จุดเป็นตัวคั่น ไม่ใช่ลูกน้ำ - 2.2มม.
เมื่อระบุแบบอักษรแบบอักษร(คุณลักษณะ ตระกูลแบบอักษร:) คุณสามารถตั้งค่าแบบอักษรใดก็ได้ แต่เพื่อความปลอดภัย (ในกรณีที่ไม่มี แบบอักษรที่ต้องการ) ขอแนะนำให้รวมไว้ด้วย ประเภทมาตรฐานชุดหูฟัง:
- เล่นหาง(ตัวเอียง);
- แฟนตาซี(ชุดฟุ่มเฟือย);
- พื้นที่เดียว(แบบอักษรเครื่องพิมพ์ดีดมาตรฐาน);
- แซนเซอริฟ(แบบอักษรเซอริฟ);
- เซริฟ(แบบอักษรซานเซอริฟ)
สีตัวอักษร (แอตทริบิวต์ สี:) สามารถระบุได้ในรูปแบบเลขฐานสิบหก (#FCD34F) หรือชื่อภาษาอังกฤษของสีมาตรฐาน (สีแดง) คุณควรระมัดระวังเมื่อตั้งค่าสีเป็นเลขฐานสิบหก เนื่องจาก... ไม่ใช่ทุกสีที่ให้มา ในทำนองเดียวกันจะแสดงเช่นเดียวกันบน จอภาพที่แตกต่างกัน- มันจะดีกว่าที่จะใช้ จานสีที่ปลอดภัยสีซึ่งจะแสดงเหมือนกันบนจอภาพทั้งหมด
ขนาดของตาราง ความสูงและความกว้างของตาราง จะถูกกำหนดโดยอัตโนมัติ ขึ้นอยู่กับว่าเซลล์ใดอยู่ภายในนั้น ยิ่งเติมเซลล์มากเท่าไร ขนาดใหญ่ขึ้นตารางและในทางกลับกัน
อย่างไรก็ตาม คุณสมบัติซีเอสเอสช่วยให้คุณสามารถปรับขนาดตารางในรูปแบบ HTML โดยระบุความกว้างและความสูงที่คุณต้องการได้อย่างแม่นยำ เพื่อความเป็นธรรม ควรสังเกตว่าแอตทริบิวต์ของตารางยังอนุญาตให้คุณตั้งค่าได้ ขนาดที่ต้องการ- อย่างไรก็ตามใน ช่วงเวลาปัจจุบันเราจะพูดถึง CSS เท่านั้น
ต้องเน้นย้ำว่าแต่ละตารางมีความกว้างขั้นต่ำและความสูงขั้นต่ำของตัวเองซึ่งได้รับผลกระทบจากเนื้อหา และแม้ว่าคุณจะตั้งค่าความกว้างและความสูงให้น้อยลง แต่ก็ไม่มีอะไรเกิดขึ้น ด้านข้างของโต๊ะจะต้องไม่เกินค่าต่ำสุด
ในการระบุความกว้างของตาราง คุณต้องใช้คุณสมบัติ CSS ความกว้างและเพื่อกำหนดความสูงคุณต้องใช้คุณสมบัติ ความสูง.
ในตัวอย่างจะมีลักษณะเช่นนี้
ตาราง ( กว้าง: 500px; สูง: 100px; )
ผลลัพธ์ในเบราว์เซอร์:
รหัสเต็ม:
| 1 | 2 | 3 | 4 | 5 |
|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 |
| 1 | 2 | 3 | 4 | 5 |
สามารถระบุค่าความกว้างและความสูงของตารางได้เป็น ค่าสัมบูรณ์(เป็นพิกเซล) และสัมพันธ์ – เป็นเปอร์เซ็นต์ เช่น 20px และ 20% ตามลำดับ
หากคุณใช้เปอร์เซ็นต์ในการกำหนดขนาดตาราง ระบบจะคำนวณตามขนาด องค์ประกอบหลัก- ถ้าเราพูดถึงตัวอย่างของเราแล้ว เรากำลังพูดถึงเกี่ยวกับหน้าต่างเบราว์เซอร์
มีความหมายอื่น - รถยนต์ และมีความพิเศษเนื่องจากความกว้างและความสูงของตารางจะถูกคำนวณโดยอัตโนมัติตามค่าเริ่มต้น ในทางปฏิบัติ การระบุค่านี้จะมีลักษณะเช่นนี้
ความกว้าง: อัตโนมัติ;
ความสูง: อัตโนมัติ;
เราอยากจะดึงความสนใจของคุณไปที่อีกสิ่งหนึ่ง: จุดสำคัญ- เป็นการดีกว่าที่จะไม่ระบุความสูงเป็นเปอร์เซ็นต์เนื่องจากตามกฎแล้วจะไม่ทำงานในกรณีนี้
การระบุขนาดของแต่ละเซลล์และคอลัมน์
หากคุณคิดว่าเบราว์เซอร์ไม่ได้ตั้งค่าความกว้างของคอลัมน์ตามเนื้อหาของเซลล์อย่างถูกต้อง คุณมีสิทธิ์ระบุขนาดของเซลล์และคอลัมน์ด้วยตัวเอง และตอนนี้เราจะพูดถึงวิธีเปลี่ยนขนาดเซลล์ในตาราง HTML
การปรับขนาดเซลล์ทำได้โดยใช้คุณสมบัติ CSS เดียวกันกับขนาดตาราง กล่าวคือ: ความกว้างและ ความสูง.
หากต้องการเพิ่มสไตล์ให้กับเซลล์ คุณสามารถใช้หนึ่งในสองตัวเลือกต่อไปนี้:
- ตั้งชื่อคลาสเป็นรายบุคคลให้กับเซลล์ มันจะมีลักษณะเช่นนี้: class="cell-50px"
และหลังจากนั้นคุณควรใช้สไตล์กับคลาสเหล่านี้
- เปิดใช้งานแอตทริบิวต์ สไตล์ข้างในเขียนโค้ด CSS ที่จำเป็น
ในทางปฏิบัติ ตัวเลือกที่สองจะมีลักษณะดังนี้:
อย่างไรก็ตาม เราขอแจ้งให้ทราบว่าไม่จำเป็นต้องเปลี่ยนขนาดเซลล์ทีละเซลล์บ่อยนัก ตามกฎแล้วจะทำในสถานการณ์ที่จำเป็นต้องตั้งค่าความกว้างที่แน่นอนสำหรับคอลัมน์ตาราง ในกรณีนี้ปัญหาจะได้รับการแก้ไขได้ง่ายขึ้น คุณเพียงแค่ต้องระบุความกว้างของเซลล์ในแถวแรก
| 1 | 2 | 3 | 4 | 5 |
|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 |
| 1 | 2 | 3 | 4 | 5 |
ผลลัพธ์ในเบราว์เซอร์: 
วิธีเปลี่ยนขนาดตัวอักษรในตาราง
บ่อยครั้งมีความจำเป็นต้องเปลี่ยนขนาดของข้อความในตาราง ตัวอย่างเช่น ในเซลล์ส่วนหัว ซึ่งสามารถทำได้โดยใช้คุณสมบัติ CSS ขนาดตัวอักษร- มากำหนดขนาดตัวอักษรสำหรับองค์ประกอบกัน
TH (ขนาดตัวอักษร: 30px; )
เกี่ยวกับเรื่องนี้ บทเรียนนี้สิ้นสุด ฉันขอแนะนำให้คุณคิดอย่างรอบคอบเกี่ยวกับการบ้านของคุณ เพียงศึกษาให้รอบคอบและคิดเกี่ยวกับมัน ขอให้ทุกคนโชคดี!
ดูเหมือนว่าเหตุใดจึงต้องรู้จักแท็ก HTML สำหรับข้อความหากตอนนี้แผงผู้ดูแลระบบเกือบทุกแห่งมีแผงที่สะดวกที่ตั้งค่าโดยอัตโนมัติ
ความจริงก็คือการจัดรูปแบบเนื้อหาบนเว็บไซต์โดยพื้นฐานแล้วแตกต่างจากการทำงานอยู่ แอปพลิเคชั่นสำนักงาน- การทำให้ข้อความดูน่าดึงดูดนั้นไม่เพียงพอเพราะ การออกแบบที่ถูกต้องไม่เพียงแต่ขึ้นอยู่กับการแสดงหน้าเว็บเท่านั้น แต่ยังรวมถึงการโปรโมตในเครื่องมือค้นหาด้วย
แท็ก HTML และคุณลักษณะ: ไวยากรณ์พื้นฐาน
ข้อความอะไรก็ได้ รหัสที่ซ่อนอยู่ซึ่ง "อธิบาย" ให้คอมพิวเตอร์ทราบว่าจะแสดงบนหน้าจออย่างไรและอย่างไร ข้อมูลทั้งหมดจะถูกบันทึกโดยใช้ชุดองค์ประกอบสากล
โดยพื้นฐานแล้ว แท็กข้อความ HTML คือคำสั่งที่เพิ่มหรือเปลี่ยนแปลงบล็อกบางบล็อกในหน้า รูปร่าง. รูปแบบที่ถูกต้องรายการมีลักษณะดังนี้:
โปรดทราบว่าไม่ได้จับคู่แท็กทั้งหมด ตัวอย่างเช่น,
(ข้ามบรรทัด) หรือ
(ส่วนที่เพิ่มเข้าไป เส้นแนวนอน) ไม่จำเป็นต้องปิดเลย
เหตุใดคุณจึงไม่สามารถคัดลอกบทความจาก Word และโปรแกรมอื่น ๆ ลงในตัวแก้ไขเว็บไซต์ได้
ถึงแม้จะทันสมัยก็ตาม โปรแกรมสำนักงานใช้แท็ก HTML เดียวกันสำหรับข้อความ ใน 99% ของกรณีที่โค้ดเนทีฟไม่สามารถใช้งานได้กับหน้าเว็บ แม้ว่าเอกสารจะแสดงตามปกติในแอปพลิเคชัน แต่เมื่อแทรกลงบนเว็บไซต์ การจัดรูปแบบอาจสูญหาย อีกทั้งเนื่องจาก ปริมาณมากแท็กและแอตทริบิวต์เพิ่มเติม เครื่องมือค้นหาไม่สามารถวิเคราะห์เนื้อหาของหน้าได้อย่างเพียงพอ ซึ่งในทางกลับกันทำให้การโปรโมตทรัพยากรของคุณทำได้ยาก
เพื่อให้ได้โค้ดที่ชัดเจนและเกี่ยวข้อง คุณต้องตัดข้อความของแท็ก HTML ที่สร้างโดยโปรแกรมแก้ไขทั่วไปก่อน มีหลายวิธีในการทำเช่นนี้:
- “เรียกใช้” บทความผ่าน Notepad แล้วแทรกลงในไซต์เท่านั้น แอปพลิเคชันจะลบ HTML ทั้งหมด ดังนั้นหลังจากนั้นคุณจะต้องจัดรูปแบบข้อความอีกครั้ง (โดยใช้เครื่องมือแก้ไขหรือด้วยตนเอง)
- เขียนและเผยแพร่บทความโดยใช้ LiveWriter เครื่องมือแก้ไขบล็อกยอดนิยมจะสร้างโค้ดที่ถูกต้องทันที และในแท็บแยกต่างหาก คุณสามารถดูได้ว่าข้อความบนเว็บไซต์จะมีลักษณะอย่างไร
- ใช้โปรแกรมทำความสะอาด HTML บริการออนไลน์นี้ไม่ได้ทำลายโค้ดทั้งหมด แต่จะทำลายเฉพาะส่วนที่ไม่จำเป็นเท่านั้น เมื่อใช้ตัวกรอง คุณจะเลือกแท็กที่คุณต้องการบันทึก ยังมีพลังอีกด้วย โปรแกรมแก้ไขภาพสำหรับการจัดรูปแบบซึ่งเพิ่มคำสั่งที่ปรับให้เหมาะสมแล้วให้กับโค้ด
ย่อหน้า
องค์ประกอบนี้มีอยู่ในบทความเกือบทั้งหมด แต่ละย่อหน้าควรอยู่ภายในคอนเทนเนอร์ดังกล่าว - ช่วยให้การจัดรูปแบบง่ายขึ้นและช่วยให้คุณบันทึกได้ สไตล์เครื่องแบบในทุกหน้าของเว็บไซต์ เพื่อความสะดวกในการติดแท็ก
เขียนด้วยเสมอ บรรทัดใหม่.
การจัดตำแหน่ง
แท็ก "การจัดตำแหน่งข้อความ" HTML แยกต่างหากไม่ได้ใช้มาเป็นเวลานาน มีการสร้างแอตทริบิวต์ ALIGN ทั่วไปแทน หากต้องการเปลี่ยนตำแหน่งของบล็อกข้อความบนหน้า คุณต้องเลือกค่าใดค่าหนึ่งจาก 3 ค่า - CENTER, RIGHT หรือ LEFT ในทำนองเดียวกัน คุณสามารถตั้งค่าการจัดแนวสำหรับองค์ประกอบอื่นๆ ได้ เช่น ส่วนหัว
ในบางสถานการณ์ แท็กอื่นๆ จะถูกนำมาใช้เพื่อการจัดตำแหน่ง เช่น คุณสามารถวางตำแหน่งโดยใช้องค์ประกอบได้
หัวเรื่องและหัวเรื่องย่อย
ระบบหัวข้อย่อยช่วยให้คุณสร้างโครงสร้างเนื้อหาแบบลอจิคัลได้ เมื่อแบ่งข้อความออกเป็นบล็อกที่สื่อความหมาย ผู้อ่านจะมีสมาธิและซึมซับได้ง่ายขึ้นมาก ข้อมูลใหม่- เครื่องมือค้นหายังวิเคราะห์พาดหัวข่าวเพื่อทำความเข้าใจว่าข้อความค้นหาใดที่จะโปรโมตเพจ นี่คือเหตุผลที่ผู้เชี่ยวชาญด้าน SEO แนะนำให้ใช้คำหลักเฉพาะในคำหลักเหล่านั้น
HTML ใช้ส่วนหัวย่อยหกระดับ - จาก
ถึง - มีลำดับชั้นที่ชัดเจนในระบบนี้:...
- บทความหลัก ผลิตภัณฑ์ในร้านค้าออนไลน์ ฯลฯ) มีได้เพียงอันเดียวในข้อความ - ตามกฎแล้วจะมีคีย์เวิร์ดหลักอยู่
...
- หัวข้อย่อยระดับที่สองแบ่งข้อความออกเป็นบล็อกที่มีความหมาย ตัวอย่างเช่น หากคุณกำลังให้คะแนนแล็ปท็อป คุณสามารถทำได้หลายอย่าง พร้อมชื่อรุ่นต่างๆ
...
- จำเป็นต้องมีระดับที่สามหากข้อความอยู่ระหว่างสอง ก็แตกออกเป็นบล็อกเล็กๆ เช่นกัน ในตัวอย่างของเรา สิ่งเหล่านี้อาจเป็นเกณฑ์การประเมิน - "ประสิทธิภาพ", "หน่วยความจำ", "การ์ดวิดีโอ" ฯลฯ สำหรับแต่ละรุ่น
, ,
- ในทางปฏิบัติมันหายากมาก แต่หลักการทั่วไปก็เหมือนกัน - ควร "ซ้อนกัน" ในบล็อกที่มีหัวข้อย่อยระดับบนสุด
...
- บทความหลัก ผลิตภัณฑ์ในร้านค้าออนไลน์ ฯลฯ) มีได้เพียงอันเดียวในข้อความ- ตามกฎแล้วจะมีคีย์เวิร์ดหลักอยู่
...
- หัวข้อย่อยระดับที่สองแบ่งข้อความออกเป็นบล็อกที่มีความหมาย ตัวอย่างเช่น หากคุณกำลังให้คะแนนแล็ปท็อป คุณสามารถทำได้หลายอย่างพร้อมชื่อรุ่นต่างๆ
...
- จำเป็นต้องมีระดับที่สามหากข้อความอยู่ระหว่างสองก็แตกออกเป็นบล็อกเล็กๆ เช่นกัน ในตัวอย่างของเรา สิ่งเหล่านี้อาจเป็นเกณฑ์การประเมิน - "ประสิทธิภาพ", "หน่วยความจำ", "การ์ดวิดีโอ" ฯลฯ สำหรับแต่ละรุ่น
,
- ในทางปฏิบัติมันหายากมาก แต่หลักการทั่วไปก็เหมือนกัน - ควร "ซ้อนกัน" ในบล็อกที่มีหัวข้อย่อยระดับบนสุด,
ตรวจสอบให้แน่ใจว่าได้รักษาลำดับชั้นที่ถูกต้อง กลับมาที่ตัวอย่างของเรา ซึ่งหมายความว่าคุณไม่สามารถป้อนชื่อโมเดลได้ทันที
หรือ - และยิ่งกว่านั้น ให้ใช้หัวข้อย่อยของระดับต่าง ๆ สำหรับบล็อกที่มีความหมายเป็นเนื้อเดียวกัน (เช่น เน้นแล็ปท็อปที่เข้ามาเป็นอันดับสุดท้ายในการจัดอันดับโดยใช้ ).
).
นี่คือแผนภาพที่จะช่วยให้คุณเข้าใจและจดจำโครงสร้างส่วนหัวที่ถูกต้องใน HTML ได้ทันที
รายการ
เป็นการดีกว่าที่จะจัดรูปแบบรายการและคำแนะนำในรูปแบบของรายการโดยใช้แท็ก HTML พิเศษสำหรับข้อความ ( ข้อผิดพลาดทั่วไป- เพียงไม่กี่ย่อหน้า
ซึ่งขึ้นต้นด้วยขีดกลางหรือตัวเลข)
โครงสร้างของบล็อกดังกล่าวนั้นง่ายมาก ขั้นแรก เราจะกำหนดประเภทของรายการ - มีสัญลักษณ์แสดงหัวข้อย่อยหรือลำดับเลข
องค์ประกอบทั้งหมดอยู่ระหว่างแท็กเปิดและแท็กปิด แต่ละรายการจะเริ่มต้นด้วยบรรทัดใหม่และมีรูปแบบ ไม่จำกัดจำนวนองค์ประกอบ
ทางเลือกและคุณลักษณะของมัน
สิ่งที่สามารถเปลี่ยนแปลงได้โดยใช้แบบอักษรและสีนี้ - และโดยไม่ต้องเพิ่มคลาสใหม่ให้กับ CSS วิธีนี้จะสะดวกมากเมื่อคุณต้องการเน้นเพียงประโยคหรือส่วนเดียวเท่านั้น
มีคุณสมบัติหลายประการ:
- ใบหน้า- ให้คุณเปลี่ยนแบบอักษรของข้อความ คุณสามารถแสดงรายการหลายตัวเลือกโดยคั่นด้วยเครื่องหมายจุลภาค (Tahoma, Verdana) หากผู้ใช้ไม่ได้ติดตั้งแบบอักษรแรก ระบบจะใช้แบบอักษรอื่นแทน
- ขนาด- หากต้องการทำให้ข้อความใหญ่ขึ้นหรือเล็กลง ให้ป้อนค่าระหว่าง 1 ถึง 7 ในเครื่องหมายคำพูด
- สี- คุณสามารถเลือกหนึ่งในเฉดสีมาตรฐาน (แดง เขียว น้ำเงิน) หรือป้อนรหัสสำหรับสีใดก็ได้ตามที่คุณต้องการ ทั้งนี้ขึ้นอยู่กับการออกแบบ
ห้ามใช้ย่อหน้าที่มีการจัดรูปแบบด้วย แทนที่จะเป็นหัวข้อย่อย ควรตั้งค่าพารามิเตอร์การออกแบบเดียวกันด้วยแท็กที่ถูกต้อง
วิธีการเน้นข้อความ
ข้อความที่ซ้ำซากน่าเบื่อแม้จะแบ่งเป็นย่อหน้าก็ตาม เพื่อดึงดูดความสนใจและกระตุ้นความสนใจของผู้อ่าน ประเด็นสำคัญขอแนะนำให้เน้นแบบกราฟิก ต่อไปนี้เป็นคำสั่งบางส่วนที่จะช่วยคุณรับมือกับงานนี้
... - แท็ก HTML ที่ได้รับความนิยมอย่างมาก ข้อความตัวหนาดึงดูดสายตาทันทีดังนั้นจึงสะดวกในการเน้นวิทยานิพนธ์และข้อเท็จจริงที่สำคัญ
หลายคนสับสนแท็ก และ - ไม่มีความแตกต่างทางสายตา แต่ทำงานต่างกัน ครั้งแรกเพียงแค่เปลี่ยนรูปลักษณ์ของข้อความและครั้งที่สองทำหน้าที่เป็น "ดัชนี" และเน้นส่วนที่สำคัญที่สุด (ใจความ คำหลักและวลีสำหรับ SEO)
... - ตัวเอียงที่หรูหราและเข้มงวดเหมาะอย่างยิ่งสำหรับการออกแบบคำศัพท์ทางวิทยาศาสตร์ คำต่างประเทศ และคำพูดที่หลากหลาย ในสิ่งพิมพ์ที่จริงจังจะมีการเน้นชื่องานศิลปะด้วยข้อความตัวเอียงด้วย
... - บางทีอาจไม่มีแท็ก HTML อื่นใดที่ทำให้เกิดความขัดแย้งมากนัก ข้อความขีดเส้นใต้ไม่ค่อยได้ใช้เพราะว่า วิธีนี้ในอดีตไฮไลท์ถูกกำหนดให้กับไฮเปอร์ลิงก์ ถ้าคุณใช้ ในบทความ โปรดทราบว่านี่เหมาะสำหรับส่วนสั้นๆ เท่านั้น - ไม่เกิน 1 บรรทัด
...
- แท็กที่น่าสนใจที่ช่วยให้คุณสามารถสร้างส่วนที่เกี่ยวข้องได้มากในการโฆษณา - ตัวอย่างเช่น เพื่อเน้นความแตกต่างระหว่างราคาเก่าและราคาใหม่
... - วิธีที่ง่ายที่สุดในการเพิ่มขนาดตัวอักษรโดยไม่มีตัวเลือกเพิ่มเติม
... - มันทำงานบนหลักการเดียวกันกับแท็กก่อนหน้า ข้อความที่อยู่ภายในจะลดลงเมื่อเทียบกับข้อความหลัก
... . ชื่อที่ถูกต้องรูปแบบนี้เป็นตัวยก แท็กนี้มีไว้สำหรับองศาทางคณิตศาสตร์และเชิงอรรถเป็นหลัก จะลดขนาดตัวอักษรและย้ายข้อความที่เลือกขึ้น
... - ตัวห้อยมักพบในสูตรต่างๆ ส่วนที่เลือกจะอยู่ใต้ข้อความหลัก
ภาชนะที่มีความหมาย
เนื่องจากพบบางบล็อกในข้อความจำนวนมาก จึงเริ่มสร้างแท็กพิเศษสำหรับบล็อกเหล่านั้น วิธีนี้ทำให้การจัดรูปแบบง่ายขึ้น เนื่องจากหากเนื้อหาแต่ละประเภทมีชุดสไตล์ของตัวเอง คุณเพียงแค่ต้องเน้นข้อความและระบุข้อมูลที่มีอยู่
...
- แท็กสำหรับเพิ่มรหัสคอมพิวเตอร์ สิ่งที่ขาดไม่ได้ในบทความเกี่ยวกับการเขียนโปรแกรมพร้อมตัวอย่าง - คำสั่งจะไม่ถูกดำเนินการ แต่แสดงเป็นข้อความธรรมดา
... - ออกแบบมาเพื่อจัดรูปแบบคำพูด เช่น ข้อความที่ตัดตอนมาจากการสัมภาษณ์
- วางส่วนหนึ่งของข้อความลงในบล็อกที่แยกจากกัน ตามค่าเริ่มต้น ส่วนที่เลือกจะมีช่องว่างภายในด้านซ้ายมากกว่า แต่คุณยังสามารถเปลี่ยนขนาด รูปแบบแบบอักษร และสีของข้อความใน CSS ได้อีกด้วย
... - แท็กเพิ่มเติมที่มีข้อมูลเกี่ยวกับผู้เขียน รวมถึงลิงก์
เส้นแบ่ง
สามารถใช้เส้นธรรมดาเพื่อทำเครื่องหมายจุดสิ้นสุดแบบลอจิคัลของส่วนขนาดใหญ่ได้
ใช้ไม่ได้กับแท็กที่จับคู่ ซึ่งหมายความว่าองค์ประกอบรูปแบบการปิดไม่จำเป็น.
การใช้แอตทริบิวต์ WIDTH คุณสามารถทำให้ตัวคั่นสั้นลงได้โดยการระบุขนาดที่เหมาะสมเป็นพิกเซลหรือเปอร์เซ็นต์ของความกว้างของหน้าต่าง
ด้วยการเรียนรู้วิธีใช้แท็กอย่างเหมาะสมเพื่อจัดรูปแบบข้อความใน HTML คุณไม่เพียงทำให้บทความของคุณอ่านง่ายขึ้น แต่ยังเพิ่มประสิทธิภาพ SEO ของคุณอีกด้วย
ฉันมีปัญหาในการตั้งค่าขนาดแบบอักษรของเนื้อหาเป็น 11px แต่ตารางแสดงแบบอักษรที่ 16px ฉันไม่รู้ว่าอะไรเป็นสาเหตุของสิ่งนี้ - ฉันได้ดู CSS และเอาต์พุต (แหล่งที่มาเมื่อไปที่เพจ) ซ้ำแล้วซ้ำอีก การตั้งค่าขนาดแบบอักษรของตารางเป็น 11px อย่างชัดเจนจะให้เอฟเฟกต์ตามที่ต้องการ แต่ฉันไม่จำเป็นต้องตั้งค่าให้แยกจากรูปแบบเนื้อหา
ฉันมี CSS ต่อไปนี้:
เนื้อความ ( ตระกูลแบบอักษร:Verdana, Arial, Helvetica, sans-serif; ขนาดตัวอักษร: 11px; ระยะขอบ: 0px; สีพื้นหลัง: #E7D2B8; สี: #863F2B; ) img.headerImg ( ความกว้าง: 100%; ) แถบเมนู ( float: left; width: 20%; ) .main-content ( float: left; width: 80%; ) .clear ( clear:both; ) ul.menu ( Margin: 0px; Margin-left: 10px ; การขยาย: 0px; รายการสไตล์: ไม่มี; ) ul.menu li ( ระยะขอบ: 0px; ระยะขอบ: 0px; ระยะขอบซ้าย: : 20%; ) ul.footer-links ( list-style: none; ) ul.footer-links li ( float: left; padding: 20px; ) ul.footer-links li:last ( clear: right; ) ตาราง ( ความกว้าง: 100%; เส้นขอบยุบ: ยุบ; ) td (จัดแนวตั้ง: ด้านบน; )
และบทสรุปก็คือ:
| รหัส | ชื่อหน้า | นามสกุล | ที่อยู่ | รหัสไปรษณีย์ | โทรศัพท์ | โทรสาร | แก้ไข |
| สร้าง | |||||||
| รหัส4 | เจมส์ | สีฟ้า | ที่อยู่11 ที่อยู่24 ที่อยู่32 เมือง5 |
รหัสไปรษณีย์4 | โฟน4 | โฟน2 | แก้ไข |
| รหัส5 | เฟรด | สีขาว | ที่อยู่13 ที่อยู่24 ที่อยู่31 เมือง1 |
รหัสไปรษณีย์2 | โฟน5 | โฟน3 | แก้ไข |
ฉันไม่เห็นสิ่งใดที่สามารถกำหนดขนาดตัวอักษรเป็น 16px ในตารางได้จริงๆ สิ่งนี้เกิดขึ้นกับทั้งสามส่วน (thead, tfoot, tbody) ดูเหมือนว่า Netbeans 6.9 จะจัดรูปแบบตารางไม่ถูกต้อง แต่เป็นส่วนที่เหลือของเอกสาร (ก่อนและหลัง) มันเกือบจะเหมือนมีบางอย่างผิดปกติกับโต๊ะ แต่ฉันมองไม่เห็นอะไร สิ่งนี้เกิดขึ้นใน Firefox และ Opera (ส่วนใหญ่ เวอร์ชันล่าสุดทั้งคู่). ฉันไม่ได้ทดสอบใน IE เพราะจะไม่ใช้ใน IE
ฉันมีปัญหาโดยตั้งค่าขนาดแบบอักษรของเนื้อหาเป็น 11px แต่ตารางแสดงแบบอักษรที่ 16px ฉันไม่รู้ว่าอะไรเป็นสาเหตุ - ฉันได้ดู CSS และผลลัพธ์ (แหล่งที่มาเมื่อไปที่หน้า) ซ้ำแล้วซ้ำอีก การตั้งค่าขนาดแบบอักษรของตารางเป็น 11px อย่างชัดเจนจะให้เอฟเฟกต์ตามที่ต้องการ แต่ฉันไม่จำเป็นต้องตั้งค่าให้แยกจากรูปแบบเนื้อหา
ฉันมี CSS ต่อไปนี้:
เนื้อความ ( ตระกูลแบบอักษร:Verdana, Arial, Helvetica, sans-serif; ขนาดตัวอักษร: 11px; ระยะขอบ: 0px; สีพื้นหลัง: #E7D2B8; สี: #863F2B; ) img.headerImg ( ความกว้าง: 100%; ) แถบเมนู ( float: left; width: 20%; ) .main-content ( float: left; width: 80%; ) .clear ( clear:both; ) ul.menu ( Margin: 0px; Margin-left: 10px ; การขยาย: 0px; รายการสไตล์: ไม่มี; ) ul.menu li ( ระยะขอบ: 0px; ระยะขอบ: 0px; ระยะขอบซ้าย: : 20%; ) ul.footer-links ( list-style: none; ) ul.footer-links li ( float: left; padding: 20px; ) ul.footer-links li:last ( clear: right; ) ตาราง ( ความกว้าง: 100%; ยุบขอบ: ยุบ; ) td (จัดแนวตั้ง: ด้านบน; )
และผลลัพธ์จะมีลักษณะดังนี้:
| รหัส | ชื่อหน้า | นามสกุล | ที่อยู่ | รหัสไปรษณีย์ | โทรศัพท์ | โทรสาร | แก้ไข |
| สร้าง | |||||||
| รหัส4 | เจมส์ | สีฟ้า | ที่อยู่11 ที่อยู่24 ที่อยู่32 เมือง5 |
รหัสไปรษณีย์4 | โฟน4 | โฟน2 | แก้ไข |
| รหัส5 | เฟรด | สีขาว | ที่อยู่13 ที่อยู่24 ที่อยู่31 เมือง1 |
รหัสไปรษณีย์2 | โฟน5 | โฟน3 | แก้ไข |
ฉันไม่เห็นสิ่งใดที่สามารถกำหนดขนาดตัวอักษรเป็น 16px ในตารางได้จริงๆ สิ่งนี้เกิดขึ้นกับทั้งสามส่วน (thead, tfoot, tbody) ดูเหมือนว่า Netbeans 6.9 จะจัดรูปแบบตารางไม่ถูกต้อง แต่เป็นส่วนที่เหลือของเอกสาร (ก่อนและหลัง) มันเกือบจะเหมือนมีบางอย่างผิดปกติกับโต๊ะ แต่ฉันมองไม่เห็นอะไร สิ่งนี้เกิดขึ้นใน Firefox และ Opera (เวอร์ชันล่าสุดของทั้งคู่) ฉันไม่ได้ทดสอบใน IE เพราะจะไม่ใช้ใน IE
