Selettori

elemento di una classe specifica

DIV.warning

elemento di un id specifico

DIV#myid

elemento contenuto

body p{ /* tutti i p contenuti in body */ }

contenuto in

#el-id p{   }
.class p{   }
body p{   }

figlio di

#el-id > p{   }
.class > p{   }
body > p{   }

adiacente a

#el-id + p{   }
.class + p{   }
body + p{   }

per attributo

select option[selected] { /* tag contenente l'attributo*/ }
input[type=text]{   }
input[class~=text]{ /* match di una parola in una lista separata da spazi */ }
input[class|=text]{ /*select elements with the specified attribute starting with the specified value*/ }
input[class^="top"] { /* attribute value begins with a specified value */ }
input[class$="test"] { /* end with */ }
input[class*="te"] { /* contains */ }

Pseudo classi

:link
:hover
:active
:visited
:focus

Cascade

  • specificità
    • style
    • class
    • !important
    • peso dei selettori
    • ultimo selettore
  • peso dei selettori

selettori di elementi valgono 1, classi 10, id 100

  *             {}  /* a=0 b=0 c=0 -> specificity =   0 */
  LI            {}  /* a=0 b=0 c=1 -> specificity =   1 */
  UL LI         {}  /* a=0 b=0 c=2 -> specificity =   2 */
  UL OL+LI      {}  /* a=0 b=0 c=3 -> specificity =   3 */
  H1 + *[REL=up]{}  /* a=0 b=1 c=1 -> specificity =  11 */
  UL OL LI.red  {}  /* a=0 b=1 c=3 -> specificity =  13 */
  LI.red.level  {}  /* a=0 b=2 c=1 -> specificity =  21 */
  #x34y         {}  /* a=1 b=0 c=0 -> specificity = 100 */

Font, Caratteri, Tipografia

  • Font
font-style          Italic, normal
font-variantnormal, small-caps
font-weight          bold, normal, lighter, bolder, integer (100-900)
font-size
font-family
text-trasform   capitalize, uppercase, lowercase, inherit, none
white-space     pre, nowrap, normal inherit
text-indent     length, percentage, inherit
 
p { font-family: Georgia, Times, "Times New Roman", serif;}
  • allineamento
  text-align    left, right, center, justify /* orizzontale */
  vertical-align  baseline, sub, super, top, text-top, middle, bottom, text-bottom, length/* verticale */
  • interlinea
  line-height
  • word-spacing
  • letter-spacing
  • text-decoration
  blink, line-through, none, overline, underline

Colori, BackGround

  • background
  background-color
  background-image
  background-repeat     (repeat, no-repeat, repeat-x, repeat-y)
  background-attachment /* l'immagine avrà lo scroll? */ (scroll, fixed)
  background-position  (x y), top, center, bottom, left, right

Box Model

The simplest way to think about elements is this: unless otherwise defined in a style sheet, block elements have a width equal to that of the browser window, and are as tall as necessary to contain their content. As the name implies, they reserve a rectangular area—a block—on the page.

Dimensione degli elementi

  • margin
  • padding
  • borders
  border-width
  border-style (dashed, dotted, double, groove, inset, outset, ridge, solid, none)
  border-color
  h1 {margin: 10px}/* tutti i margini a 10px*/
  h1 {margin: 10px 2%}/*top e bottom 10px, left e right 2% (width of the document)*/
  h1 {margin: 10px 2% 10px}/* top 10px, left e right 2%, bottom 10px */
  h1 {margin: 10px 2% 10px auto}/* top 10px, right 2%, bottom 10px, left a cura del browser */

Posizionamento degli elementi

Nella pagina, un elemento può essere posizionato secondo tre modi differenti:

  • seguendo il normale andamento della pagina previsto dall'HTML
  • senza alcun legame con il resto del flusso degli elementi
  • allineandosi in modo tale che gli elementi si dispongano al lato (floating)

proprietà correlate

display

  block   /* disposto a blocco */
  inline  /* disposizione in linea */
  none    /* rimosso dal flusso */

position

static flusso normale, 'left' e 'top' non si applicano. relative flusso normale, + applicazione di 'left' e 'top'. marca un blocco contenitore da usare con ''absolute'' absolute fuori dal flusso normale, 'left', 'right', 'top', and 'bottom' rispetto al blocco contenitore. diventa blocco contenitore fixed come absolute ma fisse rispetto alla porzione visibile(elementi che scrollano con la pagina)

float

  float: left, right, none

forza gli elementi a disporsi a destra o a sinistra dell'elemento contenitore facendo scorrere attorno gli altri oggetti.

  • gli elementi flottanti devono avere larghezza fissa (impostata dalla proprietà 

width
oppure, ad esempio per le immagini, dalle dimensioni in pixel del file di origine)
  • gli elementi flottanti non devono avere un posizionamento assoluto o fisso
  • gli elementi flottanti devono necessariamente essere elementi di blocco

clear

none, left, right, both

Sposta l'elemento a cui viene applicata sotto a tutti gli elementi flottanti dal lato speficicato


che interrompe il testo effettuando il clear in maniera semplice e pulita.

  • posizionamento orizzontale
  body { text-align: center; /* IE 5 hack, posiziona i block */ }
  #Content {
    margin:0px auto;/* CSS2 standard */
    text-align:left;/* "text-align" attribute is inherited*/
  }
  img { vertical-align: bottom }

