Catégories à fermer


Aller en bas
Miettes
Miettes
Râleuse
Informations :
► En ligne de 9h à 18h en semaine
Peu présente le reste du temps
----
Idea Viens papoter avec nous sur le discord

Pseudo Discord : Miettes
Messages : 2312

Comment appeler de la CSS dans une page web ? Empty Comment appeler de la CSS dans une page web ?

le Jeu 18 Avr - 14:06

Les bases du CSS

Comment appeler de la CSS dans une page web ?


Bonjour bonjour Smile

Un petit tutoriel simple, basique mais, selon moi, indispensable si on veut se lancer dans la création d'une page html. Eh oui ! Qui dit "structure" dit "mise en page" et donc qui dit "HTML" dit "CSS". Mais comment faire pour que les 2 langages communiquent et se comprennent ? C'est ce que nous allons voir ici Smile

Il existe 3 méthodes pour appeler une CSS dans une page :

Les méthodes

Directement dans la balise :

Code:
<p style="propriété du texte"> ton texte</p>

Au début de la page html :

Dans ce cas, on va utiliser des class & des id et on va indiquer le style entre les balises "style" :

Code:
<style type="text/css">
.class{
 propriété: valeur;
 propriété: valeur;
 propriété: valeur;
}

#id{
 propriété: valeur;
 propriété: valeur;
 propriété: valeur;
}
</style>

Dans une feuille de style externe :

Dans ce cas, on va appeler cette page css dans le head de la page avec ce code :
Code:
<link rel="stylesheet" type="text/css" href="feuille-css.css" />

Class & id

On utilise le "class" quand un même style revient plusieurs fois dans la page. Au contraire, on utilisera "id" si le style est unique dans la page (ne revient qu'une fois). Voyons voir comment ça se présente en html et en css.

HTMLCSS
class="mon_nom".mon_nom
id="mon_nom"#mon_nom

Et si on faisait un exemple ?

Prenons un paragraphe avec un style.

Si je mets le style dans ma balise, j'aurai ça :

Code:
<p style="text-align:center;font-size:12px; font-family:georgia; color:#green;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque laoreet molestie massa, ac lacinia diam euismod a. Donec non augue erat, sit amet pharetra magna. Nam a enim leo, sed eleifend sem. Nullam velit lorem, hendrerit non pulvinar ut, scelerisque ut nisl. Integer velit tellus, imperdiet eu dignissim et, sollicitudin at felis. Fusce lobortis nisl quis metus lobortis non elementum mauris elementum. Etiam scelerisque, massa consectetur iaculis commodo, erat magna molestie dui, vitae ornare turpis ligula quis tortor. Fusce cursus orci eu metus accumsan commodo consectetur velit sagittis. Vivamus sem quam, cursus sit amet convallis vitae, cursus eu purus. Quisque laoreet pharetra sapien, vitae dictum eros consectetur eget. Fusce sodales mollis enim, a venenatis nunc pulvinar quis. Duis blandit, turpis quis pellentesque varius, felis diam mollis eros, in elementum odio ipsum vitae nisi. Etiam tempus egestas urna in egestas. Mauris vel semper nulla. Aenean congue, mi luctus rhoncus euismod, sapien massa volutpat metus, a mattis ipsum metus id sem.</p>

Et si on utilise un id, on aura ça :
Code:

<style>
#mon_texte{
 text-align:center;
 font-size:12px;
 font-family:georgia;
 color:green;
}
</style>

<p id="mon_texte">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque laoreet molestie massa, ac lacinia diam euismod a. Donec non augue erat, sit amet pharetra magna. Nam a enim leo, sed eleifend sem. Nullam velit lorem, hendrerit non pulvinar ut, scelerisque ut nisl. Integer velit tellus, imperdiet eu dignissim et, sollicitudin at felis. Fusce lobortis nisl quis metus lobortis non elementum mauris elementum. Etiam scelerisque, massa consectetur iaculis commodo, erat magna molestie dui, vitae ornare turpis ligula quis tortor. Fusce cursus orci eu metus accumsan commodo consectetur velit sagittis. Vivamus sem quam, cursus sit amet convallis vitae, cursus eu purus. Quisque laoreet pharetra sapien, vitae dictum eros consectetur eget. Fusce sodales mollis enim, a venenatis nunc pulvinar quis. Duis blandit, turpis quis pellentesque varius, felis diam mollis eros, in elementum odio ipsum vitae nisi. Etiam tempus egestas urna in egestas. Mauris vel semper nulla. Aenean congue, mi luctus rhoncus euismod, sapien massa volutpat metus, a mattis ipsum metus id sem.</p>

