Editor vizual css în rusă. Cum lucrează? Sunt editorii de cod cu adevărat importanți?

Anterior, când nu exista CSS, designerul trebuia să atribuie manual o etichetă fiecărui titlu . A fost foarte dureros și apoi a apărut CSS, care a făcut viața mult mai ușoară pentru web designeri. CSS vă permite să definiți toate stilurile pentru site-ul dvs. într-un singur fișier (sau mai multe, la discreția dvs.). Acest lucru economisește timp și face codul mai flexibil.

Dar de ce avem nevoie de editori CSS? Fiecare introducere tehnologie nouă are două fețe ale monedei, în CSS acest lucru se reflectă în suportul unor proprietăți CSS în browserele IE. Și astfel, designerul web trebuie să găsească un hack pentru a repara afișajul în browserele IE.

Editorii CSS vă ajută să scrieți codul mai rapid și să evitați multe greșeli.

1. STILISANT

STYLIZER este un editor CSS care vă permite să editați CSS și să vedeți modificările în timp real. Puteți introduce pur și simplu adresa unei pagini web și în stânga veți vedea pagina web, iar în dreapta este codul CSS pe care îl puteți modifica și modificările vor fi vizibile în stânga. Îl puteți schimba manual specificând proprietățile sau folosind butoanele editorului WYSIWYG.

De asemenea, puteți schimba dinamic culoarea textului. Când schimbați culoarea, un spectru de culoare apare similar cu cel găsit în Adobe Photoshop.

Este imposibil să faceți o greșeală în acest editor, deoarece aici editorul însuși va verifica valorile pe care le introduceți.

2.TopStyle

Editorul TopStyle arată stiluri acceptate de browserele Firefox, IE, Safari și chiar iOS 2.0. Această ocazie poate fi utilizat în dezvoltarea de design multi-platformă.

Unul dintre funcții utile Acest editor este Inspector, care vă permite să adăugați proprietăți CSS cu un singur clic, ceea ce va economisi timp și efort în timpul unei codări lungi și plictisitoare.

Acest editor vă permite, de asemenea, să vedeți compatibilitatea proprietăților CSS în browser, ceea ce este foarte util atunci când scrieți cod pentru browserul IE.

3. Maestru de stil

Potrivit dezvoltatorului, Style Master este un editor care poate fi folosit la orice nivel de cunoștințe CSS. Programul poate folosi nu doar un editor WYSIWYG, ci și să scrie cod manual (ar fi foarte ciudat dacă nu ar fi așa :)), cu evidențierea fiecărei proprietăți, pentru dezvoltatorii mai experimentați.

Poate cel mai mare avantaj al acestui editor este - șabloane gata făcute stiluri. Are aproximativ 20 de șabloane, organizate corespunzător, care fac să vă stilați site-ul web rapid și ușor.

4. Editor rapid CSS

Rapid CSS Editor este un program convenabil, ușor de personalizat pentru editarea fișierelor CSS. Are un editor de text cu evidențierea sintaxelor, completarea codului și altele.

Cu acest editor vă puteți formata foaia de stil după cum doriți. Validatorul de cod încorporat nu numai că va păstra foaia de stil curată, dar va proteja și împotriva erorilor CSS.

5.CSSEdit 3

Voi spune imediat că acest editor acceptă doar sistemul de operare MAC. Editorul are Design frumos, dar nu este destinat utilizatorilor începători. Editorul de date vă permite, de asemenea, să vedeți modificările dinamic, în timp real.

O caracteristică interesantă a acestui editor este că puteți descrie o proprietate în limba engleză simplă (Selector Builder a fost creat pentru aceasta). Pentru un începător, această caracteristică va fi destul de interesantă.

6. Editor CSS EngInSite

Dacă sunteți un web designer serios, căruia îi pasă să scrie corect CSS, să plaseze corect proprietățile, vă va plăcea acest editor.

În acest editor, puteți adăuga o clasă sau un identificator folosind funcții încorporate și există, de asemenea, posibilitatea de a converti culoarea din HEX (format hexazecimal) în RGB, ceea ce este rar pentru editori.

Editorul are și o funcție de completare a codului.

7. Stylish Maker

Un editor CSS standard care vă permite să setați font, culoare, margine, chenar și alte proprietăți.

În comparație cu editorul Rapid CSS, are mai puține funcții, dar interfață clară, ceea ce este important pentru începătorii care sunt imediat intimidați set mare funcții.

8. CSS simplu

Simple CSS este, de asemenea, un editor simplu de foi de stil. Este gratis. Puteți lucra la mai multe proiecte simultan. Există o funcție de previzualizare care va arăta cum va arăta o clasă sau un identificator după ce au fost făcute modificări.

De fapt, editorii CSS sunt adesea considerați inutile și exagerați - la urma urmei, puteți face același lucru în editorul de text preferat. Uneori, acest lucru este adevărat - deși există niște editori HTML foarte proasți, care sunt chiar mai rele decât editorii CSS.

Dar editorii CSS pot fi, de asemenea, folositori și pot fi utilizați eficient de către dezvoltatori cu diferite abilități. Profesioniștii web pot folosi editorul CSS pentru a-și îmbunătăți fluxul de lucru și pentru a obține toate instrumentele CSS utile într-un singur pachet. Începătorii pot învăța cu ușurință CSS analizând stilurile și folosind editarea live pentru a înțelege cum este construit un design și ce se întâmplă cu adevărat în culise. În orice caz, ar trebui să vă asigurați că știți ce faceți, astfel încât să nu ajungeți să produceți cod murdar.

