สไตล์การเขียนโปรแกรมก็เหมือนกับบุคลิกของแต่ละคน โปรแกรมเมอร์ (นักออกแบบ) ต่างคนต่างมีสไตล์การเขียนที่แตกต่างกันออกไป ยกตัวอย่างธีม WordPress เราอาจต้องการใช้ไฟล์ธีมที่มีรูปแบบโค้ดที่ดีและสอดคล้องกับรสนิยมของเรา แล้วเราจะทำอย่างไรเมื่อต้องศึกษาไฟล์ CSS ที่ยุ่งเหยิงและอ่านยากเหล่านั้น? คุณสามารถใช้ "Styleneat" เพื่อจัดระเบียบและสร้างตัวเลือก CSS ตัวเลือกย่อย และคุณสมบัติตามโครงสร้างแบบเรียงซ้อน ซึ่งจะทำให้ไฟล์ CSS เป็นระเบียบและอ่านง่ายขึ้น กำหนดเค้าโครงหน้าและดูความสัมพันธ์ระหว่างโครงสร้างต่างๆ ได้ง่ายขึ้น
บริการจัดรูปแบบโครงสร้างไฟล์ CSS "
Styleneat " สามารถจัดระเบียบไฟล์ CSS ด้วยรูปแบบการเขียนที่ยุ่งเหยิงให้เป็นโครงสร้างแบบเรียงซ้อนเพื่ออำนวยความสะดวกในการอ่านและการค้นคว้าของคุณ มันเป็นเครื่องมือออนไลน์ที่ใช้งานได้จริง
คุณสามารถใช้งานได้สามวิธี: 1. วางโค้ดโดยตรง 2. อัปโหลดไฟล์ CSS 3. ป้อนที่อยู่ของไฟล์ CSS นอกจากนี้ยังมีการตั้งค่าตัวเลือกบางอย่าง: การเรียงลำดับตัวอักษรตามคุณสมบัติ CSS และตัวเลือก การจัดระเบียบ CSS ที่นำเข้าใหม่ การเปิดโหมดการปรับโครงสร้างใหม่ที่ปลอดภัย
มาดูผลการใช้งานกัน:
รหัสต้นฉบับ:
ตัวอย่างซอร์สโค้ด
[www.downcodes.com]
#menubar .เมนู {
พื้นหลัง:#E9EEF1;
ลอย:ซ้าย;
การขยาย:0 10px;
-
#menubar .menus li {
ลอย:ซ้าย;
สไตล์เส้นขอบ: ทึบ;
ขอบสี:#FFF;
เส้นขอบกว้าง:0 1px;
ขอบซ้าย:-1px;
รายการสไตล์ประเภท: ไม่มี;
-
#menubar .menus li a { จอแสดงผล: บล็อก; ตกแต่งข้อความ: ไม่มี; ช่องว่างภายใน: 5px 10px;}
#menubar .menus li a:hover {
พื้นหลัง:#EEDDCC;
รายการสไตล์ประเภท: ไม่มี;
-
#menubar .menus .current_page_item {
พื้นหลัง:#FFF;
แบบอักษรน้ำหนัก: ตัวหนา;
-
#menubar .menus li.current_page_item a:hover {
พื้นหลัง:#FFF;
-
รหัสที่ปรับโครงสร้างใหม่:
ตัวอย่างซอร์สโค้ด
[www.downcodes.com]
#menubar .เมนู {
พื้นหลัง:#E9EEF1;
ลอย:ซ้าย;
การขยาย:0 10px; }
#menubar .menus li {
ลอย:ซ้าย;
สไตล์เส้นขอบ: ทึบ;
ขอบสี:#FFF;
เส้นขอบกว้าง:0 1px;
ขอบซ้าย:-1px;
รายการสไตล์ประเภท: ไม่มี; }
#menubar .menus li {
จอแสดงผล: บล็อก;
การตกแต่งข้อความ: ไม่มี;
การขยาย:5px 10px;
#menubar .menus li a:hover {
พื้นหลัง:#EEDDCC;
รายการสไตล์ประเภท: ไม่มี; }
#menubar .menus .current_page_item {
พื้นหลัง:#FFF;
แบบอักษรน้ำหนัก: ตัวหนา; }
#menubar .menus li.current_page_item a:hover { พื้นหลัง:#FFF;
