Scribd
Importer
3 vues37 pages

Cours Css Complet

Le document présente les bases de la conception web en HTML et CSS, en abordant la création de feuilles de style et l'utilisation de Bootstrap. Il explique comment appliquer des styles via des fichiers CSS, des balises HTML, et les attributs 'class' et 'id', ainsi que les propriétés de formatage du texte et des éléments. Enfin, il traite des techniques de positionnement et des effets visuels comme les ombres et les bordures.

Transféré par

abdelkarim.laghmam.24
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 PPTX, PDF, TXT ou lisez en ligne sur Scribd
3 vues37 pages

Cours Css Complet

Le document présente les bases de la conception web en HTML et CSS, en abordant la création de feuilles de style et l'utilisation de Bootstrap. Il explique comment appliquer des styles via des fichiers CSS, des balises HTML, et les attributs 'class' et 'id', ainsi que les propriétés de formatage du texte et des éléments. Enfin, il traite des techniques de positionnement et des effets visuels comme les ombres et les bordures.

Transféré par

abdelkarim.laghmam.24
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 PPTX, PDF, TXT ou lisez en ligne sur Scribd
Vous êtes sur la page 1/ 37

Conception

HTML et CSS
Plan

• Introduction au développement
web
• Ecrire du code HTML
• Créer des feuilles de style
CSS
• Maitriser Bootstrap
Créer des feuilles de
style
• CSS : "Cascading Style Sheets "
• C'est un fichier dans lequel on écrit
l'apparence que notre site doit avoir : la
couleur et la police du texte, la taille des
titres, la position des menus, la couleur ou
l'image de fond, etc.
• On peut écrire du code CSS à 3 endroits
différents:
• Dans un fichier .css (le moyen le plus
recommandé)
• Dans l'en-tête du fichier HTML
Créer des feuilles de
style
Dans un fichier .css :
• Pour que le fichier CSS soit pris en compte
par le document html, il faut ajouter la
balise <link /> entre les balises <head>
</head> qui va permettre de "dire" au
fichier HTML quel fichier CSS il doit
charger
<link rel="stylesheet" href="design.css" />
Il est inutile d'ouvrir directement le fichier
design.css dans le navigateur : Il faut ouvrir le
fichier html qui fera automatiquement appel au
Créer des feuilles de
style
Dans l’en-tête :
• Pour ce faire il faut mettre une balise
<style> </style> à l'intérieur de la balise
d’en-tête <head>
<head>
<style type="text/css">
<!-- Vous tapez votre code CSS ici
-- >
</style>
<title>Accueil</title>
</head>
Vous aurez toujours le même résultat, avec un
Créer des feuilles de
style
Dans les balises :
 Ajouter un attribut style sur les balises pour
leur appliquer un style particulier
<h1 style="<!-- Vous taperez votre code
CSS ici --> "> Titre </h1>
 Inconvénients : non seulement le CSS sera peu
lisible à l'intérieur des balises, mais en plus ça
ne nous permet pas de profiter de tous les
avantages du CSS, comme la possibilité de
changer la couleur de tous les titres du site en
une ligne
Créer des feuilles de
style
Dans du CSS, on trouve 3 éléments
différents:
 Des noms de balises : on écrit les noms des
balises dont on veut modifier l'apparence (si
je veux modifier l'apparence de tous les titres
<h1>, je dois écrire h1)
 Des propriétés CSS : les "effets de style" de
la page sont rangés dans des propriétés, par
exemple :
 color qui permet d'indiquer la couleur du
texte
 font-size qui permet d'indiquer la taille du
Créer des feuilles de
style
Exemple d’un document CSS:
balise1
{
p
propriété1 : valeur1;
{
propriété2 : valeur2;
} color: red;
balise2 }
{
propriété1 : valeur1;
}
Créer des feuilles de
style
Les sélecteurs CSS

h3,em
• Pour appliquer un style à {
plusieurs balises : color: red;
}

h3 em
{
• Pour définir un style color: red;
uniquement pour une balise }
contenue dans une autre
Créer des feuilles de
style
Les sélecteurs CSS

• Pour appliquer un style à plusieurs h1+p


balises, une balise qui en suit une {
color: red;
autres
• Sélectionne la première balise <p> }
située après un titre <h1>
a[title]
{
• Pour définir un style pour une balise color: red;
qui possède un attribut }
Créer des feuilles de
style
Les sélecteurs CSS