De ce am nevoie de un editor CSS?

Ei bine, de fapt nu ai nevoie de unul. Dar îl puteți folosi pentru a vă eficientiza fluxul de lucru. Principalul avantaj al editorilor CSS este mediul de dezvoltare cuprinzător pe care îl oferă dezvoltatorilor web. Sarcina principală a editorului CSS este de a combina eficient funcțiile de editare a stilurilor CSS, a surselor HTML și a aspectului site-ului în interfață compactă. Cu toate acestea, editorii CSS merg adesea și mai departe.

Pe lângă o funcționalitate bună de codare, editorii CSS oferă instrumente de depanare și testare, precum și funcții utile, cum ar fi editarea live, previzualizarea încrucișată, formatarea codului, validarea, ajutorul CSS încorporat și instrumentele de gestionare a proiectelor. Combinarea acestor caracteristici vă oferă un arsenal de instrumente utile.

Unele editori vă permit, de asemenea, să separați părți ale codului în foldere separateși stiluri de filtrare, ceea ce simplifică munca și face sursă mai simplu și mai clar. O altă caracteristică utilă este vizualizarea instantanee a foii de stil în Internet Explorer sau FireFox, care este greu de găsit în orice editor HTML standard. În plus, cu ajutorul editorilor CSS, puteți analiza cu ușurință erorile din cod folosind inspectorul de cod și puteți analiza stiluri folosind așa-numita funcție „X-Ray”.

Pe scurt, principalul avantaj al unui editor CSS este că oferă un mediu cuprinzător și compact pentru lucrul cu designul CSS și vă permite să codificați rapid și eficient.
Deci, ce editori CSS avem la dispoziție?

Xyle

Xyle (Mac)
Acest editor avansat permite dezvoltatorilor să editeze site-uri web din mers folosind stiluri încorporate. Puteți schimba codul CSS și modificările vor apărea direct în fereastra browserului. În comparație cu bara de instrumente Web-Developer, cu Xyle aveți funcții utile, cum ar fi vizualizarea în arbore a selectoarelor, evidențierea sintaxelor și gestionarea avansată a fișierelor.

În modul browser, puteți vizualiza site-uri web folosind motorul Safari. În modul Selecție, făcând clic pe orice parte a paginii web, se afișează codul sursă HTML și CSS al fragmentului selectat.
În modul Cascade, Xylescope afișează nu numai stilurile care sunt aplicate în prezent elementului selectat, ci și toate regulile care se aplică strămoșilor elementului selectat. La depanare cu
Folosind Xylescope, puteți selecta pur și simplu elementul „problema” în modul Cascade pentru a vedea ce stiluri sunt aplicate efectiv și care sunt suprascrise, inclusiv cele aplicate strămoșilor a acestui element. Xylescope afișează selectoare specifice și indică stilurile care au prioritate. Xylescope oferă, de asemenea, integrare cu editori de text precum BBEdit.

Preț: 19,95 USD. Versiune de încercare disponibilă. Soluție grozavă fără funcții suplimentare, precum validarea, optimizarea, la prețul optim.
Unele dintre caracteristicile lui Xyle
* Formatare automată
* Potrivirea selectorului
* Filtrați fișiere CSS mari folosind grupuri inteligente
* Vizualizator DTD încorporat

Stilizator
Stilizator (Windows)
Două lucruri fac ca Stylizer să fie puțin diferit: folosește o interfață grilă în loc de un editor de text și este încorporat în Firefox și IE, așa că atunci când utilizatorul schimbă CSS-ul, acesta este aplicat imediat în browser. Sistemul de grilă face ca CSS să se simtă ca „CSS pe șine”, deoarece face imposibil ca CSS să facă greșeli. Acesta permite lui Stylizer să facă lucruri similare cu inspectorul de elemente din Firebug.


În Stylizer, valorile pot fi ajustate din mers. Pentru a schimba înălțimea, umplutura sau poziția de fundal, utilizatorul poate face clic literal pe valoare, editând elementul în timp real. Culorile sunt de asemenea aceleasi. Utilizatorul poate face clic pe ele, trage cu mouse-ul și poate vizualiza culoarea textului, fundalului sau marginii în browser, în timp real, creând o experiență „Photoshop pentru web”. Stylizer Basic este gratuit. Versiunea completa(Preț: 69,95 USD) nu este mult diferit, însă în versiune gratuită Nu este posibil să filtrați o foaie de stil pentru a afișa numai stiluri cu conținut specific.

Editor rapid CSS

Editor rapid CSS (Win)
Acest editor acceptă evidențierea sintaxelor, completarea automată și un inspector de cod care se asigură că codul produs este corect. Puteți utiliza ajutorul CSS și HTML încorporat pentru a căuta rapid sintaxa și atributele bazate pe selectori sau etichete. Paleta permite designerilor să selecteze o culoare și să vadă rezultatul „în direct” utilizând previzualizarea foii de stil pentru Internet Explorer și Firefox. Manager de fișiere se poate ocupa și de încărcarea fișierelor CSS prin FTP. În plus, puteți utiliza clipboard-ul extins pentru a stoca mai multe fragmente de cod gata făcute. Editorul costă 29,85 USD. Versiune de încercare disponibilă.

