CSS: pseudo-elementi e pseudo-classi

A volte, sembra che per sopravviverenel mondo moderno, devi sapere come creare siti web. Anche nelle scuole, insegnano le basi dell'HTML. Ma questo non è abbastanza per creare una risorsa di qualità. Hai ancora bisogno di conoscere le basi del foglio di stile a cascata, in particolare pseudo-classi e pseudo-elementi CSS.

Cos'è?

Secondo la legge non detta, tutti gli stili cheLa procedura guidata web si inscrive nel codice CSS, utilizzato per quegli elementi della struttura che possono essere visualizzati nel codice sorgente. Tuttavia, ci sono gruppi di elementi che non sono prescritti nel documento HTML, ma devono anche specificare gli stili.

Ad esempio, nel file HTML non c'è un tagsarebbe responsabile per la progettazione della lettera maiuscola di un nuovo paragrafo o area che si trova di fronte a un determinato elemento. E i tag non possono mostrare attività di collegamento o modificare l'immagine quando il cursore del mouse punta su di essa. Per rendere questi e molti altri valori, ci sono selettori CSS: pseudo-classi e pseudo-elementi.

Le pseudo-classi sono i selettori che influenzanosugli elementi esistenti del documento. Gli pseudo-elementi di solito specificano e modificano l'area che era originariamente assente dal file sorgente. In poche parole, gli pseudo-elementi impostano nuove aree di pagina che non erano in markup HTML, e le pseudo-classi definiscono lo stato degli oggetti in determinate condizioni.

Dopo: dopo

La prima cosa a cui dovresti prestare attenzione èpseudo-elementi CSS prima e dopo, poiché ogni risorsa che si rispetti li utilizza per migliorare l'aspetto, la leggibilità e l'attrattiva del sito. Questi elementi forniscono la possibilità di aggiungere nuove aree, etichette e stili prima o dopo il documento originale.

Tutti, probabilmente, almeno una volta hanno visto su qualcunoannunci online di pubblicazioni, dopo che erano le parole: .. "Nuovo", "nuovi" o "shock", "Preferiti", "meglio", "Super", ecc Questi oggetti sono stati impostati utilizzando la pseudo CSS dopo.

Per creare una tale posizione, è necessario aggiungere il seguente codice al foglio di stile a cascata:

Qui la parola new specifica il nome della nuova classe,quindi prima del paragrafo necessario nel markup HTML è necessario inserire: class = "new". Il nome della classe deve essere compreso tra parentesi del tag di apertura. Se tutto è fatto correttamente, dopo la fine del paragrafo sulla pagina del browser ci sarà un'iscrizione "Qualcosa di nuovo".

Naturalmente, nell'esempio uno script è impostato per un sempliceiscrizioni, ma nessuno ha detto che non è possibile modificare le dimensioni, il colore e il posizionamento. Tutti i parametri necessari possono essere inseriti nella nuova classe dopo il contenuto. Separali con un punto e virgola e alla fine chiudi il tutore.

Prima: prima

Le caratteristiche sono praticamente identicheprima pseudo-elemento CSS. Con una piccola differenza: è progettato per aggiungere gli elementi necessari davanti all'oggetto. È scritto esattamente allo stesso modo di dopo, solo con la parola precedente.

Prima del prossimo paragrafo del testo, puoi aggiungereparole che attirano l'attenzione o puoi semplicemente posizionare un'immagine o un elemento Unicode davanti al testo. Ad esempio, aprendo virgolette o rientri. Per implementare questo, è necessario aggiungere una nuova classe al markup CSS e specificare le caratteristiche necessarie. La soluzione più semplice sarebbe simile a questa:

Per indentare la fine del documento, è necessario creare una pseudo-classe dopo e al posto di contenuto: aperto scrivere contenuto: vicino, cambia di conseguenzaposizionamento. Se nella pseudo-classe prima che il rientro fosse dal margine sinistro, allora nel dopo-classe deve essere da destra. Inoltre, nel markup, puoi aggiungere un'immagine (ad esempio, le stesse virgolette) e il testo non assomiglia più a un foglio noioso.

The Epic Saga: primo

Molto popolare nella creazione di nuovi progettiusa il primo pseudoelemento CSS. In particolare, questo riguarda progetti con soggetti divertenti e fiabeschi, oltre a risorse web di direzione storica e scientifica.

Questo pseudoelemento CSS ha due caratteristiche: riga e lettera:

