Besoin aide pour CSS externe local et embarqué
Résolu/Fermé
A voir également:
- Besoin aide pour CSS externe local et embarqué
- Appdata local - Guide
- Ip local - Guide
- Chkdsk disque dur externe - Guide
- Appel externe - Forum telephonie fixe
- Nom de périphérique local déjà utilisé ✓ - Forum Réseau
1 réponse
Utilisateur anonyme
Modifié par kyser soze le 23/03/2013 à 17:54
Modifié par kyser soze le 23/03/2013 à 17:54
bonjour,
En fait c'est juste une histoire de placement du code css, comme tu le sais il est attaché à une page html pour "l'habiller" , on peut le faire de différentes façon :
En local : cela consiste à utiliser l'attribut style à l'intérieur d'une balise, pour l'exemple c'est dans la balise <span>, le style définie ne s'appliquera que au code contenu dans la balise :
Cette méthode est plutôt dépréciée car on passe à côté de la grande utilité du CSS qui est de définir des styles pour plusieurs éléments semblables. Aussi pour des raisons de clarté du code. On peut l'utiliser pour les cas exceptionnels qui ne peuvent pas être généralisés.
En embarqué : Ca signifie utiliser la balise <style> dans la page html (àl'intérieur de la balise <head>) pour regrouper l'ensemble du css.
On utilise différents marqueurs pour identifier les éléments, soit des noms de balise , des classes ou des id.
Le style du paragraphe contenant id="paragraphe" est définie dans le css #paragraphe.
Il faut se rappeler qu'un id est unique, on ne donne pas plusieurs fois le même id à différents éléments, on utilise les classes. Ici la même classe étant donné à plusieurs morceau de code, ils auront le même style.
Personnellement j'utilise rarement cette méthode, car dès que le css devient vraiment important je préfère le séparer complétement du HTML , c'est la méthode qui suit!
Et enfin en externe c'est séparé le html et le css en deux fichiers.
La syntaxe est la même que en embarqué, seulement c'est un fichier à part que l'on intègre dans la page html par la balise <link> :
----------fichier css : style.css ------------------
body{
margin-top:50px;
}
#paragraphe{
margin-left:50px;
}
.span1{
text-decoration: line-through;
color:red;
}
-----------------------------------------------------
------------- fichier html : index.html-------------------
<html>
<head>
//Ici on récupère le fichier css contenant les styles de la page
//attention au chemin du fichier css dans l'attribut href
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<p id="paragraphe">
Si ton labeur est dur,<span class="span1"> et si tes résultats sont minces,</span> rappelle toi qu'un jour le grand chêne<span class="span1"> majestueux<span class="span1"> a été un gland comme toi.
</p>
</body>
</html>
-----------------------------------------------------------------
J'espère que cela t'aura aidé, si j'ai pas été clair sur certains trucs n'hésite pas ;) !
Résolu? ===> [RESOLU]
En fait c'est juste une histoire de placement du code css, comme tu le sais il est attaché à une page html pour "l'habiller" , on peut le faire de différentes façon :
En local : cela consiste à utiliser l'attribut style à l'intérieur d'une balise, pour l'exemple c'est dans la balise <span>, le style définie ne s'appliquera que au code contenu dans la balise :
<html> <head></head> <body> <p> Si ton labeur est dur,<span style="text-decoration: line-through;color:red;"> et si tes résultats sont minces,</span> rappelle toi qu'un jour le grand chêne majestueux a été un gland comme toi. </p> </body> </html>
Cette méthode est plutôt dépréciée car on passe à côté de la grande utilité du CSS qui est de définir des styles pour plusieurs éléments semblables. Aussi pour des raisons de clarté du code. On peut l'utiliser pour les cas exceptionnels qui ne peuvent pas être généralisés.
En embarqué : Ca signifie utiliser la balise <style> dans la page html (àl'intérieur de la balise <head>) pour regrouper l'ensemble du css.
On utilise différents marqueurs pour identifier les éléments, soit des noms de balise , des classes ou des id.
<html>
<head>
<style type="text/css">
body{//On peut définir le style d'une balise toute entière
margin-top:50px;
}
#paragraphe{//Le # correspond aux id
margin-left:50px;
}
.span1{//et le . correspond aux classes
text-decoration: line-through;
color:red;
}
</style>
</head>
<body>
<p id="paragraphe">
Si ton labeur est dur,<span class="span1"> et si tes résultats sont minces,</span> rappelle toi qu'un jour le grand chêne<span class="span1"> majestueux<span class="span1"> a été un gland comme toi.
</p>
</body>
</html>
Le style du paragraphe contenant id="paragraphe" est définie dans le css #paragraphe.
Il faut se rappeler qu'un id est unique, on ne donne pas plusieurs fois le même id à différents éléments, on utilise les classes. Ici la même classe étant donné à plusieurs morceau de code, ils auront le même style.
Personnellement j'utilise rarement cette méthode, car dès que le css devient vraiment important je préfère le séparer complétement du HTML , c'est la méthode qui suit!
Et enfin en externe c'est séparé le html et le css en deux fichiers.
La syntaxe est la même que en embarqué, seulement c'est un fichier à part que l'on intègre dans la page html par la balise <link> :
----------fichier css : style.css ------------------
body{
margin-top:50px;
}
#paragraphe{
margin-left:50px;
}
.span1{
text-decoration: line-through;
color:red;
}
-----------------------------------------------------
------------- fichier html : index.html-------------------
<html>
<head>
//Ici on récupère le fichier css contenant les styles de la page
//attention au chemin du fichier css dans l'attribut href
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<p id="paragraphe">
Si ton labeur est dur,<span class="span1"> et si tes résultats sont minces,</span> rappelle toi qu'un jour le grand chêne<span class="span1"> majestueux<span class="span1"> a été un gland comme toi.
</p>
</body>
</html>
-----------------------------------------------------------------
J'espère que cela t'aura aidé, si j'ai pas été clair sur certains trucs n'hésite pas ;) !
Résolu? ===> [RESOLU]
24 mars 2013 à 10:29
Merci beaucoup pour le temps consacré !
27 mars 2013 à 12:51