Drop cap (drop cap ที่ฝังอยู่ในข้อความ) คือตัวอักษรตัวแรกของย่อหน้า ซึ่งมีขนาดใหญ่กว่าส่วนที่เหลือ และวางไว้เพื่อให้ด้านบนอยู่ที่ระดับบรรทัดแรกของย่อหน้า ในภาพ คุณสามารถดูตัวอย่าง Drop Cap ที่ฝังอยู่ในข้อความได้

อย่างไรก็ตาม WordPress มีปลั๊กอินพิเศษ (wordpress.org/extend/plugins/drop-caps) ที่ช่วยให้คุณสร้างข้อความที่ฝังไว้โดยอัตโนมัติ (และเลื่อนลง) ตัวพิมพ์ใหญ่. อัศจรรย์! อย่างไรก็ตาม จะเป็นอย่างไรหากคุณไม่ต้องการใช้ปลั๊กอิน (ฉันแน่ใจว่าคุณไม่ต้องการ) และคุณเพียงแค่ต้องสร้าง drop cap ในหลายโพสต์ และอาจอยู่ในตำแหน่งเฉพาะล่ะ

ข่าวดีก็คือคุณไม่จำเป็นต้องมีปลั๊กอินเพื่อสร้างตัวพิมพ์ใหญ่ สิ่งที่คุณต้องมีคือ CSS และแท็ก span เล็กน้อย เปิดไฟล์ css ของคุณและเพิ่มรหัสต่อไปนี้:

Span.dropcaps ( ตระกูลแบบอักษร:จอร์เจีย serif; สี: #ccc; ขนาดตัวอักษร: 46px; ลอย: ซ้าย; น้ำหนักแบบอักษร: 400; ความสูงของบรรทัด: 1em; ระยะขอบล่าง: -0.4em; ระยะขอบขวา : 0.09em; ตำแหน่ง: ญาติ; )

บางอย่างเช่นนี้ แน่นอนว่าคุณจะต้องมีสไตล์ที่ตรงกับการออกแบบและข้อความของคุณ ตัวอย่างเช่น ค่าคุณสมบัติ: Font-size , Margins และ Line-height จะต้องเลือกตามการออกแบบและข้อความของคุณ

ช่วงแท็ก

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

ก

องค์ประกอบหลอก:อักษรตัวแรก

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

P:อักษรตัวแรก ( ตระกูลแบบอักษร:จอร์เจีย serif; สี: #ccc; ขนาดตัวอักษร: 46px; ลอย: ซ้าย; น้ำหนักแบบอักษร: 400; ความสูงของบรรทัด: 1em; ระยะขอบด้านล่าง: -0.4em; ระยะขอบ -ขวา: 0.09em; ตำแหน่ง: ญาติ; )

ต่อไปนี้เป็นวิธีการแก้ไขตัวพิมพ์ใหญ่โดยใช้ CSS สองสามวิธี

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

ฉันจะแสดงหลายตัวเลือกในการแก้ปัญหานี้: PHP และ CSS เหมาะสำหรับเนื้อหาที่เผยแพร่แล้วมากกว่าเมื่อ jQuery สามารถแก้ไขสถานการณ์ก่อนเผยแพร่ได้

ตัวอักษรตัวแรกของสตริงที่เป็นตัวพิมพ์ใหญ่ใน PHP

ใน PHP มีฟังก์ชันที่เรียกว่า "ucfirst" ซึ่งเพิ่งแปลงอักขระตัวแรกของบรรทัดเป็นตัวพิมพ์ใหญ่ แต่ข้อเสียคือมันทำงานได้ไม่ถูกต้องกับ Cyrillic

เพื่อที่จะทำสิ่งนี้ เราจะเขียนฟังก์ชันเล็กๆ ของเราเอง การใช้งานจะมีลักษณะดังนี้:

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

ตัวอักษรตัวแรกตัวพิมพ์ใหญ่ของสตริงใน CSS

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

การใช้งานมีดังนี้:

ประโยคแรก

ประโยคที่สอง

ประโยคที่สาม

ประโยคที่สี่

#content p:อักษรตัวแรก ( การแปลงข้อความ: ตัวพิมพ์ใหญ่; )

การใช้องค์ประกอบหลอก “อักษรตัวแรก” และคุณสมบัติ “การแปลงข้อความ” เราตั้งค่าการออกแบบสำหรับอักษรตัวแรกแต่ละตัวของย่อหน้า

ตัวอักษรตัวแรกของสตริงเป็นตัวพิมพ์ใหญ่ใน jQuery

ดังที่ได้กล่าวไปแล้ว วิธีการแปลงนี้เหมาะที่สุดสำหรับสื่อที่ยังไม่ได้เผยแพร่

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

$(document).ready(function() ( $(".content").on("keyup", function() ( var text = $(this).val(); var new_text = text.charAt(0) .toUpperCase() + text.substr(1); $(this).val(new_text); )); ));

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

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

ตัวอักษรเริ่มต้นแล้วและตอนนี้

นักประวัติศาสตร์ใช้อักษรตัวพิมพ์ใหญ่ในต้นฉบับที่เขียนด้วยลายมือ บางฉบับมีอายุย้อนกลับไปถึงศตวรรษที่ 5 ตัวพิมพ์ใหญ่ยังคงใช้ต่อไปตั้งแต่ศตวรรษที่ 8 ถึงศตวรรษที่ 15 เมื่อแท่นพิมพ์อนุญาตให้มีการนำการพิมพ์ไปสู่ระดับอุตสาหกรรม ตัวอักษรเริ่มต้นทั้งที่เขียนด้วยลายมือและตัวพิมพ์ถูกวางไว้ที่จุดเริ่มต้นของข้อความ มักตกแต่งด้วยลวดลายประดับที่อยู่รอบตัวอักษร

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

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

การใช้คลาส

นักออกแบบที่มีความเข้าใจ CSS อยู่แล้วจะรู้ว่าจำเป็นต้องสร้างคลาส CSS แยกต่างหากสำหรับอักษรตัวพิมพ์ใหญ่ตัวแรก

รหัส CSS สำหรับองค์ประกอบย่อหน้าและคลาสที่สร้างตัวอักษรจะมีลักษณะดังนี้:

p (font-size:20px; ตระกูลแบบอักษร: Georgia, "Times New Roman", Times, serif;).myinitialcaps (ขนาดแบบอักษร:48px; ตระกูลแบบอักษร: Didot;)

และโค้ด HTML จะมีลักษณะดังนี้:

อะไรทำให้เรา:

ดูเหมือนง่ายเกินไปเหรอ? คุณจะต้องปรับเปลี่ยนตามตัวอักษรที่ยกมา เนื่องจากตัวพิมพ์ใหญ่แต่ละตัวต้องมีการจัดช่องไฟแบบพิเศษ หลังจากเลือกแบบอักษรสำหรับตัวอักษรที่ยกขึ้นและสำหรับข้อความเนื้อหาแล้ว คุณจะต้องสร้างคลาสแยกต่างหากสำหรับตัวอักษรที่ยกขึ้นแต่ละตัว ในคลาส CSS below.myinitialcapsi ระยะขอบทางด้านขวาถูกตั้งค่าเป็นค่าลบเพื่อลดระยะห่างระหว่าง I และ n

Myinitialcapsi (ขนาดแบบอักษร:48px; ตระกูลแบบอักษร: Didot; ระยะขอบขวา:-1px;)

ในกรณีนี้ มีการเว้นวรรคเพิ่มเติมระหว่าง “ฉัน” และ “n”

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

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

ใบเสนอราคาและกรณีพิเศษอื่นๆ

คุณสามารถขยายได้ไม่เพียงแต่ตัวอักษรที่จุดเริ่มต้นของข้อความเท่านั้น คุณสามารถใช้คลาสอื่นเพื่อสร้างเครื่องหมายคำพูดขนาดใหญ่ที่จะปรากฏถัดจากตัวอักษร ในกรณีของเรา ทั้งคลาสตัวอักษรที่มีขนาด 48 หรือคลาสข้อความ 20 พิกเซลไม่เหมาะสำหรับเครื่องหมายคำพูด แต่จะอยู่ระหว่าง - 30 พิกเซล เราจะย้ายเครื่องหมายคำพูดลง 4 พิกเซลเพื่อจัดแนวออปติกด้วย I:

Myinitialcapsq (ขนาดตัวอักษร: 30px; ตระกูลแบบอักษร: Didot; float:left; ระยะขอบด้านบน:4px;)

“การรวม” คลาสใหม่ที่มีระยะขอบติดลบจะดึงคลาสนั้นเข้ามาใกล้ยิ่งขึ้น

คุณต้องระมัดระวังอย่างมากในการตั้งค่าการใช้อักษรตัวพิมพ์ใหญ่ใน CSS แต่ละรายการพร้อมกับเครื่องหมายคำพูด เพื่อให้การจัดช่องไฟและการจัดแนวตรงกับมาร์กอัปที่อยู่รอบๆ ตัวอย่างเช่น จะต้องย้ายตัวอักษร T ไปทางซ้าย เลยขอบของย่อหน้าเล็กน้อย เพื่อให้เส้นขวางพอดีกับเลย์เอาต์ คุณจะต้องทำเช่นเดียวกันกับตัวอักษรกลม เช่น C, G, O และ Q ตัวอย่างนี้ใช้ขนาดแบบอักษร 20, 30 และ 48 แต่คุณจะต้องเลือกขนาดตามแบบอักษรเฉพาะที่คุณเลือก เช่นเดียวกับขนาดและความละเอียดของหน้าจอที่จะดูไซต์

องค์ประกอบหลอกและคลาสหลอก

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

p ( ขนาดตัวอักษร: 1.2em; ครอบครัวแบบอักษร: Georgia, "Times New Roman", Times, serif; line-height:2em;padding-bottom:1.2em;) p::อักษรตัวแรก ( ขนาดตัวอักษร: 3.6em; การแปลงข้อความ: ตัวพิมพ์ใหญ่; ตระกูลฟอนต์: "Monotype Bernard Condensed", serif; margin-right:0.03em;).initialb (margin-right:-0.1em;).initialn (margin-right:-0.15 เลย;)

โค้ด HTML ที่มีคลาส CSS ที่คำนึงถึงการจัดช่องไฟของตัวอักษร N และ B จะมีลักษณะดังนี้...

ตัวอักษรเริ่มต้น โดยอักษรตัวแรกเป็นตัวพิมพ์ใหญ่
เมื่อมีการขึ้นบรรทัดใหม่ บรรทัดถัดไปจะไม่มีขีดจำกัดเริ่มต้น

สังเกตในซอร์ส HTML ว่าตัวอักษรตัวแรก ไม่ใช่ตัวพิมพ์ใหญ่ใน HTML มีขนาดตัวพิมพ์ใหญ่เริ่มต้นที่ 3.6em ได้อย่างไร เรียบร้อยใช่มั้ย?

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

ตัวพิมพ์ใหญ่ตัวแรกของย่อหน้าจะถูกแปลงเป็นตัวอักษร
ตัวอักษรตัวแรกหลังการขึ้นบรรทัดใหม่จะไม่ถูกแปลงเป็นตัวพิมพ์ใหญ่

oโปรดทราบว่าในซอร์สโค้ด HTML ตัวอักษรตัวแรกจะไม่เป็นตัวพิมพ์ใหญ่ แต่จะถูกแปลงเป็นอักขระ 3.6em

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

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

การรวมคลาสหลอกและองค์ประกอบหลอกเข้าด้วยกันเพื่อสร้างเลย์เอาต์ที่ชาญฉลาด

การเพิ่ม :first-child pseudo-class ช่วยแก้ปัญหาการแปลงตัวอักษรตัวแรกโดยไม่จำเป็น:

p ( ขนาดตัวอักษร: 1.2em; ครอบครัวแบบอักษร: Georgia, "Times New Roman", Times, serif; line-height:2em;padding-bottom:0.5em;) p:first-child::first-letter ( ขนาดตัวอักษร: 3.6em; การแปลงข้อความ: ตัวพิมพ์ใหญ่; ตระกูลแบบอักษร: "Monotype Bernard Condensed", serif; ระยะขอบขวา: 0.03em;)

รวมรหัสนี้กับ HTML:

ตัวอักษรตัวแรกที่ถูกกำหนดให้เป็นลูกคนแรกคือตัวอักษรตัวเดียวที่ถูกแปลงเป็นตัวพิมพ์ใหญ่แบบยกขึ้นโดยวิธีนี้

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

ข้อดีของการใช้คลาสหลอกคือความสามารถในการจัดการกรณีพิเศษต่างๆ แล้วข้อเสียล่ะ? มีคลาสหลอกที่แตกต่างกันมากมาย และสามารถนำมารวมกันได้หลายวิธีจนทำให้คุณเวียนหัวได้ ตัวอย่างเช่น คลาสเทียม :first-child และ :first-of-type จะให้ผลลัพธ์ที่เหมือนกัน คุณยังสามารถใช้คลาสหลอกไม่เพียงแต่กับย่อหน้าเท่านั้น แต่ยังใช้กับหรือองค์ประกอบต่างๆ อีกด้วย ตัวอย่างเช่น ดังที่แสดงในตัวอย่างตัวอักษรที่ยกขึ้นด้านล่างในแบบอักษร Didot สังเกตว่าแอตทริบิวต์มาร์จิ้นถูกเพิ่มทางด้านขวาของ A อย่างไร มิฉะนั้น มันจะ "ติดกัน" ด้วยตัวอักษร s ที่จุดเริ่มต้นของส่วน:

ส่วน ( ขนาดตัวอักษร: 1.2em; ครอบครัวแบบอักษร: จอร์เจีย, "Times New Roman", Times, serif; line-height:3em;) ส่วน>p:first-child:first-letter ( ขนาดตัวอักษร: 4em; การแปลงข้อความ: ตัวพิมพ์ใหญ่; ตระกูลแบบอักษร: Didot, serif; ระยะขอบขวา: 5px;)

และพร้อมกับ HTML:

ที่จุดเริ่มต้นของส่วน จะมีการระบุตัวอักษรตัวแรกที่ขึ้นต้นด้วยตัวอักษรพิมพ์ใหญ่

และย่อหน้าใหม่...

หากคุณรู้สึกอยากทดลอง คุณสามารถสำรวจวิธีการต่างๆ นอกเหนือจาก :first-child และ :first-of-type ตัวอย่างเช่น เช่น :nth-of-type หรือ :nth-of-child เพื่อดูว่าคลาสหลอกเหล่านี้หรือประเภทอื่นๆ สามารถใช้สำหรับข้อความตัวพิมพ์ใหญ่ CSS ได้อย่างไร ไม่ว่าคุณจะปฏิบัติตามหลักการที่สรุปไว้ในบทความนี้หรือเริ่มเจาะลึกลงไปอีก เมื่อคุณได้เรียนรู้วิธีทำงานกับคลาสหลอก CSS first-child , :first-of-type และ :first-letter แล้ว คุณก็จะสามารถสมัครได้ ให้เป็นองค์ประกอบ HTML ได้อย่างถูกต้อง

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

แท็กและคุณลักษณะเมื่อทำงานกับแบบอักษร html

ภาษาไฮเปอร์เท็กซ์มีเครื่องมือมากมายสำหรับการทำงานกับแบบอักษร ท้ายที่สุดแล้ว การจัดรูปแบบข้อความเป็นงานหลักของ html

เหตุผลในการสร้างภาษา HTML คือปัญหาในการแสดงกฎการจัดรูปแบบข้อความในเบราว์เซอร์

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

• สี – กำหนดสีข้อความ
• ขนาด – ขนาดตัวอักษรในหน่วยทั่วไป

รองรับค่าแอตทริบิวต์ที่เป็นบวกตั้งแต่ 1 ถึง 7

• face – ใช้เพื่อตั้งค่าตระกูลแบบอักษรข้อความที่จะใช้ภายในไฟล์ . รองรับหลายค่าโดยคั่นด้วยเครื่องหมายจุลภาค

เฉพาะข้อความที่อยู่ระหว่างส่วนต่างๆ ของแท็กแบบอักษรที่จับคู่เท่านั้นที่จะได้รับการจัดรูปแบบ ข้อความที่เหลือจะแสดงเป็นแบบอักษรเริ่มต้นมาตรฐาน

นอกจากนี้ใน html ยังมีแท็กที่จับคู่จำนวนหนึ่งซึ่งระบุกฎการจัดรูปแบบเพียงกฎเดียวเท่านั้น ซึ่งรวมถึง:

• — ตั้งค่าแบบอักษรตัวหนาใน html แท็กการดำเนินการจะคล้ายกับแท็กก่อนหน้า
• — ขนาดใหญ่กว่าค่าเริ่มต้น
• - ขนาดตัวอักษรเล็กลง
• — ข้อความตัวเอียง (ตัวเอียง) แท็กที่คล้ายกัน ;
• — ข้อความที่มีการขีดเส้นใต้;
• - ขีดฆ่า;
• — แสดงข้อความเฉพาะตัวพิมพ์เล็กเท่านั้น
• - เป็นตัวพิมพ์ใหญ่

ข้อความธรรมดา

ภาพขนาดย่อ

ภาพขนาดย่อ

มากกว่าปกติ

น้อยกว่าปกติ

ตัวเอียง

ตัวเอียง

พร้อมขีดเส้นใต้

ขีดฆ่าออก

ความสามารถของแอตทริบิวต์สไตล์

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

1) ตระกูลฟอนต์ - คุณสมบัติตั้งค่าตระกูลฟอนต์ สามารถแสดงค่าได้หลายค่า
การเปลี่ยนแบบอักษรใน html เป็นค่าถัดไปจะเกิดขึ้นหากไม่ได้ติดตั้งตระกูลก่อนหน้าในระบบปฏิบัติการของผู้ใช้

ไวยากรณ์การเขียน:

ตระกูลฟอนต์: ชื่อฟอนต์ [, ชื่อฟอนต์[, ...]]

2) ขนาดตัวอักษร – ขนาดตั้งไว้ตั้งแต่ 1 ถึง 7 นี่เป็นหนึ่งในวิธีหลักที่คุณสามารถเพิ่มแบบอักษรใน HTML
ไวยากรณ์การเขียน:

ขนาดตัวอักษร: ขนาดสัมบูรณ์ | ขนาดสัมพัทธ์ | ความหมาย | ดอกเบี้ย | สืบทอด

คุณยังสามารถกำหนดขนาดตัวอักษรได้:

• เป็นพิกเซล
• ในค่าสัมบูรณ์ (xx-small, x-small, เล็ก, กลาง, ใหญ่);
• เป็นเปอร์เซ็นต์
• ในจุด (pt)

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

ขนาดตัวอักษร:24px

ขนาดตัวอักษร: x-large

ขนาดตัวอักษร: 200%

ขนาดตัวอักษร:24pt

3) Font-style – กำหนดสไตล์การเขียนฟอนต์ ไวยากรณ์:

รูปแบบตัวอักษร: ปกติ | ตัวเอียง | เฉียง | สืบทอด

ค่า:

• ปกติ – การสะกดปกติ
• ตัวเอียง – ตัวเอียง;
• เฉียง – แบบอักษรเอียงไปทางขวา;
• inherit – สืบทอดการสะกดขององค์ประกอบหลัก

ตัวอย่างวิธีการเปลี่ยนแบบอักษรใน html โดยใช้คุณสมบัตินี้:

รูปแบบตัวอักษร:สืบทอด

รูปแบบตัวอักษร: ตัวเอียง

รูปแบบตัวอักษร: ปกติ

รูปแบบตัวอักษร:เฉียง

4) font-variant – แปลงตัวพิมพ์ใหญ่ทั้งหมดให้เป็นตัวพิมพ์ใหญ่ ไวยากรณ์:

แบบอักษร: ปกติ | ตัวพิมพ์เล็ก | สืบทอด

ตัวอย่างวิธีการเปลี่ยนแบบอักษรใน html ด้วยคุณสมบัตินี้:

แบบอักษรตัวแปร: สืบทอด

แบบอักษร: ปกติ

แบบอักษร: ตัวพิมพ์เล็ก

5) น้ำหนักแบบอักษร – ให้คุณกำหนดความหนาของข้อความ (ความอิ่มตัว) ไวยากรณ์:

น้ำหนักแบบอักษร: ตัวหนา|โดดเด่นยิ่งขึ้น|เบากว่า|ปกติ|100|200|300|400|500|600|700|800|900

ค่า:

• ตัวหนา – ตั้งค่าแบบอักษร html เป็นตัวหนา
• โดดเด่นยิ่งขึ้น - โดดเด่นยิ่งขึ้นเมื่อเทียบกับปกติ
• เบากว่า – อิ่มตัวน้อยกว่าเมื่อเทียบกับปกติ
• ปกติ – การสะกดปกติ
• 100-900 – ตั้งค่าความหนาของแบบอักษรให้เทียบเท่ากับตัวเลข

