CSS Tutorial
Iniziare con i CSS

Angular 2 AngularJS ASP.NET HTML JavaScript jQuery PHP SVG twitter-bootstrap WordPress
Ricerca…


Osservazioni

Gli stili possono essere creati in diversi modi, consentendo diversi gradi di riutilizzo e ambito quando sono specificati in un documento HTML sorgente. I fogli di stile esterni possono essere riutilizzati tra i documenti HTML. I fogli di stile incorporati si applicano all'intero documento in cui sono specificati. Gli stili in linea si applicano solo al singolo elemento HTML su cui sono specificati.

Versioni

Versione Data di rilascio
1 1996/12/17
2 1998/05/12
3 2015/10/13

Foglio di stile esterno

Un foglio di stile CSS esterno può essere applicato a qualsiasi numero di documenti HTML posizionando un elemento <link> in ogni documento HTML.

L'attributo rel del rel <link> deve essere impostato su "stylesheet" e l'attributo href al percorso relativo o assoluto del foglio di stile. Sebbene l'utilizzo di percorsi URL relativi sia generalmente considerato una buona pratica, è possibile utilizzare anche percorsi assoluti. In HTML5 l'attributo type può essere omesso .

Si consiglia di posizionare il tag <link> tag <head> del file HTML in modo che gli stili vengano caricati prima degli elementi da loro stilizzati. In caso contrario, gli utenti vedranno un lampo di contenuti senza stile .

Esempio

ciao-world.html 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <h1>Hello world!</h1>
        <p>I ♥ CSS</p>
    </body>
</html>

style.css 

h1 {
    color: green;
    text-decoration: underline;
}
p {
    font-size: 25px;
    font-family: 'Trebuchet MS', sans-serif;
}

Assicurati di includere il percorso corretto per il tuo file CSS nell'href. Se il file CSS si trova nella stessa cartella del file HTML, non è richiesto alcun percorso (come nell'esempio precedente), ma se è salvato in una cartella, specificarlo come questo href="foldername/style.css" . 

<link rel="stylesheet" type="text/css" href="foldername/style.css">

I fogli di stile esterni sono considerati il ​​modo migliore per gestire il tuo CSS. C'è una ragione molto semplice per questo: quando gestisci un sito di, ad esempio, 100 pagine, tutte controllate da un singolo foglio di stile e desideri cambiare i colori dei collegamenti da blu a verde, è molto più semplice apportare la modifica nel tuo file CSS e lascia che le modifiche "si sovrappongano" su tutte le 100 pagine piuttosto che andare in 100 pagine separate e fare la stessa modifica 100 volte. Anche in questo caso, se si desidera modificare completamente l'aspetto del proprio sito Web, è necessario aggiornare solo questo file.

È possibile caricare tutti i file CSS nella pagina HTML in base alle esigenze. 

<link rel="stylesheet" type="text/css" href="main.css">
<link rel="stylesheet" type="text/css" href="override.css">

Le regole CSS sono applicate con alcune regole di base e l'ordine non importa. Ad esempio, se hai un file main.css con del codice in esso: 

