COTE CLIENT : CSS3
Dernière mise à jour : 17 mars 2021
CSS: Cascading Style Sheets, est un langage informatique mais il sert a la décoration d'une page web en fait la mise en page d'une page web,(les couleurs ;la taille de l'écriture ; la mise en forme; la décoration ),donc le rôle de CSS est rendre notre page web beau avec une belle décoration
comme ona déjà vue le langage html contient des balises ( <head></head> <body></body>…)la même chose pour le langage css il contient aussi des balises c'est balises bien sur sert de styler notre code html
nous avons maintenant découvrir les balises du css :
allons y
il existe trois méthode pour utiliser css
la première méthode :on crée une nouvelle page dans l'éditeur de texte avec l'extension .Css puis on fait appel on écrivant :<link rel="stylesheet" href="style.css"/>a cette page a l'antérieure du code source html en écrivant son chemin a ce moment la tout les propriété css seront appliqué
la deuxième méthode: a l'antérieure de la balise <head></head> on écrit la balise <style></style>et a l'antérieure de cette dernière on écrit les propriété Css et a ce moment la tout les propriété Css seront appliqué la troisième méthode: a l'antérieure de chaque élément on écrit le code css (a travers l'écriture de la balise <style></style>,a l'intérieure de chaque élément puis on précise les caractéristiques du css ) allons y pour styler notre code html
on a écrit la balise <style></style> l'intérieure de la balise <head></head> comme
vous regardez ci dessue :
après avoir enregistré notre code source et l'exécuté le résultat est la suivantes
vous devez enregistré votre code source en cliquant sur(ctrl+s)
dans cette exemple la nous avons écrit tout les propriété de css a l'antérieure de la la balise style
par exemple ci on veut faire une image au lieux de la couleur orange, alors une utilise la propriété background-image avec le chemin de l'image
voici ce qui nous donne :
d'après mon code source vous voyez que le nom de l'image c'est fleur:
et le type de l'image c'est CPG (existe trois type de l'image a connaitre: jpg; png;)
pour savoir le type de l'image vous cliquez droit sur l'image puis vous cliquez sur propriété
après l'exécutions de code source il nous donne quelque chose comme ce si :
il existe d'autre propriété css parmi eux
les listes symboliques ,les listes numéroté ,les tailles de titre de <h1> jusqu'à <h6>c'est a dire titre de grand taille <h1> jusqu'à de petit taille <h6>
regardons le code suivant:
après avoir exécuté ce code source le résultat est la suivantes
vous remarquez alors que la taille de l'écriture est changé .et le modèle de l'écriture aussi est changé
pour changer le modèle de l'écriture on a utiliser la propriété comis sans ms
donc d'après tout cela vous avez un petit peut l'idée comment styler votre code CSS
On peux changer la taille de l'écriture on utilisant la propriété font size
classe et id:
les attributs html classe et id sont des attributs globaux ,car on doit les ajouter dans les balises ouvrantes de n'import quel éléments html
classe et id vont être principalement utilisé pour la mise en forme il vont nous servir a appliquer des styles css aux éléments qui vont les contenir
balises, propriété, valeurs
Balise 1: {
propriété 1 : Valeur 1;
propriété 2 : Valeur 2;
propriété 3 : Valeur 3;
}
balise 2{
propriété 1 : Valeur 1; propriété 2 : Valeur 2 ; propriété3 : Valeur 3;
}
balise3 {
propriété 1 : Valeur 1;
}Appliquer le même style a plusieurs balises
prenons le code css suivant:
h1 {
color: gray;
}
em {
color: gray;
}
on peut combiner la déclaration en séparent les noms des balises par une virgules
H1 ,em {
color: gray;
}
Notion de style et classe:
pour que certaine paragraphes soient écrits d'une manière différents ,on peut utiliser les attributs spéciaux qui fonctionne sur plusieurs balises
l'attribut :classe
l'attribut : id
En utilisant l'attribut classe:
<!Doctype html>
<head>
<meta charset="utf_8">
<link rel ="stylesheet" href="style.css">
<title>teste de css </title>
</head>
<body>
<h1>Mon super cite </h1>
<p classe= "introduction"> Bonjour et bienvenue sur mon cite </p>
</body>
</html>En utilisant l'attribut id
en html :
<img src ="images/logo.png" alt="logo du cite" id ="logo"/>en css:
#logo {
*/indiquer les propriété css ici */
}
les balises universelles:
<span> </span>:cette balise de type inline, c'est a dire une balise que l'on place au sein d'un paragraphe de texte, pour sélectionner certaine mot uniquement
<div></div>:c'est une balise de type bloc, qui entour un bloc de texte ,cette balise est fréquemment utilisé dans la construction d'un design
exemple d'utilisations des balises universelles:
en html:
<p> bonjour et <span classe ="introduction"> bienvenue sur mon cite </span> </p>
en css:
.introduction{
color :red ;
}
les sélecteurs avancée :
on utilise les sélecteurs avancée pour sélectionner les éléments de la page a modifier
exemple:
p{ }
h1,em{ }
.classe { }
#id { }Formatage du texte:
pour mettre en italique, on utilise font-style :
italic : le texte sera mis en italic
oblique : le résultat est légèrement diffèrent de l'italique
normale: le texte sera normal par défaut
exemple:
h1 {
font-style: italic;
}
pour mettre en gras on utilise font-weight :
bold: le texte sera mise en gras
normale: le texte sera normale par défaut
exemple:
h2{
font-weight: bold;
}
soulignement et autre décorations, on utilise text-décoration
underline: souligné
line-through : barré
overline: ligne au-dessus
blink: clignotant
none: normal( par défaut )
exemple:
h2 {
text-décoration : blink;
}
.souligne{
text-décoration :underline;
}
.barre {
text-décoration: line-through;
}
.line_ dessus {
text-décoration: overline;
}
la taille absolue:
une taille absolue:
font-size: 16 px;exemple:
p{
font-size: 18 px;
/* paragraphe de 18 px */
}
h1 {
font-size :50 px ;
*/titre de 40 px */
}la taille relatif:
xx-Small: minuscule;
x-small :tres petit;
small :petit;
medium: moyen;
large: grand;
x-large: très grandsexemple:
p { font-size : small ;}
h2 {font-size : large ; }la police du texte:
syntaxe de la police du texte
balise { font-family: police ;}voici quelque police qui fonctionne bien sur la plus part des navigateurs :
Arial;
Arial Black;
Comic Sans ms ;
Courrier News;
Georgia;
Impact;
Times New Roman;
Trebuchet Ms ;
Verdana;
exemple:
p{ font-family: Impact ,"Arial black", Arial Verdana , sans-serif ; }la couleur et le font :
pour la couleur de texte on utilise la propriété CSS color
syntaxe : h2{ color : gray;} couleur standard:
Notion hexadécimale: commence pare dièse (#) suive de six lettre ou chiffre allant de 0 a 9
et de A a F
ces lettres ou chiffres fonctionnent deux par deux
En mélangeant les couleurs on peut obtenir la couleur qu'on veut
exemple:
H1 { color : FFFFFF ; }coleur RGB: pour choisir une couleur ,on doit définir une quantité de rouge , de vert , et de bleu
pour trouver une couleur, on utilise un programme intermédiaire
Exemple:
p{
color: rgb(240,96,204 );
}
Couleur de font: pour définir une couleur de font , on utilise la propriété Css background-color
exemple:
body {
background-color: red;
*/le font de la page sera rouge /*
color: gray;
*/le texte de la page sera gris /*
}
le css et l'héritage :
si vous appliquez un style a une balise , toutes les balises qui se trouvent a l 'intérieure prendront le même style
les balises qui se trouvent a l 'intérieure d'une autre balise "héritent" de ses propriétés
Exemple d'héritage avec la balise <marque></marque> qui a un autre style:
en html
<h2> C'est mon premiers cite</h2>
<p> C'est la premiers page de mon cite web, je ne sais pas encore quelle couleur mettre
en arrière plan ,ni une couleur pour <mark> souligné mon text </mark> </p>
En css:
body {
background-color: black; color: white;
}
mark{
background-color: red; color: black;
}
Image de fond:
pour appliquer une image de fond on utilise la propriété background-image
body {
background-image :url ("neige.png");
}pour fixer le font on utilise l'option background-attachement
fixed: l'image de font reste fix
scroll : l'image de font défile avec le text
pour répété l'image du font , on utilise l'option background-repeat:
no-repeat : le fond ne sera pas répété ,l'image danc sera unique sur la page
repeat-x : le font sera uniquement répété sur la premiers ligne
repeat-y : le font sera uniquement sur la premiers colonne
pour déterminer la position du image du font , on utilisé background-position:
top: en haut;
Bottom: en bas;
left : a gauche;
centre : centré;
right: a droit;
exemple d'une répétition du fond on utilise background-repeat:
body {
background-image: url("soleil.png");
background-repeat: no-repeat;
}Combiner les propriétés:
l'ordre de valeur n'a pas d'importance
vous n'êtes pas obligés de mettre toutes les valeurs .Ainsi si vous ne voulez pas écrire fixed ,
vous pouvez l'enlever sans problème :
body {
background: url ("neige.png") fixed no-repeat top right;
}plusieurs image de fond:
body {
background: url ("soleil.png ") fixed no-repeat top right ,
url("neige.png") fixed;
}Création d'apparence dynamique :
En css on peut modifier l'apparence de certaine section dynamique après le chargement de la page lorsque certains évènements se produisent
on utilise pour cela les pseudo formats
a {
text-decoration: none;
color: gray;
font-style: italic;
}
a : haver {
text-decoration: underline;
color: navy;
}au moment du clik:
a {
text-decoration: none;
color : gray;
font-style: italic;
}
a: active {
text-decoration: underline;
background-color: #FFCC66;
}
a la sélection:
a{
text-decoration: none;
color: gray;
font-style: italic;
}
a : focus {
color :#E 9967A ;
}
lorsque le lien a été déjà consulté :
a
{
text-decoration :none;
color; gray;
font-style : italic;
}
a : visited {
color :# AAA;
}
le modèle des boites :
Dans un documents html chaque éléments et représenté par une boite rectangulaire qui peut être ajusté grâce a des propriété CSS spécifique
la boite de contenue: (content): a l'endroit ou l'élément est affichié
ce contenue est le texte de l'élément ou les autres boites des éléments fils
la taille de la boit de contenue est définie avec les propriété css width (pour la largeur ) et
height (pour la hauteur)
exemple: p{
width : 50 %;
height: 50 %;
}autre propriété:
min-width / max-width : pour limiter les valeurs de largeurs
min-height / max-height : pour limiter les valeurs de hauteur