Scribd
Importer
5 vues1 page

Méthodes et Sélecteurs CSS3 Essentiels

Le document présente différentes méthodes d'application de styles CSS dans un fichier HTML, y compris les styles en ligne, intégrés et externes. Il explique également la syntaxe des sélecteurs CSS, l'utilisation des classes et des identifiants, ainsi que divers attributs de style tels que la police, l'alignement et la décoration du texte. Enfin, il aborde les commentaires et les sélecteurs universels pour appliquer des styles à plusieurs éléments.

Transféré par

Hassen Hassen
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
5 vues1 page

Méthodes et Sélecteurs CSS3 Essentiels

Le document présente différentes méthodes d'application de styles CSS dans un fichier HTML, y compris les styles en ligne, intégrés et externes. Il explique également la syntaxe des sélecteurs CSS, l'utilisation des classes et des identifiants, ainsi que divers attributs de style tels que la police, l'alignement et la décoration du texte. Enfin, il aborde les commentaires et les sélecteurs universels pour appliquer des styles à plusieurs éléments.

Transféré par

Hassen Hassen
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd

Directement dans la balise html avec l’attribut style.

Aide-mémoire Inline <h1 style="color:white;padding:30px;"> Titre </h1>

CSS3 - Partie 1 L'attribut <style> s'applique sur toutes les balises HTML

Dans l'entête du fichier html avec la balise <style>

Embedded (interne) <head>


Les méthodes CSS3 <style type="text/css">
h1 {color:white; font-size: 10px;}
.center {display: block; margin: 0 auto;}
</style>
</head>

Selecteur(s) { propriété: valeur ; propriété: valeur1, valeur2, valeur3 ; .. } Syntaxe Dans un fichier .css externe et lié via la balise <link>

Linked (externe)
h1, em <head>
{ <link rel="stylesheet" type="text/css" href="[Link]" />
color: blue;
A deux balises Appliquer un style
</head>
{

/* commentaire */ Les commentaires


L’un des grands intérêts de l’attribut HTML class est qu’un
même attribut (et donc les styles CSS liés) va pouvoir être
partagé par différents éléments
Police d'écriture -> font-family
Exemple Pour cibler un class en particulier en CSS, on utilisera le
{font-family: arial, verdana, sans-serif ;} symbole point (.)suivi de la valeur du class.
Class
La taille-> font-size Exemple
Exemple En HTML
{font-size : 1,4 em; } <p class="introduction">
En CSS
Gras-> font-weight .introduction
Exemple
{font-weight: bold; }
CSS 3 {
color: blue;
Attribut class - Id }
Les attributs
Souligné-> text-decoration
Exemple L'attribut universel id définit un identifiant qui doit être unique
{text-decoration: underline;} pour l'ensemble du document.

Italique ->font-style Pour cibler un id en particulier en CSS, on utilisera le symbole


Exemple dièse (#) suivi de la valeur de l’id
{font-style: italic; } Id
Exemple
Forme raccourci En HTML
Exemple <p id="introduction">
{font: italic bold small-caps 20pt Arial; } En CSS
#introduction
{
text-align: justify;
color: blue;
}
text-align: left;

text-align: right; Alignement


L'étoile *

vertical-align:top;
Formatage du texte
sélecteur universel *
{
text-align: center; color: blue;
/* Tout le text sera en bleu */
Texte non souligné {
{text-decoration: none;}
h2 em
Sélectionner une balise contenu dans une {
Texte souligné par dessous
autre balise color: blue;
{text-decoration: underline;} Les sélécteurs }
text-decoration
Texte souligné par dessus et dessous h2 + p
{text-decoration: overline underline;} {
Cibler les balises qui en suivent d'autres
color: blue;
}
Texte barré
{text-decoration: line-through;}
a {title}
{
Majuscule Les balises qui contiennent exemple "title"
color: blue;
{text-transform: uppercase; } }
Décoration

Petite majuscule
{font-variant: small-caps;} Texte en

Minuscule
{text-transform:lowercase;}

text-indent Pr:[Link]
{text-indent: 30px;} Retrait

Vous aimerez peut-être aussi