Tout (ou presque tout) que vous devez savoir pour démarrer avec CSS

J'ai décidé de faire revivre ce post prise de mon ancien blog et de le mettre ici. Il est toujours bon d'avoir un guide à chaque fois que vous oubliez quelque chose dans les feuilles de style officielles.

Alors laissez-nous au travail!

Les feuilles de style peuvent être liés à un document de trois façons:

1. Lié ou importés;
2. Incorporated;
3. Inline.

Feuille de style externe

Une feuille de style est dite externe, lorsque les règles CSS sont déclarés dans un document dans le document HTML . La feuille de style est un fichier séparé et un fichier HTML possède l'extension. Css

Une feuille de style externe est idéal pour être appliquée à plusieurs pages. Avec une feuille de style externe, vous pouvez modifier l'apparence d'un site entier en modifiant un seul fichier (le fichier de la feuille de style).

Le fichier css de la feuille de style externe devrait être lié ou importé le document HTML à l'intérieur de la balise <> du document. Syntaxe Aperçu pour Lincar une feuille de style appelée estilo.css est indiqué ci-dessous:

La syntaxe générale d'importer une feuille de style appelée estilo.css est indiqué ci-dessous:

Le navigateur va lire le fichier de style règles estilo.css, et formater le document en conséquence.

Une feuille de style externe peut être écrit dans n'importe quel éditeur de texte. Le fichier ne doit pas contenir toutes les balises HTML. Les feuilles de style doit être «sauvé» avec un Css.
Feuille de style incorporée ou interne

Une feuille de style est appelé incorporé ou interne, lorsque les règles CSS sont déclarés dans le document HTML lui-même.

Une feuille de style incorporée ou interne, est idéal pour les applications sur une seule page. Avec une feuille de style incorporée ou interne, vous pouvez modifier l'apparence d'un seul document, celui où la feuille de style est incorporée.

Les règles de style, valables pour le document sont déclarés dans la section <> du document avec la balise style <> la syntaxe ci-dessous:

Le navigateur va maintenant lire les règles de style dans la page elle-même, et mettre en forme le document en conséquence.

Remarque: Un navigateur ignore normalement les balises inconnues. Cela signifie que un ancien navigateur qui ne supporte pas les styles, ne tiendra pas compte de la balise, mais le contenu de la balise sera montré sur l'écran. Vous pouvez empêcher un ancien navigateur pour afficher le contenu

tag, "le cacher" grâce à l'utilisation de balises HTML commentaire.

Notez l'inclusion des symboles (commentaire libre) dans le code ci-dessus.
Feuille de style en ligne

Une feuille de style CSS en ligne est appelée lorsque les règles sont déclarés dans la balise de l'élément HTML.

Un style en ligne s'applique seulement à un élément HTML. Il perd beaucoup des avantages des feuilles de style pour le contenu de mélange avec la présentation. Utilisez cette méthode dans des cas exceptionnels, comme lorsque vous voulez appliquer un style à une seule occurrence d'un élément.

La syntaxe pour appliquer un style en ligne est indiqué ci-dessous:

Maintenant, les propriétés les plus importantes de CSS:

La police des biens

Les propriétés des sources, de définir les caractéristiques (valeurs en règle CSS) qui sont les lettres du texte dans les éléments HTML.

Les propriétés de base pour les polices et que nous couvrons dans ce tutoriel sont énumérés ci-dessous:

* Couleur: couleur de la police ...................
Font-family: .......... police
* Font-size: taille de la police .............
Font-style: le style de police ............
* Font-variant: cas ......... sources de petite taille
Font-weight: ......... le plus sombre est la source (en gras)
* Font: .................... raccourci pour toutes les propriétés

Les valeurs valides pour les propriétés de la source

