Eklablog
Editer l'article Suivre ce blog Administration + Créer mon blog

le B.A. BA

Le minimum à savoir avant d'attaquer cette partie :
- Créer une classe 
- L'utiliser dans une page html

Créer une classe                                      Balise div


Vous avez bien lu? Ok, alors on va voir comment combiner les deux (même si je pense que vous avez déjà une petite idée)

On va travailler avec div. Tout d'abord, créer une classe de type boite en css.

On a vu que, devant le nom du sélecteur, on pouvait mettre un point ou un dièse. Je ne me sert presque jamais des dièse dans ekla, mais c'est bien de savoir l'utiliser si vous avez envie de créer un site web. Bref, on sais également qu'il faut mettre un ou des attribut avec div. Les deux qui nous intéresse pour faire apparaître notre objet dans une page, ce sont "class" et "id". Vous commencez a comprendre?

Si ma classe, est précédé d'un point, je le fais apparaître avec l’attribut "class" 
Si ma "classe" est précédé d'un dièse, je le fais apparaitre avec l'attribut "id". Et dans ce cas, on dit que c'est un identifiant

Voici le code pour ceux qui ont besoin d'un exemple:

CSS
.boite{ width: 40%;
           border: 1px double black;
           box-shadow: 0px 0px 10px #de510f;
           padding: 5px 15px 5px 15px;
           margin: 5px 5px 5px 15px;
           color: black;
           background-image: url("https://ekladata.com/3XiUMiigLjJ0MbKR4SHbxwsS6WE.jpg");}
HTML
<div class="boite">Blabla d'exemple </div>


Ce qui me donne:

Blabla d'exemple



Si vous ne voulez qu'un texte personnalisé, on utilise une autre balise : <span> 
Cela fonction exactement de la même manière qu'avec <div>, sauf que l'on remplace "div" par "span" ;)

Retour à l'accueil
Partager cet article
Repost0
Pour être informé des derniers articles, inscrivez vous :
Commenter cet article
J
Merci beaucoup pour ce code ! (:
Répondre
U
C'est super ! Merci :3 !
Répondre
L
Coucou !<br /> Merci pour ce tuto très instructif ! Je suis fan de ton blog, qui m'aide un peu sur le HTML et le CSS ! Je connaissais un peu du premier, mais tu m'as fais un intéressant rafraichissement de mémoire xD J'expérimente un peu les codes pour le moment après je me lancerais un peu plus ;) <br /> Mais tite question : que veut dire pudding ?
Répondre
M
J'ai un gros souci : quand je clique sur html dans l'éditeur d'un article (et de tous les autres articles), bah les<br /> codes n'aparaissent pas et je n'ai pas possibiliter une fois que j'ai mis mon code de l'enregistrer :S
Répondre
M
super merci :)
Répondre