Idea Il est tout à fait possible d'utiliser ses propres styles sur un forum. Dans ce cas, tu vas devoir minimiser ta CSS c'est-à-dire la faire tenir sur une seule ligne de cette façon :
Code:
#mon_texte{text-align:center;font-size:12px;font-family:georgia;color:green;}
et l'entourer d'une balise style. Par exemple, on peut avoir ceci que j'utilise actuellement pour mes tutos :
Code:
 
<style>.tuto-miettes{background:#e2e3de;border:1px solid #51504d;box-sizing:border-box;color:#51504d;margin:auto;padding:1.2%;position:relative;width:96%}.tuto-miettes hr{border:0 none #51504d;border-top:1px solid #51504d;clear:both;display:block;height:1px;margin:5px auto;width:80%}.tuto-miettes .titre-tuto{color:#4e453e;font-size:30px;line-height:35px;padding-bottom:5px;position:relative}.tuto-miettes .titre-tuto::after{position:absolute;bottom:0;left:0;width:30px;height:6px;content:"";background:#620019}.tuto-miettes .sur-titre{color:#4e453e;font-size:15px;line-height:20px}.tuto-miettes .titre{color:#4e453e;font-size:24px;font-weight:700;line-height:30px;padding-bottom:5px;position:relative}.tuto-miettes .titre::after{position:absolute;bottom:0;left:0;width:20px;height:3px;content:"";background:#4e453e}.tuto-miettes .sstitre{color:#4e453e;font-size:16px;font-weight:700;line-height:20px;padding-bottom:5px;position:relative}.tuto-miettes .sstitre::after{position:absolute;bottom:0;left:0;width:10px;height:1px;content:"";background:#4e453e}.tuto-miettes .sssstitre{color:#4e453e;font-size:16px;font-weight:700;line-height:20px;padding-bottom:5px}.tuto-miettes .sssstitre:before{display:inline-block;content:"►";font-size:12px;padding-right:4px}.tuto-miettes a{color:#620019;text-decoration:none}.tuto-miettes a:hover{color:#24060e;cursor:pointer}.tuto-miettes .codebox{word-break:break-word}.tuto-miettes img{max-width:100%}.tuto-miettes a{color:#d97121!important}.tuto-miettes a:hover{color:#51504d!important;text-decoration:underline!important}</style>  
<div class="tuto-miettes">
 <div class="sur-titre">SUR-TITRE</div>
 <div class="titre-tuto"><span>TITRE</span></div>
 <div class="content">
 CONTENU
 
<div class="titre">TITRE</div>
TEXTE

<hr />

Fin

 </div>
</div>

Ne panique pas mon petit chat Smile Il existe des sites très bien faits qui font ce travail de "minification" à ta place. En voici un : https://cssminifier.com/




C'est tout pour cette fois. Eh oui, c'était juste une petite "mise en bouche", une petite explication de "comment mettre en page mes pages"  Razz  

Revenir en haut
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum



Le forum a ouvert ses portes le 30 mars 2019.

A l'époque, seules Miettes et Mäven y étaient présentes. A présent, il y a @membres_enregistres@ Tambouilleurs sur le forum. La dernière personne à nous avoir rejoint est @dernier_membre@.

D'ailleurs, les Tambouilleurs sont plutôt bavards. Eh oui, ils ont déjà posté @messages@ messages dont tutoriels et bidules en Libre-service.

Actuellement, il y a @enregistres@ membres connectés,
et @invites@ visiteurs sur La Tambouille

@@membres_connectes?Qui est là ?
@membres_connectes$, @.$Personne n'est en ligne.@@

@@derniers_membres_connectes?Tambouilleurs connectés au cours des 24 dernières heures : @derniers_membres_connectes$, @$Personne n'était là ces dernières heures.@@

Post-It des Râleuses