Création - Mini Style spécifique incorporé dans article

 


En mauve sur l'image

 

Dans cette page nous allons voir comment utiliser certaines balises HTML, ce texte est saisi directement dans le corps du "Contenu", le format de ce texte est celui prévu dans la règle de style de la partie "Contenu", ci-dessous, les attributs pour le texte en rouge.

 

#contenu
{
background : #FFEFBD;
color : #336699;
width : 730px;
padding-top : 5px;
padding-left : 5px;
padding-right : 5px;
padding-bottom : 5px;
margin-top : 5px;
margin-left : 200px;
font-size : 10pt;
font-family : Verdana;
text-align : left;
}

 

Au début de cet article, j'ai inséré en mode HTML, le code suivant:

 

<style type="text/css">
<!--
#contenu
{
background : #EBEDAB;
padding: 10px;
border-width : 2px;
border-style : solid;
border-color : #009933;
}
#contenu p
{
padding: 5px;
background: transparent;
margin-bottom: 15px;
margin-left: 40px;
margin-right: 20px;
font-family: Comic sans MS;
}
.P1
{
margin: 20px auto;
padding: 10px;
background: #cc0000;
color: yellow;
width: 480px;
}
.P2
{
margin: 3px auto;
padding: 2px;
background: yellow;
color: #cc0000;
width: 80%;
text-align:center;
}
.P3
{
margin: 20px auto;
padding: 10px;
background: #ccccff;
color: navy ;
width: 80%;
}
-->
</style>

 

La couleur du fond de la partie "Contenu" est modifiée ainsi que la marge intérieure, en vert dans le code.
Quatres nouvelles règles en rouge :
 - la première pour géré le format des paragraphes du "Contenu", avec la création d'une  marge extérieure basse margin-bottom: 15px pour aérer la présentation, un changement de police de caractère font-family: Comic sans MS, une marge extérieure à gauche margin-left: 40px, et à droite margin-right: 20px , et une marge intérieure padding: 5px sur chaque bord pour dégager le texte.J'utilise d'ailleurs cette nouvelle règle puisque j'écris actuellement dans un paragraphe.
 - la règle suivante P1 pour créer ce que vous voyez ci-dessous puis la troisième P2 incluse dans le paragraphe pour faire ressortir l'exemple de code avec les couleurs inversées.
 - la quatrième règle P3 pour confirmer les possibilités de présentation.

Pour mettre un paragraphe en évidence, une nouvelle règle. appelée " .P1 " , le petit point à ne pas oublier  détermine une "class" , pour l'utiliser il faut employer une  balise HTML, appelée "Div" (bloc ou boîte), puis saisir le texte entre les balises, comme ceci :
<DIV class="P1"> le texte </DIV> 

Le paragraphe actuel est géré par cette class.

Dans le composeur en mode texte, quand vous cliquez dans un bloc comme ci-dessus, vous remarquerez qui est sélectionné comme une image, il est considéré comme objet... Pour sortir de ce bloc, cliquez en dehors du bord droit et avec une pression sur [enter] un paragraphe est créé, comme celui-ci.

Un double-clic sur le bloc, place le curseur à l'intérieur, ceci permet de le compléter ou de le modifier, si le bloc est déjà sélectionné, un clic a le même effet.
Dans un bloc, comme dans un paragraphe, la pression simultanée des 2 touches [maj]+[enter], crée un retour à la ligne. Une seule pression de la touche [enter], crée un nouveau paragraphe si vous êtes dans un paragraphe ou un nouveau bloc si vous êtes dans un bloc, mais si ce bloc à une Class vous créez un paragraphe.

Pour créer un nouveau bloc... l'astuce est de faire dans un premier temps un paragraphe en pressant [enter] et de le transformer en bloc, en passant en mode HTML pour mettre DIV à la place de P, dans la balise d'ouverture et la balise de fermeture.
Puis dans la balise d'ouverture, vous pouvez mettre un style ou  une class.

En sortant du bloc un paragraphe est créé...

Après la pression sur [enter], un nouveau pargraphe...

De nouveau une pression sur [enter], a créé un paragraphe que je vais modifié en bloc DIV, en passant en mode HTML, sans class donc sans format style.
Une fois modifié en bloc DIV en pressant sur la touche [enter], j'ai créé ce nouveau bloc. Pour ressortir sans créer de bloc, pression sur [flèche bas].

Si le curseur se trouve sur une ligne, un paragraphe ou un bloc, placez le curseur en début de ligne et pressez [enter], pour créer un nouveau paragraphe, il est possible que 2 paragraphes soient créés, avec un [retour arrière] vous pouvez en supprimer un.

 

Nouveau bloc créé comme indiqué plus haut en mode HTML, pour faire un essai sur l'utilisation des touches, pour sortir du bloc cliquez hors du bloc bord droit.

 

Les 2 blocs sont de la même CLASS P3, au-dessus sans paragraphe et en dessous avec des paragraphes qui se formatent au style #contenu .p .

 

Un autre paragraphe transformé en bloc DIV, pour cette fois créer des paragraphes internes à cet objet.

En pressant [enter], la phrase déjà saisie est transformée en paragraphe et un nouveau paragraphe créé, je peux maintenant faire un retour à la ligne avec [maj]+[enter].
Puis éventuellement d'autres paragraphes et même en transformer en blocs, tout en restant dans le premier bloc.

Mais pour pouvoir éditer ce bloc, il faut une CLASS

Je peux à nouveau faire un paragraphe, en cliquant en dehors du bloc précédent et en pressant [enter].

 

A suivre...
Exemple d'autres balises à mettre dans un "Mini Style"...

 

 



06/07/2008
2 Poster un commentaire

A découvrir aussi


Inscrivez-vous au blog

Soyez prévenu par email des prochaines mises à jour

Rejoignez les 42 autres membres


Rechercher sur Diztest ? :

Recommander ce blog | Contact | Signaler un contenu | RSS | Espace de gestion

retour Accueil Page precedente Bas de page Plein ecran - Retour alt+F4 Haut de page Page suivante Envoyer un mail a PapyClic le webmaster de Test-DizPerso