11 บรรณาธิการ CSS ยอดนิยม - สอบทานแล้ว

1. Stylizer

เข้ากันได้: ของ windowsคุณสมบัติที่โดดเด่น: ตารางรหัสจับขนาดบูลส์อายระบายสีสองคลิก

Stylizer เป็นเครื่องมือแก้ไข CSS ที่ไม่เหมือนใคร การแก้ไข CSS ตามเวลาจริง. คุณสามารถป้อนที่อยู่เว็บลงในเบราว์เซอร์ในตัวที่รองรับ Firefox 3.5 และ IE7 และจะมีกฎ CSS ที่เกี่ยวข้องทั้งหมดโหลดขึ้นมาให้คุณแก้ไขด้วยอินเทอร์เฟซแบบชี้และคลิกที่คุ้นเคย.

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

กับ Stylizer เป็นไปไม่ได้ที่จะทำผิด CSS เพราะมันจะ จำกัด ให้คุณใส่ค่าใด ๆ ที่เข้ากันไม่ได้กับคุณสมบัติ CSS ที่เกี่ยวข้อง อย่างไรก็ตามซอฟต์แวร์อาจล้มเหลวในการโหลดไฟล์ CSS บางครั้งเนื่องจากข้อผิดพลาดร้ายแรงที่ไม่สามารถอธิบายได้.

Stylizer มาพร้อมกับรุ่น Basic และ Ultimate ในขณะที่รุ่นพื้นฐานไม่มีค่าใช้จ่าย แต่รุ่น Ultimate มีให้คุณใช้งานเป็นเวลา 14 วันหลังจากการติดตั้งจากนั้นจะเสนอราคา $ 85 ให้คุณใช้คุณลักษณะขั้นสูงต่อไปเช่น Bullseye.

2. TopStyle

เข้ากันได้: ของ windowsคุณสมบัติที่โดดเด่น: สารวัตรสไตล์, กวาดสไตล์, CSS เรียบร้อย

ตัวแก้ไข CSS TopStyle เริ่มทำให้คุณประหลาดใจด้วยการกำหนดค่าครั้งแรกเมื่อคุณสามารถเลือกคำจำกัดความของสไตล์ที่แสดงเฉพาะคุณสมบัติและค่าที่สนับสนุนโดย Firefox, Internet Explorer, Safari หรือแม้แต่ iPhone OS 2.0 ซึ่งเป็นประโยชน์ในทางปฏิบัติข้ามแพลตฟอร์ม นักออกแบบเว็บไซต์.

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

อีกสิ่งที่ดีเกี่ยวกับ TopStyle มันแสดงให้เห็นถึงความเข้ากันได้ของเบราว์เซอร์ภายใต้ตัวตรวจสอบสไตล์ซึ่งคุณสามารถเห็นได้ว่าคุณสมบัติ CSS ได้รับการสนับสนุนอย่างเต็มที่จากเว็บเบราว์เซอร์บางเวอร์ชันเช่น Internet Explorer 7 หรือเป็นรถบั๊ก.

ตัวแก้ไขมาเป็นรุ่นทดลองพร้อมฟีเจอร์ที่ จำกัด และคุณสามารถปลดล็อกศักยภาพทั้งหมดได้ $ 79.95.

3. สไตล์มาสเตอร์

เข้ากันได้: Windows, Mac OS Xคุณสมบัติที่โดดเด่น: เทมเพลตสไตล์ชีท

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

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

คุณสามารถเพลิดเพลินกับซอฟต์แวร์ที่มีคุณสมบัติครบถ้วนเป็นเวลา 30 วันและชำระเงิน $ 59.99 หรือ $ 29.99 สำหรับใบอนุญาตการศึกษาเพื่อเปิดศักยภาพเต็มรูปแบบอีกครั้ง.

4. ขอบเขต Xyle

เข้ากันได้: Macคุณสมบัติที่โดดเด่น: โหมดการเลือก, กลุ่มอัจฉริยะ, การผสานรวมโปรแกรมแก้ไขข้อความ

