CHE COS'E' CSS?
Partiamo introducendo per prima cosa i css...
Il css che sta letteralmente per Cascading Style Sheets è un linguaggio di formattazione stilistica e strutturale di un documento HTML o una serie di documenti in cascata...da questo termine deriva il nome vero e proprio poiché il termine cascata ci permette di modificare un qualcosa all'interno senza toccare tutto il resto direttamente da un'unica fonte...molti programmatori al giorno d'oggi associano al linguaggio html anche css...per facilitare il lavoro ma per poterlo fare c'è bisogno di molta conoscenza...in poche parole il linguaggio css serve per dichiarare il formato di un file html.
INTRODUZIONE
Grazie ai fogli di stile possiamo eseguire molte operazioni tra cui:
-separare lo stile dai contenuti della pagina attraverso un file apparte
-specificare tutti i dettagli del nostro file, colori, font, grandezza, carattere ecc...
-definire degli stili per tutti gli elementi senza essere ripetitivi
GLI STILI
I fogli di stile ci permettono di definire lo stile di un tag o di una un insieme di tag HTML attraverso delle regole di stile, questi stessi stili permettono di gestire attraverso un file unico il formato delle pagine sostituendo gli attributi che avremmo dovuto mettere in modo ripetitivo.
Si può strutturare in tre modi a seconda delle nostre esigenze:
-Direttamente su un elemento HTML
-Direttamente nell'header della pagina
-Direttamente su un file esterno (opzione più utilizzata)
Ognuno ha delle leggere differenze dall'altro ad esempio il primo va usato quando abbiamo un singolo elemento su cui agire, il secondo quando dobbiamo agire su tutti gli elementi del nostro file e l'ultimo si può adattare in base alle nostre esigenze poiché per poterlo utilizzare basta richiamarlo dove ci serve.
LE MISURE DEL FONT
All'interno del nostro le misure come ad esempio larghezza, lunghezza, altezza o dimensione si possono trovare in vari formati...vediamo le differenze:
L'unità più utilizzata è il "punto" che viene abbreviato con la scritta pt, ogni punto rappresenta 1/72 di pollici e Si riferiscono allo spazio verticale del nostro foglio.
Tra le altre tipologie abbiamo il pixel ed il pollice, che qui sotto vedremo!!
"font-size:24pt"
"font-size:1in"
"font-size:12px"
I FOGLI DI STILE IN LINEA
Questi fogli( nome originale= inline style)si utilizzando quando abbiamo la necessità di impostare uno specifico font solo per un elemento, senza andare a modificare tutti i nostri elementi del nostro fil html.
La sintassi generale è:
<TagElementoHTML="attibuto1: valore1; attributo2: valore2;…attributoN: valoreN">
UNA COSA MOLTO IMPORTANTE DA FARE E' chiudere il tag dell'elemento Html al quale si applica lo stile
Un'altro modo per usare questi fogli è incorporarli all'interno del nostro stesso file...con la seguente sintassi:
<STYLE [TYPE="text/css"]>
Selettore1{attributo1: valore1; attributo2: valore2; … attributoN: valoreN}
Selettore2{attributo1: valore1; attributo2: valore2; … attributoN: valoreN}
SelettoreN{attributo1: valore1; attributo2: valore2; … attributoN: valoreN}
</STYLE>
I SELETTORI
Questi selettori hanno un ruolo molto importante poiché consentono di selezionare solo alcuni dello stesso tipo sui quali applicare quello stile e infatti vengono chiamati selettori di elemento, mentre i selettori di classe da come già si capisce permettono di raggruppare tutti il nostro insieme.
ID="NomeLogico" esempio <p id="primo">
WHAT IS CSS?
Let's start by first introducing css....
Css which literally stands for Cascading Style Sheets is a stylistic and structural formatting language for an HTML document or a series of cascading documents...from this term comes the actual name since the term cascading allows us to edit something within without touching everything else directly from a single source. ..many programmers nowadays also associate css with the html language...to make the work easier but to be able to do it you need a lot of knowledge...in a nutshell the css language is used to declare the format of an html file.
INTRODUCTION
Thanks to style sheets we can perform many operations including:
-separate the style from the page contents through an apparte file
-specify all the details of our file, colors, font, size, font etc...
-define styles for all elements without being repetitive
Style sheets allow us to define the style of a tag or a set of HTML tags through style rules, these same styles allow us to manage through a single file the format of pages by replacing attributes that we would have to put in repetitively.
It can be structured in three ways depending on our needs:
-Directly on an HTML element
-Directly in the header of the page
-Directly on an external file (most used option).
Each one has slight differences from the other for example the first one should be used when we have a single element to act on, the second one when we need to act on all the elements in our file and the last one can be adapted according to our needs since in order to use it we just have to call it where we need it.
FONT MEASURES
Within our the measurements such as width, length, height or size can be found in various formats...let's see the differences:
The most commonly used unit is the "dot" which is abbreviated as pt, each dot represents 1/72 inches and They refer to the vertical space of our sheet.
Among other types we have the pixel and the inch, which we will see below!!!
"font-size:24pt"
"font-size:1in"
"font-size:12px"
ONLINE STYLE SHEETS
These sheets (original name = inline style) are used when we need to set a specific font only for an element, without going to modify all our elements of our html file.
The general syntax is:
<HTMLElementTag="attribute1: value1; attribute2: value2;…attributeN: valueN">
A VERY IMPORTANT THING TO DO IS close the tag of the Html element to which the style is applied
Another way to use these sheets is to embed them inside our own file...with the following syntax:
<STYLE [TYPE="text/css"]>
selector1{attribute1: value1; attribute2: value2; … attributeN: valueN}
selector2{attribute1: value1; attribute2: value2; … attributeN: valueN}
selectorN{attribute1: value1; attribute2: value2; … attributeN: valueN}
</STYLE>
THE SELECTORS
These selectors have a very important role since they allow you to select only some of the same type on which to apply that style and in fact they are called element selectors, while the class selectors, as you can already understand, allow us to group all our together.
ID="LogicName" example