5.1 แอตทริบิวต์สไตล์ของแท็ก
และอีกสองสามสิ่งที่มีประโยชน์เกี่ยวกับ HTML เมื่อเว็บเริ่มได้รับความนิยมก็มีความต้องการมากขึ้นสำหรับเว็บเพจที่ออกแบบให้สวยงามหรือสวยงามมาก ปัญหานี้แก้ไขได้โดยใช้ style
รูปแบบทั่วไปของแอตทริบิวต์นี้มีรูปแบบดังต่อไปนี้:
<tag style="name=value;name2=value2;nameN=valueN">
ค่าแอตทริบิวต์ คั่นstyle
ด้วยเครื่องหมายอัฒภาค แสดงรายการ "สไตล์" ทั้งหมดที่จำเป็นต้องใช้กับแท็ก
สมมติว่าคุณต้องการแสดงรูปภาพเป็นสี่เหลี่ยมจัตุรัส100*100
และทำให้โปร่งใสครึ่งหนึ่ง ในการทำเช่นนี้คุณต้องเพิ่มสไตล์พิเศษ:
- ความกว้าง = 100px;
- ความสูง = 100px;
- ความทึบ = 0.5;
จากนั้นโค้ด HTML ที่มีรูปภาพนี้จะมีลักษณะดังนี้:
<img src="logo.png" style="width=100px;height=100px;opacity=0.5">
มีสไตล์เป็นร้อยเป็นพัน และนักพัฒนาเบราว์เซอร์ก็คิดค้นสิ่งใหม่ๆ อยู่ตลอดเวลา เป็นเรื่องดีที่คุณกำลังเรียนเพื่อเป็น Java Developer ไม่ใช่ Web Designer :)
5.2 สไตล์ CSS ยอดนิยม
ไม่น่าเป็นไปได้ที่คุณจะเขียนโค้ด HTML จำนวนมากหรือแก้ไขรูปแบบในชีวิตของคุณ แต่อะไรก็เกิดขึ้นได้ ตัวอย่างเช่น คุณกำลังเขียนหน้า HTML ขนาดเล็กสองสามหน้าเพื่อทดสอบไฟล์API
. ดังนั้นการรู้สไตล์พื้นฐานHTML
จึงมีประโยชน์
ด้านล่างนี้คือ 10 รายการที่พบบ่อยที่สุดสำหรับนักพัฒนาแบ็กเอนด์:
# | ชื่อ | ตัวอย่าง | คำอธิบาย |
---|---|---|---|
1 | ความกว้าง | ความกว้าง: 100px | ความกว้างขององค์ประกอบเป็นพิกเซล |
2 | ความสูง | ความสูง: 50% | ความสูงขององค์ประกอบเป็นเปอร์เซ็นต์ (ของความกว้างของพาเรนต์) |
3 | แสดง | จอแสดงผล: ไม่มี | องค์ประกอบการแสดงผล (ไม่แสดงองค์ประกอบ) |
4 | ทัศนวิสัย | การมองเห็น: ซ่อนเร้น | การมองเห็นองค์ประกอบ (องค์ประกอบถูกซ่อนไว้ แต่พื้นที่สงวนไว้สำหรับองค์ประกอบนั้น) |
5 | สี | สี: แดง; | สีข้อความ |
6 | สีพื้นหลัง | สีพื้นหลัง: ควัน | สีพื้นหลัง |
7 | ชายแดน | เส้นขอบ: 1px สีดำทึบ; | เส้นขอบ (กว้าง 1px, สีดำ, เส้นทึบ) |
8 | แบบอักษร | ตัวอักษร: verdana 10pt | ตัวอักษร: verdana ขนาด 10pt |
9 | จัดข้อความ | จัดข้อความ: กึ่งกลาง; | การจัดตำแหน่งข้อความในแนวนอน |
10 | ขอบ | ขอบ:2px | ช่องว่างนอกองค์ประกอบ |
คุณไม่จำเป็นต้องจำแท็กเหล่านี้ ทุกอย่างอยู่บนอินเทอร์เน็ต นอกจากนี้ "สไตล์" แต่ละรายการยังมีชุดของค่าที่ถูกต้องและรูปแบบของตัวเองสำหรับอธิบายค่า ดูอย่างน้อยที่border
หรือfont
.
GO TO FULL VERSION