Questo articolo porta avanti un argomento interessante e importante noto come Selettori e segue con una dimostrazione pratica di supporto. I seguenti suggerimenti saranno trattati in questo articolo,
- Applicazione di stili agli elementi HTML
- Selettori CSS
- Selettore ID CSS
- Selettore di classi CSS
- Selettore universale CSS
- Selettori di gruppo CSS
Quindi iniziamo allora,
Applicazione di stili agli elementi HTML
Comprendiamo cos'è CSS prima di arrivare ai selettori CSS. Se l'HTML deve essere considerato uno scheletro, i CSS (Cascading Style Sheets) sono come i muscoli e la pelle. Il cervello è JavaScript. Quindi, per una pagina web, gli stili CSS sono essenzialmente il layout e il design. Direttamente dal posizionamento delle immagini e del testo alla dimensione del carattere e al colore di sfondo, CSS controlla l'aspetto degli elementi HTML in un browser.
Puoi capire meglio i CSS, se hai una buona conoscenza di cosa sono i selettori CSS. Questi selettori ti consentono di scegliere come target elementi HTML specifici in modo da poter applicare loro lo stile giusto.
Cerchiamo di capire come possiamo selezionare gli elementi HTML,
Come selezionare gli elementi?
Supponiamo che tu voglia che una determinata intestazione abbia uno stile diverso dal resto del contenuto in una pagina web. Ora, utilizzando i selettori CSS, puoi indirizzare quell'elemento HTML per modellarlo in modo diverso. I selettori CSS aiutano a definire gli elementi per i quali si applica un certo insieme di regole CSS. Esistono vari tipi di selettori CSS che ti consentono di scegliere con precisione gli elementi che desideri applicare allo stile. Potresti dare all'intera pagina web uno stile generale e poi lavorare a modo tuo per modellare altri elementi della pagina.
Java differenza tra implements ed extends
I selettori fanno parte di una regola CSS e questi selettori vengono subito prima della dichiarazione dei blocchi CSS. Per una migliore comprensione, puoi fare riferimento all'immagine sottostante.
Andando avanti con l'articolo sui selettori CSS
Selettori CSS
Questo selettore ti consente di selezionare un elemento HTML in base al suo nome.
Considera il codice seguente:
p {text-align: center color: magenta}Questo stile verrà applicato a ogni paragrafo.
Paragrafo 1
Paragrafo 2
Questo codice ti darà il seguente output:
Questo stile verrà applicato a ogni paragrafo
Paragrafo 1
Paragrafo 2
Nel codice sopra, gli elementi HTML sono stati allineati al centro e hanno il colore 'magenta'.
Andando avanti con l'articolo sui selettori CSS
Selettore ID CSS
Selezionando l'attributo id di un elemento HTML, puoi selezionare quell'elemento specifico. Poiché l'id è univoco per una pagina, puoi selezionare l'elemento giusto utilizzando l'attributo id.
È possibile selezionare l'elemento HTML utilizzando '#' seguito dall'id di quell'elemento. Ad esempio, '#firstname' seleziona l'elemento in cui l'id è 'firstname'.
Considera il codice seguente:
# para1 {text-align: center color: orange}Ciao mondo
Questo paragrafo non verrà modificato.
L'output per il codice precedente è:
Ciao mondo
__init__ in Python
Questo paragrafo non verrà modificato.
Come puoi vedere nell'output sopra, includendo id = 'para1 ″, siamo stati in grado di cambiare il colore di quell'elemento in arancione. L'altro elemento che non ha questo rimane inalterato.
Andando avanti con l'articolo sui selettori CSS
Selettore di classi CSS
Utilizzando il selettore di classe, è possibile selezionare elementi HTML che hanno un attributo di classe specifico. È possibile definire il selettore utilizzando un punto (simbolo del punto) seguito dal nome della classe. Ad esempio, .intro seleziona gli elementi in cui la classe è 'intro'. Una cosa da tenere a mente è che non puoi mai iniziare un nome di classe con un numero.
Considera il codice seguente:
.center {text-align: center color: pink}Questa intestazione è rosa e allineata al centro.
Questo paragrafo è rosa e allineato al centro.
L'output del codice precedente è:
Questa intestazione è rosa e allineata al centro.
Questo paragrafo è rosa e allineato al centro.
Puoi utilizzare i selettori di classe CSS per un elemento specifico. Se desideri che venga assegnato lo stile a un solo elemento specifico, puoi utilizzare il nome dell'elemento insieme al selettore di classe.
Ad esempio, considera il codice seguente:
p.center {text-align: center color: pink}Questa intestazione non è interessata
Questo paragrafo è rosa e allineato al centro.
L'output del codice precedente è:
Questa intestazione non è interessata
Questo paragrafo è rosa e allineato al centro.
Come puoi vedere nell'output, l'intestazione h2 non è influenzata dallo stile. Poiché abbiamo specificato 'p.center', solo il paragrafo è influenzato dallo stile.
Andando avanti con questo articolo sui selettori CSS,
Selettore universale CSS
Questo tipo di selettore può essere considerato come un carattere jolly che seleziona tutti gli elementi nella pagina. Seleziona tutti gli elementi della pagina ed è specificato da “*”.
Ad esempio, considera il codice seguente:
* {color: darkgreen font-size: 30px}Questo è un test (carattere più piccolo)
Questo è un paragrafo.
L'output per il codice precedente è:
Ciao mondo
Questo è un test (carattere più piccolo)
Questo è un paragrafo.
Come puoi vedere nell'output, tutti gli elementi definiti utilizzando il selettore di gruppo hanno la stessa definizione di stile: sono allineati al centro e il colore del carattere è ciano.
come cambiare il percorso java
Questo ci porta alla fine di questo articolo.
Dai un'occhiata al nostro che viene fornito con formazione dal vivo con istruttore e esperienza di progetto nella vita reale. Questa formazione ti consente di acquisire competenze per lavorare con tecnologie web back-end e front-end. Include formazione su sviluppo Web, jQuery, Angular, NodeJS, ExpressJS e MongoDB.
Hai domande per noi? Per favore menzionalo nella sezione commenti dell'articolo e ti risponderemo.