Syntaxe pour définir les div en une ligne

**ml1234** · 04/07/2009, 07h26

Bonjour,
Je dois à partir d'un programme VB générer des pages html.
C'est un peu fastidieux d'écrire chaque règle css en début de fichier.
Je voulais savoir quelle était la syntaxe (accolades, guillemets, séparateurs,...) pour écrire la définition du div en une seule ligne.
J'ai de plus déjà constaté que pour les polices de caractères, parfois on met des guillemets (lucida,times new roman) et parfois pas. Quand doit-on le faire ? je croyais que c'était pour des polices non standard mais times new roman est courant

Mêmes règles pour identificateurs que pour les classes ?

Mêmes règles pour un tableau ?

Pour être clair, je souhaiterais par exemple faire passer ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
* {margin:0 ; padding:0} 
 
body {
	text-align: center;
	margin: 0px;
	padding: 0px;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 12px;
	font-style: normal;
	color: #FFFFFF;
	background-color: #460401;
}
#header h1 {
	font-variant: small-caps;
	color: #FF3300;
       font-family: "Lucida Grande";
}
#wrapper {
	background-color: #000000;
	text-align: left;
	width: 960px;
	margin-top: 25px;
	margin-right: auto;
	margin-bottom: 25px;
	margin-left: auto;
	border: 3px solid red;
}
#header {
	background-color: #CCCCCC;
	padding-top: 10px;
	padding-right: 20px;
	padding-bottom: 10px;
	padding-left: 20px;
	margin: 0px;
	font-size: 24px;
}
#maincontent {
	background-color: #999999;
	padding-top: 10px;
	padding-right: 20px;
	padding-bottom: 10px;
	padding-left: 20px;
	line-height: 1.5;
}
#footer {
	background-color: #666666;
	margin-top: 20px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding-top: 10px;
	padding-right: 20px;
	padding-bottom: 10px;
	padding-left: 20px;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #8c8c8c;
	text-align: center;
	font-size: 24px;
	clear: both;
}
 
#maincontent h1 {
	font-variant: small-caps;
	color: #00FFFF;
}

dans cela :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
<body>
	<div id="wrapper">
 
		<div id="header">
    		<h1>Header</h1>
  		</div> 		<!-- end of header -->
 
   	  <div id="maincontent">
 
  		<h1> Accueil </h1>
 
      <p>Itaque tum Scaevola cum
</p>
    	</div>  <!-- end of maincontent -->
 
        <div id="footer">
          <p>Footer</p>
        </div>  <!-- end of footer -->
 
    </div>  <!-- end of wrapper -->
</body>

merci
Marc

**12monkeys** · 04/07/2009, 11h55

Bonjour

Envoyé par ml1234

C'est un peu fastidieux d'écrire chaque règle css en début de fichier.
Je voulais savoir quelle était la syntaxe (accolades, guillemets, séparateurs,...) pour écrire la définition du div en une seule ligne.

Après plusieurs relectures je pense avoir saisi ce que tu voulais : avoir une règle générale pour tous les div ?

Suffit d'indiquer le sélecteur de type :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
div {
        /* règles s'appliquant à toutes les div */
}

Cette règle s'appliquera à toutes les div qui se trouvent dans les fichiers où le CSS est appelé...

Envoyé par ml1234

J'ai de plus déjà constaté que pour les polices de caractères, parfois on met des guillemets (lucida,times new roman) et parfois pas. Quand doit-on le faire ? je croyais que c'était pour des polices non standard mais times new roman est courant

