Cours HTML/CSS – Les CSS c'est quoi ? – Les grandes familles de propriétés CSS

View Github Repository Open presentation in a new window

samy

See all presentation from samy

Cours HTML/CSS – Les CSS c'est quoi ? – Les grandes familles de propriétés CSS

0 0

cours-bases-css

Cours bases CSS

On Github samy / cours-bases-css

Cours HTML/CSS

Les CSS c'est quoi ?

Samy Rabih - Etudiants IDRAC 2014

Qui suis-je ?

  • Développeur Web (PHP) chez O2Sources
  • Cuisine du Web / Museomix

Les CSS, c'est quoi ?

  • "Cascading Style Sheets"
  • Ensemble de styles d'affichage
  • Elles sont cumulatives
  • Les styles sont définis globalement
  • Norme actuelle : CSS3

A quoi ca sert?

  • Comparable aux styles d'un traitement de texte
  • On peut habiller du HTML
  • On peut même masquer des éléments

A quoi ca ressemble ?

<div class="toto">tutu</div>
<div id="titi">tata</div>
.toto {
  color:Green;
}
#titi {
  color:Blue
}

Les grandes familles de propriétés CSS

 

Source : OpenClassrooms

Texte (1/3)

font-family : Comic Sans MS Lucida Console

font-size : 28px 43px

font-weight : normal bold

font-style : normal italic

font-variant : normal small-caps

Texte (2/3)

text-align : left center right

vertical-align : : middle super

line-height : 200%

text-indent : 200px

text-shadow : ombre portée

Texte (3/3)

text-decoration : underline

Les webfonts

Couleur et opacité

color : Red #0000FF

opacity : opacité de 1 opacité de 0.1

Le fond (background)

background-color : Pink

background-image

background-repeat : no-repeat

background-position : right

Les dimensions

width, height

padding : ~ marge intérieure

margin : ~ marge extérieure

min-width, max-width, min-height, max-height

Les bordures

border-width :15px

border-style :dashed

border-radius : 20px

box-shadow

En vrac

display, visibility

position, top, left, right, bottom

clear

z-index

cursor

Exemples visuels

Sur ordinateur ?

Ca fonctionne !

Et sur mobile ?

Oui (mais pas tout, selon les navigateurs)

Et si on a un petit écran ?

Il y a le ...

RESPONSIVE

A quoi ca sert ?

Deux solutions

L'adaptatif

Le "vrai" responsive

L'adaptatif

On ne fait que redimensionner l'existant

Le vrai responsive

On affiche/cache des éléments selon l'écran

Comment ?

Via les "media queries" (entre autres)

@media screen and (max-width: 640px) {
  .bloc {
    color:Red
  }
}

Autres contraintes

Poids des images

Navigation pas adaptée

Ergonomie faite pour la souris

Formulaires

Merci !