css ด้านบน Html คือการสร้างข้อความ css ตัวพิมพ์ใหญ่ ความแตกต่างระหว่าง HTML และ XHTML

CSS อนุญาตให้ปรับแต่งข้อความได้อย่างยืดหยุ่น ซึ่งแสดงโดยใช้ภาษา HMTL วันนี้เราจะมาดูผลของคุณสมบัติ "text-transform" ซึ่งทำให้สามารถเปลี่ยนตัวพิมพ์ของฟอนต์ได้ ตัวเลือกนี้รองรับโดยเบราว์เซอร์สมัยใหม่ทั้งหมดและรวมอยู่ในข้อกำหนดสำหรับ CSS ทุกเวอร์ชัน

วัตถุประสงค์

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

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

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

แอปพลิเคชัน

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

ลักษณะเฉพาะ

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

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

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

ตัวอย่างที่ 1: การสร้างตัวยกและตัวห้อย

ตัวยกและตัวห้อย .formula ( ขนาดตัวอักษร: 1.4em; /* ขนาดข้อความของสูตร */ ) sup, sub ( รูปแบบตัวอักษร: ตัวเอียง; /* ตัวเอียง */ สี: สีแดง; /* สีตัวอักษรสีแดง */ ) ย่อย ( สี: ฟ้า; /* สีตัวอักษรสีน้ำเงิน */ )

สมการลักษณะของพื้นผิวของระดับที่สอง

λ3 - I1λ2 + I2λ - I3 = 0

ในตัวอย่าง ตัวห้อยและตัวยกจะเกิดขึ้นพร้อมกัน หากต้องการเปลี่ยนรูปแบบตัวอักษรของดัชนี จะใช้รูปแบบที่กำหนดการออกแบบเดียว (รูปที่ 1)

ข้าว. 1. การปรากฏตัวของดัชนีหลังจากใช้สไตล์

โดยทั่วไปคุณสามารถปฏิเสธที่จะใช้และชอบสไตล์ได้ อะนาล็อกขององค์ประกอบเหล่านี้คือคุณสมบัติการจัดแนวในแนวตั้ง ซึ่งทำให้ข้อความเคลื่อนที่ในแนวตั้งตามระยะทางที่กำหนด โดยเฉพาะอย่างยิ่ง ตัวอย่างที่ 2 ใช้ 0.8em สำหรับดัชนีด้านบนและ -0.5em สำหรับดัชนีด้านล่างเป็นค่า Em เป็นหน่วยสัมพัทธ์เท่ากับขนาดของแบบอักษรปัจจุบัน ตัวอย่างเช่น 0.5em หมายความว่าข้อความควรเลื่อนไปครึ่งหนึ่งของขนาดตัวอักษร

ตัวอย่างที่ 2: การใช้สไตล์เพื่อจัดการดัชนี

ตัวยกและตัวห้อย .formula ( font-size: 1.6em; /* Text size */ font-style: italic; /* Italic */ ) .sup, .sub ( font-style: normal; /* Normal * / font- ขนาด: 0.6em; /* ขนาดดัชนี */ สี: สีแดง; /* สีตัวยก */ แนวตั้ง: 0.8em; /* เลื่อนข้อความขึ้น */ ) .sub ( สี: สีน้ำเงิน; /* ตัวห้อยสี */ แนวตั้ง -จัดตำแหน่ง: -0.5em; /* เลื่อนข้อความลง */ )

พหุนามของดีกรี n

f(x) = a0 + a1 x + ... + an-1 xn-1 + an xn

ในตัวอย่าง สูตรจะแสดงในขนาดที่ขยายใหญ่ขึ้น อักขระตัวยกถูกตั้งค่าเป็นสีแดง และตัวล่างเป็นสีน้ำเงิน (รูปที่ 2)

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

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

แท็ก sup HTML เป็นตัวยกของข้อความใน HTML

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

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

แท็กย่อย HTML คือตัวห้อยของข้อความใน HTML

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

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

การแปลงอักษรตัวพิมพ์เล็กเป็นตัวพิมพ์เล็กและตัวพิมพ์ใหญ่ก่อนโดยใช้ CSS (8)

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

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

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

นี่เป็นประโยคตัวอย่าง

นี่เป็นอีกประโยคตัวอย่าง และนี่คืออีกอันหนึ่ง แต่จะเป็นตัวพิมพ์เล็กทั้งหมด

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

จาก: นี่เป็นแอปตัวอย่าง

ถึง: นี่เป็นประโยคตัวอย่าง

อัปเดต: เมื่อฉันใช้การแปลงข้อความ: capize; ผลลัพธ์ก็ยังเหมือนเดิม

คุณไม่สามารถทำได้ด้วย CSS อย่างหมดจด มีแอตทริบิวต์ text-transform แต่ยอมรับเฉพาะ none เป็นตัวพิมพ์ใหญ่ ตัวพิมพ์ใหญ่ ตัวพิมพ์ใหญ่ ตัวพิมพ์เล็ก และสืบทอด