* Couleur:
1. code hexadécimal: # FFFFFF
2. rgb code: rgb (255,235,0)
3. nom de la couleur rouge, bleu, vert etc ...
Font-family:
1. family-name: est défini par un nom de source
p. ex: "verdana", "Helvetica", "Arial", etc.
2. generic-family: est définie par son nom générique,
p. ex: "serif" "sans-serif", "cursive", etc.
* Font-size:
1. xx-small
2. x-petite
3. petit
4. moyen
5. grand
6. x-large
7. xx-large
8. Plus petit
9. plus
10. longueur: une mesure reconnue par le CSS (px, pt, in, cm, ...)
11. %
Font-style:
1. normal: la police normale verticale
2. Italique: source inclinée
3. oblique: oblique source de
* Font-variant:
1. normale: normal police
2. small-caps: le cas se transforme en une hauteur inférieure à
Font-weight:
1. normal
2. audacieux
3. audacieux
4. briquet
5. 100
6. 200
7. 300
8. 400
9. 500
10. 600
11. 700
12. 800
13. 900

La propriété text

Les propriétés de texte, de définir les caractéristiques (valeurs en règle CSS) des textes insérés dans les éléments HTML.

Les propriétés pour le texte sont énumérés ci-dessous:

* ..................... Couleur du texte de couleur;
Letter-spacing espacement des lettres ........ *;
* ......... Espacement entre les mots word-spacing;
* Text-align alignement du texte ..............;
* Text-decoration text-decoration ......;
* ............ Text-indent indentation de texte;
* Text-transform ....... forme des lettres;
* ............... Direction vers le texte;
* ......... Blanc-espace comme le navigateur est disponible dans les espaces;
Les valeurs valides pour les propriétés de texte

* Couleur:
1. code hexadécimal: # FFFFFF
2. rgb code: rgb (255,235,0)
3. nom de la couleur rouge, bleu, vert etc ...
* Letter-spacing:
1. Normal: l'espacement par défaut
2. longueur: une mesure reconnue par le CSS (px, pt, in, cm, ...) sont valables les valeurs négatives
* Word-spacing:
1. Normal: l'espacement par défaut
2. longueur: une mesure reconnue par le CSS (px, pt, in, cm, ...) sont valables les valeurs négatives
* Text-align:
1. à gauche: aligner le texte à gauche
2. à droite: aligner le texte à droite
3. centre: aligne le texte dans le centre
4. justifier: les forces de texte pour occuper toute la longueur de la ligne de gauche à droite
* Text-decoration:
1. none: pas de décoration
2. souligner: souligner le texte met
3. overline: overline une place dans le texte
4. line-through: mettre une ligne sur le texte
5. Blink: le texte clignote
* Texte-tiret:
1. longueur: une mesure reconnue par le CSS (px, pt, in, cm, ...)
2. %: Pourcentage de la largeur de l'élément parent
* Text-transform:
1. none: texte normal
2. capitaliser: toutes les premières lettres du texte en majuscules
3. majuscules, toutes les lettres en majuscule dans le texte
4. minuscules: toutes les lettres minuscules du texte
* Direction:
1. ltr: texte écrit de gauche à droite
2. RTL: texte écrit de droite à gauche
* White-space:
1. normale: les blancs sont ignorés par le navigateur
2. pré: espace sera préservé par le navigateur
3. nowrap: le texte sera affiché autour de lui dans une seule ligne sur l'écran. Il ya des sauts de ligne sans que l'on trouve une balise <>

La propriété margin

La propriété des banques, définit une valeur pour l'épaisseur des bords des éléments HTML.

Les propriétés de marges sont énumérés ci-dessous:
* Margin-top .......... définit la marge supérieure;
* Marge à droite ........ définit la marge de droite;
* Margin-bottom ....... définit la marge inférieure;
* Marge gauche ......... définit la marge de gauche;
* Marge raccourci .............. pour toutes les banques

Les valeurs valides pour la propriété de marge

1. automatique: la valeur par défaut de la marge
2. longueur: une mesure reconnue par le CSS (px, pt, in, cm, ...)
3. %: Pourcentage de la largeur de l'élément parent

La propriété border

Les propriétés pour les bords, de définir les caractéristiques (valeurs en règle CSS) des quatre frontières d'un élément HTML.

Les propriétés pour les bords sont énumérés ci-dessous:

