Please enable JavaScript!
Bitte aktiviere JavaScript!
S'il vous plaît activer JavaScript!
Por favor,activa el JavaScript!
antiblock.org

Créer des feuilles de style avec Dreamweaver

Que sont les feuilles de style?

Pourquoi les feuilles de style?

Quelles sont les raisons  à utiliser des feuilles de style?

Utilisation des feuilles de style:

- Concepts CSS

- Termes clés

- Propriétés

- Les schémas de positionnement

Que sont les feuilles de style

 

Les feuilles de style fournissent un moyen pour les auteurs de préciser comment ils souhaitent des documents écrits dans un langage de balisage tels que XML ou HTML pour être formaté. Par exemple, un auteur pourrait souhaiter préciser que le document doit être vert sur rose - ce qui pourrait être fait en utilisant le CSS, une norme établie pour les documents de mise en plis.

Vous pourriez vous demander: «Pourquoi avons-nous besoin des feuilles de style - ne peut pas vous utiliser de l'HTML, par exemple, l'élément FONT ou l'attribut bgcolor?

Il y a deux réponses à cela:

  1. HTML n'est pas conçu pour les documents de mise en plis - lorsque vous écrivez un document HTML, vous spécifiez uniquement le contenu que l'élément contient. Étant donné le morceau de code HTML: <H1> Un titre </ H1>, vous avez spécifié rien sur la façon dont l'élément doit être rendu, mais seulement que l'élément est un titre 1. Si vous tient à préciser que vous voulez que vos rubriques en jaune Helvetica, alors vous pourriez avoir <H1> <FONT color="yellow" face=\"helvetica\"> Un titre </ FONT> </ H1>, mais cela est une mauvaise pour plusieurs raisons:
    1. Vous devez ajouter ce morceau de code à chaque titre que vous voulez style - c'est beaucoup de temps, sujette à l'erreur et rend les fichiers trop pléthorique (une page typique style en utilisant le HTML sera 1/3ème des balises de formatage).
    2. Si vous souhaitez modifier ces positions au rose Arial, puis vous aurez à changer chaque rubrique individuellement - une tâche laborieuse prohibitif sur un grand site.
  2. HTML n'a tout simplement pas offrir suffisamment de contrôle sur le formatage de documents - des effets de formatage importantes telles que menant (l'espace entre les lignes), les ombres de texte, et de nombreux autres faits ne peuvent tout simplement pas être fait à l'aide HTML.

Les feuilles de style de résoudre tous ces problèmes. Par exemple, disons que vous voulez faire toutes ces rubriques vert Arial - Pas de problème, le type H1 {font-family: Arial; color: green}. Que faire si vous voulez changer tous les titres sur votre site au rouge avec un fond bleu? Il suffit de changer que pour H1 {color: red; background: blue}, et, d'un seul coup, l'ensemble du site est changé .

Que peut faire des feuilles de style?

 

Pour prendre un exemple, sur cette page toutes les rubriques sont brun rougeâtre - c'est le cas sur chaque page de RichInStyle.com. Cela ajoute sans doute à environ 10000 titres.

Si chacune de ces rubriques ont été ajoutées à être appelé avec un élément de la police (par exemple, <H2> <font color="blue"> Un titre </ font> </ h1>), qui prendrait place 250kb - une quantité importante de l'espace . En remplaçant par une règle CSS, l'ensemble du site peut être dessinée avec une règle unique d'un montant de seulement environ 40 octets.

En supposant une moyenne de 50.000 téléchargements par page, par mois, qui fonctionne à une économie de 12.5Gb.

C'est un beaucoup d'espace sauvé, surtout si vous payez pour la bande passante par le gigaoctet.

Imaginez l'effet cumulatif de ce à travers toutes les marges, les couleurs et les polices sur le site, et c'est beaucoup de trafic enregistré, donc pas seulement les coûts sont réduits, mais aussi la vitesse de téléchargement va augmenter pour les téléspectateurs de vos pages.

Pour donner un autre exemple de la puissance des feuilles de style, jetez un oeil à la page de personnalisation RichInStyle.com 's . Cela vous permet, comme le spectateur d'une page, de dire «je n'aime pas la façon dont cette page regarde, je préfère avoir en blanc sur bleu», et pour que le désir d'être remplies.

Cette technologie, unique à RichInStyle.com, et seulement réalisable en utilisant des feuilles de style, vous donne la puissance totale , et votre contrôle total d'utilisateurs (votre nom d'utilisateur ne éprouvent des difficultés de vision -? pas de problème, ils peuvent choisir une feuille de style à haut contraste), et le meilleur d'abord, il est en téléchargement gratuit à partir RichInStyle.com.

Pourquoi les feuilles de style?

Les feuilles de style présentent les avantages suivants:

  1. Ils séparer le contenu de la mise en forme. Cela signifie qu'au lieu de faire une citation en italique, vous marquez comme une citation, puis dire au navigateur que vous voulez toutes les citations d'être en italique.Cela signifie que c'est un travail de deux secondes pour changer les apostrophes en gras, rouge, vert ou normal.
  2. Ils réduisent le temps de téléchargement en supprimant les informations de mise en forme des documents.Ainsi, au lieu d'avoir à spécifier que vous souhaitez Times New Roman-douzaine de fois peu dans un fichier pour les titres, vous spécifiez une fois que vous voulez rubriques pour être en Times New Roman. Ils sont également avantageux en ce qu'ils ne doivent être téléchargés qu'une seule fois pour un site Web entier.
  3. Ils donnent beaucoup plus de contrôle sur le formatage de HTML - des fonctionnalités telles que les images de fond et des couleurs sur tous les éléments - pas seulement l'ensemble du document, etc
  4. Ils assurent un aspect cohérent à travers un site - un feuille de style peut milliers de style de pages.

Quelles sont les raisons  à utiliser des feuilles de style?

  1. Environ 1 sur 20 utilisateurs ont des navigateurs qui ne supportent pas les feuilles de style.
  2. Tous les navigateurs prennent en charge les feuilles de style correctement.

Soutenir

Soyez conscient du fait que depuis CSS est une spécification importante, la plupart des navigateurs ne le supportent pas dans son intégralité. Étant donné que c'est le cas, ne soyez pas surpris si certains concepts décrits dans ce guide ne fonctionne pas. Pour voir si ils le font, vous devriez vérifier .

Utilisation des feuilles de style

Les feuilles de style vous permettent de dire, par exemple, que vous voulez rubriques dans 24pt Arial avec un fond rose, que vous souhaitez l'ensemble du document pour avoir une marge gauche de 1 pouce, ou que ce soit. La bonne chose à leur sujet, c'est qu'ils sont le seul moyen que vous pouvez dire que vous voulez CORPS ou P pour être affiché dans une certaine manière - au format HTML que vous pouvez faire toutes les balises P d'une certaine couleur à l'aide des balises HTML, mais si vous vouliez les modifier, il faudrait des heures sur un site Web grand, mais les secondes en utilisant le CSS.

Par exemple:

BODY {color: red; 
background-color: white; 
font-size: 16px; 
font-family: Arial; 
line-height: 20px; 
margin-left: 5%}

Comme vous pouvez le voir, la création d'une feuille de style est facile, mais avant que vous pouvez faire cela, il est nécessaire de décider comment vous allez appliquer votre style à votre page.

Introduction

Il ya trois façons de base de données de style déclarant. La première est dans le <HEAD> de pages, la seconde est au niveau des balises et le troisième est dans une feuille de style externe séparée.

Dans chaque cas, les feuilles de style ne contiennent pas de HTML, seulement les commandes de style. Par exemple:

P {color: red}

est une déclaration CSS.

Feuilles de style externes

Feuilles de style liées

Les feuilles de style sont reliés au moyen du <LINK rel="stylesheet" type="text/css" href="name.css"> tag, qui doit aller dans l'en-tête d'une page.

Divers attributs de la balise indique choses au sujet de la feuille de style - l'attribut rel le type de lien (une feuille de style); l'attribut type du type de feuille de style (toujours text / css), et l'attribut href de l'emplacement de la feuille de style.

>Exemple

<HTML> 
  <HEAD> 
    <LINK rel="stylesheet" type="text/css" href="fluorescent.css"> 
  </ HEAD> 
  <BODY> 
    ... 
  </ BODY> 
</ HTML>

Une fois que vous avez lié la feuille de style à votre page, vous devez alors créer la feuille de style. Par exemple:

BODY {color: black; 
font-family: Genève, Helvetica, Arial, sans-serif; 
background-color: white}

Si vous avez enregistré l'exemple ci-dessus comme une feuille de style, puis chaque page que les liens vers elle aura les styles spécifiés.

Feuilles de style liées sont avantageux dans la mesure où une feuille de style peut être attaché à des centaines de fichiers. Ainsi, ils sont la seule façon d'aller si vous voulez la cohérence du style et, en fait, à mon avis , ils sont la seule façon d'aller de toute façon . Leur seul inconvénient est que si une page est téléchargée et lue en ligne, l'utilisateur est peu probable que la peine de sauver la feuille de style. La principale raison de leur utilisation est que vous pouvez attacher la même feuille à de nombreux fichiers en garantissant la cohérence et la réduction de la taille des fichiers.

