History: Les feuilles de styles CSS
Preview of version: 2
Introduction sur le langage CSS
C'est quoi le CSS
Le langage CSS (Cascading Style Sheets, en anglais) est utilisé pour définir l’aspect futur de votre site, comme par exemple la couleur du fond de la page ou le type de police.
Plus concrètement, le CSS (ou feuille de style), c’est un petit fichier (exemple « style.css ») dans lequel l’aspect de votre site est défini.
Pourquoi utiliser le CSS ?
Avantages :
* La structure et la présentation sont gérées séparément
* La conception sans se soucier de la présentation,
* Le code HTML est réduit en taille et en complexité.
Exemple concret ?
Je souhaite le fond de mes pages en gris.
Si j'ai un site de 5 pages, je vais répéter 5 fois :
En HTML simple :
<body bgcolor="#CCCCCC">
En CSS je vais mettre dans mon fichier CSS (exemple 😕tyle.css)
body { background-color: #CCCCCC; }
Si un jour je souhaite modifier la couleur de mes pages, avec le CSS, j'ai un seul fichier a modifier !
--------------
CSS Tiki a été en transition, et vient autour d'être plus d'un cadre. As of Tiki 4, this is how the CSS files are arranged. Au Tiki 4, le présent est de savoir comment les fichiers CSS sont disposés.
Des CSS spécifiques pour les composantes
Dans le répertoire "css/", il y a des feuilles de styles spécifiques à certaines composantes. Ce sont :
- admin.css
- calendar.css
- cssmenus.css
- freetags.css
- jscalendar.css
Ils sont appelés automatiquement si la composante est installée par défaut, ou autrement ils sont appelés cas par cas si la composante est une option.
Des CSS spécifiques pour les navigateurs
Le répertoire "css/" contient aussi des fichiers spécifiques à certains navigateurs. Ces fichiers contiennent des balises CSS globales pour ces navigateurs :
- ie6.css
- ie7.css
- ie8.css
Ceux-ci servent aux navigateurs du même nom, grâce à des scripts conditionnels dans la section "HEAD" du fichier "HTML".
Des CSS spécifiques pour des effets spéciaux
En plus, certains logiciels développés à l'externe et utilisées par Tikiwiki, comme jQuery et PHP Layers menus, ont leur propre feuilles de styles CSS, qui sont appelées seulement si la fonctionnalité est activée. Ces fichiers sont dans les sous-répertoires appropriés, dans "lib/".
Les feuilles de styles propre aux thèmes
Les feuilles de styles de thèmes sont dans le répertoire "styles/".
Base de styles
Implantés dans Tiki 3 et effectifs par défaut dans Tiki 4, il existe trois fichiers CSS qui sont importés par les feuilles de styles de thèmes, fournissant une structure de base et certains détails de conception par défaut. Il s'agit de lite.css, layout.css et design.css
styles/lite/lite.css
This file positions the three columns in the page middle, providing a source-ordered (that is, the main column content is at the top in the page source, above the content of the secondary side columns) liquid layout that can flex to accomodate wide center-column content. Ce fichier découpe et configure la section tronc du site Web (entre la section de tête et la section de pied) en trois colonnes , fournir un schéma source-classés (c'est-à-dire, le contenu de la colonne principale se trouve au sommet de la source de la page, au-dessus du contenu des colonnes côté secondaire) liquide qui peut flex pour accueillir l'échelle contenu de centre-colonne. Tiki's lite.css method is perhaps unique in its ability to accommodate content in this way, in all browsers, among web layout methods. Parmi les méthodes de mise en page web existantes, la méthode lite.css de Tiki est très originale (et peut-être unique) dans sa capacité à accueillir le contenu de cette façon, dans tous les navigateurs.
styles/layout/layout.css
Ce fichier contient des commandes pour une mise en page plus détaillée, afin d'éliminer la nécessité pour les feuilles de styles de thèmes à répéter les commandes les plus usuelles qui, normalement, ne changent pas beaucoup d'un thème à l'autre.
styles/layout/design.css
Ce fichier (dont le contenu a été à l'origine dans layout.css) fournit des propriétés par défaut pour les éléments de conception (design) qui ne changent pas souvent par thème.
Of course, the rules in layout.css and design.css are only provided as a default. Bien entendu, les règles en layout.css et design.css sont fournis uniquement par défaut. It's expected that the theme stylesheet will override any property it needs to, to implement its own appearance. Il s'attend à ce que la feuille de style thème aura préséance sur toute propriété, il doit, pour mettre en œuvre sa propre apparence. The default files were created to save theme authors time and trouble, and reduce the size and complexity of theme stylesheets. Les fichiers par défaut ont été créés pour mettre le thème auteurs du temps et des problèmes, et de réduire la taille et la complexité des feuilles de style thème.
There are also reference versions of layout.css and design.css - layout-reference.css and design-reference.css. Il existe également des versions de référence de layout.css et design.css - mise en page et la conception-reference.css-reference.css. The idea is that the actual production files should be as small as possible, so don't contain comments, while the reference versions are fully commented. L'idée est que les fichiers de production réelle devrait être aussi faible que possible, donc ne contient pas de commentaires, tandis que les versions de référence sont largement commentés.
Les feuilles de styles propre aux thèmes
Theme stylesheets proper Thème bon style
The theme stylesheets are in the styles/ directory. Les feuilles de style sont dans le thème styles / répertoire. All of the themes in the Tiki download package import lite.css, layout.css, and design.css, and in turn they specify their own rules. Tous les thèmes de la lite.css téléchargement Tiki paquetage import, layout.css et design.css, et à tour de rôle ils précisent leurs propres règles. Rules in the theme stylesheets will override rules in the feature-specific files in css/ and in the global layout and design files in styles/layout/ . Règles dans le style aura pour thème les règles de surcharge dans les fichiers spécifiques à figurer dans css / et dans la mise en page globale et les fichiers de conception dans des styles / layout /. So, as it should be, the theme stylesheet has the last word on layout and design. Alors, comme il se doit, la feuille de style thème a le dernier mot sur la présentation et le design.
Thème personnalisé des fichiers CSS
Each theme has a subdirectory in styles/ that contains its background images. Chaque thème a un sous-répertoire dans des styles / qui contient les images d'arrière-plan. Beginning in Tiki 3, the subdirectory can also contain: À partir de Tiki 3, le sous-répertoire peut également contenir:
custom.css
If a modified version of a theme is wanted for a site, instead of editing the theme stylesheet itself (edits which would probably be lost when the file is replaced in a subsequent Tiki upgrade), a "custom.css" file can be created and put in the theme's styles subdirectory. Si une version modifiée d'un thème est recherché pour un site, au lieu d'éditer la feuille de style thème lui-même (les modifications qui serait probablement perdue lorsque le fichier est remplacé dans une mise à jour ultérieure Tiki), un "custom.css" fichier peut être créé et mis sous le thème de styles du répertoire. Any rules in this custom file will override the rules in the theme stylesheet. Toutes les règles dans ce fichier personnalisé remplace les règles de la feuille de style thème.
ie6.css, ie7.css, and/or ie8.css
Étant donné que ces versions d'Internet Explorer ont souvent besoin de règles CSS spéciales CSS (bon, peut-être pas IE8, mais elle a été incluse par souci d'exhaustivité), ces fichiers seront inclus et utilisés s'ils sont présents dans le répertoire du thème. These are theme-specific versions of the css/ie.6.css , etc. files that have global scope. Ce sont des versions spécifiques à thème de la css/ie.6.css, fichiers, etc qui ont une portée globale. These theme-specific files can be used as an alternative to putting IE-targeting rules in the theme stylesheet itself. Ces dossiers thématiques spécifiques peuvent être utilisés comme une alternative à la mise IE-ciblage des règles dans la feuille de style thème lui-même.
Normalement, les feuilles de style personnalisées sont créées et éditées localement et transférées à l'installation de Tiki. Mais Tiki a également une interface web au sein de son site pour l'édition des fichiers CSS. Cela a été cassé en 2 versions Tiki, mais le bug a été corrigé et est maintenant de nouveau utilisable. Voir la documentation à http://doc.tikiwiki.org/Edit+CSS.
Les options de thèmes
Une nouveauté à partir de la version 3 de Tiki, ce sont "les options de thème", qui visent à donner les variations au thème lui-même. Dans le répertoire du thème, il y a (ou il peut y avoir) un sous-répertoire appelé "options" (par exemple, "styles/thenews/options/") qui contient une ou plusieurs variantes de ce thème. Le fichier "styles/thenews/options/narrow_left_column.css" a des droits qui surpassent les droits équivalents du fichier "styles/thenews/thenews.css", pour créer une variante de "colonnes gauches étroites". Par exemple, si l'option de ce thème a son propre fond d'image, ce fichier-image ira dans le répertoire styles/thenews/options/narrow_left_column/ .
Partout où un thème peut être choisi, comme à la la page d'administration 'Thèmes et apparence' (Look & Feel) et dans le module de permutation de thèmes, il y a à la fois un sélecteur de thème et, si le thème a des options, il y a un sélecteur d'option.
-----------------
Liens externes pour apprendre CSS
http://www.cssdebutant.com/
http://stylescss.free.fr/tutorial-css.php
http://css.mammouthland.net/
Pour valider le code CSS selon les normes internationales
http://jigsaw.w3.org/css-validator/