• Pour définir un style pour une a[title="tigre


"]
balise qui possède un attribut
{
avec une valeur exacte color: red;
}

a[title*="igr"
• Pour définir un style pour une ]
balise avec un attribut qui peut {
contenir dans sa valeur un mot color: red;
}
Créer des feuilles de
style
Attribut « class »
Utiliser des attributs spéciaux : CLASS et ID
Les class vous permettent de définir un
style personnalisé
Elles permettent également de définir des
styles différents pour la même balise ou
des balises différentes
.nom_de_classe { propriété : valeur ;}
Pour appeler l'effet de style dans le
document, on ajoute le nom de la classe à
la balise
<balise class="nom_de-classe"> ....
Créer des feuilles de
style
Attribut « class »
Exemple:
.test
{ font-weight: bold;
color: red ;}
Il suffit d'appeler la classe .test quand cela se
révèle nécessaire :
<p class="test "> ... PARAGRAPHE ... </p>
<h1 class=" test "> Titre 1 </h1>
Créer des feuilles de
style
Attribut « id »
L’attribut ID fonctionne exactement de la
même manière que class, à un détail près : il
ne peut être utilisé qu'une fois
 La syntaxe est :
#nom_de_ID
{ propriété : valeur; }
 Et pour l'appeler :
<balise id="nom_de_ID"> ....
</balise>
Créer des feuilles de
style
Regroupement d’éléments
« span
La et div »<span>
balise </span> permet
d'appliquer des styles à des éléments de texte
d'un paragraphe (inline)
• La balise <div> </div> permet de regrouper
plusieurs paragraphes, ou de délimiter une
zone comportant
<p>Pour n’appliquer leplusieurs
style que surparagraphes
<span
(block)
class="test"> une partie </span> du
paragraphe. </p>
<div class="test">
<p>Commentaire :</p>
<p>N'oubliez pas l'attribut class!</p>
</div>
Créer des feuilles de
style
Propriétés de formatage du
texte
• font-size : indique la taille du texte soit en pixel,
en em, en ex, en cm, en mm, en pourcentage ou
avec une valeur relative : xx-small, x-small, small,
medium, large, x-large, xx-large
• font-family: indiquer la police à utiliser : Arial,
Arial Black, Comic Sans MS, Georgia, Times New
Roman, Verdana
• font-style : pour mettre du texte en italique
(italic, oblique, normal)
• font-weight : pour mettre du texte en gras (bold,
normal)
Créer des feuilles de
style
Propriétés de formatage du
texte
p{
font-size: 0.8em;
font-family: Georgia, "Times New
Roman", Verdana;
}
h1{
font-size: large;
font-style: italic;
font-weight: bold;
}
Créer des feuilles de
style
Propriétés de formatage du
texte
• text-decoration : pour décorer son texte
(soulignement par exemple): underline, line-
through, overline, blink, none
• text-align : pour aligner du texte (left, right,
center, justify)
• color : .deco
permet de modifier la couleur du texte
{
(nom en anglais, code hexadécimal #RRVVBB ou
text-decoration : underline;
rgb(R,V,B))
text-align : right;
color : green;
}
Créer des feuilles de
style
Liste des couleur en anglais avec leurs codes
en hexadécimal
Créer des feuilles de
style
Liste des couleur en anglais avec leurs codes
en hexadécimal
Créer des feuilles de
style
Propriétés du fond
À appliquer sur la balise body
• background-color : indique la couleur du
fond. (si vous associez cette propriété à une
autre balise de texte -p par exemple- elle
modifie le background du texte)
• background-image : pour définir une image
d’arrière plan
body{
• background-attachment : permet de fixer le
background-image:
fond (fixed, scroll)
url("img1.png");
background-attachment : fixed;
}
Créer des feuilles de
style
Propriétés du fond
• background-repeat : pour la répétition du
fond (no-repeat, repeat-x, repeat-y, repeat)
• background-position : pour positionner le
fond (fond qui ne se répète pas). Prends deux
valeurs en pixels pour indiquer la position du
fond par rapport au coin supérieur gauche de
la page ou body{
des noms de positions en anglais
(top, bottom,background-image:
left, center, right) url("img1.png");
background-repeat: no-repeat;
background-position: 40px 100px; /*ou
bottom right;*/
}
Créer des feuilles de
style
Propriétés du fond
• background: pour combiner plusieurs
propriétés de fond (background-image,
background-repeat, background-attachment et
backgroundposition)
body{
background : url("img1.png") fixed no-repeat
bottom right;
}
 L'ordre des valeurs n'a pas d'importance
 On n’est pas obligé de mettre toutes les
valeurs
• Il est possible de donner plusieurs images de
fond à un élément, il suffit de séparer les
Créer des feuilles de
style
Propriétés du fond
body{
background : url("img1.png") fixed no-repeat
bottom right,
url("img2.png") fixed ;
}
• L’ordre est important: la première image se
met en premier plan, la deuxième dessous,
et ainsi de suite.
• On peut appliquer un fond à n'importe quel
élément (un titre, un paragraphe, des mots,
etc.)
Créer des feuilles de
style
La transparence
• La propriété opacity, permet d'indiquer le niveau
d'opacité et prend une valeur entre 0 et 1
 Avec une valeur de 1, l'élément sera
totalement opaque (par défaut)
 Avec une valeur de 0, l'élément sera
totalement p{transparent
background-color:
blue;
opacity: 0.4;
}
 La notation RGBa est une autre façon de jouer
avec la transparence : rgba(rouge, vert, bleu,
Créer des feuilles de
style
Les bordures
• De nombreuses propriétés CSS permettent de
modifier l'apparence des bordures : border-
width, border-color, border-style…
• La propriété border permet de créer et/ou
modifier l’apparence des bordures en combinant
plusieurs propriétés
• La largeur : indiquée en pixels ( 2px) [border-
width]
• La couleur : indiquée soit avec un nom de
couleur en anglais, soit avec une valeur
hexadécimale, soit à l’aide d’une valeur RGB
[border-color]
Créer des feuilles de
style
Les bordures
• Le type de bordure : soit une bordure avec un
simple trait, ou des pointillés, ou encore des
tirets:
• none : pas de bordure (par défaut)
• solid : un trait simple
• dotted : pointillés
• dashed : tirets
• double : bordure double
• groove : en relief
• ridge : autre effet relief
• inset : effet 3D global enfoncé
• outset : effet 3D global surélevé
Créer des feuilles de
style
Les bordures

h1{
border: 3px blue dashed;
}
Créer des feuilles de
style
Les bordures
• Pour mettre des bordures différentes en fonction
du côté (haut, bas, gauche ou droite) :
• border-top : bordure du haut
• border-bottom : bordure du bas
• border-left : bordure de gauche
• border-right : bordure de droite
• Il existe aussi des équivalents pour paramétrer
chaque détail de la bordure si vous le désirez :
border-top-width pour modifier l'épaisseur de la
bordure du haut, h1{ border-top-color pour la
couleur du haut, etc. border : red dashed;
border-top : 3px blue
outset;
Créer des feuilles de
style
Les bordures
• La propriété border-radius permet d'arrondir
les angles de n'importe quel élément : elle prend
comme valeur la taille
h1{ de l’arrondi en pixels
border : solid;
border-radius: 10px;
}
• L’élément doit avoir des bordures ou une couleur
de fond
• On peut aussi préciser la forme de l'arrondi pour
chaque coin (4 valeurs en px)
• Pour avoir des bordures avec des courbes
elliptiques il faut mettre deux valeurs (en px)
Créer des feuilles de
style
Les ombres
• La propriété box-shadow s'applique à tout un
bloc et prend quatre valeurs dans l'ordre suivant :
1. le décalage horizontal de l'ombre
2. le décalage vertical de l'ombre
3. l'adoucissement du dégradé
4. la couleur de l'ombre
h1{
border : solid;
border-radius: 10px;
box-shadow: 6px 10px 0px blue;
}
Créer des feuilles de
style
Les ombres
• On peut rajouter une cinquième valeur
facultative : inset
• Dans ce cas, l'ombre
h1{ sera placée à l'intérieur du
bloc, pour donner un effet
border enfoncé
: solid;
border-radius: 10px;
box-shadow: 6px 10px 0px blue
inset;
}
• La propriété text-shadow permet d’ajouter une
ombre directement sur les lettres du texte
• Ses valeurs fonctionnent de la même façon que
box-shadow
Créer des feuilles de
style
Pseudo-format
• C'est une information que l'on rajoute après
le nom de la balise (ou de la classe) dans le
CSS
• Permet, en général, de gérer le
comportement d’une balise de façon
dynamique :
• :hover , changer l’apparence au survol
• :active , lors du clic sur un lien
• :focus , lors du focus (élément sélectionné)
• :visited, lorsqu'un lien a été consulté
Créer des feuilles de
style
Pseudo-format

a:hover {
p:hover{ color: green;
color : red; }
border : none; a:active {
} background-color:
select:focus { #000066;
background-color: }
#FF0000; a:visited {
} color: pink;
}
Créer des feuilles de
style
Positionnement
• Il existe en css des méthodes de positionnement
permettant de positionner avec précision des
éléments sur la page
 Le positionnement absolu : permet de placer
un élément n'importe où sur la page (en haut à
gauche, en bas à droite, au centre, etc.)
 Le positionnement fixe : identique au
positionnement absolu mais, cette fois,
l'élément reste toujours visible, même si on
descend plus bas dans la page. C'est un peu le
même principe que background-attachment:
fixed;
Créer des feuilles de
style
Positionnement
• On utilise la propriété position avec l’une de ces
valeurs :
• absolute : positionnement absolu
• fixed : positionnement fixe
• relative : positionnement relatif
• Il faut ensuite indiquer l’emplacement exacte où
vous voulez positionner votre élément, en
donnant une valeur en pixels ou en pourcentage
au moins à l’une des quatre propriétés:
• left : position par rapport à la gauche de la
page
• right : position par rapport à la droite de la
Créer des feuilles de
style
Positionnement
.element{
position: absolute;
right: 0px;
top: 0px;
}

• Le bloc doit être positionné tout en haut à


droite (0 pixel par rapport à la droite de la
page, 0 par rapport au haut de la page)

Vous aimerez peut-être aussi