ขอบเขตของ Xyle คือ ต้องมีโปรแกรมแก้ไข CSS ฟรีสำหรับ Mac, เนื่องจากมันเป็นโปรแกรมแก้ไข CSS มืออาชีพอย่างแท้จริงที่ช่วยให้คุณท่องเว็บไซต์ในขณะที่ปรับแต่ง CSS ของมันภายในตัวแก้ไขโดยตรง.

เบราว์เซอร์ของ Xyle มาพร้อมกับโหมดเบราว์เซอร์ปกติและโหมดการเลือกที่ใช้งานได้คล้ายกับปลั๊กอิน Firefox, Firebug ที่ให้การดูและแก้ไขแหล่ง CSS ยกเว้นว่าตัวแก้ไขอนุญาตให้คุณบันทึกค่า CSS ที่แก้ไขในตำแหน่งเดิม.

ใช้ 'กลุ่มสมาร์ทคุณลักษณะ 'คุณสามารถกรองกฎทั้งหมดที่มีผลต่อวิธีการแสดงลิงก์หรือผู้ที่รับผิดชอบเค้าโครงคุณสามารถ จำกัด ผลลัพธ์ด้วยฟังก์ชันการค้นหาในตัวไม่มีวิธีการทดลองและข้อผิดพลาดอีกต่อไป!

ขอบเขต Xyle นอกจากนี้ยังมีการผสานรวมกับโปรแกรมแก้ไขข้อความภายนอกเช่น BBEdit เพื่อการเขียนโค้ดที่สะดวกและประหยัดพลังงานเพียงแค่ทำการเปลี่ยนแปลงและเครื่องมือแก้ไขข้อความหรือ Xyle Scope จะอัพเดตการเปลี่ยนแปลงทั้งหมดโดยอัตโนมัติสำหรับคุณ.

5. CSS ด่วน

เข้ากันได้: ของ windowsคุณสมบัติที่โดดเด่น: เครื่องมือเน้นไวยากรณ์, การสร้างโค้ด, การจัดรูปแบบ CSS

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

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

บรรณาธิการมาพร้อมกับระยะเวลาการประเมิน 30 วันพร้อมการใช้งาน 30 ครั้งคุณสามารถไปดูเวอร์ชั่นเต็มได้ $ 29.85.

6. สตูดิโอสไตล์

เข้ากันได้: ของ windowsคุณสมบัติที่โดดเด่น: ตัวช่วยสร้าง CSS, IntelliStyle

ความสวยงามหลักของ Style Studio นั้นอยู่ในฟีเจอร์ CSS Wizard ซึ่งทำงานเพื่อให้เอฟเฟกต์ CSS ได้ในทันทีโดยมีจุดและคลิกไม่กี่จุด.

ตัวอย่างเช่นคุณสามารถเลือกวิซาร์ดฟอนต์จากนั้นเลือกตระกูลฟอนต์และตั้งค่าขนาดฟอนต์จากนั้นเลือกสไตล์ฟอนต์น้ำหนักตัวแปร ... และบูม! กฎจะถูกแทรกลงในสไตล์ชีทเป็นรหัส CSS ที่ผ่านการตรวจสอบอย่างสมบูรณ์.

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

ข้อเสียของเครื่องมือแก้ไขนี้คือการรองรับการกำหนดสไตล์ของเบราว์เซอร์ที่ล้าสมัยเนื่องจากรองรับเฉพาะ IE6 เท่านั้นและไม่มี Firefox.

คุณได้รับ 30 วันเพื่อเพลิดเพลินกับซอฟต์แวร์และ $ 49.99 เพื่อซื้อ.

7. CSSEdit

เข้ากันได้: Macคุณสมบัติที่โดดเด่น: X-ray Inspector, Visual Editor, ตัวเลือกตัวสร้าง

