I CSS sono le singole pagine web di cambiamento più importanti viste nell'ultimo decennio e hanno aperto la strada alla separazione tra stile e contenuto. Nel modo moderno, XHTML definisce il semantico Che cos'è il markup semantico e come cambierà Internet (la tecnologia ha spiegato) Che cos'è il markup semantico e come cambierà Internet per sempre [Tecnologia spiegata] Leggi altro struttura - il significato e il contenuto di la pagina web, mentre i CSS si occupano della presentazione. Mentre molti di noi si sentono a proprio agio a scrivere un po 'di HTML, sembriamo pensare che i CSS siano una specie di magia nera. Spero di cambiarlo con questi 5 piccoli passi per diventare uno stregone dei CSS.

Questo articolo è rivolto agli utenti che hanno ancora poca esperienza con i CSS, anche se speriamo che ci sia qualcosa per tutti.

(1) grammatica

Come ogni lingua, il CSS ha una certa grammatica e può sembrare un po ' “programmazione per computer” all'inizio, ma in realtà è solo una lista di cose. Tutto il CSS è scritto così:

SELECTOR PROPERTY: VALUE; COSTO DELL'IMMOBILE; COSTO DELL'IMMOBILE;

Come forse già saprai, i CSS funzionano applicando uno stile a un elemento selezionato nella pagina web. Ad esempio, per definire in che modo vengono mostrati tutti i link, useresti “un” come il selettore. Le varie proprietà e valori che imparerai con l'esperienza, ma alcuni sono facili - cose come COLOR, BORDER, FONT-SIZE, HEIGHT sono tutte alcune proprietà possibili, i cui valori potrebbero essere rossi, 14pt, 150%, 1000px - è proprio questo facile. Vediamo come andremo a stilare tutti i link in rosso:

a color: red;

Puoi anche usare lo stesso blocco di CSS per fare più di un tipo di elemento nello stesso momento con le virgole:

a, h2, h3 color: red;

Questo rende non solo tutti i link, ma anche tutti i titoli h2 e h3, nello stesso colore rosso. Si noti che potrebbero essere tutti di dimensioni diverse, poiché questo particolare blocco di codice cambia SOLO il colore.

(2) Selettori di classe e ID

A volte non si desidera applicare ALL tutti gli elementi allo stesso modo, e in questi casi è possibile utilizzarli CLASSE o ID. Come regola generale, l'ID viene utilizzato per elementi one-off ed è più comunemente usato per definire grandi blocchi di contenuto o singoli pulsanti speciali e tali.

Ad esempio, potresti avere un grande DIV per i blocchi HEADER, CONTENT e FOOTER della tua pagina, quindi definire quelli come ID sarebbe una mossa intelligente. Le classi d'altra parte vengono utilizzate quando è probabile che gli elementi di stile vengano ripetuti in tutta la pagina. Forse vuoi che un gruppo di oggetti abbia angoli arrotondati con un bordo rosso fisso 2px - piuttosto che scrivere lo stesso stile in linea un milione di volte, dovresti definire una classe per esso e collegare invece la classe a quegli elementi. Quindi come definisci questi ID e classi?

 
SIDEBAR
 

Per scegliere come target questi elementi nel CSS, utilizzi:

 .arrotondato di rosso // questo è un raggio di bordo di classe: 5px; bordo: 2px rosso solido;  #sidebar ... // questo è un ID 

(3) Discendenti

Non è necessario associare classi e ID a tutto ciò che si trova nel documento, ma è anche possibile utilizzare ciò che chiamiamo DISCENDENTI per selezionare gli elementi. Guarda questa dichiarazione CSS e vedi se riesci a capire cosa fa:

#sidebar h1 font-size: 20px;

Questo PRIMO troverà l'oggetto con un ID di “sidebar” ALLORA si restringe la selezione a tutti i

s contenuto in questo, e applica solo lo stile a quelli.

Quindi, se riesci a raggruppare insieme tutti i tuoi oggetti, è meglio usare i selettori discendenti poiché è un codice ancora meno che aggiungere un gruppo di class =”” definizioni a tutto.

(4) Dove mettere questo CSS?

Il modo migliore per gestire i CSS è separarlo interamente dal tuo HTML. Crea un file chiamato qualunque cosa ti piaccia .css, e aggiungi semplicemente questa linea alla tua intestazione HTML:

Puoi anche aggiungere blocchi di CSS alla sezione tra i tag, ma non suggerisco questo metodo in quanto risulta in file HTML disordinati e difficili da leggere.

Il terzo posto per aggiungere i CSS è in linea, ma dovresti fare attenzione anche a questo. Qualche cosa aggiunto in linea in questo modo:

sostituirà automaticamente qualsiasi cosa definita nel tuo stile separato. Quindi puoi sederti lì cercando di eseguire il debugging per anni perché le tue miniature non vengono ridimensionate, e il tuo CSS potrebbe essere perfetto - ma se l'elemento IMG include già stili in linea, allora quelli avranno la priorità. Come fai a sapere se qualcos'altro lo sta influenzando però?

(5) Ottieni FireBug o Usa Chrome

FireBug Guida amatoriale per personalizzare il design del sito web con FireBug Guida amatoriale per personalizzare il design del sito Web Con FireBug Read More è uno straordinario strumento di sviluppo che è particolarmente utile per capire come funziona il CSS. Prenditi un momento per scaricarlo e dargli una rapida occhiata. FireBug è disponibile per Firefox come plug-in, oppure se utilizzi Chrome, un set identico di funzionalità è già integrato. Una volta attivato il plugin in Firefox o stai utilizzando Chrome, è sufficiente fare clic con il pulsante destro del mouse in qualsiasi punto della pagina e selezionare “Ispeziona elemento“.

Questo aprirà un nuovo riquadro nella parte inferiore del browser. Sul lato sinistro c'è la vista XHTML, ben formattata e pieghevole. Se passi il mouse sopra un elemento, questo verrà evidenziato nella pagina e ti mostrerà il modello di box CSS attorno ad esso (parleremo più del modello di box in una lezione futura). Il punto chiave qui è che puoi anche selezionare qualsiasi elemento e vedere con precisione quale CSS sta agendo su di esso sul lato destro, e spezzerà quelli in cui i selettori lo hanno causato. Qualsiasi cosa aggiunta in linea verrà mostrata sotto “element.style” intestazione. Provalo ora su questa pagina. Si noti che molto spesso molti CSS elencati a destra sono barrati da una linea centrale - questo significa che un altro selettore che lavora su quell'elemento ha priorità e sta ignorando quello cancellato.

È tutto per oggi, ma sentitevi liberi di lasciare commenti se pensate che mi siano persi alcuni punti fondamentali per i principianti, o se avete domande o problemi specifici con i CSS allora chiedete via nella sezione di supporto tecnico del nostro sito. La prossima volta mi piacerebbe sviluppare la tua conoscenza dei CSS oltre alle modifiche di colore e dimensione di base.

Scopri di più su: HTML, programmazione, web design, sviluppo web.