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.
{
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:
<!--
#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.
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.
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...
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.
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.
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"...
