Come si definiscono gli stili?
Come si definiscono gli stili?
Come si definiscono gli stili? è una lezione HTML for Kids gratuita su CoddyKit. Questa è la lezione 1 di 1. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento HTML for Kids, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso HTML for Kids include 1 lezioni in totale.
Introduzione
Salve,
Nella lezione precedente lo abbiamo spiegato in parte. Ora ripetiamolo.
In CSS gli stili possono essere definiti in 3 modi:
- Stile inline
- Tra i tag <style>.
- Utilizzando un file CSS esterno
Stile inline
1. Stile inline
Come suggerisce il nome, indica gli stili che definiamo passando l'attributo style inline a ogni elemento.
Questo utilizzo non è consigliato perché riduce la riutilizzabilità di ogni stile e la sua leggibilità è molto bassa.
Nell'esempio seguente, lo stile letter-spacing crea uno spazio di 15px tra ogni lettera del testo.
<p style="letter-spacing:15px">
Inline Style
</p>con il tag style
2. Tra i tag <style>.
Può essere definito tra i tag style. Anche questa modalità non è consigliata, salvo alcune eccezioni (come l'area dei contenuti above the fold).
Continueremo a utilizzare i tag style per mantenere organizzati i nostri esempi. Tuttavia, non ne consiglio l'utilizzo nelle vostre applicazioni (tranne nei casi eccezionali che ho menzionato).
<html>
<head>
<style>
.root {
color:red;
}
</style>
</head>
<body class>
<div class="root">Test</div>
</body>
</html>File CSS esterno
3. File CSS esterno
Ora impariamo a utilizzare i file CSS esterni.
Questa è la definizione dello stile che utilizzeremo più spesso. Prima di tutto, viene creato un file contenente solo selettori CSS.
Successivamente, il file CSS pertinente può essere definito per l'elemento link tra i tag head.
Nell'esempio seguente, il file style.css viene assegnato all'elemento link tramite l'attributo href.
<link rel = "stylesheet" href = "styles.css">
Questa funzionalità è la soluzione migliore per consentire a più file di utilizzare lo stesso file CSS e aumentare la riutilizzabilità.
Nell'esempio seguente è stata creata una definizione di stile che seleziona la classe external.
.external{
color:red;
font-size:30px;
letter-spacing:10px;
}
Nell'esempio seguente è stata creata una definizione di stile che seleziona la classe external.
Salviamo questa dichiarazione nel file denominato test 1.css e assegniamola all'elemento link.
<html>
<head>
<link rel="stylesheet"
href="https://coddy.s3.amazonaws.com/css/test_1.css">
</head>
<body>
<div class="external">Hello</div>
</body>
</html>Congratulazioni
Congratulazioni 🎉
In questa sezione, abbiamo imparato i tipi di definizione degli stili in CSS.
Nella sezione successiva impareremo lo Selector per id.
Impara HTML con un tutor IA — gratis
Scrivi ed esegui vero codice nel tuo browser, ricevi aiuto istantaneo da un tutor IA disponibile 24/7, e riprendi da dove hai lasciato sul web o nell'app.
- Corsi
- 16
- Lezioni
- 35
Domande Frequenti
La lezione «Come si definiscono gli stili?» è gratuita?
Sì — il testo completo di «Come si definiscono gli stili?» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso HTML for Kids, passa a CoddyKit PRO. Il corso HTML for Kids include 1 lezioni in totale.
Cosa imparerò in «Come si definiscono gli stili?»?
Come si definiscono gli stili? Eserciti HTML for Kids con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare HTML for Kids?
Non è richiesta alcuna esperienza precedente. HTML for Kids su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 1 di 1.
Quanto tempo richiede la lezione «Come si definiscono gli stili?»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione HTML for Kids?
Sì. Ogni lezione HTML for Kids include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.