Download
Contenu du fichier de /documents/css3.html (télécharger css3.html)
<html>
<head>
<title>CSS3 tips</title>
</head>
<body>
<h1>Éléments utiles peu utilisés en CSS:</h1>
<h2>Intro</h2>
<p>Toute personne ayant des bases en css connaît les sélécteurs : hover ou bien :link et :visited.
Il existe cependant une liste non négligeable de sélecteur pouvant rendre de gros services. </p>
<h3>Mise en forme de texte :
<h4>L.indentation :</h4>
<p>Lorsque vous écrivez de longs paragraphes, il est bon d.utilise l.indentation sur le début du texte
afin de faciliter la lecture. </p>
<p>Nous pouvons par exemple imbriqué deux sélécteurs ":first-of-type" et ":first-letter" pour effectuer
un effet de style similaire à l'indentation. </p>
<p>De façon plus traditionnelle, nous pouvons utiliser des indentations pour tous les paragraphes via text-indent.</p>
<pre>
p :first-of-type :first-letter
{
display:block;
margin:2px;
border:1px solid black;
color:red;
float:left;
font-weight:bold;
padding:5px;
}
</pre>
<div class="exemple">
<p><span style="display:block; margin:2px; border:1px solid black; color:red; float:left; font-weight:bold; padding:5px;">
V</span>oici un texte de longueur relativement longue montrant un exemple de combinaison de selecteurs.</p>
</div>
<h4>Les liens :</h4>
<p>La possibilité des personnaliser les liens est peu utilisée sur les pages web.</p>
<p>Les sélecteurs proposent des nombreux outils permettant de modifier l.apparence selon les attributs.
Par exemple a[href^="http://"] désignera tout les liens externes http de votre page ; de même a[title]
désignera tout les liens ayant un attribut title.</p>
<pre>
a
{
text-decoration:underline;
color: blue;
}
a[href^="http://]
{
text-decoration:none;
color: red;
}
</pre>
<div class="exemple">
<p>Voici un exemple de <a href="http://externe.com" style="color:red; text-decoration:none">externe</a>
et de lien <a href="/test.html">interne</a>.</p>
</div>
<h4>Les formulaires :</h4>
<ul>
<li>Element :focus : Désigne un élément sélectionné. On peut donc par exemple changer l.apparence d.un bouton lorsque celui-ci est sélectionné avec la touche tab.</li>
<li>Element :checked : Possibilité de modifier une saisie de type « checkbox » lorsque celle-ci est activée.</li>
<li>Element :disabled : Modification des boutons désactivés.</li>
<li>Input[type=text] : Modification des entrees de texte.</li>
<h4>Les compteurs :</h4>
<p>Les compteurs peuvent être utiles pour gérer la numérotation des documents avec chapitres/sous-chapitres. (todo)</p>
</body>
</html>