Partie II : CSS3 ~ développement multimédia

الأحد، 1 ديسمبر 2013

Partie II : CSS3

11:31 ص

Unknown

Partie II : CSS3

1-Définition

CSS est l'abréviation de "cascading stylesheet style"

fr="feuille de style en cascade", est une facon

pour mettre en forme un document html

2- Types de CSS

2.1 CSS inline (en ligne)

Ce genre de style s’applique uniquement sur la balise ou il est déclaré et son contenu (+ balises en interne)

<p style= "color :blue " > ceci esu un paragraphe qui a un style de couleur bleu</p>

2.2 CSS global sur une page

<html>

<head>

SelecteurCSS

{

Propriétés CSS

}

</style>

</head>

<body>

….. utilisation des selecteurs CSS

</body>

</html>

Ce genre de style peut s’appliquer plusieurs fois sur les balises dans body (page html uniquement)

Avantage par rapport au css inline :

- déclaration une seul fois, utilisations pls fois

- modification de style de la page devient facile

2.3 CSS global sur plusieurs pages (CSS externe)

<html>

<head>

        <link type="text/css" rel="stylesheet" href="chemin du fichier css" />

</head>

<body>

….

</body>

</html>

Ce genre de style peut s’appliquer sur pls pages html

Avantage par rapport au css déclaré dans le head :

- le même css est réutilisable dans pls page.

- On peut modifier le style de pls pages facilement

3-Type des sélecteurs

3.1- définition

Un sélecteur est un nom qui permet de regrouper plusieurs propriétés css et qu’on peut réutiliser au besoin (une fois ou pls)

Il existe trois type de selecteurs :

- sélecteur de type balise

- sélecteur class

- sélecteur Id

3.2 sélecteur de type balise

Le nom du sélecteur est le nom d’une balise html, une fois défini, il s’applique sur les balises qui portent son nom

Zone de Texte: <html>
<head>
<title> 1 séance en CSS3</title>
<style type="text/css">
p
{
color:red;
}
h1
{
color:green;
}
h2
{
color:orange;
}
</style>
</head>
<body>

<h1>Type de selecteurs</h1>
<h2>selecteur de type balise</h2>

<pre> ceci esu un paragraphe qui a un style de couleur ...</pre>
<p > ceci esu un paragraphe qui a un style de couleur ...</p>
<p > ceci esu un paragraphe qui a un style de couleur ...</p>
</body></html>

3.2 Sélecteur de type class

On peut donner à ce type de sélecteur un nom au choix, mais ce dernier doit commencer par un . (point)

Une fois défini, on peut l’associer avec plusieurs type de balises.

Zone de Texte: <html>
<head>
<title> 1 séance en CSS3</title>
<style type="text/css">
.tdm1A
{
color:red;
}
h1
{
color:green;
}
h2
{
color:orange;
}
</style>
</head>
<body>

<h1>Type de selecteurs</h1>
<h2>selecteur de type balise</h2>
<h3 class= "tdm1A" >exemple</h3>
<pre class= "tdm1A" > ceci esu un paragraphe qui a un style de couleur ...</pre>
<pre>une deuxième balise pre</pre>
<p class= "tdm1A" > ceci esu un paragraphe qui a un style de couleur ...</p>
<p > ceci esu un paragraphe qui a un style de couleur ...</p>
</body></html>

3.2 Sélecteur de type Id

On peut donner à ce type de sélecteur un nom au choix, mais ce dernier doit commencer par un #

Une fois défini, il sera associé avec la balise qui a un attribue de même Id

Remarque : On peut déclarer un sélecteur qui est une combinaison de plusieurs types (type balise, class, id)

Zone de Texte: <html>
<head>
<title> 1 séance en CSS3</title>
<style type="text/css">
.tdm1A
{
color:red;
}
h1
{
color:green;
}
#monparag {
color:orange;
}
</style>
</head>
<body>

<h1>Type de selecteurs</h1>
<h2>selecteur de type balise</h2>
<h3 class= "tdm1A" >exemple</h3>
<pre class= "tdm1A" > ceci esu un paragraphe qui a un style de couleur ...</pre>
<pre>une deuxième balise pre</pre>
<p id="monparag" > ceci esu un paragraphe qui a un style de couleur ...</p>
<p > ceci esu un paragraphe qui a un style de couleur ...</p>
</body></html>

P .x

{

Color :red ;

}

div p

{

Color :red ;

}

4- Les différentes propriétés CSS

4.1 catégorie font

Nom de propriété	Exemple	description
font-family	font-family: "Courier New", Courier, monospace	Permet de définir le jeux de polices de texte à utiliser (change l’aperçu graphique du text)
font-size	font-size: xx-small	La taille de police Spécifier la taille en point où en unité prédéfini comme small, medium, large, x-large,xx-large,xxx-large
font-weight	font-weight: bold	Permet de définir la graisse (poids) du text Bold, bolder,lighter,100,200,300,….
font-style	font-style: italic	Permet de définir le style du text : italic,oblique, normal
font-variant	font-variant: normal	Permet de changer la casse du texte (small-caps, normal)
font-transform	font-transform :uppercase	Permet de changer la casse du text(tout en maj=uppercase, tout en minuscule=lowercase, capitalize=les premier caracteres de chaque mot en maj, sans transformation= none
color	Color :#FF00AE Color :rgb(255,0,174) Color :orange ;	FF= intensité de red 00=green AE=blue #FF00AE est un mélange de red+green+blue Permet de definer une couleur du premier plan
text-decoration	text-decoration: overline, underline, line-through, blink, none	Permet de surligner, souligner, barrer, ou clignoter un text C’est possible de combiner pls valeurs

4.2 Propriétés d’arrière plan (background)

propriété	exemple	description
Backround-color	Backround -Color :#FF00AE Backround -Color :rgb(255,0,174) Backround -Color :orange ;	Permet de spécifier une couleur d’arrière plan
Backround-image	Backround-image : url(‘chemin’)	Permet de spécifier une image d’arrière plan
background-repeat	background-repeat :	A utiliser avec background-image Permet de spécifier comment on doit répéter l’image d’arrière plan
background-attachment	background-attachment : fixed ou scroll	Permet de fixer l’image d’arrière plan ou de la défiler
background-position	background-position : center center ; background-position : 100px 200px ; (dist en left) (dist / top)	Positionner l’image d’arrière plan (x,y) X=en pixel ou {left,center,right} Y=en pixel ou {top, center, bottom}

4.3 Bordure (border)

propriété	exemple	description
Border-width	Border-width :2px ;	Permet de spécifier la largeur (épaisseur) de bordure
Border-color	Border-color :#FFOOAE Border-color :orange	Permet de definer la couleur de bordure
Border-style	Border-style :solid ;	Permet de spécifier le style de bordures : trait en continu, trai double, pointillé, tiret,….