Remerciez-le!

Remerciez @Admin pour avoir partagé cet document gratuitement, de la manière la plus simple, en partageant sur les réseaux sociaux.

Année scolaire : 2022/2023 Prof : Helali Miloud Niveau : 3STI Cours CSS3 (Parti

Année scolaire : 2022/2023 Prof : Helali Miloud Niveau : 3STI Cours CSS3 (Partie 1) Prof : Helali Miloud Niveau : 3 STI Lycée : Cité ElAmel Gabès Cours CSS3 : Partie 1 I. Introduction du CSS : S1 II. Syntaxe CSS : III. Sélecteurs CSS : IV. Comment ajouter CSS : V. Commentaires du CSS : S2 VI. Couleurs CSS : VII. Arrière-plans CSS : VIII. Frontières du CSS : IX. Marges du CSS : S3 X. Rembourrage CSS : XI. Hauteur et largeur du CSS : 03/09/2022 Helali Miloud 2 XIII. Contour du CSS : S4 XIV. Texte CSS : 03/09/2022 Helali Miloud 3 XII. Modèle de boîte de CSS : I. Introduction du CSS : CSS est le langage que nous utilisons pour coiffer une page Web. 1. Qu’est-ce que le CSS? * CSS signifie Feuilles de Style en Cascade. * CSS décrit comment les éléments HTML doivent être affichés à l’écran, sur papier ou dans d’autres médias. * Le CSS permet d’économiser beaucoup de travail. Il peut contrôler la mise en page de plusieurs pages Web à la fois. * Les feuilles de style externes sont stockées dans les fichiers CSS. 2. Pourquoi utiliser CSS? CSS est utilisé pour définir les styles de vos pages Web, y compris la conception, la mise en page et les variations d’affichage pour différents appareils et tailles d’écran. 03/09/2022 Helali Miloud 4 3. Le CSS a résolu un gros problème : HTML n’a jamais été destiné à contenir des balises pour la mise en forme d’une page Web! HTML a été créé pour décrire le contenu d’une page Web, comme : <h1>C’est un titre de niveau 1 </h1> CSS a supprimé le formatage de style de la page HTML! Les définitions de style sont normalement enregistrées dans des fichiers .css externes. Avec un fichier de feuille de style externe, vous pouvez changer l’apparence d’un site web entier en changeant un seul fichier! II. Syntaxe CSS : Une règle CSS se compose d’un sélecteur et d’un bloc de déclaration. Le sélecteur indique l’élément HTML que vous souhaitez coiffer. Le bloc de déclaration contient une ou plusieurs déclarations séparées par des ( ; ). Chaque déclaration comprend un nom de propriété CSS et une valeur, séparée par ( : ). Plusieurs déclarations CSS sont séparées par des ( ; ), et les blocs de déclaration sont entourés par deux ( { } ). Exemple : Dans cet exemple tous les éléments <p> seront centrés et avec une couleur de texte rouge: 03/09/2022 Helali Miloud 5 Exemple expliqué : p est un sélecteur dans CSS (il indique l’élément HTML que vous voulez formaté ). color est une propriété ayant la valeur red text-align est une propriété ayant la valeur center III. Sélecteurs CSS : Un sélecteur CSS sélectionne l’élément HTML que vous souhaitez coiffer. 1. Le sélecteur d’éléments CSS : Le sélecteur d’élément sélectionne les éléments HTML en fonction du nom de l’élément. Exemple : Ici, tous les éléments <p> sur la page seront centrés avec une couleur de texte rouge: 03/09/2022 Helali Miloud 6 Le sélecteur d’id utilise l’attribut id d’un élément HTML pour sélectionner un élément spécifique. L’id d’un élément est unique dans une page. Pour sélectionner un élément avec un id spécifique, écrivez un # suivi de l’id de l’élément. 2. Le sélecteur d’identification CSS : Exemple : La règle CSS ci-dessous sera appliquée à l’élément HTML avec id="para1" 3. Le sélecteur de classe CSS : Le sélecteur de classe sélectionne les éléments HTML avec un attribut de classe spécifique. Pour sélectionner des éléments avec une classe spécifique, écrivez un point (.) suivi du nom de classe. Exemple : Dans cet exemple, tous les éléments HTML avec class="classe1" seront rouges et alignés au centre : 03/09/2022 Helali Miloud 7 Vous pouvez spécifier que seuls des éléments HTML spécifiques doivent être affectés par une classe. Exemple : Dans cet exemple seulement <p> éléments avec class="classe1" seront rouges et centrés: On peut formaté un élément HTML en fonction de plus qu’une classe. 03/09/2022 Helali Miloud 8 4. Le Sélecteur Universel CSS : Le sélecteur universel (*) sélectionne tous les éléments HTML de la page. Exemple : La règle CSS ci-dessous affectera chaque élément HTML de la page : 5. Le Sélecteur de regroupement CSS : Le sélecteur de regroupement sélectionne tous les éléments HTML avec les mêmes définitions de style. Regardez le code CSS suivant (les éléments h1, h2 et p ont les mêmes définitions de style) : 03/09/2022 Helali Miloud 9 Il sera préférable de regrouper les sélecteurs, de minimiser le code. Pour regrouper les sélecteurs, séparez chaque sélecteur d’une virgule. Exemple : Dans cet exemple, nous avons regroupé les sélecteurs du code ci-dessus : IV. Comment ajouter CSS : Il existe trois façons d’insérer une feuille de style : CSS externe CSS interne CSS en ligne 1. CSS externe : Avec une feuille de style externe, vous pouvez changer l’apparence d’un site web entier en changeant un seul fichier! Chaque page HTML doit inclure une référence au fichier de feuille de style externe à l’intérieur de l’élément <link> à l’intérieur de la section en tête. Exemple : Styles externes sont définis dans l’ élément <link>, à l’intérieur de l’ élément <head> : Une feuille de style externe peut être écrite dans n’importe quel éditeur de texte, et doit être enregistrée avec une extension .css. 03/09/2022 Helali Miloud 10 Le fichier .css externe ne doit pas contenir de balises (éléments) HTML. Voici à quoi ressemble le fichier « mystyle1.css »: 2. CSS interne : Une feuille de style interne peut être utilisée si une seule page HTML a un style unique. Le style interne est défini à l’intérieur de l’ élément <style>, à l’intérieur de la section en tête. Exemple : Styles internes sont définis dans l’ élément <style >, à l’intérieur de l’ élément <head> :: 3. CSS en ligne : Un style en ligne peut être utilisé pour appliquer un style unique pour un seul élément HTML. 03/09/2022 Helali Miloud 11 Pour utiliser des styles en ligne, ajoutez l’attribut de style à l’élément en cours. Exemple : Les styles inline sont définis dans l’attribut « style » de l’élément pertinent : 4. Feuilles de style multiples (externes) : Si certaines propriétés ont été définies pour le même sélecteur (élément) dans différentes feuilles de style, la valeur de la dernière feuille de style lu sera utilisée. Supposons qu’une feuille de style externe a le style suivant pour le <h1> élément: Ensuite, supposons qu’une feuille de style interne a également le style suivant pour le <h1> élément: Exemple : Si le style interne est défini après le lien vers la feuille de style externe, le <h1> éléments seront « orange »: 03/09/2022 Helali Miloud 12 mystyle2.css : 5. Ordre en cascade : 1. Style inline (à l’intérieur d’un élément HTML) 2. Feuilles de style internes (dans la section en tête) 4. Navigateur par défaut 3. Feuilles de style externes V. Commentaires du CSS : Les commentaires CSS ne sont pas affichés dans le navigateur, mais ils peuvent vous aider à documenter votre code source. Un commentaire CSS est placé à l’intérieur de l’élément <style> et il commence par /* et termine par */ 03/09/2022 Helali Miloud 13 VI. Couleurs CSS : Les couleurs sont spécifiées à l’aide de noms de couleurs prédéfinis, ou RGB, HEX, HSL, RGBA, HSLA valeu 1. Noms de couleur CSS : Dans CSS, une couleur peut être spécifiée en utilisant un nom de couleur prédéfini :  Vous pouvez définir la couleur du texte et d’arrière-plan pour les éléments HTML :  Vous pouvez définir la couleur des bordures : Les codes de couleur « Tomato »: Les codes de couleur « Tomate », avec 50% transparent: 03/09/2022 Helali Miloud 14 03/09/2022 Helali Miloud 15 4. Opacité : La propriété CSS opacity définit l’opacité de l’élément entier (la couleur d’arrière-plan et le texte seront opaques/transparents). La valeur de la propriété opacity doit être un nombre compris entre 0,0 (entièrement transparent) et 1,0 (entièrement opaque). Exemple : VII. Arrière-plans CSS : Les propriétés de fond CSS sont utilisées pour ajouter des effets de fond pour les éléments. 1. Couleur de fond CSS : La propriété background-color spécifie la couleur de fond d’un élément. Exemple : Les éléments : <h1>, <p>, et <div> auront différentes couleurs de fond: La propriété opacity spécifie l’opacité/transparence d’un élément HTML qui peut prendre une valeur allant de 0,0 à 1,0. 03/09/2022 Helali Miloud 16 2. Image de fond CSS : La propriété background-image spécifie une image à utiliser comme arrière-plan d’un élément. L’image de fond peut également être définie pour des éléments spécifiques, comme le <p> élément: 3. Répétition d’arrière-plan CSS : Par défaut, la propriété background-image répète une image à la fois horizontalement et verticalement. Pour répéter une image que horizontalement, on écrit :background-repeat: repeat-x; Et pour répéter une image verticalement, définissez background-repeat: repeat-y; Et pour afficher l’image de fond qu’une seule fois, on écrit :background-repeat: no-repeat; 03/09/2022 Helali Miloud 17 La uploads/s3/ cours-css3-pour-3-sti-partie-1.pdf