ออกแบบเว็บไซต์ที่สวยงามล้ำสมัยและโหลดเร็วด้วยแอปที่สวยงามล้ำสมัยและรวดเร็ว CSSEdit by MacRabbit. จากคุณสมบัติเช่น Selector Builder จนถึงสภาพแวดล้อมอัจฉริยะแหล่ง CSSEdit ได้รับการออกแบบสำหรับความเชี่ยวชาญในทุกระดับ.

ด้วยเครื่องมือแก้ไขที่มีความประณีตสูงเช่นนี้คุณคาดว่าจะเห็นการเปลี่ยนแปลงสไตล์ชีท CSS ของคุณปรากฏในแบบเรียลไทม์โดยไม่ต้องเหนื่อยกับการอัปโหลดรีเฟรช เครื่องตรวจ X-ray นั้นถูกสร้างขึ้นเพื่อใช้ในการวินิจฉัยรหัส CSS จากส่วนหนึ่งของเว็บไซต์.

ส่วนนวัตกรรมของ CSSEdit อาจเป็น เครื่องมือสร้างตัวเลือก ที่ช่วยให้คุณอธิบายสไตล์ CSS ของคุณด้วยภาษาอังกฤษธรรมดา ๆ ไม่สนใจผู้เชี่ยวชาญมากนัก แต่มีประโยชน์สำหรับผู้เริ่มต้นอย่างแน่นอน.

รุ่นสาธิต จำกัด ให้คุณบันทึกไฟล์ที่มีอักขระน้อยกว่า 2,500 ตัวในขณะที่คุณสามารถจ่าย $ 39.95 เพื่อกำจัดข้อ จำกัด ทั้งหมด.

8. โปรแกรมแก้ไข CSS EngInSite

เข้ากันได้: ของ windowsคุณสมบัติที่โดดเด่น: เครื่องมือวัดในโหมดดูตัวอย่าง

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

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

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

9. Stylesheet Maker

เข้ากันได้: ของ windowsคุณสมบัติที่โดดเด่น: แท็ก CSS

Stylesheet Maker เป็นอีกหนึ่งเครื่องมือแก้ไข CSS มาตรฐานที่นำเสนอพื้นผิวการเข้ารหัสที่ชัดเจนพร้อมแผงควบคุมไฟล์และเครื่องมือ CSS ที่มีประโยชน์บางอย่างเพื่อช่วยในการตั้งค่าแบบอักษรสีขอบระยะขอบ ฯลฯ.

เมื่อเทียบกับบรรณาธิการ CSS หลายคนชอบ CSS อย่างรวดเร็ว หรือ สตูดิโอสไตล์, Maker มีคุณสมบัติที่น้อยกว่า แต่มีส่วนต่อประสานที่สะอาดและดีสำหรับผู้เริ่มต้นที่ไม่ต้องการทำให้ซับซ้อนหรือนินจา CSS ที่ต้องการทุกอย่างเรียบง่ายและสะดวกสบาย.

แม้ว่าตัวแก้ไขนี้ออกแบบมาสำหรับผู้ใช้ระดับกลาง แต่คุณสมบัติแท็ก CSS สามารถช่วยคุณสร้างกฎ CSS พร้อมแท็กได้ด้วยการคลิก.

มีค่าใช้จ่าย $ 34 ในการเป็นเจ้าของโปรแกรมแก้ไขนี้หรือคุณสามารถซื้อด้วยซอฟต์แวร์ CoffeeCup อื่น ๆ เป็นการซื้อแบบกลุ่ม.

10. Arduo CSS

เข้ากันได้: ของ windowsคุณสมบัติที่โดดเด่น: โหนด CSSTidy

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

สำหรับผู้ที่รู้สึกว่าสไตล์ชีทของคุณนั้นหนักเกินไปเครื่องมือ CSSTidy จากบรรณาธิการสามารถช่วยคุณปรับแต่งสไตล์ชีทและลบโค้ดที่ไม่จำเป็นออกทั้งหมด.

ตัวแก้ไขสามารถใช้ได้อย่างอิสระบนเว็บไซต์ทางการ.

11. CSS อย่างง่าย