Unele dintre funcțiile Rapid CSS Editor

* Evidențierea sintaxelor pentru documentele CSS și HTML
* Verificator și validator CSS
* CSS Code Explorer
* Inspector de cod
* Umplere automată pentru CSS și HTML
* Previzualizarea foii de stil cu Internet Explorer sau FireFox
* X-Ray pentru vizualizarea HTML
* Conformitatea cu standardele CSS și diverse browsere
* Integrare cu validatoare W3C HTML și CSS
* Ajutor CSS încorporat
* Formatarea codului CSS
* Compresor de cod CSS
* Asistență pentru căutare și înlocuire expresii obisnuite
* Căutați și înlocuiți în fișiere
* Clipboard cu mai multe articole
* Explorator de fișiere încorporat
* Salvați și deschideți fișierele direct de pe FTP
* Manager de proiect și site și publicare FTP
* Interfață complet personalizabilă

TopStyle
TopStyle (win)
Editorul TopStyle CSS și HTML este disponibil în versiunea sa Lite împreună cu editorul HTML Homesite - cu toate acestea, există și o versiune completă mai complexă pentru dezvoltatorii web profesioniști. Cu TopStyle, dezvoltatorii au primit o serie de funcții care nu sunt disponibile în alte editori. De exemplu, cu HTML-tidy încorporat, puteți traduce cu ușurință etichetele HTML în stil XHTML. Astfel, etichete precum - la o etichetă cu reguli CSS valide corespunzătoare. Biblioteca conține colecții de fragmente de cod utilizate frecvent. Împărțirea unei ferestre vă permite să comparați direct prezentarea unui site în Internet Explorer și Mozilla. De asemenea, puteți modifica definiția Doctype pentru a afla cum diferite DTD-uri afectează aspectul în diferite browsere.

Probabil cel mai puternic instrument din TopStyle este Verificatorul de stil. Vă permite nu numai să verificați foile de stil și, în consecință, să vă asigurați format corect vizualizări în diferite browsere. De asemenea, poate prezice erori în browsere populare, care poate apărea în ciuda codului CSS valid. De asemenea, puteți verifica stilurile CSS ale serviciului de validare CSS W3C pentru a remedia erorile care nu au fost găsite de TopStyle.
Versiunea completă costă 79,95 USD. Atenție: versiunea simplă nu poate fi actualizată. Doar Windows.

Unele dintre caracteristicile TopStyle:
* Editare HTML, xHTML și CSS în Programul Unificat: Atributele HTML sortate astfel încât să puteți vedea rapid care sunt necesare.
* Navigare ușoarăîntre documente: faceți clic pe clasa de atribut HTML pentru a merge la definiția acestei clase în foaia de stil externă sau faceți clic pe link pentru a deschide fișierul pentru editare. Puteți chiar să faceți clic pe eticheta pentru a deschide fișierul grafic în editorul de imagini preferat.
* Validarea elementelor și atributelor: Toate clasele sunt definite în propriile blocuri de stil și foi de stil externe, astfel încât alocarea unei clase unei etichete HTML este foarte sarcină simplă.
* Verificator de stil: vă verifică stilurile în mai multe browsere, semnalând orice valori sau proprietăți nevalide. De asemenea, puteți trimite foile de stil direct la Serviciul de validare CSS W3C, astfel încât să puteți verifica rapid cu specificația CSS oficială.
* Upgrade de stil: o modalitate rapidă și fiabilă de a înlocui toate etichetele HTML depreciate (învechite) - inclusiv eticheta HTML învechită de mult - la CSS echivalent.
* Integrare HTML Tidy: treceți la XHTML fără probleme cu configurația Tidy încorporată care convertește HTML în XHTML cu un singur clic!
* Rapoarte site: vedeți stilurile utilizate pe site-ul dvs. Aflați unde le utilizați sau aflați ce stiluri pe care le-ați definit nu sunt folosite.
* Previzualizare pe ecran complet: previzualizare împărțită în Internet Explorer și Mozilla pentru o imagine de ansamblu instantanee a diferențelor. Puteți chiar să modificați DOCTYPE-ul fiecărui panou de previzualizare din mers pentru a vedea cum diferitele DOCTYPE afectează aspectul.
* Integrare cu validarea HTML W3C: rezultatele validării sunt afișate în TopStyle, cu un hyperlink de numere de rând, care este sincronizat cu editorul TopStyle.

CSSEdit

MacRabbit CSSEdit (Mac)
Similar cu XyleScope, CSSEdit oferă editarea foilor de stil „în timp real”, chiar și atunci când rulează aplicații web dinamice folosind baze de date sau AJAX. Puteți edita și analiza stiluri fără bătaia de cap de a descărca sau actualiza (modul online și offline). Selector Builder vă permite să descrieți elemente în limba engleză simplă. Intelligent CodeSense analizează comportamentul CSS și CSS pentru a oferi sfaturi inteligente, sensibile la context.


X-ray Inspector vă va arăta ce stiluri sunt aplicate documentului HTML. Puteți, de asemenea, să vă verificați stilurile față de standardele W3C și să utilizați un instrument de management al proiectelor (Milestones etc.) pentru a vă îmbunătăți fluxul de lucru.