แบบอักษรน้ำหนัก: ตัวหนา

แบบอักษรน้ำหนัก: โดดเด่นยิ่งขึ้น

ตัวอักษรน้ำหนัก:ไฟแช็ก

แบบอักษรน้ำหนัก:ปกติ

น้ำหนักตัวอักษร:900

น้ำหนักตัวอักษร:100

คุณสมบัติแบบอักษร HTML และสีแบบอักษร

Font เป็นอีกหนึ่งคุณสมบัติของคอนเทนเนอร์ ภายในตัวมันเองนั้นได้รวมค่าของคุณสมบัติหลายอย่างที่มีไว้เพื่อเปลี่ยนแบบอักษร ไวยากรณ์แบบอักษร:

แบบอักษร: ตระกูลแบบอักษรขนาดตัวอักษร | สืบทอด

ค่ายังสามารถตั้งค่าเป็นแบบอักษรที่ระบบใช้ในป้ายกำกับบนตัวควบคุมต่างๆ:

• คำบรรยาย – สำหรับปุ่ม;
• ไอคอน – สำหรับไอคอน
• เมนู - เมนู;
• กล่องข้อความ – สำหรับกล่องโต้ตอบ
• คำบรรยายภาพขนาดเล็ก – สำหรับการควบคุมขนาดเล็ก
• แถบสถานะ - แบบอักษรของแถบสถานะ