คุณอาจต้องการค้นหาโซลูชัน JS หรือโซลูชันฝั่งเซิร์ฟเวอร์

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

การแปลงข้อความ: เป็นตัวพิมพ์ใหญ่

ฉันไม่คิดว่าการแปลงข้อความจะทำงานโดยใช้ตัวพิมพ์ใหญ่เป็นอินพุต

หากคุณต้องการใช้เพื่อใช้งานไม่ได้ for หรือ textarea คุณต้องใช้ Javascript

ฟังก์ชัน CapitaliseName() ( var str = document.getElementById("name").value; document.getElementById("name").value = str.charAt(0).toUpperCase() + str.slice(1); )

ซึ่งน่าจะใช้งานได้ดีสำหรับหรือ

แท็ก HTML และ - คำจำกัดความและการใช้งานข้อความตัวห้อยและตัวยก

แท็กกำหนดข้อความตัวห้อย ข้อความตัวห้อยมีความสูงครึ่งหนึ่งและปรากฏอยู่ใต้เส้นฐาน สามารถใช้ข้อความตัวห้อยเมื่อเขียนสูตรเคมี เช่น H 2 O

แท็กกำหนดข้อความตัวยก ข้อความตัวยกมีความสูงครึ่งหนึ่งและปรากฏเหนือเส้นฐาน สามารถใช้ข้อความตัวยกเมื่อเขียนเชิงอรรถ เช่น WWW

การสนับสนุนเบราว์เซอร์

แท็กและได้รับการสนับสนุนโดยเบราว์เซอร์หลักทั้งหมด

ความแตกต่างระหว่างแอตทริบิวต์มาตรฐาน HTML และ XHTML

คอลัมน์ DTD ระบุว่าเอกสารประเภทใดที่อนุญาตให้ใช้แอตทริบิวต์ HTML 4.01/XHTML 1.0 DTD S=เข้มงวด T=ช่วงเปลี่ยนผ่าน และ F=กรอบชุด

แท็ก และ รองรับแอตทริบิวต์มาตรฐานต่อไปนี้:

ค่าแอตทริบิวต์ คำอธิบาย DTD

ระดับ	class_name	ระบุชื่อคลาสสำหรับองค์ประกอบ	STF
ผบ	rtl ลิตร	ระบุทิศทางข้อความสำหรับเนื้อหาในองค์ประกอบ	STF
รหัส	ตัวระบุ	ระบุตัวระบุเฉพาะสำหรับองค์ประกอบ	STF
ภาษา	ภาษา_รหัส	ระบุรหัสภาษาสำหรับเนื้อหาขององค์ประกอบ	STF
สไตล์	style_definition	ระบุสไตล์อินไลน์สำหรับองค์ประกอบ	STF
ชื่อ	ข้อความ	ระบุข้อมูลเพิ่มเติมเกี่ยวกับองค์ประกอบ	STF
xml:lang	ภาษา_รหัส	ระบุรหัสภาษาสำหรับเนื้อหาขององค์ประกอบในเอกสาร XHTML	STF

ข้อมูลเพิ่มเติมเกี่ยวกับคุณสมบัติมาตรฐาน

แอตทริบิวต์ของเหตุการณ์

แท็ก และ รองรับแอตทริบิวต์เหตุการณ์ต่อไปนี้:

ค่าแอตทริบิวต์ คำอธิบาย DTD

เมื่อคลิก	สคริปต์	สคริปต์ที่จะทำงานเมื่อคลิกเมาส์	STF
ondblclick	สคริปต์	สคริปต์ที่จะเรียกใช้เมื่อดับเบิลคลิก	STF
บนเมาส์ดาวน์	สคริปต์	สคริปต์ที่จะทำงานเมื่อคลิกเมาส์	STF
onmousemove	สคริปต์	สคริปต์จะทำงานเมื่อเมาส์เคลื่อนที่	STF
บนเมาส์เอาท์	สคริปต์	สคริปต์จะทำงานเมื่อตัวชี้เมาส์ออกจากองค์ประกอบ	STF
บนเมาส์โอเวอร์	สคริปต์	สคริปต์จะทำงานเมื่อเลื่อนเมาส์ไปเหนือองค์ประกอบ	STF
บนเมาส์	สคริปต์	สคริปต์จะทำงานเมื่อปล่อยปุ่มเมาส์	STF
เมื่อกดลง	สคริปต์	สคริปต์ที่จะทำงานเมื่อกดปุ่ม	STF
เมื่อกดปุ่ม	สคริปต์	สคริปต์จะทำงานเมื่อกดปุ่มแล้วปล่อย	STF
บนแป้นพิมพ์	สคริปต์	สคริปต์ที่จะทำงานเมื่อปล่อยคีย์	STF

ข้อมูลเพิ่มเติมเกี่ยวกับ