• 461

  • 0

Vota

13

CSS Syntax

Segnalibro

In questo articolo voglio toccare l'argomento su come creare uno stile, come appare il codice e come funziona, ovvero la sintassi CSS. La sintassi è la seguente: prima arriva il selettore, quindi le proprietà sono indicate tra parentesi graffe e i loro valori attraverso i due punti.

Diamo un'occhiata a queste regole con un esempio:


h1 {

  color: red;

  margin-left: 200px;

  font-size: 20pt;

}


In questo esempio, il selettore è "h1", le proprietà sono "color", "margin-left" e "font-size", e i loro valori sono rispettivamente "red", "200px" e "20pt". Cosa significa tutto ciò? Ciò significa che l'elemento all'interno del tag <h1> diventerà rosso, con un rientro a sinistra di 200 pixel e una dimensione di 20 punti.

Esiste un numero enorme di proprietà e il loro significato, ovviamente, elencarle tutte è inutile. L'opzione più ragionevole è guardarli nella directory, ma qui è necessario capire quanto segue, che ci sono anche diversi selettori. Ecco un elenco di loro:


1) Selettori contestuali.
2) Selettore ID.
3) Selettore CLASS.
4) Selettori di parametri.
5) Selettore standard.


Tu ed io abbiamo considerato un solo selettore standard quando un tag HTML normale è usato come tag (nell'esempio sopra, questo tag era <h1>).

I primi quattro tipi di selettori CSS sono discussi in un altro articolo di base CSS. E il quinto tipo, risolviamolo di nuovo.

La prima cosa da fare è scrivere un tag HTML (uno qualsiasi degli standard HTML). Quindi tra parentesi graffe indicano le sue proprietà e un valore di due punti. Sono sicuro che tutto sia chiaro qui.

E infine, voglio capire immediatamente l'argomento degli pseudo-elementi. Gli pseudo-elementi sono necessari per configurare le proprietà di un certo stato di un elemento. Ad esempio, lo stato di "passaggio del mouse" sul collegamento, "clic del mouse" sul collegamento e simili. O, ad esempio, la prima riga di testo. E molto altro Ancora una volta, un set completo di pseudo-elementi può essere trovato nel manuale. Mostrerò come usarli:

 


a:visited {

  color: red;

}

a: link {

  color: blue;

}


In questo caso, impostiamo il seguente stile: i collegamenti visitati (stato "collegamento è già stato fatto clic") in rosso e i collegamenti non visitati (stato "collegamento non è stato fatto clic") saranno blu. Come puoi vedere, gli pseudo-elementi sono specificati attraverso i due punti. Cioè, viene scritto un tag che può avere pseudo-elementi, quindi vengono inseriti i due punti e viene scritto il nome dello pseudo-elemento. Quindi, come al solito, vengono indicate le proprietà e i loro valori. E se questi elementi hanno uno stato corrispondente allo pseudo-elemento, allora gli stili verranno applicati ad esso.

Spero di averti introdotto alle basi della sintassi CSS. Se hai imparato questo, puoi passare a padroneggiare il processo di creazione di un sito Web da solo. A proposito, sulla directory. Qui do l'opportunità di scaricare il riferimento CSS in formato chm. Esiste un set completo di proprietà di tutti gli elementi e dei loro possibili valori: Scarica il riferimento CSS in chm.

  • Creato il:
  • 2020-04-08 16:26:00
  • Visualizzazioni
  • 461

  • Comenti
  • 0

adasdasd

Recensioni mancante

La pubblicazione della recensione aviene dopo il controllo del administratore.



Condivide articolo


Altri articoli ...