เข้ากันได้: Windows, Mac OS Xคุณสมบัติที่โดดเด่น: การนำเข้าไฟล์ CSS, ส่วนต่อประสานจุดและคลิก, ฐานข้อมูลตัวอักษรเพิ่มเติม

Simple CSS เป็นชื่อของมันมีทุกสิ่งที่นักออกแบบต้องการสำหรับการแก้ไข CSS อย่างง่าย คุณสามารถนำเข้าไฟล์ CSS ลงในโปรแกรมแก้ไขและแก้ไขได้ด้วยการคลิกเพียงไม่กี่ครั้งตรวจสอบผลลัพธ์ในพาเนลตัวอย่างและนำซอร์สโค้ดออกทันที.

แม้ว่าคุณสามารถนำเข้าเกือบทุกไฟล์ CSS ลงในโปรแกรมแก้ไขได้ แต่คุณสามารถดู 1 CSS กฎพร้อมกันได้ในคลิกเดียวและบางครั้งการนำเข้าของคุณอาจทำให้เกิดข้อผิดพลาดเนื่องจากข้อ จำกัด เช่นไม่มีการสนับสนุน @rules ตัวแก้ไขเองก็ไม่ยืดหยุ่นเหมือนคุณสามารถเลือก 'อัตโนมัติ' หรือ 'รับช่วง' สำหรับคุณสมบัติดัชนี z แต่ไม่ให้ค่าคุณสมบัติโดยตรง.

อย่างไรก็ตามมันฟรีและมีประโยชน์สำหรับนักออกแบบที่ต้องการการแก้ไขอย่างรวดเร็ว.

โบนัส: บรรณาธิการและเครื่องมือเพิ่มเติม

ในขณะที่พวกเขาไม่ได้เป็นบรรณาธิการ CSS แน่นอนเครื่องมือต่อไปนี้เป็นสิ่งที่คุณอาจต้องการเมื่อมันมาถึงการแก้ไข CSS.

Firebug

เครื่องมือพัฒนาเว็บไซต์ยอดนิยมและทรงพลังซึ่งตรวจสอบ HTML ปรับเปลี่ยนสไตล์ CSS และดูการเปลี่ยนแปลงแบบเรียลไทม์เป็นปลั๊กอินสำหรับเว็บเบราว์เซอร์ Firefox.

การใช้ CSS

ส่วนขยายสำหรับ Firebug ที่ให้คุณสแกนหลาย ๆ หน้าของเว็บไซต์เพื่อดูว่ามีการใช้กฎ CSS ใดในไซต์ของคุณ.

นักพัฒนาเว็บ

ส่วนขยายของ Firefox ให้คุณทำสิ่งต่างๆมากมายเช่นดูแหล่ง CSS หรือปิดการใช้งานสไตล์ชีท CSS สำหรับการออกแบบหรือการพัฒนา.

Notepad++

ตัวแก้ไขซอร์สโค้ดฟรีและการแทนที่ Notepad ที่รองรับหลายภาษารวมถึง CSS มีคุณสมบัติเช่น Function Completion เพื่อช่วยสร้างการออกแบบ CSS ของคุณ.

Coda

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

NetBeans IDE

สภาพแวดล้อมการพัฒนาแบบบูรณาการโอเพ่นซอร์สและเป็นมืออาชีพพร้อมการอ้างอิง CSS ที่สมบูรณ์แบบที่สุดในคุณสมบัติการทำให้โค้ดสมบูรณ์.

Aptana Studio

สภาพแวดล้อมการพัฒนาเว็บไซต์ที่สมบูรณ์ซึ่งรวมเครื่องมือการเขียนที่มีประสิทธิภาพสำหรับ HTML, CSS และ JavaScript ปัจจุบันรองรับ HTML5 และ CSS3.

WebStorm

IDE ของ JetBrain ที่ใช้การเติมข้อมูลอัตโนมัติที่เกี่ยวข้องสำหรับทุกอย่างรวมถึง CSS คุณยังสามารถรับการแจ้งเตือนเกี่ยวกับปัญหา CSS ได้ทันที.