Scribd
Importer
0 vues18 pages

DevWeb CSS

Le document présente le CSS (Cascading Style Sheet), qui permet de définir l'apparence des éléments HTML via des règles de style. Il décrit la syntaxe des règles, les méthodes de liaison des feuilles de style à un document HTML, ainsi que les différents types de sélecteurs et propriétés CSS. Enfin, il aborde les cibles des CSS en fonction du type de périphérique d'affichage.

Transféré par

oyongo2007
Copyright
© All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
0 vues18 pages

DevWeb CSS

Le document présente le CSS (Cascading Style Sheet), qui permet de définir l'apparence des éléments HTML via des règles de style. Il décrit la syntaxe des règles, les méthodes de liaison des feuilles de style à un document HTML, ainsi que les différents types de sélecteurs et propriétés CSS. Enfin, il aborde les cibles des CSS en fonction du type de périphérique d'affichage.

Transféré par

oyongo2007
Copyright
© All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd

CSS (CASCADING STYLE SHEET)

• Introduction
• CSS : Cascading Style Sheet
• permet de définit l’apparence des textes et des documents
• Marges, couleur, police, taille, l’arrière plan…)
• Un style définit la façon donc est affiché un élément HTML
• En général les styles sont définis dans une feuille de style
externe (.css) puis la feuille de style est liée à la page html
• Css est préférable aux balises html permettant de mettre en
forme le document

57
CSS (CASCADING STYLE SHEET)

• Syntaxe de règles de style


• Implique 3 types d’éléments
• Sélecteur: en général une balise html (<p>, <div>, <h1>…)
• Propriété: attribut décrivant un aspect visuel, dont on veut changer
la valeur
• Valeur: valeur attribuée à l’attribut
• Ecriture d’une règle css
• Selecteur {propriété : valeur}
• Exemple
• h1 {font-size: 30px}
• Tous les titres h1 du document seront affichés avec la taille 30px
• p { font-family: "sans serif’’;
font-size: 13px;
color: blue
}

58
CSS (CASCADING STYLE SHEET)

• Lier CSS à un document HTML: 3 possibilités


• une feuille de style externe
• une feuille de style interne
• un style défini directement dans la balise(inline style)
• Feuilles de style externe
• Les styles sont définis dans une feuille .css.
• Liaison avec la balise <link> dans l’entête du document

59
CSS (CASCADING STYLE SHEET)

• Lier CSS à un document HTML: 3 possibilités


• Feuilles de style interne
• Style appliqué uniquement au document HTML dans lequel
il figure
• Balise <style> qui contient les règles de style est écrite dans
l’entête

60
CSS (CASCADING STYLE SHEET)

• Lier CSS à un document HTML: 3 possibilités


• style inline
• Style appliqué uniquement à une balise
• Non recommandé car il ne permet pas de factoriser les
styles
• Balise <style> qui contient les règles de style est écrite dans
l’entête

61
CSS (CASCADING STYLE SHEET)

• Les sélecteurs
• Indiquent l’élément sur lequel porte la modification de mise
en forme
• Types de sélection
• Balises simples
• Balises avec certains attributs et /ou certaines valeurs d’attributs
• Éléments contenus dans certains autre
• Groupes de balises définis par une classe
• Listes de balises indépendantes

62
CSS (CASCADING STYLE SHEET)

Plusieurs sélecteurs, mêmes règles Sélecteurs regroupés

63
CSS (CASCADING STYLE SHEET)

• Sélecteur de classe
• Permet de définir une classe d’éléments à laquelle un
même style sera appliqué
• Par exemple afficher certains paragraphes en rouges et
d’autres au centre
• Dans la feuille de style

• Dans le document HTML

• Possibilité de définir une classe qui ne s’applique pas


seulement aux paragraphes mais à tout type d’élément
• Dans le feuille
• En HTML

64
CSS (CASCADING STYLE SHEET)

• Sélecteurs divers

65
CSS (CASCADING STYLE SHEET)

• Sélecteurs divers

66
CSS (CASCADING STYLE SHEET)

• Sélecteurs divers

67
CSS (CASCADING STYLE SHEET)

• Sélecteurs divers

68
CSS (CASCADING STYLE SHEET)

• Sélecteurs simples: exemple

69
CSS (CASCADING STYLE SHEET)

• Sélecteurs simples: exemple

70
CSS (CASCADING STYLE SHEET)

• Propriétés (quelques unes)


• text-align: définit l’alignement du texte
• Valeurs: center, left, right, justify
• font-family: définit la police de caractère
• Valeurs: arial, helvetica, …
• font-size: spécifie la taille du texte
• Valeurs: en px, en pt ou en em
• color: définit la couleur du texte
• Valeurs: couleur ou #codecouleur
• visibility: affiche ou cache un contenu
• Valeurs: visible, hidden

71
CSS (CASCADING STYLE SHEET)

• Quelques propriétés et règles CSS


• display: définit le mode d’affichage d’un contenu
• direction: sens d’écriture
• background: propriétés de l’arrière plan
• background-attachement: défilement de l’image d’arrière
plan
• background-color: couleur de l’arriere plan
• border: caractéristiques des bordures
• margin: marges extérieures de l’élément
• padding: marges intérieures de l’ élement
• width: largeur de l’élément
• z-index: définit l’ordre de superposition des éléments

72
CSS (CASCADING STYLE SHEET)

• Cibles des css


• Relation entre type de périphérique d’affichage et feuille
de style css à appliquer
• Attribut média de la balise link
• Définit le type de terminal sur lequel sera appliqué la feuille de
style
• Valeurs:
• screen : pour un écran
• print : pour une imprimante
• hanheld : pour un téléphone portable

73
CSS (CASCADING STYLE SHEET)

• Exercice

74

Vous aimerez peut-être aussi