css doc
Notes concernant les feuilles de style (Cascading Style Sheets).
documentation simplifiée.
| Pages | concept - exemples | pratique |
|---|---|---|
| - retour |
- css de base | - shéma de main.css |
Structure du stylesheet principal :
Et de ce fait de ma page html aussi si la documentation est simple et claire du point de vue de son organisation.Feuille utilisée pour cette page : idem à la page structure-css-stylesheet-part1.php
Concernant la structure globale d'un "stylesheet".
Ci dessous la structure du document css.
Une forme de description plus claire : structure générale du stylesheet css en début de développement au format .txt
Pas de fioritures ou d'explication mais juste un plan pour saisir en un coup d'oeil l'architecture de la page.
On ne chargera pas le stylesheet général pour cette page vu qu'uelle est très simple, inutile de faire charger le css général qui est plus lourd.
@charset "utf-8"; /* CSS Document */ html body body h1 body a
body a:hover
#allPage #allPage #container #allPage #container #mainIcoContainer #allPage #container #pageIcon #allPage #container #mainTitle #allPage #container #mainContent #allPage #container #validatorContainer #allPage #container #mainTitle h1 #allPage #container #mainTitle h2 #allPage #container #mainContent .listeParagraphes #allPage #container #mainContent .listeParagraphes li #allPage #container #mainContent .listeParagraphes li p #allPage #container #mainContent pre #allPage #container #mainContent #mainMenu #allPage #container #mainContent #mainMenu #mainMenuTable #allPage #container #mainContent #mainMenu #info #allPage #container #mainContent #mainMenu #mainMenuTable th #allPage #container #mainContent #mainMenu #mainMenuTable th:hover #allPage #container #mainMenuTable td #allPage #container #mainContent .limitedWidth #allPage #container #mainContent .preDiv #allPage #container #mainContent .preCode #allPage #container .rem #allPage #container .highlight #allPage #container .smalltext
La structure est simple :
On sait quels sont les éléments utilisés et comment ils s'imbriquent.
Ce qui donne déjà pas mal d'informations sur la page et les moyens de la modifier en ouvrant le fichier stylesheet.css correspondant à la page.
J'ai tapé le code à la main et c'est évident vu que je vois la structure générale du document.
-
Depuis la documentation qui me renseigne sur les éléments qui forment la page.
-
Depuis le stylesheet qui me permet de modifier chaque élément facilement vu que tout est dans l'ordre dans la liste au format texte.
- Dans ce cas, à chaque modification, il faut évidemment essayer de bien placer l'élément au bon endroit dans la feuille css et le document qui la documente sommairement.
- J'ai gagné du temps vu que je n'ai vérifié sur le validateur du W3C (pour mon code php / html) qu'une fois la page entièrement terminéee tout comme pour la validation de main css auquel j'avais oublié un "x" à "px" (pixel). Bof... Vite corrigé ça!
- Je me retrouve tout le temps dans la page. Que je fasse une pause, m'occupe d'autre chose entretemps...
Les commentaires indiquant les fins de balises div et l'indentation m'aident en ce sens à toujours avoir un document net.
<- retour