Introduzione ai comandi CSS
CSS è l'acronimo di Cascading Style Sheets. È usato per descrivere la presentazione del documento che è scritto in un linguaggio di markup come HTML. Fa il lavoro di separazione di presentazione e contenuto che include layout, colori e caratteri diversi. La separazione offre flessibilità e controlla anche le diverse caratteristiche che consentono a più pagine Web di condividere la formattazione specificando i CSS pertinenti. Le specifiche CSS sono gestite dal World Web Consortium. Oltre a ciò, fornisce anche regole specifiche che aiutano nella formattazione alternativa se si accede al contenuto da un dispositivo mobile.
Comandi CSS di base
1. Sintassi CSS: ci sono un insieme di regole che devono essere seguite nel comando CSS. Il set di regole CSS è composto da un selettore e un blocco di dichiarazioni. Il selettore viene utilizzato per puntare all'elemento HTML che l'utente vorrebbe stile. Il blocco di dichiarazioni può contenere una o più dichiarazioni che possono essere separate da punti e virgola. Ogni dichiarazione dovrebbe includere un nome di proprietà con il suo valore e questi separati da due punti.
2. Selettore ID : il selettore ID può utilizzare l'id di un attributo dell'elemento HTML e aiutare nella selezione di un particolare elemento. Viene utilizzato per selezionare un elemento univoco e questo elemento deve essere univoco per quella pagina. Per selezionare un elemento con un particolare id, viene usato '#' e questo è seguito dall'id di quell'elemento.
3. Selettore di classe: per selezionare un attributo di classe particolare, il selettore di classe viene utilizzato per selezionare gli elementi da quella classe. Per utilizzare gli elementi in una classe specifica viene utilizzato un carattere punto (.). È seguito dal nome della classe. Con questo, se l'utente desidera che vengano utilizzati solo elementi specifici, solo quelli possono essere specificati da una classe.
4. Raggruppamento dei selettori: a volte gli elementi hanno le stesse definizioni di stile. Per raggrupparli e ridurre al minimo il codice è un'opzione migliore. Per il gruppo, l'utente del selettore può utilizzare una virgola e separare ciascun selettore
5. Commenti: si consiglia di utilizzare questi comandi CSS durante la scrittura del codice. Danno chiarezza su ciò che il codice sta facendo e aiutano te o qualcun altro che è nuovo al codice a lavorare su di esso di conseguenza. I commenti vengono ignorati dai browser. Un commento CSS inizia e termina con / * * /.
6. Display: Block - Molti elementi HTML sono impostati su questa modalità di visualizzazione. Per impostazione predefinita, gli elementi a livello di blocco occupano più spazio e non possono essere posizionati sulla stessa linea con qualsiasi altra modalità di visualizzazione. È possibile ottenere la possibilità di modificare l'altezza e la larghezza dell'elemento come desiderato.
7. Colori nei CSS: in questi comandi CSS, i colori possono essere specificati nella formula RGB. Ogni parametro definisce l'intensità di questi colori e definisce un nuovo colore. Ad esempio, per visualizzare il nero tutti i parametri di colore devono essere impostati su RGB (0, 0, 0).
8. Colore di sfondo: la proprietà color di sfondo definisce il colore che deve essere impostato per lo sfondo di un elemento. Il colore può essere facilmente definito assegnando un nome al colore, aggiungendo un valore esadecimale o impostando il valore RGB
9. Immagine di sfondo: l'immagine di sfondo può essere impostata su qualsiasi immagine particolare di propria scelta. Una volta impostata, l'immagine viene ripetuta e copre l'intero elemento.
10. Margini CSS: il comando CSS ha diverse proprietà dei margini che possono aiutare a creare spazio attorno a diversi elementi e anche definire questi bordi esterni. I CSS possono avere proprietà come margin-top, margin-right, margin-bottom e margin-left.
Comandi CSS intermedi
1. Selettori di classi e ID: oltre al tag HTML un utente può definire i propri selettori che possono essere sotto forma di classe o ID. L'uso principale di questi è che puoi avere lo stesso elemento HTML e presentarlo in modo diverso in base all'ID o alla classe necessaria.
2. Pseudo-classe: queste classi vengono utilizzate per specificare un particolare stato o relazione con un determinato selettore. Queste classi possono anche assumere la forma di selettore: pseudo_class (proprietà: valore; ). Questa classe viene definita semplicemente fornendo i due punti tra il selettore e la pseudo-classe.
3. Formattazione del testo: i testi aggiunti possono essere personalizzati e formattati utilizzando le proprietà di formattazione. Il colore può essere cambiato usando la parola chiave 'color'. Così può l'allineamento del testo. Usando le decorazioni decorative del testo è possibile impostare e rimuovere. Le trasformazioni possono essere fatte rispetto ai casi.
4. Caratteri CSS: i caratteri nei CSS hanno famiglie diverse come la famiglia generica e la famiglia di caratteri. La famiglia di caratteri è una famiglia di testi. Quello generico con un gruppo di famiglie con aspetto e carattere simili con un carattere specifico.
5. Icone: utilizzando la libreria di icone e aggiungendo il nome delle icone di classi di icone specificate, è possibile utilizzarle facilmente nei CSS.
6. Tabelle: i CSS possono anche visualizzare le tabelle e aiutare nella personalizzazione con bordi, larghezza e altezza. Usando parole chiave come "bordo", "larghezza" e altezza l'utente può facilmente avere tabelle su una pagina web.
7. Posizionamento: questa proprietà specifica il tipo di metodo di posizionamento che può essere utilizzato per qualsiasi elemento. Questa posizione può essere statica, relativa, fissa, assoluta o appiccicosa.
8. Overflow: questa proprietà aiuta a controllare il contenuto che è troppo grande per adattarsi a un'area.
9. Float: la proprietà float fa sapere all'elemento come dovrebbe galleggiare. Specifica quali elementi possono galleggiare accanto agli elementi cancellati.
10. Opacità: questa proprietà definisce l'opacità o la trasparenza di qualsiasi elemento.
Comandi CSS avanzati
1. Angoli arrotondati CSS: utilizzando la proprietà "border-radius" è possibile assegnare agli angoli degli angoli arrotondati. Puoi anche specificare un angolo particolare fuori dai quattro angoli e apportare le modifiche secondo la tua scelta.
2. Immagini dei bordi : è possibile impostare un'immagine come bordo attorno a qualsiasi elemento. Ciò è possibile facendo uso di una proprietà immagine di confine. Prende l'immagine e la suddivide in nove sezioni, quindi posiziona gli angoli agli angoli e le sezioni centrali vengono ripetute o allungate.
Suggerimenti e trucchi per usare i comandi CSS:
- Utilizzare reset.css e ripristinare tutti gli stili fondamentali.
- Utilizzare CSS abbreviato per avere un modo più breve di scrivere codici CSS di comando.
- Utilizzare gli strumenti di debug CSS per modificare, comprendere ed eseguire il debug degli stili di comando CSS.
Conclusione
Il comando CSS ti aiuta a mantenere separato il contenuto informativo di un documento e ti aiuta a visualizzarlo. Aiuta a evitare la duplicazione, a mantenere facilmente il codice e a utilizzare lo stesso contenuto con stili diversi.
Articoli consigliati
Questa è stata una guida ai comandi CSS. Qui abbiamo discusso di comandi CSS di base, intermedi e avanzati. Puoi anche leggere il seguente articolo per saperne di più -
- Principali comandi MySQL
- Comandi PL / SQL
- Come utilizzare i comandi SQL
- Comandi angolari