* Border-width: épaisseur de la bordure ................
* Border-style: le style de la frontière ................
* Border-color: couleur de la bordure ................
* --------------
* Border-top-width: épaisseur de la bordure supérieure ............
* Border-top-style: le style de la bordure supérieure ............
* Border-top-color: couleur de la bordure supérieure ............
* --------------
* Border-right-width: épaisseur de la bordure droite .........
* Border-right-style: le style de la bordure droite ..........
* Border-right-color: couleur de la bordure droite ..........
* --------------
* Border-bottom-width: épaisseur de la bordure inférieure .........
* Border-bottom-style: le style de la bordure inférieure .........
* Border-bottom-color: couleur de la bordure en bas .........
* --------------
* Border-left-width: épaisseur de la bordure gauche ...........
* Border-left-style: le style de la bordure gauche ...........
* Border-left-color: couleur de la bordure gauche ...........
* --------------
* Border-top: ... un raccourci pour toutes les propriétés de l'arête supérieure
* Border-right: .. raccourci pour toutes les propriétés du bord droit
* Border-bottom: .. un raccourci pour toutes les propriétés du bord inférieur
* Border-left: .. raccourci pour toutes les propriétés du bord gauche
* Frontaliers: ......... raccourci pour toutes les quatre bords

Les valeurs valides pour les propriétés des bords

* Couleur:
1. code hexadécimal: # FFFFFF
2. rgb code: rgb (255,235,0)
3. nom de la couleur rouge, bleu, vert etc ...
* Style:
1. none: pas de frontière
2. caché: équivalente à none
3. en pointillés: en pointillés des frontières
4. en pointillés, bordure en pointillés
5. Solide: Solid Edge
6. double: à double frontière
7. gorge, le bord cranté
8. Ridge: la frontière patron
9. bord en bas-relief: encart
10. départ: bord en relief
* Largeur:
1. mince: mince
2. moyenne: moyenne des arêtes
3. épaisseur: épaisseur des frontières
4. longueur: une mesure reconnue par le CSS (px, pt, in, cm, ...)

La propriété padding

Propriété de l'espacement (certains traduisent par «remplissage»), définit une valeur pour l'espacement entre les bords et le contenu des éléments HTML.

Propriétés pour des espacements sont énumérés ci-dessous:

* Padding-top .......... espacement définit le haut;
Cadrage à droite * ........ espacement définit le droit;
Padding-bottom * ....... définit la partie inférieure d'espacement;
Rembourrage gauche * ......... espacement définit la gauche;
* Remplissage raccourci .............. pour tous les espacements
Les valeurs valides pour les propriétés de l'espacement des

1. automatique: la valeur par défaut de la marge
2. longueur: une mesure reconnue par le CSS (px, pt, in, cm, ...)
3. %: Pourcentage de la largeur de l'élément parent

La propriété background

La propriété background définit les caractéristiques (valeurs en règle CSS) à partir du bas des éléments HTML.

Les propriétés d'arrière-plan sont énumérés ci-dessous:

* ............... Background-color couleur de fond;
* Background-image ............. image de fond;
* Background-repeat ............. comment l'image de fond est positionné;
* Background-attachment ....... l'image de fond "rouleaux" ou non avec l'écran;
* Background-position ............ comment et où l'image de fond est placé;
* Contexte ........................ raccourci pour toutes les propriétés;

Les valeurs valides pour les propriétés de l'arrière-plan

* Background-color:
1. code hexadécimal: # FFFFFF
2. rgb code: rgb (255,235,0)
3. nom de la couleur rouge, bleu, vert etc ...
4. Transparent: transparent
* Background-image:
1. URL: url (chemin / image.gif)
* Background-repeat:
1. ne se répète pas: no-repeat
2. répétition verticale et horizontale: répétition
3. Répétition verticale: repeat-y
4. Répétition horizontale: repeat-x
* Background-attachment:
1. encore l'image sur l'écran: fixe
2. image "rouleaux" à défiler l'écran
* Background-position:
1. x-y-pos pos
2. x-y-%%
3. en haut à gauche
4. en haut au centre
5. en haut à droite
6. centre-gauche
7. centre centre
8. centre-droit
9. en bas à gauche
10. en bas au centre
11. en bas à droite

La liste des biens

La liste des biens définit les caractéristiques (valeurs) des listes HTML.

Les propriétés de la liste sont énumérés ci-dessous:

* List-style-image ............. l'image comme un marqueur de la liste;
* Liste-style-position .......... où le marqueur est placé sur la liste;
* List-style-type de ............... sorte de marqueur de la liste;
* ........................ List-style raccourci pour toutes les propriétés;

Les valeurs valides pour les propriétés de la liste

