*Linux Guide

Fare Web - CSSEd

*

CSSEd è un editor grafico di Fogli di Stile per ambiente Linux, che offre numerosi strumenti e facilitazioni per la creazione, la modifica e la gestione dei CSS. E' uno strumento utile di certo, ma non fondamentale, giacché la scrittura di un CSS può benissimo essere effettuata con il semplice editor di testo o con il già illustrato Bluefish.
Vediamone comunque le caratteristiche.

Installazione

Installare CSSEd in Linux Mint o Ubuntu è molto semplice e lo si può fare da Terminale o dal Software Center. Per praticità e sveltezza, installatelo da Terminale, seguendo questi passaggi:

Lanciate il Terminale. In esso vanno incollati i seguenti comandi;

sudo apt-get update

e premete INVIO. Questo per ricaricare l'elenco dei pacchetti e le informazioni relative.

sudo apt-get install cssed

e premete INVIO. Questo per installare il programma.
Il programma verrà collocato automaticamente nella categoria "Programmazione" del menù principale di Linux Mint.
Naturalmente verranno installati altri pacchetti necessari ai programmi per lavorare al meglio, le cosiddette "dipendenze".

Interfaccia grafica

CSSEd ha una interfaccia semplice e sufficientemente intuitiva ed i vari pulsanti presenti, sono adeguatamente provvisti di note esplicative. Come potete vedere dalla figura sottostante, ci sono diverse aree che andrò ad illustrare.

*

  1. Barra dei menù - E' la classica barra dei menù di quasi tutte le applicazioni di sviluppo. Sono presenti molte funzioni tutte da scoprire, ma che sono poi presenti anche nella Barra degli strumenti speciali. Particolare utilità possiede il menù "Documento", dove è possibile applicare opzioni al documento sul tipo di file, codifica dei caratteri ed altro
  2. Barra degli strumenti generici - E' anch'essa la tipica barra di molte applicazioni, da dove applicare dei comandi con un semplice click del mouse. Ci sono le funzioni per creare un nuovo documento, importarne uno, salvare l'elaborato, copia/incollare, cercare/sostituire, influire sulla interfaccia del programma ed altro
  3. Barra degli strumenti speciali - Questa è la barra più importante e specifica dell'intero programma. In essa ci sono i comandi per agire sul foglio di stile in evidenza, sia esso un nuovo prodotto o un CSS importato. Vediamo questi comandi.

    *

    1. Editor dei margini - Una volta cliccato mostra una finestrella dove impostare i margini sui quattro lati di un elemento box
    2. Editor dei bordi - Una volta cliccato mostra una finestrella dove è possibile impostare la larghezza del bordo, la sua linea, il colore della linea
    3. Editor del padding - Una volta cliccato mostra una finestrella dove poter definire il padding sui quattro lati di un elemento box
    4. Editor cumulativo - Una volta cliccato compare una finestra dove poter definire tutti i valori descritti dianzi con in più la possibilità di definire le dimensione dell'elemento box. E' prevista anche una scheda con informazioni utili su queste impostazioni.

      *

    5. Editor dei font - Qui si possono impostare i valori legati ai fonts
    6. Editor colore dei font - Qui invece si impostano i colori da applicare ai fonts
    7. Apre il wizard dei selettori - Una volta cliccato si apre una finestra dove è possibile inserire i selettori di svariatissimi tipi

      *

      Basta cliccare su un selettore nella colonna sinistra e aggiungerlo alla colonna destra e premere OK per vederlo scritto nell'area principale
    8. Apre la finestra dei colori - Qui si possono impostare i colori per svariati attributi

      *

      E' possibile farlo indicando il nome del colore preferito nel menù a discesa, oppure aprire la paletta dei colori ed inserire il colore RGB od esadecimale
    9. Valuta un singolo selettore - Questo pulsante permette di valutare gli attributi e i valori applicati ad un singolo selettore. Basta cliccare all'interno delle parentesi graffe di un selettore e cliccare il pulsante per poter vedere attributi e valori nell'area laterale e il risultato della validazione nell'area di output
    10. Informazioni sul documento - Permette di ottenere delle informazioni sul documento attivo, informazioni che vengono visualizzate nell'area di output
    11. Pulisce l'area dell'output - Elimina tutti i messaggi contenuti nell'area di output
    12. Validatore - Valida il documento senza esporre nulla nell'area di output. Il risultato viene mostrato da una finestrella
    13. Validatore - Mostra la validazione mostrando molte informazioni nell'area di output ed il risultato in una finestrella, come mostrato nella figura sottostante

      *

  4. Area principale - In questa area viene mostrato il codice vero e proprio del CSS e tutte le nuove inclusioni
  5. Area laterale - In questa area vengono mostrate le informazioni relative ai selettori, agli attributi ed ai valori ad essi applicati
  6. Area di output - Qui vengono mostrati i messaggi successivi all'azione di qualche strumento, di cui s'è accennato dianzi. Vengono mostrati i messaggi in lingua inglese

Uso dello strumento

Lo strumento può essere impiegato per produrre un nuovo foglio di stile, oppure modificarne di già esistenti. Nel primo caso basta premere i tasti Ctrl + n, mentre nel secondo basta aprire normalmente il file. Di solito si inizia a produrre un CSS avendo ben chiaro quali siano gli elementi della pagina. Io consiglio di inserire nel CSS i selettori per "body", "a", "a:link", "a:visited", "a:hover", "h1" .... "h6", "img" e "p" che sono i selettori per elementi sempre presenti in una pagina web. Per inserirli nel CSS, cliccate il pulsante del wizard dei selettori (7).
Per ognuno di questi selettori bisogna prima selezionarlo e aggiungerlo alla colonna destra con l'apposito pulsante. Fatto tutto, si preme su "OK" e nell'area principale compariranno i selettori con già presenti le parentesi graffe e pronti per accogliere gli attributi e relativi valori.
Per fare ciò basta cliccare sui vari pulsanti che danno accesso alle relative finestre di impostazione, come l'editor dei font, dei margini, del padding, ecc. Ricordatevi che per impostare attributi e valori, dovrete porre il puntatore all'interno delle parentesi graffe del selettore.

Quando avete completato il vostro CSS, procedete al controllo della sintassi (premendo il tasto 13), alla sua validazione ed a salvarlo con un nome adeguato e controllate che sia provvisto della estensione .css.

Linux Guide | Torna in alto