style facebook twitter youtube

La balise <style>

Est employée pour centraliser les informations de mise en forme des éléments html utilisés dans la page. Sa déclaration se fait dans l'en-tête du document html, c'est à dire à l'intérieur de la balise <head>. A l'intérieur de ce tag, il est possible de déclarer les styles CSS qui seront appelés, soit par les attributs "class", soit par référence aux attributs "id" des différents tags html du document.

Par convention, la balise <style> figure dans l’en-tête du document, mais il faut savoirqu’elle est également permise dans les éléments <div>, <noscript>, <section>,<article> et <aside>.
C’est dans cette situation que le nouvel attribut scoped démontre tout son intérêt pour rendre sa portée locale à l’élément qui la contient.

 

Attribut Valeurs Rôle
type type MIME Type MIME d'un langage de style. Dans l'extrême majorité
des cas, il s'agira de text/css.
media media query Spécifie une ou plusieurs requête(s) de média à laquelle l
truction de style sera appliquée.
scopedstyle scoped Indique que les instructions de style s'appliquent uniquement
à l'élément parent qui contient la balise
<style> ainsi qu'à
ses descendants.
Si cet attribut est absent, les propriétés CSS s'appliqueront à
l'ensemble du document.

 

Exemple <style>

 

<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Ma page sur les kiwis</title>
<style type="text/css" media="screen">
   body {
   background:#EFECCA;
   }
   p {
   color:#78A419;
   font-size:2em;
   text-align:center;
   border:3px solid #B5E655;
   background:white;
   padding:1em;
   width:50%;
   margin:2em auto;
   }
   </style>
</head>
<body>
<p>Ce paragraphe a du style !</p>
</body>
</html>

Notez que cette balise est particulière et que son contenu n'est pas remplaçable dynamiquement

media

L'at t r i but media spécifie une ou plusieurs requête(s) de média (media query) pour laquelle l'instruction de style sera appliquée (voir l'annexe B en ligne sur les feuilles de style CSS).

Exemples media

<!-- Styles pour l'affichage -->

<style media="screen">
   /* ... instructions CSS ... */
 </style>


<!-- Feuille de style pour l'impression -->

<style media="print">
   /* ... instructions CSS ... */
 </style>


<!-- Feuille de style pour l'affichage sur écran de largeur inférieure à 640px -->

<style media="screen and (max-width:640px)">
   /* ... instructions CSS ... */
 </style>

 



  • html

    html

    L’élément <html> constitue la racine de tout document HTML. Il suit en général le
    doctype et clôt l’ensemble en fin de page par une balise fermante
    </html>.

    .......
    Voir Plus
  • head

    head

    L’en-tête du document exerce un rôle crucial, car il fournit de multiples renseignements sur le document lui-même, que le contenu n’indique pas.

    .......
    Voir Plus
  • title

    title

    Le titre du document détenu par <title> est affiché par le navigateur dans le titre de la fenêtre et/ou dans l’onglet actif.  Il est aussi choisi, à juste titre, comme intitulé du lien dans les rés

    .......
    Voir Plus
  • meta

    meta

    Les balises <meta> comblent le besoin de véhiculer plus de méta-informations au sujet du document. Il s’agit là aussi de renseignements qui ne ont pas affichés dans le corps de la page,.

    .......
    Voir Plus
  • link

    link

    La balise <link> Permet de définir l'emplacement d'un fichier qui sera accessible au sein de la page où elle est déclarée.

    .......
    Voir Plus
  •  base

    base

    Représente une base commune pour tous les éléments du document.il est conseillé de le placer en tantque tout premier élément dans, car les suivants utiliseront son information.

    .......
    Voir Plus
  • body

    body

    Ce corps est intégralement contenu entre <body> et </body>. On y retrouve toutes les autres balises décrites dans la suite de cet ouvrage. La seule balise susceptible de figurer après cet élément est </

    .......
    Voir Plus
Changer le fond
Oregionale Skin
7astuces
Sélectionnez un Fond (11)
7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces
Fond de contenu
7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces