เรียนรู้เพื่อปรับปรุงรูปลักษณ์ของเว็บไซต์ของคุณ
การเรียนรู้วิธีการจัดรูปแบบฟอร์มด้วย CSS เป็นวิธีที่ยอดเยี่ยมในการปรับปรุงรูปลักษณ์ของเว็บไซต์ของคุณ รูปแบบ HTML เป็นเนื้อหาที่น่าสนใจที่สุดในหน้าเว็บส่วนใหญ่ พวกเขามักจะน่าเบื่อและเป็นประโยชน์และไม่ให้มากในรูปแบบของ
ด้วย CSS ที่สามารถเปลี่ยนแปลงได้ การผสมผสาน CSS เข้ากับแท็กรูปแบบขั้นสูงสามารถนำเสนอรูปแบบที่น่าสนใจบางรูปแบบได้
เปลี่ยนสี
เช่นเดียวกับข้อความคุณสามารถเปลี่ยนสีพื้นหน้าและพื้นหลังขององค์ประกอบแบบฟอร์ม
วิธีง่ายๆในการเปลี่ยนสีพื้นหลังขององค์ประกอบของฟอร์มเกือบทุกแบบคือการใช้คุณสมบัติพื้นหลังสีบนแท็กอินพุต ตัวอย่างเช่นโค้ดนี้ใช้สีพื้นหลังสีน้ำเงิน (# 9cf) กับองค์ประกอบทั้งหมด
input {
สีพื้นหลัง: # 9cf;
สี: # 000;
}
หากต้องการเปลี่ยนสีพื้นหลังขององค์ประกอบของฟอร์มเพียงอย่างเดียวเพียงเพิ่ม textarea และเลือกสไตล์ ตัวอย่างเช่น:
input, textarea เลือก {
สีพื้นหลัง: # 9cf;
สี: # 000;
}
อย่าลืมเปลี่ยนสีของข้อความถ้าคุณทำให้สีพื้นหลังของคุณมืด สีที่คมชัด ช่วยให้องค์ประกอบของแบบฟอร์มชัดเจนยิ่งขึ้น ตัวอย่างเช่นข้อความบนพื้นหลังสีแดงเข้มจะอ่านได้ง่ายกว่าถ้าสีข้อความเป็นสีขาว ตัวอย่างเช่นโค้ดนี้วางข้อความสีขาวไว้บนพื้นหลังสีแดง
input, textarea เลือก {
สีพื้นหลัง: # c00;
สี: #fff;
}
คุณสามารถใส่สีพื้นหลังลงบนแท็กรูปแบบได้ โปรดจำไว้ว่าแท็กฟอร์มเป็น องค์ประกอบของบล็อก ดังนั้นสีจึงเต็มในสี่เหลี่ยมผืนผ้าทั้งหมดไม่ใช่เฉพาะตำแหน่งขององค์ประกอบ
คุณสามารถเพิ่มพื้นหลังสีเหลืองลงในองค์ประกอบของบล็อกเพื่อให้พื้นที่ดังกล่าวโดดเด่นเช่นนี้:
ฟอร์ม {
สีพื้นหลัง: #ffc;
}
เพิ่มเส้นขอบ
เช่นเดียวกับสีคุณสามารถเปลี่ยนเส้นขอบขององค์ประกอบแบบต่างๆได้ คุณสามารถเพิ่มเส้นขอบรอบรูปแบบทั้งหมดได้ อย่าลืมเพิ่ม padding หรือองค์ประกอบของฟอร์มของคุณจะติดขัดอยู่ติดกับเส้นขอบ
ต่อไปนี้คือตัวอย่างของรหัสสำหรับขอบสีดำ 1 พิกเซลที่มีการเบาะ 5 พิกเซล:
ฟอร์ม {
ชายแดน: 1px ของแข็ง # 000;
padding: 5px;
}
คุณสามารถใส่เส้นขอบได้มากกว่ารูปแบบเท่านั้น เปลี่ยนเส้นขอบของรายการนำเข้าเพื่อให้โดดเด่น:
input {
ชายแดน: 2px dashed # c00;
}
ระวังเมื่อคุณใส่เส้นขอบในช่องใส่เนื่องจากดูไม่เหมือนกล่องใส่แล้วและบางคนอาจไม่ทราบว่าสามารถกรอกข้อมูลในแบบฟอร์มได้
รวมคุณลักษณะของสไตล์
โดยการรวบรวมองค์ประกอบของฟอร์มด้วยความคิดและ CSS บางอย่างคุณสามารถตั้งค่ารูปแบบที่ดูดีเพื่อเติมเต็มการออกแบบและรูปแบบของไซต์ของคุณ