* List-style-image:
1. aucun
2. URL: url (chemin / marcador.gif)
* List-style-position:
1. l'extérieur, hors de marqueur d'alignement du texte
2. l'intérieur: une ligne de repère avec le texte
* List-style-type:
1. none: pas de marqueur
2. Discuter: Cercle (ballon rempli)
3. cercle: circonférence (point vide)
4. carré, carré plein
5. décimal: 1, 2, 3, 4, ...
6. decimal-leading-zero
7. inférieur Romain: Romain minuscules i, ii, iii, iv, ...
8. supérieure-romaine: les capitales latines I, II, III, IV, ...
9. inférieur alpha: lettre minuscule a, b, c, d, ...
10. supérieure-alpha: lettre majuscule A, B, C, D, ...
11. inférieur grec
12. lower-latin
13. supérieur latin
14. hébreu
15. arménien
16. géorgien
17. cjk-idéographique
18. hiragana
19. katakana
20. hiragana-Iroha
21. katakana-Iroha

BONUS!

POSITION

L'attribut position peut recevoir trois valeurs:

* Absolu: il est le seul qui permet la superposition des épaisseurs et avec lui, vous déterminer une position sur la page que vous avez créé et prêt. Le positionnement absolu;
* Relative: Cette valeur définit le texte auront des positions par rapport au reste de la page, et donc il ne peut pas se chevaucher, mais est encore capable de reconnaître certains attributs intéressants. Le positionnement relatif;
Estatic *, détermine qu'il ne reconnaîtra aucun positionnement particulier déterminé par les couches de contrôle. Positionnement statique.

GAUCHE

Définit la distance que la couche sera le bord gauche du navigateur ou de l'élément parent. Vous pouvez prendre l'absolu, relatif ou automatique (automatique).

Remarque: les valeurs absolues acceptent des valeurs en accord avec la définition des formats décrits dans "formats de taille."
DROIT

Définit la distance que la couche aura le bord droit du navigateur ou de l'élément parent. Vous pouvez prendre l'absolu, relatif ou automatique (automatique).

Remarque: les valeurs absolues acceptent des valeurs en accord avec la définition des formats décrits dans "formats de taille."
TOP

Définit la distance que la couche aura la partie supérieure du navigateur ou de l'élément parent. Vous pouvez prendre l'absolu, relatif ou automatique (automatique).

Remarque: les valeurs absolues acceptent des valeurs en accord avec la définition des formats décrits dans "formats de taille."
Botom

Définit la distance que la couche sera le bas du navigateur ou de l'élément parent. Vous pouvez prendre l'absolu, relatif ou automatique (automatique).

Remarque: les valeurs absolues acceptent des valeurs en accord avec la définition des formats décrits dans "formats de taille."

Z-INDEX

Détermine l'ordre d'empilement des éléments. Accepte la valeur automatique (automatique) et le numéro, où la valeur est élevée, la couche supérieure.

VISIBILITÉ

Ce style est utilisé pour masquer un élément. Un élément invisible occupe encore l'espace sur la page. Les valeurs valides sont: visible (visible), caché (occulte) et d'hériter (attribut hérite de la couche supérieure, par défaut).

TROP-PLEIN

Détermine comment se comporter le contenu de la couche lorsque les limites sont moins que son contenu. Les valeurs valides sont: visible (visible, redimensionner la couche pour afficher son contenu), caché (occulte, saute sur la couche des contenus), de défilement (la barre de défilement indique la couche) et auto (affiche la barre de défilement pour couche si nécessaire).

AFFICHAGE

Identifie quand et si un élément doit être affiché:

* Bloquez: comme un bloc, avec des sauts de ligne avant et après l'élément. Crée une nouvelle boîte en relation aux éléments environnants (valeur par défaut);
* Inline: pas de saut de ligne avant et après l'élément;
* Liste-élément: le même en tant que bloc à l'exception d'un marqueur d'élément de liste est ajouté;
* Aucun: il est invisible et ne pas occuper l'espace sur la page. Désactive l'affichage de l'élément dans une situation, y compris les éléments secondaires.

plus tard, je vais faire un post sur ses innovations et CSS 3.

Related Posts

1. Div Centrer horizontalement et verticalement avec flotteur et claire

Tags: css