Există un plugin EditCSS pentru Firefox, precum și CSSEdit-bookmarklets. Puteți începe să editați stilurile oricărui site cu un singur clic pe un buton din browser și puteți utiliza, de asemenea, CSSEdit pentru editare. Instrumentul are o interfață frumoasă, intuitivă, care este, de asemenea, foarte compactă și este foarte bine organizată și este o plăcere să lucrezi. EditCSS costă 29,95 EUR (47 USD). De asemenea este si versiuni de încercare disponibil pentru descărcare gratuită.

Unele dintre funcțiile de editare CSS
* Selector Builder
* Organizare ușoară a folderelor și filtrelor
* Modificați codul sursă cu CodeSense inteligent
* Pagini cu raze X
* Previzualizare live
* Management de proiect
* Validare
* Integrare cu browsere web

Maestru de stil
Style Master (Win/Mac)
Acest editor CSS WYSIWIG îi face pe toți să se simtă ca un maestru, cu funcții care vă permit să vă evidențiați din mulțime. Într-adevăr, Style Master permite atât începătorilor, cât și profesioniștilor să creeze stiluri valide și corecte din punct de vedere semantic. Selectoarele pot fi grupate după alfabet, categorie sau setări curente. Editorul are o paletă de culori integrată, diverse șabloane, instrumente de automatizare și validare. În acest fel, profesioniștii pot lucra ușor și eficient, iar începătorii nu au nevoie de mult timp pentru a crea site-uri web grozave.

Ceea ce este destul de surprinzător este faptul că diferitele șabloane care sunt incluse implicit în editor sunt de fapt utile - ceva ce nu este de obicei cazul în majoritatea aplicațiilor de editare. Aici puteți pur și simplu să luați aspectul CSS și să definiți stilurile - toți selectoarele sunt deja acolo. De asemenea, puteți utiliza exemplele de stil W3C, care definesc stiluri pentru aproape toate etichetele HTML, cum ar fi titlurile

-

.

Puteți folosi totul Capabilitati de proiectare Panoul, similar cu X-Ray, pentru a vă crea propriile stiluri. Editorul este foarte simplu, intuitiv și clar. Preț: 59,99 USD. Nu este ieftin, dar în cele din urmă vei obține un instrument eficient și puternic pentru munca ta de zi cu zi. Style Master este disponibil atât pentru Windows, cât și pentru Mac. Există, de asemenea, versiuni de încercare disponibile pentru descărcare gratuită.

Unele dintre caracteristicile Style Master
* Ajutor cu suport pentru browser
* Vrăjitorii
* Peste 40 de șabloane
* X-Ray, care vă permite să vedeți imediat structura straturilor dvs
* Optimizarea codului
* CodeSense inteligent

Studio de stil

Style Studio (Win)
Style Studio oferă un „CSS-Checker” puternic, care le permite începătorilor și profesioniștilor să dezvolte layout-uri CSS între browsere. Dezvoltatorii pot folosi un număr de unelte auxiliare, cum ar fi „Smart linker” care conectează mai multe documente CSS la mai multe documente HTML, XHTML/XML simultan și CSS Manager care gestionează și actualizează codul conform standardului (în ordine) și detectează erorile CSS.

Editorul are tehnologia IntelliSense (pentru stiluri și HTML) cu ajutor rapid CSS. Property Watch detectează automat o proprietate CSS (sau o etichetă HTML dacă editați un document HTML) și afișează informații complete despre aceasta.

Style Studio costă 49,95 USD și este disponibil doar pentru utilizatorii de Windows.

Unele dintre caracteristicile Style Studio:
* Evidențiere puternică, personalizabilă de sintaxă cu capabilități de căutare/înlocuire/editare
* Validator CSS: detectează și remediază erorile CSS.
* Manager CSS puternic care vă permite să gestionați, să actualizați codul și să identificați problemele CSS de pe site-ul dvs.
* Integrare cu peste 35 de editori HTML
* IntelliSense pentru stiluri și HTML
* Urmărirea proprietății și ajutor instantaneu Cuvinte cheie css
* Expert CSS
* Validarea documentelor XML
* Analizator inteligent care detectează proprietăți nevalide pe măsură ce sunt introduse.
* Detectarea automată a browserelor instalate
* Schimbare ușoară Valori CSS folosind fierbinte Tastele Ctrl+ Sus/Jos.
* Sistem de căutare și înlocuire încorporat.

Cană de cafea
CoffeeCup Style Sheet Maker (Win)
CoffeeCup StyleSheet Maker oferă un editor CSS care este o încrucișare între un editor funcțional complex și funcții de bază pentru editare. Este similar cu TopStyle, dar în mod clar nu a atins încă același nivel de flexibilitate. Folosind CoffeeCup StyleSheet Maker veți avea aproximativ aceleași opțiuni. Preț: 34,00 USD. Versiune de încercare disponibilă.

Câteva dintre posibilitățile CoffeeCup:
* Schema de culori a site-ului CoffeeCup încorporată
* CSS simplu Font Designer, trebuie doar să selectați din meniul drop-down.
* Ajutor pas cu pas la crearea stilurilor
* Verificare în mai multe browsere
* 50 de etichete drop-down pentru foi de stil
* Class & ID Wizard pentru a vă crea propriile etichete HTML.
* Creați stiluri pentru Netscape și Internet Explorer 3.0 +

Editor CSS EngInSite
Editor CSS EngInSite (Win)
Dacă doriți să vă asigurați că aveți un cod CSS strict și corect care aderă la standardele W3C, EngInSite merită cu siguranță luat în considerare. Sarcina principală a editorului este să creeze site-uri web în strictă conformitate cu standardele care sunt revizuite de W3C. Instrumentul are un vizualizator de stil integrat, completare automată a codului, evidențiere a sintaxelor, este integrat cu un validator HTML W3C, are ajutor încorporat și ajutor CSS, o bibliotecă de cod personalizabilă și extensibilă și o funcție de editare live.


De asemenea, puteți utiliza Editorul de proprietăți CSS cu suport pentru proprietăți dinamice și Selector Constructor - un vrăjitor la îndemână pentru selectoare complexe și diverse instrumente de cod, cum ar fi Extinderea/Extragerea URL-urilor, Convertirea culorilor, Convertirea codului și așa mai departe. Puteți vizualiza selectoare, proprietăți, comentarii și @-reguli și puteți adăuga/elimina HTML, cum ar fi comentarii HTML și secțiuni CDATA. Preț: 39,95 USD. Versiune de încercare disponibilă.

Unele dintre caracteristicile EngInSite:
* Editor de text complet personalizabil
* Previzualizare instantanee integrată a foii de stil
* Examinare Sintaxa CSS pentru mai multe browsere
* Integrare W3C validator HTML
* Conformitatea cu standardele CSS și diverse browsere
* Previzualizare în diferite browsere.
* Sistem de ajutor integrat și ajutor CSS încorporat
* Căutați și înlocuiți cu suport pentru expresii regulate
* Editor vizual pentru diferite tipuri de date
* Vrăjitori pentru corp, IE Scrollbars, liste și fundaluri

CSS meduze
Jellyfish CSS (Mac)
Fiind extrem de simplu și direct, Jellyfish CSS asigură că dezvoltatorii pot edita stiluri CSS rapid și ușor. Editorul are o bibliotecă de coduri, suport Code-Sense, ajutor pentru browser, vrăjitori și ajutor pentru a vă ajuta să evitați greșelile (Veți fi anunțat imediat dacă ați greșit din greșeală). De asemenea, puteți utiliza Colorblender-ul integrat pentru a crea o paletă de culori. Pret: 29? (47 USD). Există o versiune de încercare, desigur.

Unele dintre caracteristicile CSS ale Jellyfish:
* Code-Sense vă va ajuta să evitați greșelile
*Compatibilitate Mobile Profile 1.0
* Evidențierea sintaxei
* Verificarea codului pe măsură ce introduceți
* 3 tipuri variate previzualizare
* Se integrează cu programe externe pentru acces rapid
* Verificarea stilului cu W3C Validator și CSS-Tidy
* Încărcarea fișierelor CSS direct de pe www și lucrul la ele
* Fragmente de cod
* Colorblender

Un stil
Astyle (Câștigă)
Astyle este un editor CSS vizual care oferă exact ceea ce v-ați aștepta de la majoritatea instrumentelor de editare. Nu caracteristici suplimentare, cu toate acestea, toate cele mai importante instrumente de editare sunt acolo. Astyle nu poate să nu ne impresioneze cu câteva caracteristici și abilități foarte utile. Preț: 20 USD.

Unele dintre caracteristicile lui Astyle:
* Interfață ușor de utilizat
* Proprietăți și selectoare grupate
* Selectare automatăși gruparea selectorului CSS
* Evidențierea codului CSS, HTML, XML
* Curatenie document HTML folosind CSS
* Suport pentru glisare și plasare


Dacă aveți întrebări, vă recomandăm să utilizați

Pentru a modifica aspectul site-urilor WordPress, de multe ori trebuie să editați codul CSS. În acest articol, vom analiza mai multe moduri de a schimba codul CSS în temele WordPress.

Editarea fișierului style.css al temei dvs

Cel mai obișnuit mod de a edita codul CSS al site-ului dvs. WordPress este să îl schimbați în fișierul style.css al temei active. Toate temele din WordPress sunt situate în directorul wp-content/themes și după numele temei dvs. active, puteți determina cu ușurință în ce director se află.

Pentru a edita fișierul style.css al temei, va trebui să aveți acces la site prin FTP sau suport pentru editarea fișierelor cu tema direct din panoul de administrare WordPress. Dacă modificarea fișierelor din panoul de administrare este acceptată de dvs., veți găsi această opțiune în secțiune Aspect→ Editor.

Asigurați-vă că fișierul style.css (foaia de stil) este selectat în lista din dreapta. Editarea fișierelor .php în acest fel este foarte descurajată, deoarece cea mai mică greșeală vă poate distruge site-ul. Mai mult metoda de incredere editează prin FTP.

Minus această abordare este că atunci când actualizați tema, toate modificările dvs. se vor pierde. Pentru a evita acest lucru, vă recomandăm să utilizați o temă copil sau un plugin terță parte pentru a edita codul CSS.

Teme pentru copii WordPress

WordPress vă permite să faceți modificări altor teme fără a modifica codul sursă al temei originale. În plus față de foaia de stil, temele copil pot modifica alte fișiere șablon în WordPress, dar acest lucru depășește scopul acestui articol.