On mets des guillemets uniquement aux polices composées (c'est a dire dont le nom est composé de plusieurs mots séparés par des espaces...)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
div {
        font-family :    "Times New Roman", Arial, Lucida, "Comic Sans MS";
}

Envoyé par ml1234

Mêmes règles pour identificateurs que pour les classes ?

Mêmes règles pour un tableau ?

Pas compris là

**ml1234** · 04/07/2009, 12h15

salut,
désolé de ne pas avoir été clair.
pour guillemets, génial, merci.

pour la règle css écrite en une seule ligne, apparemment on ne s'est pas compris.
c'est du type (généré à partir de webplus qui travaille comme cela) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
body {margin: 0px; padding: 0px;}
a:link {color: #1f6200;}
a:visited {color: #cbf798;}
a:hover {color: #1f6200;}
a:active {color: #1f6200;}
.Normal-P
        {
        margin:0.0px 0.0px 0.0px 0.0px; text-align:center; font-weight:400; 
        }
.Normal-C
        {
        font-family:"Arial", sans-serif; font-size:11.0px; line-height:1.27em; 
        color:#1f6200; 
        }
...

et

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
<body text="#000000" style="background: #7f9200 url(wpimages/wpa00f9c8b.png); background-position: top center; text-align:center; height:700px;">
<div style="background: transparent; position:relative;width:650px;height:700px;margin-left:auto;margin-right:auto;">
<div style="position:absolute; left:2px; top:81px; width:646px; height:602px;">
    <img src="wpimages/wp1111ad35.png" width="646" height="602" border="0" id="qs_1" name="qs_1" title="" alt="" onload="OnLoadPngFix()"></div>
<div style="position:absolute; left:77px; top:683px; width:497px; height:14px;">
    <div class="Normal-P">
        <span class="Normal-C">Copyright © Tous droits réservés. Créé par Serif. </span><span class="Normal-C0"><a href="page6.html">Conditions d'utilisation</a></span><span class="Normal-C"> | </span><span class="Normal-C0"><a href="page7.html" title="Privacy policy">Politique de confidentialité</a></span></div>
 
</div>
<div style="position:absolute; left:279px; top:38px; width:90px; height:50px;">
    <a href="index.html" onMouseOut="PPImgActi
...

Je vois bien qu'il y a des "=", des noms "text, style,..." ,des guillemets et des ";" mais je n'arrive pas bien à comprendre la syntaxe par rapport à une règle css écrite dans un fichier css. de plus dans mon cas j'aimerais avoir aussi le nom de chaque div dans cette ligne pour plus de lisibilité

Marc

FoxLeRenard · 04/07/2009, 14h06

Envoyé par ml1234

salut,
désolé de ne pas avoir été clair.

Bonjour, j'avoues que même aprés ta réponse a 12monkeys je suis
perplexe

Dans le fond, je commence a comprendre (je crois

)
Tu utilises un outils comme il y en a des centaines, et il te génére
a la mode ancienne des styles écris dans les balises HTML.

Rassures toi , il n' y a pas des centaines d'atributs, mais quand même
chacun a sa régle de syntaxe trés précise pour les feuilles CSS.
En plus la syntaxe n'est pas la même que l'ancienne utilisée dans les balises HTML genre style=""

Alors comment faire ?

Va sur un site CSS et pour chaque atribut regardes la syntaxe !

Bon courage

**12monkeys** · 04/07/2009, 15h20

Bon je crois comprendre...

Une des méthodes pour insérer du CSS est de l'indiquer directement dans la balise HTLM, et ce grâce à l'attribut HTML style.

La valeur de l'attribut style doit être mis entre guillemets " ". La séparation entre l'attribut et sa valeur est le égal = comme pour tous les attributs HTML.

Par contre la valeur en elle même correspond alors à du CSS. Et tu y indique les propriétés CSS que tu veux de la même manière que dans un fichier CSS (sans les espaces mais avec le point-virgule entre chaque déclaration).

Pour "le nom de chaque div dans cette ligne" ce n'est pas possible : le code CSS que tu y indique ne s'applique qu'à la balise dans laquelle se trouve l'attribut. Pour faire ça il faut externaliser le code CSS soit dans l'entête du document (entre balises <style type="text/css"></style>) soit dans un fichier CSS externe...

Pour ce qui est de l'écriture des propriétés CSS je ne peut que te conseiller les spécifications du W3C ou leur traduction en français.
Voilà j'espère que c'est claire là ?

Syntaxe pour définir les div en une ligne

Tableau en CSS

Vue hybride

Discussions similaires

Partager

Partager