p.green { color: #00FF00; }

Tutti i tuoi paragrafi con la classe 'verde' saranno scritti in verde chiaro, ma puoi sovrascriverli con un altro file .css semplicemente includendolo dopo main.css. Puoi avere override.css con il seguente codice seguire main.css, ad esempio: 

p.green { color: #006600; }

Ora tutti i tuoi paragrafi con la classe "verde" saranno scritti in verde scuro anziché verde chiaro.

Si applicano altri principi, come la regola "! Importante", la specificità e l'ereditarietà.

Quando qualcuno visita per la prima volta il tuo sito Web, il suo browser scarica l'HTML della pagina corrente più il file CSS collegato. Quindi, quando navigano verso un'altra pagina, il loro browser deve solo scaricare l'HTML di quella pagina; il file CSS è memorizzato nella cache, quindi non è necessario scaricarlo nuovamente. Poiché i browser memorizzano nella cache il foglio di stile esterno, le tue pagine vengono caricate più velocemente.

Stili interni

I CSS racchiusi tra i <style></style> all'interno di un documento HTML funzionano come un foglio di stile esterno, tranne per il fatto che risiede nel documento HTML che disegna invece che in un file separato e pertanto può essere applicato solo al documento in cui vite. Si noti che questo elemento deve trovarsi all'interno dell'elemento <head> per la convalida HTML (sebbene funzioni in tutti i browser correnti se inserito nel body ). 

<head>
    <style>
        h1 {
            color: green;
            text-decoration: underline;
        }
        p {
            font-size: 25px;
            font-family: 'Trebuchet MS', sans-serif;
        }
    </style>
</head>
<body>
    <h1>Hello world!</h1>
    <p>I ♥ CSS</p>
</body>

Stili in linea

Usa gli stili in linea per applicare lo stile a un elemento specifico. Si noti che questo non è ottimale. L'inserimento di regole di stile in un tag <style> o in un file CSS esterno è incoraggiato al fine di mantenere una distinzione tra contenuto e presentazione.

Gli stili in linea sostituiscono qualsiasi CSS in un tag <style> o in un foglio di stile esterno. Sebbene ciò possa essere utile in alcune circostanze, questo fatto riduce il più delle volte la manutenibilità di un progetto.

Gli stili nel seguente esempio si applicano direttamente agli elementi a cui sono collegati. 

<h1 style="color: green; text-decoration: underline;">Hello world!</h1>
<p style="font-size: 25px; font-family: 'Trebuchet MS';">I ♥ CSS</p>

Gli stili in linea sono generalmente il modo più sicuro per garantire la compatibilità di rendering tra vari client, programmi e dispositivi di posta elettronica, ma può richiedere molto tempo per essere scritto e un po 'difficile da gestire.

Regola @import CSS (una delle regole at-CSS)

La regola @import @import viene utilizzata per importare regole di stile da altri fogli di stile. Queste regole devono precedere tutti gli altri tipi di regole, eccetto le regole di @charset; poiché non è un'istruzione nidificata, @import non può essere utilizzato all'interno di regole condizionali del gruppo. @import .

Come usare @import

Puoi utilizzare la regola @import nei seguenti modi:

A. Con tag di stile interno 

   <style>
    @import url('/css/styles.css');
   </style>

B. Con foglio di stile esterno

La seguente riga importa un file CSS denominato additional-styles.css nella directory root nel file CSS in cui appare: 

@import '/additional-styles.css';

È anche possibile importare CSS esterno. Un caso d'uso comune sono i file dei font. 

@import 'https://fonts.googleapis.com/css?family=Lato';

Un secondo argomento facoltativo per la regola @import è un elenco di query multimediali: 

@import '/print-styles.css' print;
@import url('landscape.css') screen and (orientation:landscape);

Cambiare CSS con JavaScript

JavaScript puro

È possibile aggiungere, rimuovere o modificare i valori delle proprietà CSS con JavaScript attraverso la proprietà di style un elemento. 

var el = document.getElementById("element");
el.style.opacity = 0.5;
el.style.fontFamily = 'sans-serif';

Si noti che le proprietà di stile sono denominate in uno stile di cassa del cammello inferiore. Nell'esempio si vede che la font-family proprietà css diventa fontFamily in javascript.

In alternativa al lavoro diretto sugli elementi, puoi creare un elemento <style> o <link> in JavaScript e aggiungerlo al <body> o <head> del documento HTML.

jQuery

La modifica delle proprietà CSS con jQuery è ancora più semplice. 

$('#element').css('margin', '5px');

Se è necessario modificare più di una regola di stile: 

$('#element').css({
    margin: "5px",
    padding: "10px",
    color: "black"
});

jQuery include due modi per cambiare le regole css che contengono trattini (ad es. font-size ). Puoi metterli tra virgolette o cammello-caso il nome della regola di stile. 

$('.example-class').css({
    "background-color": "blue",
    fontSize: "10px"
});

Guarda anche

Elenchi di stili con CSS

Esistono tre diverse proprietà per lo stile di voci di list-style-type : list-style-type , list-style-image e list-style-position , che dovrebbero essere dichiarate in tale ordine. I valori predefiniti sono disc, outside e none, rispettivamente. Ogni proprietà può essere dichiarata separatamente o utilizzando la proprietà abbreviata in list-style .

list-style-type definisce la forma o il tipo di punto elenco utilizzato per ogni elemento dell'elenco.

Alcuni dei valori accettabili per il tipo di list-style-type :

  • disco
  • cerchio
  • piazza
  • decimale
  • inferiore-romana
  • superiore romano
  • nessuna

(Per un elenco completo, consultare il wiki delle specifiche del W3C )

Ad esempio, per utilizzare punti elenco quadrati per ciascun elemento di elenco, si utilizzerà la seguente coppia valore-valore: 

li {
    list-style-type: square;
}

La proprietà list-style-image determina se l'icona elenco-elemento è impostata con un'immagine e accetta un valore pari a none o un URL che punta a un'immagine. 

li {
    list-style-image: url(images/bullet.png);
}

La proprietà list-style-position definisce dove posizionare il marker item-list e accetta uno dei due valori: "inside" o "outside". 

li {
  list-style-position: inside;
}


Modified text is an extract of the original Stack Overflow Documentation
Autorizzato sotto CC BY-SA 3.0
Non affiliato con Stack Overflow