Aller au contenu


[Tutoriel] Site Web - Les feuilles de styles (intégrées/externes[.css])


1 réponse à ce sujet
  • Vous ne pouvez pas répondre à ce sujet

#1
Invité_F@bienb_*

[en réécriture]

Les feuille de style permettent de mettre en forme le contenu d'un page web.

Exemple d'une feuille de style interne :

////////////////////////////////////////////////////////////////////////////////////

<style type="text/css">

/* CSS Document */
body {
/* Style de la page */
}

a{ text-decoration:none; } /* Style des liens de la page */

#Div1 { /*Style d'une div */
clear: both;
position: relative;
min-width: 800px;
height: 600px;
top: 34px;
margin-top: 34px;
margin-right: 34px;
margin-bottom: 0px;
margin-left: 34px;
z-index: 1;
}

.Style1 { /*Style d'écriture */ }

</style>

////////////////////////////////////////////////////////////////////////////////////

Explication :

-> a : Défini le style des liens de la page.

-> #(...) Défini le style d'une <div> de la page (correspondance avec id:"...").

-> .(...) Défini le style d'écriture dans une <div> ou un <span> de la page (correspondance avec style ou class:"...").

-> body : Défini le style principale de la page. On y retrouve :

////////////////////////////////////////////////////////////////////////////////////

Options de définition disponibles :

--> cursor

--> background
----> background-attachment: Paramètre[fixed local scroll inherit !important]
----> background-clip: Paramètre[border-box padding-box !important]
----> background-color: Paramètre[couleur(ex:#000) inherit transparent !important]
----> background-image: Paramètre[url(/*url de l'image*/) inherit none !important]
----> background-origin: Paramètre[border-box content-box padding-box !important]
----> background-position: Paramètre[bottom center inherit left right top !important]
----> background-repeat: Paramètre[inherit no-repeat repeat repeat-x repeat-y round space !important]
----> background-size: Paramètre[contain auto cover !important]

--> border

--> font

--> margin

--> pading

--> ...

////////////////////////////////////////////////////////////////////////////////////

l'ajout de min- et max- devant les valeurs de largeur et de hauteur défini les largeurs/hauteurs min/max.

////////////////////////////////////////////////////////////////////////////////////

Modifié par F@bienb, 17 novembre 2010 - 12:50.


#2
Invité_F@bienb_*

Mettre en place une feuille de style externe :

1 - Il faut d’abord faire un appel de cette dernière dans la page avec :

<link rel="stylesheet" href="global.css" type="text/css" /> <!-- Css externe de la page -->

Le href fait appel au fichier contenant la feuille de style externe en .css
Celle ci a une organisation similaire, il y a que l'en-tête à ajouter pour donner l'encodage du css :

Exemple :

////////////////////////////////////////////////////////////////////////////////////

@charset "utf-8"; /* Encodage de la page */

/* Contenu du Document CSS */

////////////////////////////////////////////////////////////////////////////////////





0 utilisateur(s) dans ce forum

0 membre(s), 0 invité(s), 0 utilisateur(s) anonyme(s)

Community Forum Software by IP.Board
Licence accordée à : AnimeServ.NET
Design & Code by Bad.Y o/
© 2013 AnimeServ