I fogli di stile a cascata (CSS) ti consentono di trasformare l'aspetto delle tue pagine web. Dai caratteri e colori alla spaziatura e al layout generale, tutti i tipi di strumenti di progettazione sono a portata di mano. Sebbene CSS sia un linguaggio complicato nella sua interezza, ci sono solo due concetti di base che devi capire per iniziare.
Tutto inizia con l'identificare esattamente quale parte di una pagina si desidera applicare allo stile.
Un file CSS contiene una serie di regole che descrivono come deve essere formattato un file HTML. Ogni regola è composta da due parti: cosa modellare e come modellarlo. La prima parte è controllata utilizzando una serie di termini noti come "selettori".
Gli esempi in questo articolo includono le dichiarazioni di stile, ma non sono il focus: lo sono i selettori stessi.
Storicamente, c'erano tre livelli di selettore CSS (o versioni) con vari gradi di supporto del browser. Nel 2020, secondo Can I Use , questi sono tutti disponibili per oltre il 99% degli utenti in tutto il mondo.
Il livello 1 ha introdotto i quattro tipi fondamentali di selettori che coprono un numero enorme di casi, ancora oggi.
| Modello | partite |
|---|---|
E |
tutti gli elementi E |
.c |
tutti gli elementi con class="c" |
#myid |
l'elemento con id="myid" |
E F |
un elemento F all'interno di un elemento E |
| Pseudo-classi | |
E:link |
un collegamento ipertestuale a una pagina che non è stata precedentemente visitata |
E:visited |
un collegamento ipertestuale a una pagina che è già stata visitata |
E:active |
un collegamento ipertestuale attualmente selezionato |
| Pseudo-elementi | |
E::first-line |
la prima riga formattata di un elemento E |
E::first-letter |
la prima lettera formattata di un elemento E |
Il selettore più semplice è il "selettore di tipo". Mira a tutte le istanze di un elemento, come un paragrafo o un testo in grassetto:
p { margin-bottom: 0; } b { font-family: sans-serif; }
L'attributo class consente di aggiungere ulteriore semantica a un elemento HTML, come un tipo specifico di paragrafo. Tali elementi possono essere selezionati in CSS come segue:
.intro { font-weight: bold; }
Questo selettore corrisponderebbe a:
…
Ma tieni presente che corrisponderebbe anche a:
…Se vuoi che si applichi solo ai paragrafi introduttivi, puoi combinare il selettore di tipo e il selettore di classe:
p.intro { font-weight: bold; }
L'attributo ID HTML dovrebbe essere univoco all'interno di un documento, ad esempio se hai:
…
Questo dovrebbe essere l'unico elemento con un id "contenuto". Un selettore ID ti consente di scegliere come target quell'elemento specifico in un documento:
#contents { color: #333; }
Rigorosamente, un "combinatore", perché questo selettore riguarda lo spazio tra gli altri due. L'HTML è gerarchico, come spiegato nella nostra panoramica del DOM . Un selettore discendente consente di identificare un elemento dal suo contesto all'interno di un altro elemento:
table b { font-weight: normal; }
Gli pseudo selettori prendono di mira classi o elementi che non esistono esplicitamente ma sono comunque resi disponibili. Considerali come bonus di contenuti speciali:
p::first-line { text-transform: uppercase; }
Utilizzare una virgola per combinare i selettori in un elenco se si desidera applicare a ciascuno lo stesso insieme di regole. Invece di:
th { padding: 1em; } td { padding: 1em; }
Tu puoi scrivere:
th, td { padding: 1em; }
Un foglio di stile è una serie di regole che utilizzano un selettore per abbinare un elemento, ma cosa succede quando più di una regola corrisponde a un dato elemento? Il comportamento risultante è governato dalla "specificità" che definisce quale regola viene utilizzata in un caso come:
p.intro { color: black; } p { color: gray; }
In tali casi, la norma prioritaria è definita dalla sua specificità, come segue:
Nel calcolo della specificità, ogni livello viene considerato solo se due selettori hanno lo stesso punteggio al livello più alto, quindi "#contenuti" è più specifico di "articolo.news p.autore.speciale" perché il primo "vince" sui selettori ID.
La successiva revisione dei selettori CSS ha introdotto i selettori di attributo, ampliato su pseudo-classi e pseudo-elementi e ha aggiunto due nuovi combinatori.
| Modello | partite |
|---|---|
* |
qualsiasi elemento |
E > F |
un elemento F figlio di un elemento E |
E + F |
un elemento F immediatamente preceduto da un elemento E |
| Selettori di attributi | |
E[foo] |
un elemento E con un attributo "pippo" |
E[foo="bar"] |
un elemento E il cui attributo "foo" è esattamente "bar" |
E[foo~="bar"] |
un elemento E il cui attributo "foo" è un elenco di valori separati da spazi, uno dei quali è "bar" |
E[foo|="en"] |
un elemento E il cui attributo "foo" ha un elenco di valori separati da trattini che iniziano con "en" |
| Pseudo-classi | |
E:first-child |
un elemento E, primo figlio del suo genitore |
E:lang(fr) |
un elemento di tipo E nel linguaggio "fr" |
| Pseudo-elementi | |
E::before |
contenuto generato prima del contenuto di un elemento E |
E::after |
contenuto generato dopo il contenuto di un elemento E |
Il "*" corrisponde a qualsiasi elemento. Non è spesso così utile, ma se desideri ripristinare i margini predefiniti, ad esempio, puoi farlo:
* { margin: 0; }
I selettori di attributo consentono agli stili di essere mirati in modo molto specifico, filtrati in base all'attributo di un elemento:
a[title] { text-decoration: underline dotted; }
Simile al combinatore discendente, ma questo corrisponde solo ai figli immediati, non ai discendenti più in basso nell'albero. Ad esempio, "ul > li" corrisponderà solo al testo "Sezione 1" qui e non a "Sezione 1.1":
Section 1
Section 1.1Section 1.2h1 + p { font-weight: bold; }
Spesso utile per controllare i margini, o un paragrafo introduttivo senza una classe specifica, questo selettore abbina un elemento solo se ne segue immediatamente un altro. Nell'esempio, verrà abbinato solo il primo paragrafo qui, non il secondo:
Contents
some extra text
Introductory paragraph
Following paragraph
Nota che questo selettore considera solo gli elementi, non il testo, quando decide quale sarà il prossimo fratello.
Alcune proprietà CSS ereditano il loro valore da un elemento antenato. In pratica, questo significa, ad esempio, che l'impostazione del carattere dell'elemento "body" significa che ogni paragrafo, tabella, ecc. utilizza anche lo stesso carattere.
Naturalmente, questo è esattamente quello che ti aspetteresti, ma considera una proprietà che non eredita: "margine", per esempio. Non vorrai che ogni singolo paragrafo o parte di testo in grassetto abbia lo stesso margine dell'intero documento.
Correlati: semplici esempi di codice CSS che puoi imparare in 10 minuti
Una buona regola empirica è scegliere come target gli elementi nel modo più generico possibile: non scegliere come target ogni singolo elemento quando lo farà un semplice selettore "corpo".
Molte altre pseudo-classi sono state aggiunte in questo livello, insieme ad alcuni selettori di attributi e un nuovo combinatore.
| Modello | partite |
|---|---|
E ~ F |
un elemento F preceduto da un elemento E |
| Selettori di attributi | |
E[foo^="bar"] |
un elemento E il cui attributo "foo" inizia con la stringa "bar" |
E[foo$="bar"] |
un elemento E il cui attributo "foo" termina con la stringa "bar" |
E[foo*="bar"] |
un elemento E il cui attributo "foo" contiene la sottostringa "bar" |
| Pseudo-classi | |
E:root |
un elemento E, radice del documento |
E:nth-child(n) |
un elemento E, l'n-esimo figlio del suo genitore |
E:nth-last-child(n) |
un elemento E, l'n-esimo figlio del suo genitore, contando dall'ultimo |
E:nth-of-type(n) |
un elemento E, l'ennesimo fratello del suo tipo |
E:nth-last-of-type(n) |
un elemento E, l'ennesimo fratello del suo tipo, contando dall'ultimo |
E:last-child |
un elemento E, ultimo figlio del suo genitore |
E:first-of-type |
un elemento E, primo fratello del suo tipo |
E:last-of-type |
un elemento E, ultimo fratello del suo tipo |
E:only-child |
un elemento E, figlio unico del suo genitore |
E:only-of-type |
un elemento E, unico fratello del suo tipo |
E:empty |
un elemento E che non ha figli (compresi i nodi di testo) |
E:target |
un elemento E è l'obiettivo dell'URI di riferimento |
E:enabled |
un elemento dell'interfaccia utente E che è abilitato |
E:disabled |
un elemento dell'interfaccia utente E che è disabilitato |
E:checked |
un elemento dell'interfaccia utente E che è selezionato |
E:not(s) |
un elemento E che non corrisponde al selettore semplice s |
Puoi selezionare elementi con un attributo che inizia con un dato valore: a[href^="https:"], finisce con un dato valore: img[src$=".gif"], o contiene un valore: a[*="value"].
Le pseudo-classi aggiuntive includono ":last-child", ":empty" (per abbinare un elemento senza contenuto) e ":checked" che corrisponde a un elemento come un input di casella di controllo, ma solo quando è selezionato.
Simile al Combinatore di fratelli adiacenti del livello 2, questo corrisponde a qualsiasi fratello che viene dopo l'altro, non solo a quello successivo:
h1 ~ p { font-size: 110%; }
Ora sai praticamente tutto quello che c'è da sapere su come selezionare parte di una pagina web usando i CSS. Ora sei pronto per dare uno stile alle tue pagine con la grande varietà di proprietà CSS che coprono tutto, dai colori al layout.
Credito immagine: Pankaj Patel/ Unsplash
Sebbene sia possibile utilizzare una calcolatrice grafica sul computer, l'interprete del linguaggio di programmazione Python può fungere anche da calcolatrice da tavolo. È uno scherzo così popolare nella comunità Python che è menzionato nel tutorial ufficiale. Ecco come puoi usare Python come calcolatrice.
Come programmatore, dovresti accettare le sfide per sopravvivere e costruire alcune meraviglie nel campo dello sviluppo o della programmazione. Quindi, se stai cercando di imparare un linguaggio di programmazione avanzato per migliorare le tue capacità professionali, Java è una delle migliori prospettive in circolazione.
Imparare un nuovo linguaggio di programmazione come Python diventa facile se hai una tabella di marcia completa che dettaglia quali concetti imparare come principiante e come progredire ulteriormente per raggiungere il prossimo traguardo. Anche i programmatori intermedi dovrebbero spesso rispolverare le proprie nozioni di base per costruire una solida base per se stessi.
Al giorno d'oggi, è pratica comune creare un sito Web o un'app che regoli la sua interfaccia utente a seconda del browser o del dispositivo. Ci sono due approcci per raggiungere questo obiettivo. Il primo prevede la creazione di versioni diverse del tuo sito Web o della tua app per dispositivi diversi. Ma è inefficiente e può portare a errori imprevedibili.
Lavorare con i numeri è parte integrante della programmazione. Ogni linguaggio di programmazione fornisce supporto per manipolare i numeri in molti modi diversi. In questo articolo imparerai come trovare il numero totale di cifre in un numero intero utilizzando approcci iterativi, basati su log e basati su stringhe.
I container sono estremamente utili per lo sviluppo, la distribuzione e la gestione del software in un ambiente virtuale. Docker è utile nel processo di containerizzazione, ma non è l'unica piattaforma disponibile. Se stai cercando delle alternative a Docker, non cercare oltre. Questo elenco mostra alcune alternative Docker ricche di funzionalità ed efficienti da utilizzare nel tuo prossimo progetto.
SQL vs NoSQL: qual è il miglior database per il tuo prossimo progetto?
Incorporare servizi di terze parti nei tuoi post di WordPress è un modo entusiasmante per catturare l'interesse di un visitatore. Il contenuto incorporato fornisce anche indicazioni visive che semplificano la scansione. WordPress ha reso facile l'aggiunta di questo tipo di contenuto.
Node.js è un ambiente di runtime JavaScript che consente di eseguire JavaScript al di fuori dei browser Web, rendendolo una scelta popolare per lo sviluppo di tutti i tipi di applicazioni. Parte della sua popolarità è dovuta alla pletora di pacchetti NPM disponibili per facilitare l'esperienza degli sviluppatori.
Solidity è il linguaggio di programmazione utilizzato dagli smart contract sulla blockchain di Ethereum. È un linguaggio di programmazione orientato agli oggetti e tipizzato in modo statico.
I badge GitHub possono aumentare la leggibilità di un repository fornendo agli utenti un modo rapido per acquisire le metriche del repository. I badge possono essere incorporati nel tuo README.md per chiarire l'importanza e la necessità del tuo progetto ad altri sviluppatori. Di conseguenza, i lettori si fanno un'idea molto veloce del repository controllando i badge allegati.
Le giornate celebrative internazionali sono un bel modo per dare riconoscimento a questioni sociali, giornate storiche e rispettive carriere. La Giornata internazionale dei programmatori celebra il ruolo che i programmatori svolgono per migliorare la vita di tutti i giorni. Il mondo civilizzato in cui viviamo è un prodotto del duro lavoro svolto dai programmatori.
Che si tratti di una query di database o di risultati di operazioni matematiche, il metodo del formato stringa Python offre un modo più dinamico e accattivante per presentare i risultati a un utente.
All'inizio di quest'anno, Microsoft ha rilasciato la versione di anteprima di Visual Studio 2022 nel mondo della programmazione selvaggia. Questa è una buona notizia! È un IDE estremamente popolare, ma dovrebbe essere messo a punto o forse anche una revisione, dato il ritmo del cambiamento nell'ecosistema DevOps in cui prospera.
Le metriche del software sono misure utilizzate per quantificare vari aspetti del software. Questi aspetti possono variare dal costo, alla qualità e all'efficienza del team di sviluppo.
Come utente Windows, probabilmente ti sei imbattuto almeno una volta nelle parole .NET Framework. È un framework software sviluppato da Microsoft che ti consente di creare ed eseguire programmi C#, C++, F# e Visual Basic. L'ultima versione di .NET è la 4.8, ma il tuo computer potrebbe aver bisogno di una versione precedente di .NET (come .NET 3.5) per eseguire alcune app.
Se sei uno sviluppatore Python, puoi trarre grandi vantaggi dalla gamma di framework disponibili. Mentre alcuni framework sono più adatti per grandi ecosistemi, altri sono specializzati nel servire specifici obiettivi di sviluppo. Continua a leggere per apprendere le funzionalità di base, gli usi e le differenze tra due framework Python: Flask e CherryPy.
Molti programmatori amano risolvere complicati problemi matematici usando il codice. Aiuta ad affinare la mente e migliorare le capacità di risoluzione dei problemi. In questo articolo imparerai come trovare i quadrati e i cubi perfetti a n cifre più piccoli e più grandi utilizzando Python, C++ e JavaScript. Ciascun esempio contiene anche un output di esempio per diversi valori.
L'esecuzione di Python dal terminale è spesso inevitabile. Tuttavia, se hai appena installato Python su Windows 10 per la prima volta, eseguirlo tramite il Terminale di Windows è possibile solo se viene aggiunto alla variabile di ambiente PATH di Windows.
L'istruzione if è la forza trainante della programmazione logica. Di conseguenza, una migliore comprensione di Python è un'aggiunta significativa alle tue capacità di programmazione in Python.
Sebbene sia possibile utilizzare una calcolatrice grafica sul computer, l'interprete del linguaggio di programmazione Python può fungere anche da calcolatrice da tavolo. È uno scherzo così popolare nella comunità Python che è menzionato nel tutorial ufficiale. Ecco come puoi usare Python come calcolatrice.
Come programmatore, dovresti accettare le sfide per sopravvivere e costruire alcune meraviglie nel campo dello sviluppo o della programmazione. Quindi, se stai cercando di imparare un linguaggio di programmazione avanzato per migliorare le tue capacità professionali, Java è una delle migliori prospettive in circolazione.
Imparare un nuovo linguaggio di programmazione come Python diventa facile se hai una tabella di marcia completa che dettaglia quali concetti imparare come principiante e come progredire ulteriormente per raggiungere il prossimo traguardo. Anche i programmatori intermedi dovrebbero spesso rispolverare le proprie nozioni di base per costruire una solida base per se stessi.
Al giorno d'oggi, è pratica comune creare un sito Web o un'app che regoli la sua interfaccia utente a seconda del browser o del dispositivo. Ci sono due approcci per raggiungere questo obiettivo. Il primo prevede la creazione di versioni diverse del tuo sito Web o della tua app per dispositivi diversi. Ma è inefficiente e può portare a errori imprevedibili.
Lavorare con i numeri è parte integrante della programmazione. Ogni linguaggio di programmazione fornisce supporto per manipolare i numeri in molti modi diversi. In questo articolo imparerai come trovare il numero totale di cifre in un numero intero utilizzando approcci iterativi, basati su log e basati su stringhe.
I container sono estremamente utili per lo sviluppo, la distribuzione e la gestione del software in un ambiente virtuale. Docker è utile nel processo di containerizzazione, ma non è l'unica piattaforma disponibile. Se stai cercando delle alternative a Docker, non cercare oltre. Questo elenco mostra alcune alternative Docker ricche di funzionalità ed efficienti da utilizzare nel tuo prossimo progetto.
SQL vs NoSQL: qual è il miglior database per il tuo prossimo progetto?
Incorporare servizi di terze parti nei tuoi post di WordPress è un modo entusiasmante per catturare l'interesse di un visitatore. Il contenuto incorporato fornisce anche indicazioni visive che semplificano la scansione. WordPress ha reso facile l'aggiunta di questo tipo di contenuto.
Node.js è un ambiente di runtime JavaScript che consente di eseguire JavaScript al di fuori dei browser Web, rendendolo una scelta popolare per lo sviluppo di tutti i tipi di applicazioni. Parte della sua popolarità è dovuta alla pletora di pacchetti NPM disponibili per facilitare l'esperienza degli sviluppatori.
Solidity è il linguaggio di programmazione utilizzato dagli smart contract sulla blockchain di Ethereum. È un linguaggio di programmazione orientato agli oggetti e tipizzato in modo statico.
