CSS - Cascading Style Sheets

CSS - Cascading Style Sheets

CSS (Cascading Style Sheets Anglais -. Cascading Style Sheets) - un langage formel pour décrire l'apparence d'un document écrit en utilisant le langage de balisage.

Principalement utilisé comme un moyen de description, l'apparence des pages Web écrites en HTML et XHTML langages de balisage, mais peut également être appliquée à l'un des documents XML, tels que SVG ou XUL.

Le but de CSS

CSS utilisée par les créateurs de pages Web pour définir les couleurs, les polices, la mise en page des blocs individuels et d'autres aspects de l'apparence de la présentation des pages Web. Le but principal du développement de la CSS est une division logique de la description de la structure de la page Web (qui est fait avec l'aide de HTML ou d'autres langages de balisage) à partir de la description de l'apparence de la page Web (qui est maintenant produite en utilisant CSS langage formel). Cette séparation peut accroître la disponibilité du document, afin de fournir une plus grande flexibilité et la capacité de gérer ses performances et de réduire la complexité et la répétition dans le contenu structurel. En outre, CSS vous permet de représenter un seul et même document dans des styles différents et des méthodes de production, telles que la présentation de l'écran, la représentation imprimée, la lecture vocale (navigateur vocal spécial ou un programme de lecture d'écran), ou lorsque le retrait des appareils utilisant le Braille.

Les méthodes de connexion au document CSS

règles CSS CSS sont écrits dans un langage formel et sont situés dans les feuilles de style, qui est, la feuille de style contient une règle CSS. Ces feuilles de style peuvent être placés dans le document Web, dont l'aspect qu'ils décrivent, et dans un fichier séparé avec le format CSS. (En fait, le format CSS - il est un fichier de texte brut dans le fichier .css ne contenait une liste de règles et commentaires CSS à lui ..)

Autrement dit, la feuille de style peuvent être connectés, ils sont introduits dans le document web décrit de quatre manières différentes:

+ Lorsque la feuille de style dans un fichier séparé, il peut être connecté à un document Web par la balise <link>, situé dans le document entre les balises <head> et </ head>. (Balise <link> sera attribut href, ayant une valeur de l'adresse de cette feuille de style). Toutes les règles de ce tableau sont pour l'ensemble du document; 

  <! DOCTYPE html>
  <Html>
  <Head>
  .....
  <Link rel = "stylesheet" href = "style.css">
  </ Head>
  <Body>
  .....
  </ Body>
  </ Html>

+ Lorsque la feuille de style dans un fichier séparé, il peut être connecté à un document Web via directive @import, se trouve dans ce document entre les balises <style> et </ style> (qui, à son tour, se trouvent dans ce document entre les balises < head> et </ head>) immédiatement après la balise <style>, qui est également indiqué (dans leurs parenthèses après le mot url) pour répondre à cette feuille de style. Toutes les règles de ce tableau sont pour l'ensemble du document; 

  <! DOCTYPE html>
  <Html>
  <Head>
  .....
  <Media Style = "all">
  @import url (style.css);
  </ Style>
  </ Head>
  </ Html>

+ Lorsque la feuille de style est décrit dans le document, il peut être placé dans entre les balises <style> et </ style> (qui, à son tour, se trouvent dans ce document entre les balises <head> et </ head>). Toutes les règles de ce tableau sont pour l'ensemble du document; 

  <! DOCTYPE html>
  <Html>
  <Head>
  .....
  <Style>
  body {
  color: red;
  }
  </ Style>
  </ Head>
  <Body>
  .....
  </ Body>
  </ Html>

+ Quand les styles de tableaux décrits dans le document, il peut être placé dans dans le corps de l'étiquette individuelle (un attribut par son style) du document. Toutes les règles de ce tableau sont applicables uniquement au contenu de cette balise. 

  <! DOCTYPE>
  <Html>
  <Head>
  .....
  </ Head>
  <Body>
  <P style = "font-size: 20px; color: green; font-family: arial, helvetica, sans-serif">
  .....
  </ P>
  </ Body>
  </ Html>

Dans les deux premiers cas, nous disons que le document appliqué des feuilles de style externes, et dans la seconde des deux cas - stylesheet interne.

Pour ajouter CSS au document XML, celui-ci doit contenir un lien spécial pour la feuille de style. Par exemple: 

  <? Xml-stylesheet type = "text / css" href = "style.css"?>

La hiérarchie des éléments au sein du document

Comme on le sait, HTML-documents sont basés sur la hiérarchie des éléments qui peuvent être représentés graphiquement sous forme d'arbre. éléments HTML à l'autre peut être un parent, un enfant, élément parent, les éléments enfants, sœur.

Un autre élément est l'élément parent dans la structure arborescente si elle est un document à la fois, directement sur cet élément. Elément est un ancêtre d'un autre élément dans la structure d'arborescence si le document qu'il se trouve quelque part au-dessus de l'élément.

Soit, par exemple, le document contient deux paragraphes p, y compris la police et audacieux b. Ensuite , les éléments de b sont des éléments enfants de leur éléments parents p et les descendants de leur corps ancêtres. À son tour, l'élément du corps des éléments de p ne sera qu'un parent. Et d' ailleurs, ces deux éléments seront p éléments comme ayant le même parent fratrie - corps.

Le CSS peut être réglé en utilisant les sélecteurs non seulement des éléments simples, mais aussi des éléments qui sont descendants, frères et sœurs ou enfants d'autres éléments (voir. Sous-section "types de sélecteurs»).

règles CSS de construction

Dans les trois premiers cas, la connexion de la table de CSS pour le document (voir ci-dessus.) Chacun des stylesheet CSS comporte deux parties principales - le sélecteur et le bloc de déclaration. Le sélecteur est situé sur le côté gauche de la règle détermine quelle partie du document visé par la règle. bloc de déclaration se trouve sur le côté droit de la règle. Il est placé entre accolades, et, à son tour, se compose d'une ou plusieurs annonces, séparés par ";". Chaque annonce est une combinaison de propriétés et valeurs séparées par le signe CSS ":". Les sélecteurs peuvent être regroupées en une seule ligne, séparés par des virgules. Cette propriété s'applique au cas de chacun d'eux. 

  Sélecteur {
  propriété: valeur;
  propriété: valeur;
  propriété: valeur;
  }

Dans le quatrième cas, la table connexion CSS pour le document (voir la liste.) Règle CSS (qui est une balise de style valeur d' attribut, pour lequel il agit) est une liste d'annonces ( "propriété CSS: valeur"), séparés par ";".