Des selecteurs utiles pour les formulaires

C'est bien de connaitre les propriétés css mais pour les utiliser convenablement il est utile de maitriser les sélecteurs, dans le cas de création de style pour des formulaires on peut utiliser ce que l'on nomme les sélecteur d'attribut.

les balises html disposent parfois d'attribut, l'on peut alors utiliser ces attributs pour sélectionner plus précisément une balise dans la feuille de style, par exemple une balise de lien <a> avec un attribut url="#" peut être sélectionner dans la css de cette façon :

a[url="#"] {
    border-bottom:1px #369 dashed; 
}

seul les liens avec en url un simple # seront stylé de cette façon, cela prend tout son sens pour les formulaires, la balise input étant différente suivant le type que l'on lui assigne on peut donc dans la css stylé les divers éléments input de cette façon :

input[type="text"] { 
}
input[type="checkbox"]{
}
input[type="submit"]{
}

la même balise input peut alors avoir un style différent suivant sont type et cela sans ajouter des class ou id au balises.

5 façons de styler un menu sans images

Les menus de navigations sont conçu avec des liste ul li et d'un titre h1, h2 ou h3, généralement on y ajoute des images pour rendre le tout "joli" mais avec un peu d'astuce, de bordure et de couleur on peut très bien réaliser des menu de navigations tout à fait utilisable sans utiliser d'image, voici 5 exemples de ce que l'on peut faire avec les css sur un même code html.

d'abord voyons le code html il est très simple et donc propre :

    <h2>titre</h2>
    <ul>
        <li><a href="#">lien un</a></li>
        <li><a href="#">lien deux</a></li>
        <li><a href="#">lien trois</a></li>
        <li><a href="#">lien quatre</a></li>
        <li><a href="#">lien cinq</a></li>
    </ul>

on remarque un titre h2 qui contient le titre du menu (navigation, catégories, rubrique, etc.) puis une liste ul et li et bien sur des liens, maintenant voyons les css que l'on peut utiliser.

Premier style

 h2 {
    margin:0;
    padding:5px 0;
    text-transform:uppercase;
    font-size:12px;
    letter-spacing:3px;
    text-align: center;
    width:160px;
    color:#fff;
    background-color:#2c2c2c;
    border-bottom: 1px solid #eee;
}
ul {
    list-style-type:none;
    margin:0;
    padding:0;
    border-bottom:2px solid #2c2c2c;
    width:160px;
}
li {
    padding:0;
    margin:0;
}
li a {
    text-decoration:none;
    padding:2px 0 2px 10px;
    margin:0;
    background:none;
    display:block;
    width:150px;
    background-color:#eee;
    color:#2c2c2c;
    text-transform:capitalize;
}
li a:hover {
    color:#fff;
    background-color:#2c2c2c;
}

A noter que le code html peut pour plus de souplesse être placé dans un élément div avec un id genre "sidebar", "zonemenu" etc. et dans ce cas le #id peut être placé devant chaque style pour que ceux ci n'interfère pas sur les autre ul li a de la page

Second style

 h2 {
    margin:0 0 6px 0;
    padding:5px 0;
    text-transform:uppercase;
    font-size:12px;
    letter-spacing:3px;
    text-align: center;
    width:160px;
    color:#9A1948;
    border-bottom: 1px solid #9A1948;
}
ul {
    list-style-type:none;
    margin:0;
    padding:0;
    width:160px;
}
li {
    padding:0;
    margin:0;
}
li a {
    text-decoration:none;
    padding:2px 0 2px 10px;
    margin:0;
    background:none;
    display:block;
    width:150px;
    background-color:#fff;
    color:#2c2c2c;
    text-transform:capitalize;
}
li a:hover {
    border-left:6px solid #9A1948;
    padding-left:4px;
}

Ici on utilise la propriété border pour avoir un effet au survol des liens

Troisième style

 h2 {
    margin:0 0 6px 0;
    padding:5px 0;
    text-transform:uppercase;
    font-size:12px;
    letter-spacing:3px;
    text-align: center;
    width:160px;
    color:green;
    border-top: 2px solid green;
    border-bottom: 2px solid green;
}
ul {
    list-style-type:none;
    margin:0;
    padding:0;
    width:160px;
}
li {
    padding:0;
    margin:0;
}
li a {
    text-decoration:none;
    text-align: center;
    padding:2px 0;
    margin:0;
    background:none;
    display:block;
    width:160px; 
    background-color:#fff;
    color:green;
    text-transform:capitalize;
}
li a:hover {
    color:#fff;
    background-color: green;
}

Quatrième style

h2 {
    margin:0 0 5px 0;
    padding:3px 0 3px 10px;
    text-transform:uppercase;
    font-size:16px;
    width:130px;
    border-left:30px solid orange;
    color:orange;
    background-color:#fff;
}
ul {
    list-style-type:none;
    margin:0;
    padding:0;
    width:160px;
}
li {
    padding:0;
    margin:0;
}
li a {
    text-decoration:none;
    padding:2px 0 2px 10px;
    margin:0;
    background:none;
    display:block;
    width:150px;
    background-color:#fff;
    color:orange;
    text-transform:capitalize;
    border-bottom:2px solid #fff;
}
li a:hover {
    border-bottom:2px solid orange;
}

Ici la couleur peut être utilisée pour différencier plusieurs rubriques.

Cinquième style