Pentru a crea o nouă temă copil, dă-o dosar nouîn directorul wp-content/themes și plasați-l în el dosar gol cu numele stil.css. Calea către fișierul de stil va arăta astfel: wp-content/themes/my-child-theme/style.css unde my-child-theme este numele noii noastre teme secundare.

Deschideți fișierul style.css al temei copilului în editorul dvs. de text preferat și introduceți următorul cod:

/** * Numele temei: Tema copilului meu * Șablon: twentytwelve */ @import url("../twentytwelve/style.css"); corp ( fundal: roșu; )

Cu directiva Theme Name indicăm numele temei noastre copil, iar pe linia următoare cu directiva Template indicăm tema părinte pe care dorim să o folosim. În cazul nostru, aceasta este tema Twenty Twelve, care se află în directorul Twenty Twelve.

După antetul temei, includem stilurile de temă Twenty Twelve cu comanda @import și tot ceea ce urmează este propriul nostru cod CSS. În cazul nostru, schimbăm culoarea de fundal în roșu.

Salvați modificările în fișierul style.css al temei copilului dvs. și încărcați întregul director al temei mele copilului pe server prin FTP. Veți vedea noua temă copil disponibilă când selectați teme din Aspect → Teme.

În acest fel, atunci când editați fișierul style.css al temei copilului, toate modificările se vor reflecta pe site-ul dvs., iar când actualizați tema părinte, munca dvs. nu va fi afectată.

Editarea CSS cu un plugin

O altă metodă de editare a codului CSS în WordPress este utilizarea unui plugin. Există un număr considerabil de pluginuri care vă permit să schimbați foaia de stil. Iti recomandam plugin gratuit Jetpack, care conține modulul CSS personalizat.

Modulul CSS personalizat vă permite să editați stiluri direct din panoul de administrare WordPress și nu necesită acces FTP sau setări speciale pentru site-ul de găzduire. CSS personalizat are evidențiere și verificare a sintaxei, acceptă revizuiri, precum și mai multe Preprocesoare CSS(LESS și Sass).

Dacă aveți întrebări în timp ce lucrați cu oricare dintre metodele de mai sus, lăsați un comentariu și vom încerca să vă ajutăm.

Abonează-te la actualizări și vino în vizită, mă bucur mereu să te văd.

Absolut fiecare web designer, webmaster sau programator trebuie să recurgă constant la ajutorul unui editor bun de pagini web. Cu ajutorul unor astfel de editori, dezvoltatorii web creează sau editează coduri HTML, CSS sau JavaScript. Pentru început, editori precum Notepad sau TextEdit pot fi potriviti, dar pe măsură ce câștigi experiență, vei dori să folosești mai multe unealtă universală pentru munca. Deci haideți să vorbim despre editori.

Vă prezentăm atenției un editor de text folosit de programatori și web designeri. Principalele diferențe ale acestui editor sunt funcționalitatea sa bună și interfața intuitiv simplă. Notepad++ este capabil să deschidă mai multe documente în același timp, evidențiați o cantitate mare limbaje de programare, înregistrarea macrocomenzi, completarea automată a textului tastat și multe altele. Acest editor de text acceptă opțiuni precum un asistent de creare a evidențierii, modul de imprimare WYSIWYG, crearea propriului fișier API și un număr mare de funcții diferite pentru lucrul cu aluatul. De asemenea, programul vă permite să conectați diverse plugin-uri care pot oferi funcții suplimentare.

Editor PSPad este un editor de text gratuit conceput pentru a ușura munca programatorilor. Acest editor este capabil să lucreze cu mai multe limbaje de programare simultan. De asemenea, nu este o problemă pentru el să evidențieze codul. Editor Editor PSPad este utilizat cu succes atunci când lucrați cu text simplu. Trăsături distinctive: unealtă mică, accesibilitate, operare simplă și incredibilă caracteristici puternice editarea codului.

TopStyle 4 este versiunea finală a celebrului editor Windows, atât coduri CSS, cât și coduri HTML, care a fost creată de unul dintre dezvoltatorii HomeSite. Ce poate face acest editor? TopStyle 4 este capabil să accepte Unicode și să editeze documente prin FTP. De asemenea, acest editor include bare de instrumente speciale modificabile, diverse indicii de cod concepute pentru ASP, PHP și ColdFusion. TopStyle 4 acceptă și marcaje, Editare CSS-cod în atributele HTML și multe, multe altele.

Acest program are un instrument unic de analiză conceput pentru toți cei interesați standardele web. Datorită acestui program, vă puteți aprofunda cunoștințele despre CSS și HTML, precum și puteți obține informații complete despre un anumit element de pe site-ul web al unui concurent. De asemenea, folosind luneta Xyle puteți vedea Propria munca, ca sa zic asa, cu ochi proaspeti.

Acest program vă va permite să creați și să editați cu ușurință pagini în cascadă, indiferent de dimensiunea acestora. Puteți scrie codul tabelului manual sau puteți avea încredere în Rapid CSS Editor pentru a face acest lucru. Programul are un număr mare de funcții auxiliare, de exemplu, validator CSS. Programul oferă o previzualizare încorporată, astfel încât rezultatele muncii efectuate pot fi vizualizate în timp real. În plus, Rapid CSS Editor este, de asemenea, un editor HTML care poate simplifica munca cu editarea CSS HTML.

