CSS3, la troisième version des Cascading Styles Sheets, est un langage qui décrit la présentation des documents HTML.

Table of contents

Partie CSS

Partie SASS

On commente avec : /* mon commentaire */

Dans le html : <p class= «introduction» > monTexte </p> dans le css :

.introduction {
mesModifs
} 

un id repère une balise html (une et une seule) : dans le html : <p id= «intro »> monTexte </p> dans le css : #intro{ mesModifs }

* {} est le sélecteur universel
h2 em {} signifie qu’on agit seulement sur les em des h2.
h2 + p {} signifie qu’on agit seulement sur les p des h2.
a[title] {} agit seulement sur les liens avec un attribut title
a[title= « cliquez ici »] {} agit seulement sur les liens dont le titres est « cliquez ici »
a[title*=« ici »] {} agit sur ceux qui contiennent le mot « ici »

###Polices : Pour ajouter une police

@font-face{
font-family:  « toto »;
src: url(« toto.woff »);

###image de fond :

background-image: url(« neige.png »);    
background-attachment: fixed;   /* fixe l’image de fond. */
background-repeat: no-repeat;    /* ne fait pas de mosaïque */
background-repeat : repeat-y;  /* répète en ordonnées seulement */
background-position: top right;
background-color: rgba(x,y,z,a); /* a est l’opacité entre 0 et 1. */
opacity: .8;

Ces propriétés peuvent êtres combinées: background: url(« soleil.png ») no-repeat top right;

border: 3px black solid;        /*solid peut être remplacé par dotted, dashed double… */
border-radius: 5px         /*(arrondi) */

h1{
border: 3px black solid;
box-shadow: 5px 10px 10px black;  
text-shadow: 5px 10px 10px black;  
}

p:hover{
text-decoration: underline;}

position:absolute;
bottom: 20px;
right: 0px;

position: fixed;     /*c’est pareil sauf que ça ne  bouge pas quand on scroll.*/

position:relative;      /* Cela décale par rapport à où ça devrait être par défaut.*/
top: 10px;
left: 20px; 

###Tableaux

td /* Toutes les cellules des tableaux... */
{
    border: 1px solid black; /* auront une bordure de 1px */
}

table
{
    border-collapse: collapse; /* Les bordures du tableau seront collées (plus joli) */
}

titre du tableau : « CSS caption-side » peut prendre deux valeurs, top : le titre sera placé au-dessus du tableau (par défaut), bottom : le titre sera placé en dessous du tableau.

On peut ajouter un certain nombre d'autres attributs à la balise pour personnaliser son fonctionnement : On peut agrandir le champ avec size. 
On peut limiter le nombre de caractères que l'on peut saisir avec maxlength.
On peut pré-remplir le champ avec une valeur par défaut à l'aide de value.
On peut donner une indication sur le contenu du champ avec placeholder. Cette indication disparaîtra dès que le visiteur aura cliqué à l'intérieur du champ.


#Sass Sass est un métalangage de feuille de style qui est interprété en CSS.

##Links http://sass-lang.com/guide

##Variables We can create variables in scss.

$font-stack:    Helvetica, sans-serif
$primary-color: #333

body
  font: 100% $font-stack
  color: $primary-color

##Nesting Nesting allows more visibility and organizes our css code as html.

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }
  }
}

##Partials We can use partial files, the name has to start with an underscore (example : _partial.scss), and then we can import it in the main file with the following code :

@import ‘partial’;

##Mixins A @mixin is a prewritten scss code that we can reuse later on our scss file.

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

.box { @include border-radius(10px); }

##Extend Using @extend allows you to share a set of CSS properties from one selector to an other.

.message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  @extend .message;
  border-color: green;
}

.error {
  @extend .message;
  border-color: red;
}

##Operators Sass has a handful of standard math operators like +, -, *, /, and %.

.container { width: 100%; }

article[role="main"] {
  float: left;
  width: 600px / 960px * 100%;
}