คลิกที่นี่เพื่อกลับไปที่คอลัมน์การสอน Wulin.com HTML หากคุณต้องการเรียกดูบทช่วยสอน CSS โปรดคลิกที่นี่
ด้านบน: เลย์เอาต์ภาษามาร์กอัป CSS บทที่ 13 ระบุสไตล์สำหรับข้อความ
ฉันคิดว่ามันเป็นความคิดที่ดีที่จะหารือเกี่ยวกับการใช้ CSS เพื่อกำหนดรูปแบบข้อความในบท โดยทั่วไปการประมวลผลเนื้อหาข้อความอาจเป็นสถานที่ที่ CSS ใช้มากที่สุดแม้สำหรับเว็บไซต์ที่ไม่สอดคล้องกับมาตรฐานอย่างเต็มที่ ลบแท็กที่เกิดขึ้นซ้ำ ๆ บนหน้าเว็บนั้นครั้งหนึ่ง (และตอนนี้) น่าสนใจสำหรับนักออกแบบและไม่ยากที่จะเห็นข้อได้เปรียบอย่างมากของการใช้ CSS เพื่อควบคุมการพิมพ์ข้อความนั่นคือการแยกเนื้อหาและวิธีการแสดงผลเพิ่มเติม
จากตัวอย่างก่อนหน้ามากมายเรารู้ว่า CSS สามารถจัดการกับสถานการณ์ต่าง ๆ ได้มากมายและการตั้งค่าสไตล์ข้อความเป็นวิธีที่ง่ายที่สุดในการเพิ่มองค์ประกอบการออกแบบสำหรับหน้าเว็บพื้นฐานที่สุด ในเวลาเดียวกันการเพิ่ม CSS ลงในข้อความยังสามารถป้องกันไม่ให้เราเพิ่มรูปภาพที่ไม่จำเป็นในหน้า
ในบทนี้เราจะเห็นว่า CSS ใช้ข้อความที่น่าเบื่อและสามัญไปยังความสูงอื่น (ในสีใหม่ขนาดและฟอนต์) วิธีทำให้ไฮเปอร์เท็กซ์ดูเย็นลง?
การระบุรูปแบบข้อความเป็นหนึ่งในงานที่ดีที่สุด CSS นั้นดีแม้ว่าจะต้องเผชิญกับเบราว์เซอร์ที่เก่ากว่าเล็กน้อยและรองรับฟังก์ชั่นขั้นสูง CSS ไม่สมบูรณ์ ในอดีตนักออกแบบและนักพัฒนาอาจต้องการสร้างหน้าเว็บที่ทนไม่ได้และยากที่จะใช้ตามมาตรฐานของวันนี้เมื่อออกแบบข้อความเพื่อให้ได้ขนาดและเอฟเฟกต์ตัวหนา (คุณเคยเห็นหน้าเว็บที่ข้อความส่วนใหญ่แสดงด้วยภาพหรือไม่
เพื่อให้คุณมีทางเลือกบางอย่างในการใช้รูปภาพและตอบคำถามข้างต้นในบทนี้คุณจะเริ่มต้นด้วยย่อหน้าของข้อความที่ยังไม่ได้รับการออกแบบและค่อยๆเพิ่มกฎ CSS ต่างๆลงไป เวลาที่เปลี่ยนแปลงตลอดเวลา
เริ่มต้นด้วยการดูข้อความที่จะประมวลผลในแบบอักษรที่ตั้งไว้ล่วงหน้าของเบราว์เซอร์ ในกรณีของฉันตัวอักษรที่ตั้งไว้ล่วงหน้าคือ 16 พิกเซลครั้ง ใช้เบราว์เซอร์ Safari บน Mac OS X. ด้วยเหตุนี้ข้อความที่คุณเห็นจะถูกอธิบายในลักษณะต่อต้านนามแฝง หากคุณใช้ Windows XP และเริ่ม ClearType คุณสามารถเห็นเอฟเฟกต์ที่คล้ายกัน
เวลา (หรือตัวแปร Times New Roman) เป็นฟอนต์ที่ตั้งไว้ล่วงหน้าสำหรับเบราว์เซอร์จำนวนมากอย่างไรก็ตามสิ่งนี้เปลี่ยนไปได้ง่ายโดยผู้ใช้เป็นแบบอักษรที่ชื่นชอบของตัวเองดังนั้นคุณจึงไม่สามารถพึ่งพาค่าที่ตั้งไว้ล่วงหน้านี้ได้อย่างแน่นอน
รูปที่ 1301 แสดงเนื้อหาข้อความที่เราใช้ในบทนี้ที่ยังไม่ได้เพิ่มด้วยสไตล์: ชื่อง่าย ๆ ที่ทำเครื่องหมายด้วย <H1> และนี่คือเคล็ดลับสามประการสำหรับการตกแต่งบ้าน
รูปที่ 13-1 เบราว์เซอร์แสดงชื่อและเอฟเฟกต์ที่ตั้งไว้ล่วงหน้าของข้อความจะเปลี่ยนความสูงของเส้น
หนึ่งในเอฟเฟกต์สไตล์ข้อความที่ง่ายที่สุดและมีประสิทธิภาพมากที่สุดคือแอตทริบิวต์ความสูงของเส้น การเพิ่มพื้นที่พิเศษระหว่างแต่ละบรรทัดของข้อความสามารถทำให้ย่อหน้าข้อความอ่านง่ายขึ้นน่าดึงดูดยิ่งขึ้นและนำเอฟเฟกต์ที่ยอดเยี่ยมมาสู่หน้าของคุณ
คุณสามารถทำเทคนิคนี้ให้สมบูรณ์โดยการเพิ่มกฎ CSS ต่อไปนี้ลงในแท็ก <body> แน่นอนคุณสามารถเพิ่มกฎนี้ลงในแท็กอื่น ๆ เช่นเพียงแค่ต้องการเปลี่ยนความสูงของบรรทัดของ <p>
ร่างกาย {
ความสูงของสาย: 1.5EM;
-
ความหมายของรหัสนี้คือ: ความสูงของบรรทัดของข้อความบนหน้าควรมีความสูง 1.5 เท่าของข้อความ ฉันชอบใช้หน่วย EM เมื่อระบุความสูงของสายเพราะพวกเขาจะเปลี่ยนไปตามขนาดตัวอักษร
รูปที่ 13-2 แสดงเอฟเฟกต์หลังจากเพิ่มความสูงของบรรทัด
รูปที่ 13-2 เอฟเฟกต์หลังข้อความที่ตั้งไว้ล่วงหน้าและความสูงของเส้น
มันดูดีและผลลัพธ์ที่ความสูงของเส้นเล็ก ๆ สามารถบรรลุได้นั้นน่าทึ่งมาก
หน้า ก่อนหน้า 1 2 3 4 5 หน้าถัดไปอ่านข้อความเต็ม