CSS – Mise en place

Ajouter un style

Voici les différentes façons d’ajouter un style à une balise HTML

Avec un fichier CSS externe

HTML


<head>
<link href="css/style.css" media="all" rel="stylesheet" >
</head>
<body>
   <h1>Titre de la page</h1>
</body>


<head>
   <link href="css/style.css" media="all" rel="stylesheet" >
</head>
<body>
   <h1>Titre de la page</h1>
</body>

Style.css


   h1 {color:red; font-size:24px; text-align:center;}

Avec le code CSS directement dans le document HTML


<head>
<style media="all" type="text/css">
  h1 {color:red; font-size:24px; text-align:center;}
</style>
</head>

Avec le style directement sur l’élément


<h1 style="color:red; font-size:24px; text-align:center;">Titre de la page</h1>


<h1 style="color:red; font-size:24px; text-align:center;">Titre de la page</h1>

Publier 27 octobre 2014 par sm2017 dans CSS - Mise en place Commentaires fermés

Les sélecteurs d’attribut

Les sélecteurs d’attribut permettent de cibler un élément selon la présence d’un attribut ou selon la valeur donnée d’un attribut.

Présence d’un attribut


/* Les éléments  avec un attribut title */
a[title] {
  color: purple;
}

Selon la valeur donnée d’un attribut


/* Les éléments  avec un href qui correspond */
/* à "https://example.org" */
a[href="https://example.org"] {
  color: green;
}

/* Les éléments  dont href contient "example" */
a[href*="example"] {
  font-size: 2em;
}

/* Les éléments  dont href finit par ".org" */
a[href$=".org"] {
  font-style: italic;
}

/* Les éléments  dont l'attribut class contient le mot logo */
/* comportement identique à a.logo */
a[class~="logo"] {
  padding: 2px;
}

Publier 23 juin 2019 par sm2017 dans CSS - Mise en place Commentaires fermés