Autres feuilles de style, préféré et persistante

Afin de donner plus de choix aux téléspectateurs de pages, vous pouvez utiliser des feuilles de style alternatives. Ceux-ci permettent aux utilisateurs de choisir entre différents styles. Il existe trois types de feuille de style:

  1. Les feuilles de style persistants - ceux-ci persistent indépendamment de sélections des utilisateurs. Ceux-ci peuvent ne pas être désactivée par l'utilisateur sans désactiver le style tout à fait, et en tant que telle devrait contenir des styles qui sont essentiels à votre page. Ils aident à réduire la redondance si elle est couplée avec des feuilles de style préférées et alternatives, car sans eux, les mêmes styles doivent aller dans des feuilles de style préférées et alternatives.

    Les feuilles de style persistants sont spécifiées ainsi (c.-à-la même manière que décrit ci-dessus):

    <LINK Rel="stylesheet" type="text/css"> href="nameoffile.css"

  2. Feuilles de style préférées - la feuille de style préféré (s) sont la feuille de style par défaut (s). Si une feuille de style alternatives est choisie, la feuille de style préféré (s) ne sera plus applicable.

    Toutes les feuilles de style préférées s'appliquant à un milieu donné doit avoir le même titre, car si il ya plusieurs avec des titres différents, tous, mais la première spécifiée seront ignorées.

    Feuilles de style préférées sont déclarées de la même manière que les feuilles de style persistants, sauf qu'ils comprennent un titre :

    <LINK Rel="stylesheet" title="nameOfStyleScheme" href="nameoffile.css" type="text/css">

  3. Autres feuilles de style - ils ne sont pas affichées à moins sélectionnée par l'utilisateur. Ils diffèrent des feuilles de style ordinaires en ce qu'ils ont un "alternate stylesheet" pour leur attribut rel. Ils doivent avoir un titre de telle sorte que l'utilisateur peut les sélectionner:

    <LINK Rel="alternate stylesheet" title="nameOfStyleScheme" href="nameoffile.css" type="text/css">

Importation des feuilles de style

Disons que vous avez standards les marges des entreprises dans corestyles.css:

BODY {margin-left: 0.5in; 
margin-right: 0.3in}

Cependant, vous avez des couleurs différentes:.

@ Import url (corestyles.css); 
BODY {color: red; 
background-color: black}

La règle @ import vous permet donc de garder certaines choses de la même tout en ayant d'autres différents, et suit la syntaxe suivante: @ import url (nameoffile.css); . Il doit venir au début de la feuille de style, avant tout des jeux de règles (un ensemble de règles est quelque chose comme P {color: red}).

Alternativement, il peut être spécifié comme @ import "nameoffile.css"; , comme @ import url ("nameoffile.css"); ou @ import 'nameoffile.css';. Toutefois, Internet Explorer ne supporte que les formats url (), et non les "et" formats.

Les feuilles de style incorporées

Les feuilles de style incorporées sont enfermés dans un <style type="text/css"> et </ STYLE> tag. Ils vont dans la tête d'une page:

<HTML> 
  <HEAD> 
    <STYLE type="text/css"> 
      <! - 
        BODY {color: red} 
      -> 
    </ STYLE> 
  </ HEAD> 
  <BODY> 
    ... 
  </ BODY> 
</ HTML >

Notez le <-! et -> balises. Ce sont les balises de commentaires HTML, inutile pour les navigateurs qui ne les feuilles de style de soutien, mais indispensable pour ceux qui ne le font pas pour éviter le problème inesthétique de la feuille de style apparaissant sur ??l'écran . Cela affecte environ 4% de tous les navigateurs.

Ils ont deux avantages par rapport aux feuilles de style liées:

  1. Ils n'affectent pas tout le reste des feuilles de style que vous pouvez utiliser
  2. Si un document est enregistré et lire, le style sera maintenu - les utilisateurs risquent de ne pas enregistrer des feuilles de style liées, mais ils sont forcés de sauver ceux intégrés car ils font partie de la page.

Media-dépendantes des feuilles de style

Vous spécifiez les feuilles de style dépendantes du média avec l'ajout de la média attribut à l'élément LINK ou STYLE.Par exemple, <STYLE media="screen" type="text/css"> .

Vous pouvez spécifier une liste des médias qui une feuille de style s'applique à en les séparant par des virgules, comme dans media = "screen, en braille" . Il suit une liste complète des médias valides (à noter que ceux-ci doivent être dans le minuscule):

  1. écran = écran d'ordinateur standard
  2. tty = grille de caractères à espacement fixe, comme avec télétypes
  3. TV
  4. projection
  5. ordinateur de poche = appareil de poche - probablement faible à faible résolution d'écran
  6. braille
  7. auriculaire
  8. all = s'applique à tous les médias

Style en-ligne

Toute balise d'ouverture peut prendre la style de l'attribut:

<P Style="color: green"> 
Cet élément P sera verte.

La différence la plus importante entre en ligne (tag-niveau) de style et d'autres styles, c'est que en appliquant le style à un élément individuel, que vous avez sélectionné l'élément sans ambiguïté, et le style en ligne donc ne pas utiliser les sélecteurs. Ainsi, avec l'exemple ci-dessus, il n'est pas nécessaire pour un sélecteur, alors que si vous faisiez le vert élément dans une feuille de style lié ou incorporé, vous devez avoir P {color: green}.

À mon avis, le style en ligne devrait être évitée, car elle n'indique pas pourquoi vous avez changé le style. Ainsi, si vous avez donné au paragraphe ci-dessus un nom qui indique son contenu, vous pourriez facilement le changer. Le moyen de faire cela est discuté dans la section suivante.

Vue d'ensemble à ce jour

Le nu HTML & CSS documents devrait ressembler à ceci:

<HTML> 
  <HEAD> 
    <LINK rel="stylesheet" type="text/css" href="filename.css"> 
  </ HEAD> 
  <BODY> 
    ... 
  </ BODY> 
</ HTML>

Et le document CSS ressemble à ceci:

...

Les prochaines sections  traite de la façon dont les styles sont spécifiés comme s'appliquant à des éléments individuels, etc

Déclarations

Les déclarations sont utilisées pour appliquer un style aux éléments, par exemple pour définir un élément à avoir une frontière.

La syntaxe de base d'une déclaration est une propriété (comme la couleur ), suivie par un deux-points (:) et une valeur.Ainsi la couleur: rouge est une déclaration. Les déclarations sont directement utilisés seulement dans le style inline.

Groupement Déclaration

Afin de préciser plusieurs styles pour un élément, les déclarations peuvent être séparés par des points-virgules. Par exemple, <P style="color: red; font-size: 16px;">. Il est facultatif d'avoir un point-virgule après la déclaration finale - <P style="color: red; font-size: 16px"> est également valable.

Sélecteurs

Sélecteurs sont utilisées pour associer des déclarations de style avec un ou plusieurs éléments.

Ceci est fait en plaçant les déclarations à l'intérieur d'un bloc (enfermé dans {}) et qui le précède d'un sélecteur. Par exemple, pour associer la couleur: rouge déclaration auprès de tous les éléments P, vous devez placer cette déclaration dans un bloc et ajoutez un sélecteur qui correspond à P:

P {color: red}

L'exemple ci-dessous rendrait tous les 'div' éléments rouges et 16 pixels de haut:

DIV {color: red; 
font-size: 16px}

À sa plus simple expression, un sélecteur se compose d'un nom d'élément (par exemple, <P>) (sans le <et>).Sélecteurs tels que P ou A: link sont appelés simple.

Un ou plusieurs sélecteurs simples peuvent être combinés en utilisant des combinateurs. Au CSS 1, le combinateur seulement un espace blanc ().

Le sélecteur de type

CORPS

Le sélecteur CSS consiste à prendre l'élément HTML, la suppression de la <et>. Il est utilisé, comme expliqué précédemment, dans un exemple tel que BODY {color: red}.

Les sélecteurs de classe

Ils vous permettent de donner des éléments d'un nom particulier.

Le code HTML d'une classe ressemble à ceci class="classname"> <tag. Par exemple:

<P Class="introductoryparagraph"> .... </ P>

Ceux-ci sont distingués dans la feuille de style par l'utilisation d'une période de suivi par le nom de classe:

P.introductoryparagraph {color: blue}

Cela s'applique à des éléments P avec une classe de introductorypargraph .

. Introductoryparagraph {color: blue}