centrare orizzontalmente e verticamente center / middle

Center horizontal and vertical align of an element with fixed measure

    <div style="width:200px;height:100px;position:absolute;left:50%;top:50%;
    margin-left:-100px;margin-top:-50px;">
    <!–content–>
    </div>

Center horizontally and vertically a single line of text

    <div style="width:400px;height:200px;text-align:center;line-height:200px;">
    <!–content–>
    </div>
<code>
 
Center horizontal and vertical align of an element with no specific measure
<code css>
    <div style="display:table;height:300px;text-align:center;">
    <div style="display:table-cell;vertical-align:middle;">
    <!–content–>
    </div>
    </div>

Overflow

proprietà che controllano la porzione visibile di testo all'interno di un elemento con dimensione fissa

  overflow    visible, hidden, scroll, auto, inherit
  clip        rect(t, r, b, l)

Liste

  list-style-type          /* tipo di numerazione o pallino */
  (disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha, none)
  list-style-position(inside, outside)
  list-style-image  /* è possibile usare un'immagine come pallino */
 
  ul{ list-style-image: url(images/arrow.gif); }
 
  /* lista in linea, per menu */
  li { display: inline; list-style-type: none; padding-right: 20px; }

menu da lista:

<div class="DLB">
    <ul id="mainMenu">
        <li><a href="#A" class="checked">Home</a></li>
        <li><a href="#B">Gestione A</a></li>
    </ul>
</div>
.DLB{
    overflow: hidden;
}
.DLB ul{
    margin: 0;
    padding: 0;
    float: left;
    width: 100%;
    background: gray;
}
.DLB ul li{
    display: inline;
}
.DLB ul li a{
    float: left;
    color: #F8F8FF;
    padding: 9px 11px;
    text-decoration: none;
}
.DLB ul li a:visited{
    color: #F8F8FF;
}
.DLB ul li a.checked{
    color: #696969;
    background: #DCDCDC;
}
.DLB ul li a:hover, .DLB ul li .current {
    color: #FFFFF0;
    background: #C0C0C0;
}

Form

Tabelle

//  border-collapse: collapse, separate /* Borders are collapsed into a single border when possible */
table {
    border-collapse: collapse;
    width: 100%;
}
table, th, td {
    border: 1px solid black;
}
th { height: 50px; }

Stampa

in un foglio di stile indicare a che media sono dirette le regole

  <link rel="stylesheet" type="text/css" href="base.css" media="all">
  <link rel="stylesheet" type="text/css" href="main.css" media="screen">
  <link rel="stylesheet" type="text/css" href="print.css" media="print">
  @media print {
   body {
    font-size: 10pt;
    background-color: white;/* togliere i bg*/
    color: black;/* ridefinire se necessario i colori del testo*/
   }
  }
 
  /* mostrare le url a cui puntano i collegamenti: contenuto generato e pseudoclasse  after */
  p a:after { content: " <" attr(href) "> "; }
 
/*controllare il salto pagina*/
 
  page-break-before   auto, always, avoid, felft, right, inherit
  page-break-after    auto, always, avoid, felft, right, inherit
 
/*orientazione di pagina*/
  size    auto, portrait, landscape, inherit

per testare la pagina con il media print: emulation > media > print

Compatibilità tra browser

usare selettori tipo

.ie #footer{}
.ie7 #footer{}
.mac.ie7 #footer{}

versione leggera del metodo Modernize 

(function(){
    var u=navigator.userAgent.toLowerCase(),
    i=function(t){return u.indexOf(t)>-1;},
    g='gecko',w='webkit',
    c=[(!(/opera|webtv/i.test(u))&&/msie\s(\d)/.test(u)) ? ('ie ie'+RegExp.$1):
    i('firefox/2')?g+'ff2':
    i('firefox/3')?g+'ff3':
    i(g+'/')?g:
    /opera\s(\d)/.test(u)?'opera opera'+RegExp.$1:
    i('konqueror')?w+'konqueror':
    i('chrome')?w+'chrome':
    i('applewebkit/')?w+'safari':
    i('mozilla/')?g:'',
    ,i('mac')?'mac':i('win')?'win':''
    ,'js'];
    // alert(u);
    document.getElementsByTagName('html')[0].className += c.join(' ');
})();

main.css Template

HTML5 Boilerplate SMACSS 

/*------------------------------------------------------------
reset HTML standard elements
*/
body, h1, h2, h3, p, ul, li, form, input{
    border:0;
    margin:0;
    padding:0;
}
ul{list-style:none;}
 
/*------------------------------------------------------------
main layout section
*/
#wrapper{...}
#header{...}
#nav{...}
#main{...}
#sidebar{...}
#footer{...}
 
/*------------------------------------------------------------
content structure
*/
#nav ul{...}
    #nav ul li{...}
    #nav ul li a:link{...}
    #nav ul li a:visited{...}
    #nav ul li a:hover{...}
    #nav ul li a:active{...}
 
#footer ul{...}
    #footer ul li{...}
    #footer ul li a:link{...}
    #footer ul li a:visited{...}
    #footer ul li a:hover{...}
    #footer ul li a:active{...}
    #footer p{...}
 
/*------------------------------------------------------------
Custom classes
*/
.right{float:right;}
.feed-icon{...}

layout

  • vedi css3 flexbox model
  • può tornare utile display: table