Archives par mot-clé : attributs

Codage/programmation, CSS, Informatique

Les sélecteurs d’attribut en css

Laisser un commentaire 
[title~="enfant"] 
/*toutes les images dont les titres contiennent le mot "enfant" auront des bordures rouges*/{
 border: 5px solid red;
 padding:10px;
 margin:10px;
 }

[title~="vichy"] 
/*toutes les images dont les titres contiennent le mot "vichy" auront des bordures vertes*/{
 border: 5px solid green;
 padding:10px;
 margin:10px;
 }

[title$="02"]
/*toutes les images dont les titres finissent par "02" auront des coins arrondis*/{
 -moz-border-radius: 5px 5px 5px 5px;
 -webkit-border-radius: 5px 5px 5px 5px;
 padding: 5px;
 background: -moz-linear-gradient(center top, #999999 0%,#ffffff 100%);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #999999),color-stop(1, #ffffff));
 }

[alt^="p"]
/*toutes les images dont les textes alternatifs commencent par la lettre "p" auront auront un ombré*/{
 box-shadow: 8px 8px 0px #aaa;
 }
 [alt*="ro"]
/*toutes les images dont les textes alternatifs contiennent les lettres "ro" auront auront une opacité moindre*/{
 opacity: 0.5;
 }
pois marrons fond rose
alt:pois marrons fond rose title: Motif enfant 01
pois multicolore fond blanc
alt: pois multicolore fond blanc / title: Motif enfant 02
pois jaunes, bleus, rouges fond beige
alt: pois multicolore fond beige /title: Motif enfant 03
pois bleus fond blanc
alt: pois bleus fond blanc
title: Motif enfant 04
Carreaux roses
alt: Carreaux roses
title: Motif vichy 01
Carreaux jaunes
alt: Carreaux jaunes
title: Motif vichy 02
carreaux bleus
alt: Carreaux bleus
title: Motif vichy 03
Carreaux rouges
alt: Carreaux rouges
title:Motif vichy 04

 

 

Codage/programmation, HTML, Informatique

Qu’est-ce qu’un attribut en html?

Laisser un commentaire

Dans mon intro sur les page web, on a vu la notion de balise:

  • <h1>titre de niveau 1</h1>
  • <h2>titre de niveau 2</h2>
  • <p>paragraphe</p>
  • <a>lien hypertexte</a>

Mais des balises, il en existe des dizaines ! Elles permettent de créer/d’insérer:

  • des tableaux (<table><tr><td></td><td></td></tr></table>)
  • des listes (<ul><li></li><li></li><li></li></ul>)
  • des formulaires (<form ></form> <label></label>  <input > etc.)
  • des images (<img>)

Un attribut c’est une propriété d’une balise qui va venir la qualifier plus spécifiquement. Et donc les attributs ne sont pas tous obligatoires. C’est pas facile comme ça, hein ?

Alors, on va imaginer une balise “simple”:
la balise <véhicule > </véhicule > ; ses attributs pourraient être: …continuer la lecture de Qu’est-ce qu’un attribut en html? →