Cela s'applique à n'importe quel élément avec une classe de introductoryparagraph (l'autre ne s'appliquerait qu'aux éléments P).

Les noms de classe doivent décrire le contenu de l'élément - au lieu de class = "italic" vous devriez dire pourquoi vous voulez qu'il soit en italique, par exemple class = "copyrightnotice". De cette façon, votre feuille de style sera auto-documenté, et vous pouvez facilement changer d'apparence selon le contenu d'élément.

Les classes peuvent pas commencer par un certain nombre ou un tiret, et devrait être en minuscules (parce que certains navigateurs distinction entre majuscules et minuscules et d'autres pas). Ils ne peuvent pas contenir d'espaces dans leurs noms. Ils peuvent contenir n'importe quelle lettre de l'alphabet, ainsi que les numéros, ainsi que des traits d'union. En CSS 1, il peut y avoir qu'une seule classe normale plus un pseudo-classe plus un pseudo-élément par sélecteur.

Pseudo-classe sélecteurs

Ceux-ci sont ainsi appelés parce qu'ils sont comme si l'élément a été spécialement marquée que celle de classe.

Link,: visited

Celles-ci s'appliquent à non visités, et les liens visités, respectivement. Un lien ne peut pas être à la fois lien et visité.Par exemple:

A: link {color: red} / *: Le lien serait le même que A: link, parce qu'il n'ya pas d'autres éléments auxquels: lien s'applique * / 
a: visited {color: purple}

: Actif

Cela s'applique à un lien étant activé. Notez que les liens ne peuvent pas être actif ainsi que le lien soit ou visité.

Pseudo-élément sélecteurs

La différence entre ces derniers et les pseudo-classes, c'est que ceux-ci s'inscrivent sélectionnez d'un élément de tous les temps, alors qu'ils sélectionnez tout l'élément de temps en temps.

Première ligne et la première lettre

P: first-line {text-transform: capitalize} 
P: first-letter {font-size: 48pt; 
float: left}

Celles-ci s'appliquent à la première ligne et la première lettre d'un élément, respectivement. Ainsi, cet exemple pourrait mettre à profit la première ligne de P éléments, et l'autre ferait la première lettre des éléments P 48 pixels de haut et rouge.

Notez que la première lettre est-«dedans» de la première ligne, et ainsi donc, où il ya des propriétés contradictoires, la première lettre de préséance.

Première ligne et la première lettre s'appliquent uniquement aux éléments de bloquer, et ne sont valables que sur le sujet du sélecteur (c.-à-, l'élément qui est sélectionné - DIV P: first-letter est valide, mais P: first-letter SPAN est pas).

Seul le text-shadow, couleur, fond, et les propriétés de police, ainsi que word-spacing, letter-spacing, text-decoration, text-transform, line-height et les propriétés claires peuvent être appliquées à: first-line.

Seul le text-shadow, couleur, fond, et les propriétés de police, ainsi que text-decoration, vertical-align (à condition float: none), text-transform, line-height, la marge, frontière, padding, flotteur et les propriétés claires peuvent appliquer à: première lettre.

Si la première lettre est un guillemet, puis la première lettre s'applique à la fois la citation et la deuxième lettre, et si elle est tout autre caractère non-alphanumérique, il ne s'applique pas du tout.

IE 3 s'applique à la fois de première ligne et la première lettre à l'élément entier; Opera et Netscape 5 sont les seuls navigateurs qui les soutiennent.

Les sélecteurs d'ID

ID sont identiques aux classes, sauf il ne peut y avoir qu'un seul élément avec un ID donné dans un document. Comme les classes, ils devraient être en minuscules, peut ne pas démarrer avec un certain nombre ou contenir des espaces.

Ils sont marqués dans le code HTML de la même manière, sauf qu'ils utilisent id plutôt que de la classe. Par exemple:

<BODY Id="introduction">

Ils sont marqués dans la feuille de style avec un #. Par exemple:

CORPS # introduction de {font-size: 1.2em}

Ou faire correspondre tous les éléments avec un ID égal à l'introduction:

L'introduction # {font-size: 1.2em}

Les sélecteurs descendants

Ceux-ci fournissent que si element2 est un descendant de element1, alors les propriétés indiquées sont valables pour ces ELEMENT2s. Par exemple:

EM strong {text-transform: uppercase} / * EM fort intérieur sera en majuscule * /

Sélecteur de regroupement

Afin d'associer un bloc avec plusieurs sélecteurs différents, on peut séparer les sélecteurs par des virgules.

CORPS P, H1 {color: red}

est la même que:

CORPS P {color: red} 
H1 {color: red}

Les prochaines sections traite des longueurs, comment les conflits entre les déclarations de style sont résolus, etc

La cascade

Parce que CSS fournit de nombreuses façons d'appliquer le style des pages, il est inévitable que les déclarations en conflit. Pour résoudre ce problème, il ya quelque chose connue sous le nom d'une cascade.

Héritage

Alors que les feuilles de style sont aussi courts que possible, de nombreux styles héritent. Cela signifie que si la valeur pour une propriété héritée n'a pas été précisée, la valeur du parent (ce qui pourrait à son tour avoir été hérité) est utilisé.Ainsi, si vous spécifiez BODY {color: black} alors tout l'intérieur du corps va hériter de cette couleur, sauf si un déclaration contraire ne soit faite.

Il est dit dans ce tutoriel si une propriété hérite, bien que généralement il s'agit d'une question de bon sens et peuvent généralement être deviné.

Il ya des dangers dans s'appuyant sur l'héritage - il ne devrait pas être supposé que la fourniture d'un style qui est héritée de CORPS donnera automatiquement tous les éléments de ce style. Par exemple, si un élément est à l'intérieur X, qui est aussi l'intérieur du corps, les styles qui sont appliqués aux valeurs X override corps, et donc l'élément hérite des styles de X sur le corps de.

Il est important de noter que les pourcentages ne pas hériter, mais la valeur calculée ne - par exemple, si la taille de police: les résultats de 50% dans une taille de police de 8px, 8px sera héritée, non pas 50%.

Par exemple, étant donné:

<HEAD> 
<STYLE type="text/css"> 
<! - 
BODY {color: red} 
-> 
</ STYLE> 
<BODY> 
<P>

l'élément P serait rouge, car hérite de couleurs, et donc, en l'absence d'une déclaration sur l'élément P, la valeur héritée est utilisé.

La résolution des conflits

La cascade dicte les valeurs qui devraient avoir un élément.

Depuis plus d'une règle de style peut s'appliquer à un élément, puis un moyen de résoudre les conflits est nécessaire.La cascade (ci-dessous) fufils cette position.

Si, d'autre part, aucune déclaration s'applique à un élément, et la propriété est héritée, la valeur héritée est utilisé. Sinon, la valeur initiale est utilisée.

Ainsi, si sur un élément de P aucune déclaration n'avait été faite pour la «couleur» ou «la hauteur», puis à partir de «couleur» est une propriété héritée, la valeur de «couleur» pour les parents de la classe P serait utilisé; sur «la hauteur», puisque "hauteur" n'est pas une propriété héritée (comme vous avez pu probablement le deviner), la valeur initiale, "auto" est utilisé ".

Le genre d'origine

Il ya trois sources possibles de style: l'auteur, l'utilisateur (via une feuille de style utilisateur), et le navigateur (via des règles de style du navigateur).

Si un élément a plus d'une valeur spécifiée pour l'un de ses biens, il ya une sorte d'origine. Les propriétés spécifiées pour un élément de l'auteur remplacer ceux qui sont spécifiés par l'utilisateur, qui prévalent sur celles qui sont spécifiées par le navigateur.

Il convient de noter que, lorsque la feuille de style utilisateur déclare une valeur pour un élément pour une propriété que l'auteur suppose seront hérités, des résultats inattendus peuvent se produire.

Ainsi:

Feuille de style du navigateur: 
BODY {color: black; 
font-size: 16px; 
fond: blanc}

Feuille de style utilisateur: 
BODY {color: white; 
fond: noir}

Feuille de style Auteur: 
BODY {background: white}

Dans cet exemple, le résultat serait une couleur de premier plan blanc parce que la feuille de style utilisateur remplace la feuille de style navigateur, et en l'absence d'une déclaration auteur qui sera utilisé. Le fond sera également blanc, parce que c'est la couleur spécifiée par l'auteur, qui l'emporte sur toutes les déclarations par le navigateur et l'utilisateur. Cela démontre pourquoi il est important de toujours spécifier une couleur de fond avec la couleur de premier plan.

Enfin, la taille de la police serait de 16 pixels, parce que c'est ce que le navigateur précise et ni l'utilisateur ni l'auteur le contredire.

Le genre de poids

Les poids sortes de tri déclarations en fonction de leur poids. Les déclarations peuvent avoir un poids normal ou poids important. Les déclarations sont faites importante par l'addition de! Important (ou! Important). Par exemple, la couleur: rouge importante!.

L'effet de ce genre de poids est double:

  1. Tout d'abord pour donner plus de poids que la déclaration que tous les autres dans sa feuille de style. Par exemple, étant donné:

    P {font-size: 399px importante} P {font-size: 16px}

    399 px entraînera parce que la déclaration a plus de poids.

  2. Deuxièmement pour modifier le type d'origine - des déclarations de style d'utilisateurs qui sont importants ceux auteur de dérogation, à moins que ceux-là l'auteur sont importants, dans ce cas, l'auteur gagne!.

Le genre de spécificité

S'il ya encore des conflits de valeurs pour une propriété donnée d'un élément, le genre de spécificité prévaut.

Cela se fait ainsi: compter le nombre d'identifiants dans le sélecteur (a), comptez le nombre de classes et les pseudo-classes (b), compter le nombre d'éléments et les pseudo-éléments (c).

Faire cela en un certain nombre ABC - par exemple CORPS P # bonjour: actif: first-letter , a un = 1, b = 1, c = 3 = 113.

Le plus grand nombre gagne.

Les attributs de formatage HTML (par exemple d'aligner le <H1 align="center"> ) ont une spécificité de 1, et sont supposés être le début de la feuille de style de l'auteur. Cela ne s'applique pas aux balises de formatage (police), mais seulement pour les attributs des éléments.

Style spécifié via l'attribut de style a une spécificité infinie.

Notez que les pseudo-éléments s'appliquent comme si il y avait une <SPAN class="first-letter"> et <DIV class="first-line"> tag inséré dans le code HTML, et donc SPAN.first lettres hérite de P, et donc si P # x peut avoir une plus grande spécificité que P: first-letter, le P # x n'est pas réellement appliquer directement sur ??la première lettre, bien que normalement il serait en hériter .

P.copyright {font-size: 0.8 em} P {font-size: 1em}

Cela démontre comment la cascade fait essentiellement ce que vous attendez - le message de copyright est donné le petit texte, car il a une plus grande spécificité.

L'ordre de tri

Si les styles ont le même poids, l'origine et la spécificité, ceux qui sont spécifiés au début de la feuille de style priment sur ceux du début. Style en-ligne est supposée être lu après de style incorporée, ce qui est lu après style lié. Feuilles de style importées former le début de la feuille de style de l'importateur.

Ainsi:

P {color: red} P {color: green}

entraînerait en vert, un peu comme on peut s'y attendre.


Concepts CSS

Sensibilité à la casse

Toutes les feuilles CSS est insensible à la casse.

Commentaires

Pour spécifier que vous ne voulez pas quelque chose à être traités comme faisant partie de la feuille de style, vous l'enfermer dans / ** /. Les commentaires sont valables partout entre les jetons, et donc P {color: red / * commentaire * /} est valide, mais P {background: url (/ * commentaire * / green.gif)} n'est pas (depuis url () est une simple jeton).

P {color: red} / * Ceci est un commentaire * /

Évasions

En théorie, cela se fait en utilisant un \ suivi par le code hexadécimal Unicode pour la lettre, par exemple, \ 3BA. Le \ peut également être utilisé pour enlever le sens normal d'un personnage - par exemple, \ "à l'intérieur d'une chaîne indique que vous ne voulez pas de fermer la chaîne Dans la pratique, aucun navigateur sauf Netscape 5 prend en charge ce que vous devez ignorer s'échappe CSS. .

URL

Ils sont utilisés pour indiquer l'emplacement, par exemple, une image de fond ou une image liste.

Ils suivent cette syntaxe: url (filename.filetype) , par exemple url (background.jpg) ou url (http://www.background.com/back.jpg) .

Le fichier peut éventuellement être placé entre guillemets - par exemple url ("back.jpg") .

Internet Explorer 3 ignorera les URL entre guillemets. Netscape interprète les URL que par rapport au fichier HTML, de ne pas la feuille de style. IE 3 ne supporte pas les urls absolue (par exemple, http://www.foo.com/foobar).

Longueurs

Longueurs relatives

Nom Sens Exemple
px Un point sur l'écran d'ordinateur. La plupart des écrans ont 800 pixels horizontalement et 600 verticalement. 7px
dans Un em est égale à la taille de la police de l'élément, sauf lorsqu'il est appliqué à la taille des caractères , quand il est égale à la taille de la police de l'élément parent. 4em-
ancien Un ex est la x-hauteur d'une police. La hauteur d'x est habituellement d'environ la moitié de la taille de police, mais dans les polices de script, il peut être aussi peu que un quart de celui-ci. En général, les navigateurs de prendre 1ex à la moitié de la taille de police, quelle que soit la police utilisée. 7EX
% Un pourcentage de quelque chose 45,87%

Longueurs absolues

Nom Sens Exemple
dans Pouce 7in
fr un point est de 1/72 pouces -5pt
pc 12 points 1.3pc
mm Un millimètre 6.12mm
cm Un centimètre 6.237cm

Les longueurs sont utilisées ainsi: P {font-size: 16px}.

Vous devriez éviter d'utiliser des longueurs absolues, parce que la façon dont ils sont rendus varie entre les navigateurs.

Vous devriez noter que font-size: 7 po (ou toute déclaration similaire) est invalide, parce qu'il ya un espace entre le nombre et la mesure.

Longueur des bugs

Internet Explorer 3. * Ems friandises comme des points, ce qui signifie que de les utiliser sur votre page sur la taille de police ou de line-height feront de votre page illisible et se traduira par l'apparition inattendue autrement. Il traite exes comme des points, ce qui signifie que leur utilisation feront de votre page illisible.


Termes-clés

Descendant et ancêtre

Un descendant est tout simplement un élément HTML qui est à l'intérieur d'un autre élément HTML. Ainsi, chaque élément est un descendant de l'élément <HTML>, et dans l'exemple ci-dessous, l'OL et LI sont les deux descendants du corps. De même, le corps est l'ancêtre des deux LO et LI.

<BODY> 
  <OL> 
    <LI> 
      Certains texte de la liste 
    </ LI> 
  </ OL> 
</ BODY>

Bloquer, en ligne et éléments remplacés

Un élément de bloc est celui qui provoque une nouvelle ligne, tels que <P>.

Un élément en ligne est celle qui n'est pas, comme <EM>.

Elément de remplacé est une tels que <IMG>, où le contenu de l'élément est remplacé par un autre (par exemple, une image).

La section suivante examine les points importants au sujet des propriétés et des raccourcis, etc

Abréviations

 

Certaines des propriétés dans le guide sont désignés comme raccourcis. Cela signifie qu'ils définir les valeurs pourtoutes les les propriétés indiquées, et en tant que telle, aura préséance sur les valeurs héritées , même si la valeur héritée n'est pas spécifiquement surclassée . Si un ou plusieurs des valeurs pour un raccourci n'est pas spécifiquement mentionné, il est fixé à la valeur initiale de cette propriété. Par exemple, la police: 16px Arial est équivalent à:

font-weight: normal; 
font-style: normal; 
font-variant: normal; 
font-size: 16px; 
line-height: normal; 
font-family: sans-serif

car toutes les valeurs non définies sont réinitialisés à leurs valeurs initiales.

La section suivante est préoccupé par la couleur et de milieux.

Introduction

Deux des choses les plus importantes dans la conception web sont la couleur et de milieux. Il n'est donc guère surprenant que le CSS fournit tous les moyens possibles de les changer.

Il convient de noter que, parce que des feuilles de style utilisateur et le navigateur, si une propriété de fond ou couleur de premier plan est spécifié, le correspondant de premier plan / arrière-plan de couleur doit être explicitement déclaré - même si on suppose que les valeurs vont hériter, ils ne peuvent pas parce que l'utilisateur feuille de style peut indiquer spécifiquement une couleur particulière pour un élément particulier.

Couleurs

Il ya 16 couleurs de base:

Les couleurs peuvent aussi être spécifié comme un nombre hexadécimal (hexadécimal (base 16) est similaire à la décimale, sauf qu'au lieu de compter 8, 9, 10; il compte 8, 9, A, B, C, D, E, F, 10 (= 16 décimal)):

# 1CDBFA

Les deux premiers chiffres se réfèrent à la composante rouge, les deux autres au vert, et le troisième au bleu. Le maximum et minimum pour chacun d'eux est FF et 00 respectivement.

Cela peut aussi être spécifié comme un nombre à trois chiffres hexadécimaux:

# C67

Ceci est équivalent à # CC6677.

Depuis différents systèmes d'exploitation afficher les couleurs de différentes façons, il est préférable d'utiliser des couleurs Web sécurisées. Web-sûres couleurs sont celles qui ont pour composantes rouge, verte et bleue uniquement (en hexadécimal) 00, 33, 66, 99, CC ou FF. Si, comme la plupart des gens, vous avez des difficultés avec des nombres hexadécimaux . Cela vous permet de sélectionner l'une des 216 couleurs à partir d'une grille. En cliquant sur ??une couleur change la couleur de fond de la page pour que la couleur, et vous pouvez ensuite voir ce que chacun des 216 couleurs ressembler comme un avant-plan de sorte que vous pouvez facilement obtenir un schéma de couleurs attrayantes.

Pour veiller à ce qu'ils font, les composantes rouge, verte et bleu doivent être chacun (en hexadécimal) 00, 33, 66, 99, CC ou FF.

Sinon, les couleurs peuvent être spécifiées dans le présent formulaire: rgb (x%, y%, z%) (par exemple rgb (30%, 40%, 20%), ou comme un nombre décimal: rgb (x, y, z) ( par exemple rgb (168, 57, 32)), où le maximum et minimum est typique 255 et 0, respectivement.

IE 3 ne supporte pas les couleurs dans l'autre format décimal (RGB (x, y, z)) ou l'%.

Exemples

P {color: red} 
body {color: # C67} 
LI {color: rgb (10%, 45%, 56,7%)}

Propriétés

Couleur

Spécifie premier plan de l'élément par exemple la couleur P {color: red} ou P {color: # C624FF} .

La couleur est hérité et a une valeur initiale qui est déterminée navigateur (presque toujours en noir).

Propriétés d'arrière-plan

Ce ne sont pas héréditaires.

Notez que les milieux ne sont pas de couleur dans les marges, à l'exception sur le CORPS / HTML.

IE 3 ne supporte pas les propriétés de fond sur les feuilles de style liées sur le corps, HTML et TABLE. Cela pourrait rendre les pages difficiles ou impossibles à lire. Par conséquent, je recommande que vous déclarez milieux en utilisant la balise BODY dans le code HTML (par exemple, <BODY bgcolor="black">). Les feuilles de style modifier les attributs HTML, de sorte que vous ne sont pas contraints par le corps.

En outre, il ne prend pas en charge les propriétés individuelles, seul le «fond» de sténographie.

Background-color

Cela peut être définie sur une couleur ou transparent (valeur initiale, ce qui signifie que l'élément parent background-color brille à travers). Par exemple, P {background-color: transparent}.

Netscape 4 * ne colore pas en arrière-plan des éléments de bloc si on leur donne une couleur de fond qui est différent de CORPS -. Ce n'est pas la couleur dans les espaces entre les mots. Pour éviter cette frontière, explicitement: aucun

Background-image

Spécifié avec background-image: url (name.type) , par exemple CORPS {background-image: url (back.jpg)}. L'autre valeur est zéro, qui est la valeur initiale. Par exemple, background-image: none.

Les images de fond sont rendus sur le dessus de couleurs de fond.

Background-repeat

Cette affirme le carrelage de l'image d'arrière-plan.

Les valeurs possibles sont la répétition (mosaïque de l'image à gauche, à droite, de haut en bas - valeur initiale), repeat-x (mosaïque de l'image gauche et droite), repeat-y (mosaïque de l'image de haut en bas) ou no-repeat (seulement attirer l' l'image une fois). Par exemple, background-repeat: repeat-x.

IE ne tire que repeat-x vers la droite, et repeat-y vers le bas, pas à gauche et à droite et de haut en bas comme il se doit.

Background-attachment

Cela peut être spécifié comme l'un des scroll (initial) ou fixe. Moyens de défilement que l'arrière-plan se déplace avec le défilement, mais fixé à ce qu'il reste au même endroit quelle que soit défilement.

Background-position

Cette indique la position initiale de l'image d'arrière-plan. Par exemple, BODY {background-position: 12cm 100%}, où les longueurs se référer à l'offset du coin supérieur gauche de l'image de rembourrage de l'élément le coin en haut à gauche (la première distance est horizontale, la verticale seconde).

55% 67% signifie que le point 55% dans l'ensemble et 67% vers le bas l'image est placée à 55% et 67% dans le bas du haut espacement de l'élément de gauche. Si un seul pourcentage ou à distance est fourni, il se réfère à la valeur horizontale, avec la position verticale fixé à 50% .

Les longueurs doivent être évités, car ils varient sur ??les écrans de résolution différentes. La valeur initiale est 0% 0%.Les valeurs négatives sont autorisées.

On notera en particulier que le changement de la position de fond ne veut pas dire qu'il ne sera pas toujours remplir l'élément - une position de fond de 90% à 90% remplira le fond autant que l'un des 0% 0% - la seule différence sera que les différentes parties de l'arrière-plan est en bits différents de l'écran.

Sinon, un ou deux mots-clés peuvent être spécifiées, étant supérieure (0%), centre (50%), ou en bas (100%) pour la position verticale, et à gauche (0%), centre (50%) et droite (100 %) pour la position horizontale - par exemple, background-position: en haut au centre. Comme précédemment, si vous omettez un, l'autre est fixé au centre (= 50%).Notez que bien que ces mots-clés ne peuvent pas être combinés avec des longueurs ou%.

Notez que background-position s'applique uniquement aux remplacé et les éléments de bloc.

Fond

Cela permet à un ou plusieurs des propriétés ci-dessus doivent être spécifiées dans la couleur afin, image, répétition, l'attachement, la position. Par exemple, body {background: url rouge (back.gif) 10% 10% repeat-y}.

Parce que la propriété background est pris en charge par les navigateurs que les propriétés non abrégée, vous devez l'utiliser à la place. Toutefois, étant donné que par défaut de Netscape au noir si vous utilisez la propriété background, vous devez toujours spécifier une couleur de fond lorsque vous utilisez cette propriété.

La section suivante  considère les polices et les hauteurs de ligne.

Propriétés de la police

Toutes les propriétés de police sont héritées et s'appliquent à tous les éléments.

Font-family

Cela permet une police spécifique pour être utilisé. Par exemple, font-family: Arial.

Afin que, si votre police préférée n'est pas disponible, votre deuxième choix est utilisé, on peut spécifier un nombre de polices séparées par des virgules (où la première police énumérés seront utilisés le cas échéant, la deuxième si la première n'est pas, etc.) Par exemple, font-family: Times, Arial.

Noms de polices qui contiennent un espace blanc doit être placé entre guillemets - font-family: Times, "Times New Roman"

Comme un dernier choix, une famille générique devrait être spécifié, qui peut être une des suivantes: empattement (un empattement est un descendeur sur une police, tels que T , sans-serif (ex Arial; recommandé pour le corps du texte), cursive, fantasy, monospace. polices génériques ne doit pas être cité.

Font-family ne ont une valeur initiale, mais il est spécifique au navigateur.

P {font-family: "Times New Roman", Times, serif}

Il est recommandé que les polices autant que possible devraient être précisées. À mon avis, Arial est les polices corps à son meilleur, Arial Rounded MT Bold la police meilleure position, Times NR Cyr MT la police meilleure lettrine, et Andale Mono la police meilleur monotype.

Font-size

Cela peut être spécifié comme une longueur, ou l'un des mots-clés suivants: xx-small, x-small, small, medium (initial), grand, x-large, xx-large.

En outre, ce mot par rapport peut être spécifiée par un plus grand ou plus petit.

Il convient de noter que les valeurs relatives, mots-clés et les pourcentages se rapportent à l'élément parent font-size.

Exemple: P {font-size: 1em} ou P {font-size: grande}.

Internet Explorer 3 et Netscape 4. * Traiter toutes les unités relatives et% en tant par rapport à la valeur par défaut plutôt que comme élément par rapport à l'élément parent.

Tailles de police relatives

En théorie, il est préférable d'utiliser des tailles de polices relatives. Ce sont ceux que l'utilisation des unités relatives telles que l 'em ou%. Par exemple, font-size: 120% signifie 120% de la valeur héritée de font-size. Cependant, Netscape 4 et Internet Explorer ne prend pas en charge% ou em d'une manière fiable. Cela signifie que, sauf si vous avez une connaissance détaillée de la façon d'éviter ce problème , vous trouverez probablement plus facile à utiliser pixels.

La chose importante, cependant, est de ne jamais utiliser les points - pixels sont acceptables, mais les points ne sont pas parce qu'ils sont généralement rendus au 1/3 plus petite que sur un Macintosh une machine Windows.

Font-style

Cela peut être spécifié comme normal (valeur initiale), italique ou oblique (inclinée). Exemple: P {font-style: italic}

Aucun navigateur Windows prend en charge oblique, le plus ignorant ou en le rendant en italique.

Font-variant

Cela peut être spécifié comme normal ou small-caps, où la normale est la valeur initiale. Exemple: P {font-variant: small-caps}

Font-weight

Cela peut être spécifié comme normal (valeur initiale), ou en gras. Exemple: P {font-weight: bold}

Il peut également être spécifié comme un nombre absolu, parmi les 100, 200, 300, 400 (le même que la normale), 500, 600, 700 (le même que gras), 800 ou 900, où 100 est le plus léger et 900 le plus audacieux.

Il peut également être spécifié comme plus léger ou plus audacieux, qui se traduira par la police suivante briquet ou plus audacieux que la valeur héritée.

Line-height

Ceci spécifie le heght pour une ligne. La différence entre line-height et font-size est appelé le chef de file (après que les bandes de plomb autrefois utilisées). La moitié de la pointe est appliquée au-dessus de la ligne, et la moitié inférieure.Chaque ligne se forme alors une boîte de ligne, qui est un rectangle. Chaque boîte de ligne est ensuite empilés les uns au-dessus de l'autre pour former un paragraphe. La hauteur de la boîte de ligne est à partir du haut de la plus haute section (en gardant à l'esprit qu'il peut y avoir différents line-hauteurs sur une ligne donnée) au fond de la plus basse. La hauteur de chaque section dépend de line-height, mais où la hauteur d'un élément remplacé dépasse le line-height que la boîte de ligne particulière sera augmenté pour compenser.

Line-height peut être spécifié comme une longueur,% (par rapport à la taille de police de l'élément), <nombre> ou normal (le même que <nombre>, à l'exception du navigateur choisit). Si <nombre> est spécifié, il multiplie la taille de police par ce nombre. Ceci est similaire à%, mais avec%, la valeur calculée pour le line-height est héritée, mais avec un certain nombre, le nombre est hérité. Par exemple, BODY {font-size: 20px; line-height: 120%} donnerait un hérité de line-height de 24px, mais BODY {font-size: 20px; line-height: 1.2} donnerait un hérité de line-height de 1.2 * la taille de police des descendants de l'élément.

La hauteur de ligne s'applique à tous les éléments. Line-height est héritée. L'effet de la hauteur de la ligne est d'appliquer (line-height - font-size) / 2 ci-dessus et ci-dessous le texte. Par exemple, line-height: 18px, avec font-size: 16px mettrait 1px de l'espace ci-dessus, et 1px en dessous du seuil.

Line-height ne peut pas être négatif.

BODY {line-height: 1.5em} 
P {line-height: 115%}

Netscape traite incorrectement line-height: 2 (ou autre) comme line-height: 200%. IE 3 traite line-height: 2 (ou autre) comme 2px.

IE 3 applique correctement line-height, mais chaque fois que la mise en line-height dans IE 3, vous définissez automatiquement margin-top: 0, ce qui cause de graves problèmes (voir sous le modèle de boîte).

Font

Ce raccourci vous permet de spécifier un ou plusieurs de ce qui précède à la fois dans l'ordre (le style, la variante, le poids = ceux-ci peuvent être dans n'importe quel ordre), la taille (hauteur de la ligne / - facultatif) fontName. Exemple: P {font: italic Arial} 16px/18px. Ainsi, si vous déclarez la hauteur de ligne, elle doit être précédée par un / pour montrer que vous ne signifie pas que la taille de la police.

Si vous utilisez ce raccourci, vous devez spécifier à la fois une taille de police et une famille de polices.

Exemple: la police: 12px Arial. Ce (parce que toutes les propriétés raccourcies réinitialiser les valeurs non définies à leurs valeurs initiales) est équivalente à:

font-size: 12px;  font-weight: normal;  font-family: Arial;  font-variant: normal;  font-style: normal;  

La section suivante considère le texte.

Les propriétés de texte

Vertical-align

Ceci spécifie comment les éléments en ligne sont alignés dans leur boîte de ligne. Les valeurs possibles sont:

Nom Effet
de base Lieu de référence sur l'élément - la valeur initiale
sous Indice élément
super- élément exposant
haut Aligner en haut de l'élément avec le plus grand chose sur la ligne
texte-dessus Aligner en haut de l'élément avec le haut de la police des parents
milieu aligne milieu de l'élément avec la ligne de base + la moitié de la hauteur-x de la police parent
bas Aligner le bas de l'élément avec le plus bas chose sur la ligne
texte-bas aligner le bas de l'élément avec le bas de police du parent

Vertical-align n'est pas héréditaire et ne s'applique qu'aux éléments en ligne et table-cell.

Une longueur négative ou positive% peut être spécifié, (% relatif à la line-height). 0 = base. = Positifs élever, = négatif inférieure. Par exemple, vertical-align: 1em.

La plupart alignement vertical des valeurs ne sont pas pris en charge par la plupart des navigateurs, IE 3 et ne le supporte pas du tout.

Text-align

Cela peut être à gauche (valeur initiale = aligner l'élément vers la gauche de la page), droite, centre, ou de justifier (aligne sur les marges). Text-align s'applique uniquement pour bloquer des éléments et est héritée.

BODY {text-align: justify}

Text-decoration

Ce peut être inexistant (initial), ou un ou plusieurs des surligné, line-through ou clignotent. Il n'est pas héréditaire, mais puisque tous les éléments qui sont des descendants d'un élément sont encore en cet élément, ils auront donc que text-decoration (et en couleur l'élément ancêtre ainsi)

DEL {text-decoration: line-through}

Text-indent

C'est d'abord 0, et peut être d'une longueur ou%. Il est héréditaire et ne s'applique qu'aux éléments de bloquer. % Référence à la largeur du bloc containg. Il se réfère à l'indentation de la première ligne de l'élément. Elle peut être négative. Par exemple, P {text-indent: 5%}.

Text-transform

Les valeurs possibles sont none (valeur initiale), minuscule, majuscule, ou capitaliser (en majuscule la première lettre de chaque mot). Elle s'applique à tous les éléments et est héritée. Par exemple, P {text-transform: minuscules}

Word-spacing et letter-spacing

Ces propriétés sont héritées, et indiquer le montant de la plus d'espace, où 0 représente l'absence d'espace supplémentaire (si une valeur autre que la normale est fixé sur la letter-spacing, le crénage ne ??seront pas ajustés à des fins d'alignement). Alternativement, la normale (valeur initiale) mot-clé peut être spécifié. Les valeurs négatives sont permises, mais ne sont pas%.

Notez que si letter-spacing est réglé sur une valeur autre que la normale, les navigateurs ne sera pas modifié letter-spacing pour justifier le texte.

P {letter-spacing: normal; 
word-spacing: .04 in}

White-space

Ceci spécifie comment l'élément traite l'espacement, il prend les valeurs normales (initial), pré (c.-à-préserver l'espacement = élément HTML <PRE>) ou nowrap (saut de ligne). Il est héréditaire et ne s'applique qu'aux éléments de bloquer. Par exemple, P {white-space: pre}.

La section suivante considère les listes.

Liste des propriétés

Tous les propriétés de la liste sont héritées, et donc si elle est appliquée à OL va hériter à la liste des articles à l'intérieur que l'OL. Cependant, les propriétés appliquée sur le corps sera généralement remplacée par la feuille de style navigateur, puisque les feuilles de style du navigateur ont OL {list-style: decimal} et {UL list-style: disque}.

Spécification de style sur les LO et UL est préférable de spécifier des propriétés sur LI LO, puisque par exemple OL.class LI {x: y} emporterait UL LI {x: z} dans <OL class="class"> <UL> < LI> </ ul> </ OL> parce qu'il a une plus grande spécificité.

List-style-type de

Les valeurs sont les suivantes:

  1. décimal (1, 2, 3)
  2. inférieure-romaine (i, ii)
  3. supérieure-romaine (I, II)
  4. inférieure alpha (a, b, c),
  5. supérieur alpha (A, B, C)
  6. aucun

Par exemple OL {list-style-type: lower-alpha}

Liste-style-position

Cela peut être à l'intérieur ou à l'extérieur (valeur initiale). Par exemple, l'OL {list-style-position: inside}.

Extérieur: 
  élément de la liste 1 
      seconde ligne de l'élément de liste Intérieur:   1 pièce Liste   deuxième ligne de l'élément de liste




List-style-image

Ceci spécifie que l'image doit être utilisée à la place d'un type style de liste. Il s'ensuit cette syntaxe: list-style-image: url (li.gif) . Sinon aucune ne peut être spécifié, qui est la valeur initiale. Par exemple, P {list-style-image: url (li.gif)}

List-style

Ceci est un raccourci pour une ou plusieurs de ce qui précède. Par exemple, LI {list-style: extérieur inférieur-alpha}

La section suivante considère le modèle de boîte - les marges, marges et les bordures.

Le modèle de boîte

Chaque élément HTML est supposé être dans une boîte.

Tous les éléments HTML peuvent avoir des propriétés du modèle de boîte qui leur sont appliquées. propriétés du modèle Box n'héritent pas.

Il ya trois propriétés ici: marge, bordure et l'espacement; celles-ci s'appliquent à n'importe quel élément. En outre, la largeur et la hauteur de l'élément sont également importants.

Quant à la différence entre la marge et le rembourrage, la marge est l'espace extérieur de l'élément, et le rembourrage que l'intérieur. Ainsi la couleur de remplissage est la couleur de fond de l'élément, tandis que la couleur de marge est la couleur de fond de l'élément parent (sauf si l'élément n'a pas de parent, comme le corps ou HTML).

Notez que bien que les propriétés de zone n'héritent pas, une marge appliquée sur le corps aura une incidence sur tous les éléments à l'intérieur, car ils sont tous encore dans le corps. Si ils ont hérité, puis si le corps était une marge de 2 pouces à gauche, P commencerait quatre pouces de la gauche de la page, etc

Le bloc contenant

Tout élément ont un bloc contenant. Les éléments sont généralement aligné avec le bord de leur bloc conteneur. En plus de fournir un point de référence pour l'alignement, la largeur et la hauteur du bloc conteneur est également utilisé pour l'interprétation de la valeur de% sur les propriétés du modèle de boîte.

Le bloc contenant de la normale statique (statique, par opposition à positionner) éléments est plus proche de leur niveau bloc ancêtre. Par exemple, dans <P> <BODY>, le bloc contenant de l'élément P est corps, et donc les marges, etc, sur P fera référence à la largeur de cette.

Un élément qui a display: block génère une boîte de bloc. Ceci définit le bloc contenant des éléments descendants.Notez que le contenu peut aller à l'extérieur de la boîte de bloc principale, par exemple, lorsque le contenu déborde de son bloc, ou des marqueurs d'éléments de liste, qui sont placés dans la marge de la boîte.

Bugs

Tous les navigateurs ont des problèmes avec propriétés de la boîte. Si tout ce que vous voulez faire, c'est de donner le CORPS d'une marge gauche, droite et en bas, vous serez OK. Au-delà de cela, vous pouvez avoir des problèmes, la plus importante dont je détail ci-dessous.

IE 3.00 interprète toutes les marges que par rapport à la gauche de la page plutôt que de la gauche de l'élément. Cela signifie marges négatives horizontales masquer le contenu, et comme une règle générale, la marge gauche ne doit être réglé sur le corps.

Netscape 4. * Ne supporte pas les border-top, border-left, etc, donc utilisez-frontière (en haut / gauche / droite / bas)-width, border-width ou la frontière, etc

Raccourcis Box

La propriété raccourcie case vous permettent de spécifier le style boîte pour tous les quatre côtés à la fois.

Si un numéro est fourni dans un raccourci, il est appliqué à tous les quatre côtés; si deux nombres, le nombre d'abord aux côtés supérieur et inférieur, et la seconde à droite et à gauche, si trois chiffres, le premier numéro de la page côté, la seconde aux côtés droit et gauche, et la troisième à la face inférieure; si quatre chiffres, à la partie supérieure, droite et en bas, et des côtés gauche dans cet ordre.

Ainsi par ces règles P {marge: 10px 5px} est appliquée en tant que pixel 10 verticale et horizontale de pixels 5 marge.

Marge

Manifestement, chaque élément peut avoir quatre marges - gauche, droite, inférieure et supérieure.

Elles sont définies par les margin-left, margin-right, margin-top, margin-bottom propriétés.

La marge peut être spécifiée dans n'importe quelle longueur, un pourcentage, ou en utilisant le mot clé auto. Le pourcentage se réfère à la largeur du bloc contenant , indépendamment du fait que l'on applique sur les marges de gauche et de droite ou supérieure et inférieure.

Auto est principalement utile dans des contextes plus avancés, et elle est examinée  plus tard .

En outre, les marges peuvent être spécifiées pour tous les quatre côtés à la fois avec le raccourci marge. Les marges peuvent être négatifs, et d'abord les marges sont à 0 .

Il est important de noter que dans CSS, les marges s'effondrer verticalement (sauf si un ou plusieurs des marges est une marge variable). Cela signifie que lorsque deux marges contiguës à la verticale, la marge n'est pas égal au total combiné des deux marges, mais plutôt à la plus grande des deux (sauf si ces marges sont négatives, auquel cas la marge combinée est égale à la plus négative des deux marges, et où l'on marge est négative et l'autre positive, la marge combinée est égale aux deux marges additionnés). Toutefois, les marges entre les éléments flottants ou positionnés et toute autre élément ne s'effondrent pas.

Exemples de marge

P {margin-left: 2in}

Cela donnerait P une marge gauche de 2 pouces.

P {margin: 1em}

Cela rendrait les quatre marges de P 1 em de large.

P {margin: 1px 2po 4pt 3cm}

Cela donnerait P une marge supérieure de un pixel, une marge de droite de 2 pouces, une marge inférieure de 3 cm et une marge gauche de 4 points.

P {margin-top: 1in; 
margin-bottom: .5 in}

<P> 
  Certaines parties du texte 
</ P> 
<P> 
  peu de texte 
</ p>

La marge combinée ici serait de 1 pouce, car la marge de s'effondrer.

Rembourrage

Rembourrage diffère de marges dans la mesure où le rembourrage ne s'effondre pas. En outre, même si il est généralement impossible de distinguer entre le rembourrage et la marge sur l'écran, le remplissage est d'une importance cruciale quand un élément a une frontière rendue, comme dans un tableau ou une boîte, ou si l'élément a une couleur de fond différente de sa parent.

Comme précédemment, padding-left, padding-right, padding-top, padding-bottom ou le raccourci rembourrage peuvent être spécifiés. Si un pourcentage spécifié, elle se rapporte à l' largeur de le bloc contenant.

Rembourrage ne peut pas être négative, et d'abord de rembourrage est égal à 0, bien que les navigateurs "intégrés dans des feuilles de style peuvent augmenter ce pour certains éléments.

Frontière

Les détails pertinents ici sont la largeur, la couleur et le style de la frontière.

La largeur de la bordure est spécifiée avec border-bottom-width, border-top-width, border-left-width, border-right-width, ou le raccourci border-width, qui permet la spécification de 1-4 largeurs, appliquée selon la règles énoncées au titre raccourcis Box.

Il convient de noter que les pourcentages ne peuvent pas être précisées et ne peut pas non longueurs négatives, et que la largeur peut être alternativement (plutôt que comme une longueur) être spécifié comme mince, épais ou moyen, où le média est la valeur initiale.

Par exemple: P {border-width: 10px}.

Pour rendre la frontière visible, il faut spécifier un style de bordure.

Les styles de bordures sont spécifiées en utilisant border-left-style, border-right-style, border-bottom-style, border-top-style et border-style. Styles de bordure valides sont none, cachée (même aucun, sauf sur les tables), pointillé, tireté, solide, double (deux lignes), gorge (de la frontière semble être taillé dans l'écran), crête (la frontière semble être sortir de l'écran), encadré (la boîte entière semble être taillé dans l'écran), ou d'emblée (la boîte entière semble être sortir de l'écran).

Initialement, le border-style est none, alors si vous ne parvenez pas à remplacer ce, pas de frontière sera établie.

Vous pouvez spécifier jusqu'à quatre styles de bordure, qui sont appliqués selon les règles énoncées ci-dessus sous Abréviations Box.

Par exemple: P {border-style: solid}.

Notez que si border-style: none (par exemple, si border-style: none n'est pas spécifiquement surclassée), cela l'emporte sur toute spécifié border-width, et les rend 0.

Vous pouvez également spécifier une couleur avec border-left-color, border-right-color, border-top-color, border-bottom-color ou border-color. Vous pouvez spécifier jusqu'à quatre couleurs, qui sont appliquées selon les règles énoncées ci-dessus sous Abréviations Box ou transparentes. Initialement, le couleur de la bordure est de la couleur de l'élément.

Par exemple: P {border-color: red}.

Vous pouvez définir le style de bordure, la couleur et la largeur simultanément avec les border-left, border-right, border-fond, raccourcis border-top ou une bordure. Il est à noter qu'un seul de chacun peut être spécifié - si vous utilisez le raccourci frontière, vous donnant chaque côté de la même largeur de la frontière, la même couleur et le même style.

BODY {border-left: épaisseur} / * Depuis le style de bordure n'a pas été précisée, cela se traduirait par aucune frontière. * /

La section suivante considère les boîtes de façon plus détaillée.

Boîtes

Afficher

Ceci indique le type de boîte qui va produire un élément. Les valeurs possibles sont de bloc (par exemple, P - valeur initiale), en ligne (par exemple, B), list-item (élément de type bloc avec boîte de marqueur; par exemple, LI), et aucun (ignorer élément entièrement et tous ses descendants).

Un élément qui a display: block génère une boîte de bloc principale. Ceci définit le bloc contenant de l'élément descendant. Notez que le contenu peut aller à l'extérieur de la boîte de bloc principale, comme le font les marqueurs d'éléments de liste.

Affichage s'applique à tous les éléments et n'est pas héréditaire.

IE 3 ne supporte pas l'affichage. IE 4 sur le PC ne supporte pas l'affichage à l'exception pour personne. IE 5 supporte bloc, inline et none. Opera supporte bloc, aucun et en ligne. IE 4 sur le Mac prend en charge aucune. Netscape ne supporte que rien usably.

Hauteur

Hauteur est principalement utilisé pour spécifier la hauteur du bloc et éléments remplacés.

La hauteur peut être spécifié comme une longueur,% (de la hauteur des parents, mais traités comme des auto si le parent n'a pas eu une hauteur définie explicitement), ou comme auto (qui est la valeur initiale).

Hauteur s'applique à tous les éléments sauf en ligne non-remplacés, colonnes de la table et les groupes de colonnes.Hauteur n'est pas héréditaire et ne peut pas être négatif.

IE 3 ne prend pas en charge la hauteur.

Largeur

Largeurs peut être spécifiée par une longueur,% (par rapport à la largeur du bloc contenant), ou comme automatique (qui est la valeur initiale). Il ne s'applique pas aux non-remplacé éléments en ligne (dont la largeur est la largeur de leur contenu, sous réserve de la largeur du bloc containg les briser en plusieurs lignes), aux lignes des tables ou des groupes de lignes. Largeur ne peut pas être négatif.

Largeur n'est pas héréditaire.

IE 3 ne prend pas en charge la largeur.


Les schémas de positionnement

Il ya 2 systèmes de positionnement en CSS 1. Tout d'abord, le débit normal, ce qui comprend les éléments de bloc, les éléments en ligne, la liste des articles, etc, et d'autre part, des flotteurs.

Boîtes flottantes sont d'abord positionnées en fonction du débit normal, et ensuite aussi loin vers la gauche (ou droite) que possible.

Dans le flux normal, boîtes de bloc sont simplement empilés les uns sur les autres à une séparation définie par le bord des éléments. En outre, la marge de gauche de chaque boîte touche le bord gauche de la teneur en bloc conteneur.Boîtes en-ligne sont disposés horizontalement, à partir du haut du bloc conteneur, selon les valeurs horizontales padding, border et de la marge, et quand il n'ya plus de place à l'horizontale, ils sont empilés les uns sur les autres comme des boîtes de ligne.

La propriété float modifie le comportement normal d'un élément. Par exemple, il peut être utilisé pour créer un effet lettrine.

Les valeurs possibles pour la propriété float sont à gauche, à droite et à défaut, là où il n'en est la valeur initiale. L'effet de flotteur de réglage est similaire à la fabrication de la part des éléments de la marge spécifiée - float: left lui fera faire partie de la marge de gauche. Subséquentes des éléments de bloc non-flottants sur le flotteur de la traiter comme si elle n'était pas là, et donc chevaucher les résultats. Cependant, le contenu en ligne (par exemple sous forme de texte à l'intérieur du flotteur) se terminera autour du flotteur.

Les éléments de bloc flottants ne, cependant, prendre la position des flotteurs en compte. Par exemple:

<div style="height: 100px; width: 100px; border: solid; float; left"> 
</ div> 
<div style="height: 100px; width: 100px; border: solid; float; left"> 
</ div>

Ce serait rendu ainsi:

+ --- + + --- + 
| | | | 
| | | | 
+ --- + + --- +

Voici un exemple montrant comment le contenu en ligne circule autour des flotteurs:

<P> 
  <SPAN style="float: left; font-size: 72px; line-height: 72px; width: 50px"> T </ SPAN> il chat s'est assis sur le tapis de nouveau <BR> <BR> une fois de plus. </ P> 
<P> 
  nouveau paragraphe coule autour d'elle et se poursuit après lui. 
</ P>

--------------- Il chat s'est assis sur le tapis 
        | nouveau 
        | une fois de plus 
        | 
        | 
        | Le nouveau paragraphe coule autour d'elle 
et se poursuit après lui.

Noter la façon dont le haut du T flottante est aligné avec le sommet de la ligne, et la façon dont l'élément de bloc suivant continue à envelopper autour de lui.

SPAN.dropcap {float: left; 
font-size: 48px; largeur: 30px; line-height: 48px}

L'exemple ci-dessus peut être utilisé pour créer une lettrine.

Float s'applique à tous les éléments et n'est pas héréditaire.

Tous les navigateurs le soutien flotter buggily, et IE 3 pas du tout.

Effacer

La propriété clear empêche un élément de s'écouler autour d'un élément flottant

Les valeurs possibles pour clairement à gauche (empêcher l'élément de départ (soit un élément effacé peut contenir des éléments flottants, mais il ne coulera pas rondes ceux flottantes) autour d'un élément flottant à gauche), droite (empêcher l'élément de départ autour d'un flottant à droite élément), à la fois (la prévention un élément de départ autour d'un élément flottant), ou aucun (ce qui permet flottant sur ??les deux côtés) - la valeur initiale.

Pour effacer l'élément, l'élément est déplacé vers le bas en dessous du flotteur.

Clair s'applique uniquement pour bloquer des éléments et n'est pas héréditaire.

Notez que ce soit clair n'empêche pas l'élément flottant à l'intérieur - si <P style="text-align: left"> Certains <IMG texte style="float: left"> alors l'image qui pouvait flotter normalement, mais si le style <IMG = "float: gauche "> <P style="text-align: left"> Certaines parties du texte </ P> , alors P commencerait dessous de l'image - claire concerne uniquement si un élément peut commencer dans une position donnée.

IE 3 ne prend pas en charge claire et tous les autres navigateurs ont des problèmes avec elle, afin de tester soigneusement.


Calcul de la largeur et la hauteur des éléments

Bien que la largeur et la hauteur, les marges seront normalement se comporter d'une manière intuitive, il est utile de savoir comment ils fonctionnent, d'autant plus qu'ils ne font pas toujours ce que vous attendez.

Pour trouver la largeur et la hauteur des éléments, des règles précises sont utilisés. Ceux-ci sont décrites ci-dessous.

La largeur des éléments

Inline éléments non remplacés

Largeur est inapplicable (c'est celle du bloc contenant), et toutes les valeurs automobiles sont remplacés par des 0.

Inline remplacé éléments

Si un élément est remplacé (tel que IMG), largeur: est remplacé par les valeurs intrinsèques pour les éléments, et les valeurs automobiles et autres deviennent 0.

Flottants non remplacés éléments

Toutes les valeurs automobiles deviennent 0, ce qui signifie que les éléments flottants non remplacés doivent avoir une largeur explicite .

Flottants éléments remplacés

Largeur: automatique est remplacée par la largeur intrinsèque de l'élément, et toutes les valeurs automobiles et autres deviennent 0.

Éléments Block

En règle générale, la largeur + padding-left + padding-right + margin-left + margin-right + border-left-width + border-right-width = largeur du parent.

Il convient de noter que la largeur des bordures ne sont que de la pertinence, si un style de bordure a été fixé.

Cette égalité est résolu par le navigateur.

Sur l'élément racine (c.-à-BODY ou HTML), la largeur de l'élément parent est celle de la fenêtre (ou fenêtre).

1. Si toutes les valeurs sont définies à une valeur autre que l'automobile, alors la marge à droite est ajustée pour satisfaire à l'équation.

Bloquer au niveau éléments non remplacés

Si l'égalité ne peut pas encore être résolus, les règles ci-dessous sont utilisés.

2. Si exactement l'une des valeurs est réglée sur auto, la valeur est de mettre en car à satisfaire l'équation.

3. Si la largeur: automatique, puis toutes les autres valeurs restantes automobile sont remplacés par 0, et une valeur est mis en largeur pour satisfaire à l'égalité.

4. Si margin-left et margin-right sont à la fois encore de l'automobile, ils seront mis à des valeurs égales.

Éléments de niveau bloc remplacés

Si l'égalité ne peut pas encore être résolus, les règles ci-dessous sont utilisés.

2. Si un élément est remplacé (tel que IMG), width: auto est remplacé par la valeur intrinsèque de l'élément.

3. Si margin-left et margin-right sont à la fois encore de l'automobile, ils seront mis à des valeurs égales.

La hauteur des éléments

Tous les éléments remplacés

Hauteur: auto devient hauteur intrinsèque de l'élément, et toutes les valeurs automobiles et autres deviennent 0.

Inline éléments non remplacés

Toutes les valeurs automobiles sont mis à 0, et la hauteur est ignorée.

[Block et flottant] Les éléments non remplacés

Margin-top et margin-bottom: auto devient 0. Si height: auto, puis si l'élément possède seulement les enfants en ligne, la hauteur devient à partir du haut de la boîte de ligne du haut vers le bas de celle du bas. Si elle a des enfants de bloc, c'est à partir de la frontière-bord supérieur de la boîte de bloc enfant le plus élevé (y compris les boîtes anonymes (c.-à-celles générées par l'élément lui-même)) à la frontière-bord inférieur de la boîte de bloc enfant le plus bas.

Exemples

<P Style="margin-left: 15px"> 50%; line-height: 
<br> 
<br> 
</ P>

Ce se traduirait par un élément de P avec une largeur égale à 50% de son bloc conteneur et 45 pixels.

<P Style="margin-left: 50%; margin-right: 0; width: 100%"> 
</ P>

Depuis l'élément P est surcontraints, margin-right est ignorée et il est donc donnée margin-right: -50%.

Haut de page

 

Astuces Dreamweaver

Pour afficher le panneau CSS, utilisez le racourci clavier: Maj+F11.

Dreamweaver® est une marque déposée d'Adobe® Systems Incorporated. Les logos et les noms de marques cités dans ce site sont les propriétés respectives de leurs développeurs.

 

Création de sites web

hit counter