Namo Webeditor

Namo Webeditor este un editor HTML WYSIWYG și este creat de Namo Iteractive. Acest editor este capabil să accepte tehnologiile CSS, HTML, ASP, PHP și JavaScript. Pe lângă editarea vizuală, programul poate lucra cu codul paginii în sine. Dacă este instalat un server local (SSI, Apache), atunci vrăjitorii încorporați în program sunt capabili să creeze site-uri structurate complex pe computer pe baza baze de date MySQL date și utilizarea tehnologiei limbajului serverului.

Acest program este conceput pentru a procesa stiluri CSS. Conține o varietate de opțiuni pentru vizualizarea și editarea stilurilor, precum și verificarea compatibilității cu standardele W3. În plus, EngInSite CSS Editor este implicat în afișarea tuturor lucrărilor în diferite browsere. Acest utilitar este capabil să verifice sintaxa, conține sistem intern ajutor și o serie de alte gadget-uri foarte utile pentru webmasteri.

Arduo Css Editor este un editor CSS gratuit. Este ușor de utilizat și are o interfață plăcută care facilitează crearea de foi de stil fără codare manuală. Acest program vă permite să vizualizați dinamica influenței HTML asupra unui anumit stil de schimbare. Adică principalul trăsătură distinctivă Acest editor este o interfață intuitiv simplă și foarte convenabilă, care vă permite să economisiți semnificativ timpul petrecut la muncă.

Stylizer - Editare CSS în timp real (79 USD)

Skybound Stylizer este un editor de stil WYSIWYG CSS, unul dintre cele mai bune de acest gen, care rulează pe sisteme de operare. sisteme Windows. Acest utilitar poate simplifica semnificativ munca webmasterilor, sau mai degrabă scrierea și editarea codului CSS. Acest editor este conceput pentru acei webmasteri care pot merge dincolo de lucrul cu editorii de text convenționali pentru procesarea CSS.

Actualizare 14.09.2015: Comentariile sugerează că editorul este plătit. Am găsit o încercare gratuită pe site pentru 30 de zile, iar licența costă 79 USD.

CSS simplu - Un instrument gratuit de creație CSS

Un editor simplu de stil CSS, caracteristica principală care este prețul său - este complet gratuit. Acest program permite unui webmaster să lucreze simultan cu mai multe proiecte. La fel ca și alte utilitare similare, Simple CSS are o funcție de previzualizare care vă poate arăta cum va arăta rezultatul final. Programul este ușor de utilizat și are un număr suficient de funcții.

P.S. Mulțumesc pentru postarea invitaților, după cum puteți vedea programe gratuite Este suficient și mulți editori sunt destul de funcționali - nu are rost să cumpărați software. Eu personal folosesc Notepad++ pentru că, pe lângă CSS, vă permite să editați HTML și fișiere PHP. Recent m-am prins de Sublime Text 2 - foarte tare și Unealtă puternică, poate chiar mai bine decât Notepad++.

P.P.S. Nu știi ce să-i oferi copilului tău de ziua lui? Poate ar trebui să cumperi un telescop pentru a-i insufla pasiunea pentru diverse științe și pentru învățare în general, un dar foarte interesant.

Fiecare web designer și programator are nevoie de un editor de pagini web bun pentru a crea și Editare HTML, CSS și cod JavaScript. Notepad (Windows) și TextEdit (Mac) sunt instrumente excelente pentru început, dar pe măsură ce câștigați mai multă experiență, veți dori să utilizați un instrument mai robust și mai ușor de utilizat.

Există sute de editori excelenți dintre care îl poți alege pe cel potrivit, dar mulți dintre ei sunt plătiți. Ce se întâmplă dacă nu doriți să încălcați drepturile de autor, dar bugetul dvs. nu are fonduri pentru a cumpăra un produs comercial? Acest articol analizează câteva editoare gratuite excelente.

  • Editori WYSIWYG. Acest editor grafic, care vă permit să construiți un aspect de pagină și să setați stiluri vizual, ca în binecunoscutul procesor de cuvinte MS Word. Sunt un instrument convenabil pentru construirea unui design de pagină, deși, după cum știe orice web designer experimentat, codul trebuie încă modificat pentru a obține un rezultat excelent.
  • Editori de text. Acesta este un instrument pentru editarea directă a codului HTML și CSS. Unele editori sunt de uz general și nu au opțiuni speciale pentru suport pentru codul web. Alții sunt specializați în utilizarea limbajelor web precum HTML, CSS, JavaScript și PHP și au proprietăți încorporate pentru introducere rapidă Etichete HTML, proprietăți CSS și așa mai departe. Multe dintre aceste editoare vă permit să vizualizați o pagină web într-o fereastră separată.

KompoZer (Windows, Mac, Linux)

KompoZer este o alegere excelentă dacă aveți nevoie de un editor vizual cu un buget redus

Komodo Edit - bun editor, ușor de învățat, dar puternic și extensibil

Deși este un editor de uz general, acceptă HTML și CSS și are completare automată contextuală pentru etichete HTML și proprietăți CSS, precum și o colecție de inserții de cod pentru diferite elemente HTML. Pentru a profita la maximum de Komodo, trebuie să instalați extensia HTML Toolkit, care conține funcții minunate precum etichetele de închidere automată, previzualizarea aspectului CSS și un generator de text temporar.

