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

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

โดยเฉพาะอย่างยิ่งหากไซต์มีหลายร้อยหน้า และการเปลี่ยนแปลงแต่ละหน้าเป็นกระบวนการที่ต้องใช้แรงงานมาก

หากคุณสมัคร css ตัวพิมพ์ใหญ่ตอนต้นของแต่ละย่อหน้าอาจดูพิเศษ ตัวอย่างเช่น โค้ดด้านล่างที่ป้อนใน html โดยไม่มีวงเล็บ อนุญาตให้ใช้ข้อความที่จัดรูปแบบด้วยแท็ก "p" เพื่อทำให้ตัวพิมพ์ใหญ่ - ตัวอักษรตัวแรก - ใหญ่ขึ้น - 220% ของขนาดมาตรฐาน สีเหลือง - ค่าสีคือสีเหลือง และ เขียนด้วยแบบอักษรที่แตกต่างจากข้อความที่เหลือ - Georgia vs. batangche

()

p: ตัวอักษรตัวแรก (ตระกูลแบบอักษร: Georgia; ขนาดตัวอักษร:220%; สี: สีเหลือง;)

()

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

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

()

p (ตระกูลฟอนต์: batangche; ขนาดฟอนต์:93%;)

p: ตัวอักษรตัวแรก (ตระกูลแบบอักษร: Kelly+Slab; ขนาดตัวอักษร:220%; สี: สีฟ้า;)

()

().

บริการของ Google ให้คุณเลือกอย่างใดอย่างหนึ่งและมีลิงก์สำเร็จรูปสำหรับการแทรกลงใน html หรือ css เราดึงความสนใจของคุณไปที่ความจริงที่ว่าจำเป็นต้องเลือกกลุ่มแบบอักษร - ละตินหรือซีริลลิก เพราะ... แบบอักษรละตินเกือบทั้งหมดไม่ทำงานเมื่อจัดรูปแบบข้อความภาษารัสเซีย บน ในขณะนี้เครื่องมือค้นหาให้บริการฟรีประมาณ 40 ประเภท

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

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 จะต้องเลือกตามการออกแบบและข้อความของคุณ

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

ก

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

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

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

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

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

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

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

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

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

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

ประโยคแรก

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

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

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

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

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

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

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

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

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

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

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

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

การแปลงข้อความ h1 ( การแปลงข้อความ: ตัวพิมพ์ใหญ่; /* ตัวอักษรพิมพ์ใหญ่ */ ) p ( การแปลงข้อความ: พิมพ์ใหญ่; /* แต่ละคำขึ้นต้นด้วยอักษรตัวใหญ่ */ ) อนุสาวรีย์ทางวัฒนธรรมของยุคกลาง

ที่ราบลุ่มอเมซอนนั้นไม่ปานกลางสำหรับการขนส่งแมวและสุนัขขนาดเล็ก และ Hajos Bahia มีชื่อเสียงในด้านไวน์แดง

ผลลัพธ์ ตัวอย่างนี้แสดงในรูป 1.

ข้าว. 1. การใช้คุณสมบัติการแปลงข้อความ

วัตถุ.style.textTransform

ข้อมูลจำเพาะแต่ละอย่างต้องผ่านการอนุมัติหลายขั้นตอน

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

ให้คุณเปลี่ยนตัวพิมพ์ของตัวอักษรข้อความได้

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

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

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

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

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

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