แบบอักษร:ไอคอน

แบบอักษร:คำบรรยายภาพ

แบบอักษร:เมนู

แบบอักษร: กล่องข้อความ

คำบรรยายภาพขนาดเล็ก

แบบอักษร:แถบสถานะ

แบบอักษร:ตัวเอียง 50px ตัวหนา "Times New Roman", Times, serif

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

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

ทำให้ตัวอักษรทั้งหมดเป็นตัวพิมพ์ใหญ่ใน CSS

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

• ตัวพิมพ์เล็ก - ข้อความทั้งหมดจะแสดงเป็นตัวพิมพ์เล็ก
• ตัวพิมพ์ใหญ่ – คำทั้งหมดจะแสดงเป็นตัวพิมพ์ใหญ่ (สิ่งที่เราต้องการ)
• ตัวพิมพ์ใหญ่ - ตัวอักษรตัวแรกของแต่ละคำเป็นตัวพิมพ์ใหญ่

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

จะไปถึงองค์ประกอบที่ต้องการได้อย่างไร?

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

ตอนนี้เรามีโอกาสที่จะเข้าถึงย่อหน้านี้ผ่านภาษา CSS โดยไม่ส่งผลกระทบต่อส่วนที่เหลือ คุณสามารถทำได้เช่นนี้:

ตัวพิมพ์ใหญ่(
การแปลงข้อความ: ตัวพิมพ์ใหญ่;
}

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

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

บทความ p:nth-child(2)(
การแปลงข้อความ: ตัวพิมพ์ใหญ่
}

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

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

วันนี้เรามาดูคุณสมบัติการแปลงข้อความ สมัครสมาชิกบล็อกเพื่อรับบทความใหม่