CSS: connettersi al documento web

L'apprendimento del CSS è il prossimo dopo l'HTML e un passaggio obbligato nel controllo della programmazione web. Questa tecnologia amplia notevolmente le possibilità di layout delle pagine Internet e riduce anche il tempo di lavoro del progettista del layout sul progetto, riduce la quantità di codice. Il tema è facile da capire e l'inclusione dei font CSS non crea problemi agli studenti.

Fogli di stile a cascata

CSS (English Cascade Style Sheets - Cascading Style Sheets) è un linguaggio di markup per le pagine Web, sul quale Haakon Wium Li ha iniziato a lavorare nel 1994.

Nel 1996, il suo lavoro è stato riconosciuto dal World Wide Web Consortium W3C, è stata rilasciata la prima versione di CSS1. Da allora, il linguaggio ha subito cambiamenti e adattamenti nella direzione del miglioramento e del miglioramento.

Usando i CSS, collegandolo ai complementi del codice HTML ed estendendo le funzionalità di quest'ultimo:

• cambiare il testo sulla pagina non appena l'immaginazione del progettista può disegnare. Allo stesso tempo, la funzionalità è più ampia persino tra questi mastodonti tra gli editor di testo come MS Word o LibreOffice;
• consente di applicare la formattazione a documenti di grandi dimensioni o un numero significativo di essi all'interno dello stesso sito, cosa che causa ai webmaster minori sforzi e tempo;
• poiché la quantità di codice è ridotta, la velocità di caricamento della pagina aumenta, il che è molto importante per gli utenti con una connessione lenta o limitata;
• ha strumenti per il layout cross-browser - un fattore molto importante quando si aumentano i tipi di dispositivi con la possibilità di accedere a Internet (gadget).

I CSS4 attualmente utilizzati, lavorando in tandem con HTML5, soddisfano tutte le esigenze della moderna creazione di siti web. Molti professionisti IT credono che CSS4 abbia raggiunto il massimo sviluppo e le seguenti versioni non verranno rilasciate - non sono necessarie.

sintassi

La connessione CSS al codice HTML viene eseguita tramite una coppia di tag , all'interno del quale è posizionata l'istruzione per il comportamento di un elemento su una pagina web, che ha la seguente sintassi:

p {text-indent: 5%;} 

Applicando questo stile al tag

, in tutto il documento, i paragrafi saranno rientrati del 5% dall'inizio della riga.

La costruzione si chiama dichiarazione di stile e deve essere inserita nella parte di intestazione del documento Web contenente informazioni tecniche tra i tag. . La struttura di questa dichiarazione di stile per il tag

è questo:

1. p - identificatore.
2. text-indent è una proprietà di stile.
3. 5% - valore della proprietà.

Questi sono termini speciali, definizioni usate nei libri di testo che sono comuni tra i programmatori. Dovrebbero ricordare!

Lavora con il carattere

L'informazione sotto forma di testo è ciò che il 99% dei visitatori del sito futuro troverà in cerca dei dati necessari. Pertanto, la leggibilità del carattere, la sua estetica e la facilità di percezione visiva giocano un ruolo importante per la frequenza della risorsa. La connessione CSS qui sarà l'azione che è in grado di soddisfare i requisiti elencati.

Per la tecnologia di manipolazione dei font ha un ricco toolkit. Il più chiaro sotto forma di tabella è quello di fornire un altro modo per collegare i caratteri CSS per un tag.

che allinea il testo:

Un esempio di come il browser visualizzerà ogni dichiarazione di stile:

Un certo numero di stili sono usati per lavorare con il testo. Un elenco completo di loro, il loro scopo, le loro proprietà e valori possono essere trovati nei libri di riferimento CSS.

File css esterni

La connessione CSS può essere effettuata tramite file esterni. In questo caso, oltre al documento HTML principale, un documento con stili viene creato separatamente e si trova nella stessa directory del documento HTML stesso. Il loro numero può essere qualsiasi. L'algoritmo per il collegamento di file CSS esterni consiste in soli due passaggi:

1. In un editor di testo, crea un documento con stili, specifica un'estensione per esso .css. Con questo tag non specificato.
2. Nel documento HTML nell'intestazione del documento (tra i tag ) è necessario fare riferimento a questo file usando la seguente costruzione:

    ​ 

Invece di style.css, devi specificare il tuo indirizzo di file. In questo caso, l'indirizzamento può essere sia assoluto che relativo. I vantaggi sono ovvi:

• i file esterni possono essere applicati a qualsiasi numero di pagine Web all'interno del sito;
• se si specifica l'indirizzamento assoluto, quindi a diversi siti. Ovviamente, con questo, il markup viene scritto una volta e non c'è bisogno di prescrivere uno stile per ogni pagina;
• quando il programmatore utilizza questo metodo, l'utente finale non sarà in grado di visualizzare il codice CSS. In questo modo puoi proteggere la tua creatività dal plagio.

Inoltre, quando si lavora con il codice di markup, il progettista del layout commette errori. Sono più facili da trovare e risolvere in un file separato di dimensioni ridotte rispetto al codice HTML solitamente ingombrante.

Utilizzando la tecnologia JavaScript

Quando si formatta il testo su una pagina Web, è spesso necessario impostare uno stile per un frammento specifico diverso da quello circostante. Se questo stile viene applicato ripetutamente sul sito Web o in un documento Web di grandi dimensioni, allora è conveniente implementare la connessione di CSS tramite JavaScript attraverso la costruzione:

Ancora una volta, invece di style.css, viene scritto l' indirizzo relativo o assoluto del file esterno con l'estensione .css.

Questo metodo verrà studiato in modo più dettagliato quando si studia la programmazione in JavaScript. La menzione di lui qui è una corsa forzata, ma necessaria per lavorare con i testi a questo livello.