English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Un file CSS è un file di testo puro salvato con l'estensione .css.
In questa guida, imparerai quanto sia facile aggiungere stili e informazioni di formattazione alle pagine web utilizzando CSS. Ma prima di iniziare, assicurati di avere alcune conoscenze di base di HTML.
Se stai entrando nel campo dello sviluppo web, per favoreDa qui inizia l'apprendimento»
Non perdiamo tempo, iniziamo a utilizzare la casella di stile catenata (CSS).
Metodi per includere CSS in un documento HTML
stili inline -usandostyleattraverso l'attributo del tag di apertura HTML.
Stili incorporati -usando<style>l'elemento dell'intestazione del documento.
Stili esterni -usando<link>elemento, punta a un file CSS esterno.
In questa guida, presenteremo una per una tutte e tre le modalità di inserimento CSS.
Attenzione:la priorità degli stili inline è la più alta, mentre quella delle tabelle di stile esterne è la più bassa. Questo significa che seStili incorporatitabella di stile eStili esternivengono specificati per un elementoStili incorporatile regole di stile conflittenti nella tabella di stile applicano le regole di stile esterni. Questo significa che se
Stili inline vengono utilizzati per applicare regole di stile uniche agli elementi tramite l'inserimento diretto delle regole CSS nel tag di apertura. Puoi usarestyleproprietà aggiunge lo stile all'elemento.
QuestostyleLe proprietà includono una serie di coppie proprietà:valore CSS. Ogni"property: value"tra loro utilizzando il punto e virgola (;）分隔， proprio come scrivi uno stile incorporato o uno stile esterno. Ma deve essere tutto in una riga, senza newline dopo il punto e virgola, come segue:
<h1 style="color:red; font-size:30px;">This is a heading</h1> <p style="color:green; font-size:22px;">Questo è un paragrafo.</p> <div style="color:blue; font-size:14px;">Questo è del testo.</div>Testa e vedrai‹/›
L'uso di stili inline è generalmente considerato un cattivo comportamento. Poiché le regole di stile sono direttamente incorporate nei tag HTML, questo combina lo stile con il contenuto del documento. Questo rende il codice difficile da mantenere e nega l'uso di CSS.
Attenzione:impostare stilipseudo-elementoepseudo-classeStili sono diventati impossibili. Pertanto, è consigliabile evitare di usare attributi di stile nel codice. UsaStili esterniè il metodo preferito per aggiungere stili a un documento HTML.
Stili incorporati influenzano solo il documento in cui sono inclusi.
Stili incorporati<head>usare una tabella di stili incorporata nel<style>definizione dell'elemento. Puoi<style>Definisci un numero illimitato di elementi nel documento HTML, ma devono apparire<head>e</head>tra i tag. Vediamo un esempio:
<!DOCTYPE html><html lang="en"><head>
<title>My HTML Document</title>
<style>
body { background-color: VerdeGiallo; }
p { color: #fff; }
</style></head><body>
<h1>This is a heading</h1>
<p>This is a paragraph of text.</p></body></html>Testa e vedrai‹/›Suggerimento:e l'etichettatypeL'attributo (cioè) definisce il linguaggio dello stile. Questo attributo è puramente informativo. Poiché il CSS è il linguaggio di stile standard e il linguaggio di stile predefinito in HTML5, puoi ignorare questa impostazione.<style><link>type="text/css"
Quando gli stili vengono applicati a molte pagine del sito, gli stili esterni sono la scelta ideale.
Gli stili esterni conservano tutte le regole di stile in un documento separato, che puoi collegare da qualsiasi file HTML del sito. Gli stili esterni sono i più flessibili, poiché con uno stile esterno, puoi modificare un file per cambiare l'aspetto dell'intero sito.
Puoi aggiungere uno stile esterno in due modi- CollegamentoeImportazione.
Prima di collegare uno stile esterno, dobbiamo creare una tabella di stili. Apriamo il tuo editor di codice preferito e crea un nuovo file. Ora, nel file, inserisci il seguente codice CSS e salvalo come "style.css".
body {
background: giallo chiaro;
font: 18px Arial, sans-serif;}h1 {
color: arancione;}può essere utilizzato<link>Il segno collega uno stile esterno di pagina al documento HTML. Il<link>tag entrare all'interno<head>parte, puoi vederla negli esempi seguenti:
<!DOCTYPE html><html lang="en"><head> <title>My HTML Document</title> <link rel="stylesheet" href="css/style.css"></head><body> <h1>This is a heading</h1> <p>This is a paragraph of text.</p></body></html>Testa e vedrai‹/›
Suggerimento:In questi tre metodi, l'uso di una tabella di stile esterna è il modo migliore per definire uno stile e applicarlo al documento HTML. Da una tabella di stile esterna, è chiaro che i file HTML influenzati richiedono la minima modifica del markup.
Questo@importUn altro metodo per caricare una tabella di stile esterna è@importindicazione al browser di caricare una tabella di stile esterna e utilizzare i suoi stili.
Puoi usarlo in due modi. Il più semplice è all'interno del titolo del documento. Nota che altre regole CSS possono ancora essere incluse in<style>negli elementi. Questo è un esempio:
<style>
@import url("css/style.css");
p {
color: blue;
font-size: 16px;
}
</style>Testa e vedrai‹/›Anche così, puoi usare@importLe regole importano una tabella di stile in un'altra tabella di stile.
@import url("css/layout.css");
@import url("css/color.css");body {
color: blue;
font-size: 14px;}Testa e vedrai‹/›Attenzione:Tutti@importTutte le regole devono apparire all'inizio della tabella di stile. Tutte le regole di stile definite nella tabella di stile saranno sovrascritte dalle regole in conflitto nella tabella di stile importata. Tuttavia, a causa dei problemi di prestazioni, non si raccomanda di importare una tabella di stile in un'altra tabella di stile.