Cascading Style Sheets

 Charge moyenne sur 1mn : 0.24 Charge moyenne sur 5mn : 0.73 Charge moyenne sur 15mn : 0.83


CSS

Style sheets (in English "Cascading Style Sheets", abbreviated CSS) are a language used to manage the presentation of a Web page.





Site user blocks : Account info / user rights / summary

Identify yourself

Authenticate with your ZW3B account and take advantage of member services.

Username :
Password :
  
  

Créer une feuille de style

Type: text/css

Informations :

Dates
  • Publish : : 2010
  • Modification : Saturdy 24 august 2013

  • 814 views

Share :

Pour faire la mise en page de son site Web il faut se faire une feuille de style (une feuille CSS)

Ici on fixe à la balise html, une couleur blanche aux textes et une couleur de fond grise.

Script avec 4 lignes


001body {
002        color:white;
003        background-color:gray;   
004}

Ici on fixe à la balise a (les liens), la couleur rouge et le soulignement.

Script avec 8 lignes


001a {
002        color:red;
003        text-decoration: underline;	    
004}
005a:hover {
006        color:red;
007        text-decoration:none;	    
008}

Ici on déclare une classe CSS important, la couleur rouge et une épaisseur de trait grasse.

Script avec 4 lignes


001.important {
002        color:red;
003        font-weight:bold;	    
004}

On appelle cette classe depuis une page XHTML comme ceci

Script avec 1 ligne


001<span class="important ">mon texte est important</span>

Ici on déclare un IDentifiant CSS header, avec une taille de textes de 14px.

Script avec 3 lignes


001#header {
002        font-size:14px;    
003}

On appelle cet ID depuis une page XHTML comme ceci

Script avec 3 lignes


001<div id="header">
002        <p>Mon Header</p>
003</div>

IMPORTANT : Ce qu'il faut savoir c'est qu'une classe CSS peut être appelée plusieurs fois sur une page alors qu'un identifiant CSS doit être unique dans une page.

Vous pouvez prendre pour exemple notre feuille de style global ou encore lire l'article "Implanter du CSS à une page Web".

Ci-dessous "la" feuille de style global.css

En gros ici je fixe les éléments courants de mon "futur" code (x)HTML.

Script avec 135 lignes


001/**********************************
002*
003*	DEFAULT
004*
005***/
006
007html, body {
008	margin:0;
009	padding:0;
010	font-family:Tahoma, Arial, Helvetica, Verdana, sans-serif;
011	font-weight:normal;
012	font-size:12px;
013	letter-spacing:0.5px;
014	color:#FFF;
015	background-color:transparent;
016	background-color:#191919;
017/*	background-image: url("img/background.png");  
018	background-position:top center;
019	background-repeat:no-repeat;   */
020}
021
022
023table {
024	margin:0;
025	padding:0;
026	font-family:Tahoma, Arial, Helvetica, Verdana, sans-serif;
027	font-weight:normal;
028	font-size:12px;
029	letter-spacing:0.5px;
030	color:#FFF;
031	border-spacing:0;
032	border-collapse:collapse;
033}
034
035div, p, hr, ul, li, form {
036	margin:0;
037	padding:0;
038}
039
040/***
041*
042*	/DEFAULT
043*
044**********************************/
045
046
047/**********************************
048*
049*	ELEMENTS HTML COURANTS
050*
051***/
052
053/* les titres */
054h1, h2, h3, h4, h5, h6 {
055	margin:0;
056	padding:0;
057	/*font-family:'Helvetica Neue', Tahoma, sans-serif;*/
058	/*font-family:Tahoma, sans-serif;*/
059	font-family:Impact, sans-serif;
060	text-transform:uppercase;
061	font-weight:normal;
062	word-spacing:5px;
063	letter-spacing:1px;
064}
065h1 {
066	font-size:36px;
067}
068h2 {
069	font-size:26px;
070}
071h3 {
072	font-size:20px;
073}
074h4 {
075	font-size:17px;
076	padding-bottom:10px;
077        padding-top:5px;
078        padding-left:5px;
079        padding-right:5px;
080}
081h5 {
082	font-size:14px;
083}
084h6 {
085	font-size:13px;
086}
087
088/* images */
089img {
090	border:none;
091	text-decoration:none;
092/*	border:1px solid #9c0404;  */
093}
094
095/* les liens */
096a {
097	text-decoration:none;
098	color:#FFF;
099}
100a:visited {
101	color:#FFF;
102}
103a:hover {
104	color:#9c0404;
105}
106a:target {
107	color:#FFF;
108}
109
110
111/* pargraphes */
112p {
113	text-align:justify;
114	line-height:18px;
115        padding-bottom:10px;
116        padding-top:5px;
117        padding-left:5px;
118        padding-right:5px;
119}
120
121/* les barres */
122hr {
123/*	clear: both;      */
124	height:1px;
125	border:0;
126	background-color:#565656;
127	margin-top:15px;
128	margin-bottom:20px
129}
130
131/***
132*
133*	/ELEMENTS HTML COURANTS
134*
135**********************************/

Ensuite on pourait faire une 2eme feuille v1.css avec le style des div#blocs des éléments identifiés.. comme je viens de vous expliquer plus haut :)





Translate this page with Google

Author of the page

O.Romain.Jaillet-ramey

O.Romain.Jaillet-ramey

  • Firstname : Olivier Romain Luc
  • Lastname : : Jaillet-ramey
  • Arrived on tuesday 19 october 1976 (1976/10/19 00:00)
    44 years activity !

Firefox Nighlty

Our friends from Framasoft are interested in Mozilla and asked them questions about Nightly: Firefox Night-club, free entry !






Valid XHTML 1.0 Strict CSS Valide !

ipv6 ready