• lettera - cambia la prima lettera di quel frammento del testo, aa cui è aggiunto. Quindi, forma un drop-drop - un elemento in cui la linea di base è più linee più basse rispetto al testo principale. Per impostare questo parametro nel foglio di stile CSS, è necessario impostare le caratteristiche per il paragrafo. Ad esempio, P: prima lettera {***} - e già tra parentesi indica tutto il necessarioParametri come colore, carattere, dimensione. Se la lettera iniziale deve essere creata solo per il primo paragrafo, viene creata una nuova classe (come nell'esempio con nuovo: dopo).
• linea - questa posizione cambia completamente la prima rigaparagrafo. È molto comodo da utilizzare nelle pubblicazioni scientifiche, se si desidera evidenziare informazioni importanti. È registrato allo stesso modo degli altri esempi. Ma qui è importante ricordare che lo pseudo-elemento non seleziona una frase, ma una stringa. A seconda del browser utilizzato dall'utente, la sua prima riga potrebbe essere più lunga o più breve, quindi è importante assicurarsi che questa selezione non sia ridicola. In questi casi, lo pseudo-elemento delle interruzioni di riga è stato creato in CSS.

Nuova linea

In effetti, questo elemento è usato raramente, perchéè stato sostituito con successo dal tag <br>. Tuttavia, ci sono situazioni in cui è necessario specificare un'interruzione di riga con pseudo-elementi. Per questi scopi, è possibile utilizzare lo stesso dopo. Per questo, viene scritto il seguente codice: dopo {contenuto: "A"; white-space: pre;}. Il nome della classe deve essere inserito tra le parentesi del tag di apertura, non appena si chiude, dopo di esso e una interruzione di linea seguirà.

Questa opzione richiede più tempo per la costruzione di contenuti leggibili e, se non è necessario lavorare con browser anomali sconosciuti, è meglio limitarsi al tag <br>.

Sintassi Pseudo-Class

Come già accennato, le pseudo-classi definisconolo stato degli elementi con cui l'utente interagisce. A differenza degli pseudo-elementi CSS, che definiscono le caratteristiche della struttura invisibile, le classi immaginarie si focalizzano su fattori comportamentali. Per renderlo più chiaro, puoi dare un piccolo esempio. Supponiamo che ci sia un elenco di link utili sul sito, che l'utente li scorra, che legga informazioni, ma dopo un po 'si imbatta in quel contenuto che è già stato visto. È appena tornato su questa pagina, perché ci sono molti link e non sono diversi. Per evitare che ciò accada, i webmaster aggiungono una pseudo-classe che cambia il colore del link scansionato, quindi l'utente saprà esattamente cosa legge e dove non è ancora andato.

Tutte le pseudo-classi sono registrate in un foglio di stile a cascata con una sintassi semplice e comprovata:

• Selettore: Pseudo-classe {caratteristiche di stile: colore, dimensione, rientro, posizionamento, ecc.}

Queste classi possono essere divise in tre gruppi principali:

• quelli che determinano lo stato dell'elemento;
• quelli relativi agli pseudo-elementi;
• classi fittizie che definiscono la lingua del contenuto.

Pseudo-classi e stato degli elementi

Considera in ordine, cosa può esserepseudo-classi. La prima sottospecie è caratterizzata da un cambiamento nello stato di un elemento a seconda del suo stato in un determinato momento. Ecco come è stato nell'esempio sopra: se hai cliccato sul link, cambierà colore. Questi includono tali pseudo-classi:

• :attiva. Se si applica questa pseudo-classe, quando si passa il mouse su un frammento separato, diventerà attivo. Questo si manifesterà in un cambiamento di colore, un aumento di dimensioni o un'animazione apparirà.
• :collegamento. Principalmente si applica ai collegamenti che l'utente non ha ancora visitato. Rimangono invariate.
• : messa a fuoco. Più spesso usato per documenti di testo,quando l'utente, impostando il cursore sul campo, può cambiare il colore del testo. A volte è usato per le immagini. Ad esempio, espongono un'immagine in ombra, ma quando si fa clic, acquisisce un colore naturale.
• :librarsi. Quando l'utente sposta semplicemente il mouse su un oggetto specifico, può cambiare il colore o la forma, mentre non ha bisogno di fare clic.
• :visitato. Fondamentalmente, questa pseudo-classe è per i link visitati che cambiano il loro colore in viola per impostazione predefinita.

I principianti assumono erroneamente che queste pseudo-classi siano intese solo per i collegamenti, ma con il desiderio e l'immaginazione appropriati è possibile modificare qualsiasi elemento del sito.

Soprattutto per gli pseudo-elementi CSS

Questo gruppo di selettori include pseudo-classi che possono cambiare pseudo-elementi. Una tale pseudo classe è : primo figlio. Nel foglio di stile a cascata, è necessario creare una nuova classe per : primo figlio e imposta il colore del testo o la sua dimensione. Il risultato sarà il seguente:

• B: first-child {color: red; }

Molto spesso questo viene fatto quando necessario.seleziona diversi frammenti di testo in grassetto e solo l'inizio del paragrafo dovrebbe essere diverso. Pertanto, la classe è chiamata uguale al tag, che è responsabile del testo in grassetto. Se applichiamo questo in pratica, grazie alla pseudo-classe, solo il primo frammento evidenziato in grassetto avrà un colore rosso, le parole rimanenti saranno il nero standard.

anche : primo figlio usato per rimuovere il rientro nel primo paragrafo, poi invece colore: rosso; dovrà scrivere text-indent: 0;e B è sostituito da P (indicato anche dal tag che è responsabile dell'inizio del paragrafo).

Lingua dei contenuti

Pseudo classe : lang fondamentalmente si applica ai testi chescritto in diverse lingue Ad esempio, se l'articolo contiene citazioni nella lingua originale, per loro è possibile impostare caratteristiche separate. La sintassi per questo cluster sarà la seguente:

• Nome della classe: lang (lingua) {caratteristiche del testo (colore, tipo di carattere, tipo, ecc.)}

Per quanto riguarda la posizione "lingua", è denotatasecondo gli standard accettati. Ad esempio, English - en, Russian - ru, German - de, ecc. Grazie a questa pseudo-classe, puoi cambiare lo stile di un testo estraneo nell'intero documento.

risultati

Pseudo-classi e pseudo-elementi CSS sono uno diquelle domande a fogli di stile a cascata che causano difficoltà di comprensione. Tuttavia, non c'è nulla di complicato, la cosa principale è capire che una pseudo-classe è un certo stato che è soddisfatto nelle condizioni specificate in precedenza. Ad esempio, quando si passa il mouse o si fa clic. Uno pseudo-elemento è una parte indipendente di un documento che non fa parte del markup HTML, ma può avere il proprio stile. Potresti anche dire che questo è un codice HTML virtuale. Se guardi la situazione da questa prospettiva, tutto diventa estremamente semplice e comprensibile e con tale conoscenza puoi già iniziare a creare siti web.