10 link utili per imparare meglio CSS

Oggi vorrei presentarvi un elenco di link utili per imparare meglio linguaggio CSS, come sapiamo la visualizzazione finale della nostra pagina web o del sito che è fatto di pagine alla fine dipende da stili CSS applicati.

E per confermarlo guarda questo video dal nostro corso gratuito dedicato al linguaggio CSS.

Quindi se stai imparando i CSS o vuoi migliorare le tue conoscenze questi link ti saranno da guida

CSS Syntax(http://w3.org/TR/css-syntax-3)

CSS Cascading and Inheritance(http://w3.org/TR/css-cascade-3)

CSS Color(http://3.org/TR/css3-color)

CSS Selectors(http://w3.org/TR/selectors)

CSS Backgrounds & Borders(http://w3.org/TR/css3-background)

CSS Values and Units(http://w3.org/TR/css-values-3)

Per esempio, ma sapevi che esistono unita di misurazioni che si adattano da soli allo cambio del valore del font-size,

Informative Summary of Relative Units
unit relative to
em font size of the element
ex x-height of the element’s font
ch width of the "0" (ZERO, U+0030) glyph in the element’s font
rem font size of the root element
vw 1% of viewport’s width
vh 1% of viewport’s height
vmin 1% of viewport’s smaller dimension
vmax 1% of viewport’s larger dimension

Prova bottone

Vediamo il codice CSS del nostro bottone con dove i valori impostati in unita assoluti  px.

padding: 6px 16px;
border: 1px solid #446d88;
background: #58a linear-gradient(#77a0bb, #58a);
border-radius: 4px;
box-shadow: 0 1px 5px gray;
color: white;
text-shadow: 0 -1px 1px #335166;
font-size: 20px;
line-height: 30px;

E vediamo lo stesso bottone in unita relativi che dipendono solo dal valore impostato per altezza del testo

padding: .6em .9em;
border: 1px solid #446d88;
background: #58a linear-gradient(#77a0bb, #58a);
border-radius: .2em;/* .2em significa 0.2em lo zero posiamo non scrivere. 
box-shadow: 0 .05em .25emgray;
color: white;
text-shadow: 0 -.05em .05em#335166;
font-size: 225%;/un suggerimento,  l'altezza base nel mio template corisponde a 13 px quindi  font-size 225 % corrisponde a 29px circa. e altri valori imposti in em vengono calcolati dal browser prendendo come base valore impostto per il bottone di font-size cio è 29 px. 
line-height: 1.5;

Prova bottone2

E quindi cambiando solo il valore di font-size altri valori si adeguano in automatico. Cosi posiamo piu facilmente cambiare la grandezza del nostro bottone agendo solo su un valore. 

CSS Text(http://w3.org/TR/css-text-3)

CSS Text Decoration(http://w3.org/TR/css-text-decor-3)

CSS Fonts(http://w3.org/TR/css3-fonts)

CSS Basic User Interface(http://w3.org/TR/css3-ui)

Visitando anche altri link potrai sicuramente imparare delle cose nuove. E come utilizarli in paratica scopri dal video corso CSS pratica

Letto 388 volte