h2 {
    margin:0;
    padding:5px 0;
    text-transform:uppercase;
    font-size:12px;
    letter-spacing:3px;
    text-align: center;
    width:160px;
    color:#fff;
    background-color:#bbcc00;
}
ul {
    list-style-type:none;
    margin:0;
    padding:0;
    border-bottom:2px solid #bbcc00;
    width:160px;
}
li {
    padding:0;
    margin:0;
}
li a {
    text-decoration:none;
    padding:2px 0 2px 10px;
    margin:0;
    background:none;
    display:block;
    width:139px;
    background-color:#fff;
    color:#000;
    text-transform:capitalize;
    border-left:10px solid #bbcc00;
    border-right:1px solid #bbcc00;
}
li a:hover {
    padding:2px 5px 2px 10px;
    border-left:5px solid #bbcc00;
}

Cette fois encore pas d'image uniquement l'utilisation de bordure et de couleur de fond.

Souligner les liens au stylo bille

Un effet facile à faire sur les liens et qui donne un coté "scolaire" à un site internet est celui qui consiste à avoir des liens souligné au stylo bille, voyons cela tout de suite, pour commencer on a un paragraphe avec un lien :

<p>Lorem ipsum dolor sit amet, <a href="#">consectetur adipiscing</a> elit. Ut ut justo justo, vitae sodales mi.</p>

On a également besoin d'une image qui va représenté le soulignement au stylo, je vais utiliser celle ci :

Vous pouvez enregistrer cette image et l'utiliser ou bien refaire la votre c'est assez simple à faire, cette image on la place dans un dossier images pour garder un site propre et on va créer ensuite le style suivant dans la feuille de style :

a {
    color:#000;
    text-decoration:none;
    background:url(images/souligne.png) repeat-x 100%;
    padding-bottom:15px;
}
a:hover {
    color:#369;
}

quelques explications, c'est un style pour les balises <a> qui sont les balises de lien, on leur donne la couleur noire #000 (ce n'est pas obligatoire), puis on supprime le soulignement par défaut avec la propriété text-decoration:none comme on a plus de lien souligné on peut ajouté en image de fond notre ligne bleu au stylo avec la propriété background, on indique également que ce background se répète uniquement sur l'axe des x (donc horizontalement), enfin on ajoute une marge interne avec margin-bottom pour décalé le soulignement sous le texte et voilà le résultat :

Une petite info en plus, certains anciens navigateur (IE) pourrait avoir du mal avec ce style dans ce cas il y a une astuce pour leur donner un style différent en procédant ce cette facon :

a {
    color:#000;
    text-decoration:none;
    background:url(images/souligne.png) repeat-x 100%;
    padding-bottom:15px;
    /background:none;
    /border-bottom:1px solid #369;
    /padding-bottom:0;
}

les propriétés de styles avec un / ne seront comprise que pas le navigateur fautif qui aura donc un soulignement classique bleu à la place de l'image. 

Style lettrine

Il peut être intéressant d'avoir une lettrine sur vos paragraphes suivant le look de votre site, cela peut ce faire facilement grâce à la pseudo class :first-letter (à noter que les anciens navigateurs ne gère pas forcement cette pseudo class)

Considérons que vous avez un paragraphe basique :

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Ut ut justo justo, vitae sodales mi. Pellentesque sollicitudin mollis
est, vel suscipit lacus viverra non. Fusce interdum tincidunt odio,
non fermentum purus adipiscing non.</p>

dans votre feuille de style on y assigne un style simple :

p {
    padding:5px;
    line-height:20px;
    text-align:justify;
}

c'est à dire une marge interne de 5 pixels, une hauteur de ligne de 20 pixels et on justifie le texte, ensuite on utilise la pseudo class :first-letter pour ajouter un style différent à la première lettre du paragraphe, on ajoute donc ceci :

p:first-letter {
    font-size:300%;
    float:left;
    padding:4px;
    text-transform: uppercase;  
    line-height:30px;
}

soit une taille de 300% pour la lettrine, flottant à gauche, avec une marge interne de 4 pixels, une mise en majuscule au cas ou on l'aurait oublié lors de la saisie du texte et une hauteur de ligne de 30 pixels, pour avoir un rendu quasi identique dans la plupart des navigateur, ce qui nous donne ceci :

Organiser les styles par groupes

Quand une feuille de style devient longue, il est utile de pouvoir facilement retrouver un style précis dans le flot de propriétés css, on doit donc organiser la feuille de style en plusieurs groupes, en premier on définit les balises générique c'est à dire body, h1, h2, h3, h4, h5, h6, p, ul, li, dl, dt, dd, etc.

Puis à l'aide de commentaire on délimite les diverses partie de la feuille de style, chaque partie correspondant à une zone sur la page html, on peut donc avoir une partie pour l'en-tête, une pour la zone de navigation, une pour le corps de la page et une pour le pied de page.

Ensuite on ajoute les styles qui vont correspondre au divers éléments supplémentaire de votre page tel que shootbox, galerie d'image, formulaire particulier et autres.

attention les styles générique définit au début de la css peuvent influer sur les styles qui suivent.

Propre et indenté

Une des première chose à faire quand on rédige une feuille de style est de faire un code propre, c'est à dire ne pas mettre toutes les propriétés css sur une même ligne, avec le temps vous pourrez prendre des libertés à ce niveau mais quand on commence une css on se doit de faire quelque chose qui soit lisible donc il ne faut pas faire :

.maclass { margin:0; padding:0; background-color:#ccc; border:1px solid #2c2c2c;}

mais faire plutôt :

.maclass {
     margin: 0;
     padding: 0;
     background-color: #ccc;
     border: 1px solid #2c2c2c
}

on remarque que c'est plus facile à lire, avec le code indenté et chaque propriété sur une ligne.

Ouverture du blog

le blog est ouvert, ici je vais publier des trucs, astuces, bonnes pratique, méthodes, et autres pour l'utilisation des feuilles de styles (.css).