Komodo Edit vă permite să vizualizați paginile editate în orice browser instalat, sau utilizați browserul încorporat într-o fereastră separată, astfel încât să puteți edita și să vedeți rezultatul modificărilor dvs. în același timp.

Editorul are o funcție încorporată pentru încărcarea fișierelor pe site (FTP, FTPS, SFTP sau SCP) și, de asemenea, vă puteți grupa corect fișierele folosind opțiunea de manager de proiect.

Funcție foarte utilă Cod > Selectați Blocare. Evidențiază blocul HTML principal actual, de exemplu cel închis curent element div sau ul. Foarte funcție convenabilă, când trebuie să selectați o secțiune întreagă dintr-o pagină pentru a copia sau a muta.

Komodo Edit are o mulțime de funcții puternice și utile, cum ar fi utilizarea expresiilor regulate pentru găsirea/înlocuirea, capacitatea de a comenzi externe, și așa mai departe. Din fericire, editorul are și bine sistem de ajutor, ceea ce facilitează valorificarea puterii Komodo Edit.

Aptana Studio (Windows, Mac, Linux)

Aptana Studio este un mediu complet integrat de dezvoltare a aplicațiilor web, cu un set mare de pluginuri. Deși îl puteți folosi doar ca editor de cod HTML/CSS/JavaScript

Notepad++ este un înlocuitor excelent pentru Notepad pe Windows. Deși nu are atât de multe opțiuni ca alți editori, este excelent pentru editarea fișierelor HTML, CSS, JavaScript și alte coduri

PSPad este un alt editor de uz general pentru Windows, cu o gamă largă de caracteristici utile pentru codificatorii HTML și CSS

jEdit este un editor de text multiplatformă cu funcții puternice de comandă macro și plugin. Instalați pluginul XML dacă trebuie să editați pagini web

TextWrangler este un editor ușor de uz general. În ciuda lipsei de funcții speciale pentru dezvoltarea web, acesta poate fi folosit pentru a lucra cu pagini web.

Vim este cu siguranță greu de învățat, dar odată ce treci de provocări, nu vei mai dori să te întorci!

Bunicul editorilor de text pentru programatori, Vim (un descendent direct al editorului vi) este un editor de text pentru consolă open-source. Este editorul implicit pentru aproape toate versiunile Unix, inclusiv Linux și Mac OS X. Este disponibil și pentru utilizare pe Windows și multe alte sisteme.

Vim nu este un sistem pe care îl puteți instala și începe să îl utilizați imediat, fără să fi lucrat vreodată cu el. Majoritatea comenzilor de editare includ combinații ciudate precum :wq și / . De asemenea, are trei moduri de editare: mod inserții, în care este introdus text; vizual modul de selectare a textului; Și comanda modul de introducere a comenzilor. Această funcționalitate este o moștenire a Unix din zilele în care nu existau ferestre și mouse.

De ce era pe listă? Dacă îl stăpânești, te vei convinge de viteza și puterea lui. Cu câteva comenzi, puteți face în câteva secunde ceea ce ar putea dura câteva minute în alte editoare.

există un numar mare de macrocomenzi și pluginuri pentru Vim care facilitează lucrul cu codul HTML, CSS și JavaScript, inclusiv evidențierea sintaxelor, completarea automată, HTML Tidy și vizualizarea browserului. Iată o listă mare de link-uri utile:

  • Completare automată Vim Omni
  • Editare HTML/XHTML în Vim
  • pagina principala

Fraise (Mac)

Fraise este un editor intuitiv pentru Mac, cu un set de funcții suficiente pentru editarea web

La fel ca TextWrangler și gedit, Fraise este un editor minunat, ușor, care este o plăcere de utilizat. Este o furcă de la editor. Este relativ nou și nu are un server web adecvat. Momentan este acceptat doar pe Mac OS X 10.6 (Snow Leopard), ceea ce înseamnă că dacă rulați versiunea 10.5 va trebui să descărcați Smultron.

Fraise are câteva opțiuni grozave pentru editarea web:

  • Evidențierea codului pentru HTML, CSS, JavaScript, PHP și alte câteva limbaje de programare.
  • Comanda Închidere etichetă (Comandă-T) pentru a închide eticheta curentă. Acest lucru economisește cu adevărat timp atunci când introduceți liste.
  • Previzualizare convenabilă în browserul încorporat (folosind WebKit), cu o opțiune de actualizare live foarte convenabilă? care actualizează browserul de îndată ce marcajul și CSS-ul de pe pagina care este editată s-au schimbat.
  • Opțiunea de căutare avansată, care acceptă căutarea/înlocuirea folosind expresii regulate.
  • Suport pentru blocuri pentru a introduce rapid etichete HTML și proprietăți CSS.
  • Câteva comenzi utile pentru manipularea textului, cum ar fi validare HTMLși conversia caracterelor în elemente HTML.

Fraise merită explorat dacă utilizați un Mac și doriți un editor ușor de utilizat, cu mai multe capabilități decât TextEdit încorporat.

  • Serghei Savenkov

    un fel de recenzie „scurtă”... de parcă s-ar grăbi undeva