Maison >interface Web >tutoriel HTML >Feuilles de style HTML
Feuilles de style HTML
- 王林original
- 2024-09-04 16:16:281291parcourir
L'article suivant fournit un aperçu des feuilles de style HTML. La feuille de style HTML en cascade est une feuille avec des règles et des propriétés qui indiquent au navigateur comment restituer le HTML en utilisant tous les styles spécifiés. CSS est la manière dont nous stylisons toutes les pages Web. CSS possède toutes les propriétés comme l'arrière-plan, les couleurs, les polices, l'espacement, les bordures, etc., que nous pouvons définir pour chaque élément des pages.
Les feuilles de style HTML sont également utilisées pour définir la mise en page de la page, comme l'endroit où l'en-tête, les pieds de page ou tout autre élément doivent être placés sur la page. CSS est toujours parlé avec HTML car les pages sans aucun style sont très pâles, sans surbrillance des titres, etc., et avec la même taille de police sur toute la page, ce qui ne donne pas du tout une bonne apparence aux utilisateurs.
Comment utiliser les feuilles de style HTML ?
Auparavant, les styles, les scripts, le HTML, tout était écrit partout sur la même page. Cela rendait les pages extrêmement longues et extrêmement difficiles à lire et à modifier. Puis vint la manière de séparer le HTML, les styles et le Javascript.
Façons d'inclure des feuilles de style HTML sur une page Web
Il existe 3 manières d'inclure les styles :
1. Style en ligne
Il s'agit d'une façon d'écrire des styles pour chaque élément du HTML lui-même à l'intérieur d'un attribut appelé style.
Cette façon de styliser n'est pas du tout recommandée car le HTML semble encombré et nous ne pouvons pas suivre l'approche « Écrire une fois, utiliser à plusieurs endroits. »
Exemple :
Code :
<h1 style=”font-size: 10px;margin-top: 10px;”>Hello World!</h1>
2. Style interne
Il s'agit d'inclure des styles dans une balise de style et de les placer dans une page Web au-dessus du HTML. Cette façon de styliser est toujours meilleure que le style en ligne, car nous pouvons regrouper des styles communs au cas où elle devrait être utilisée pour plusieurs éléments à la fois.
Il est plus facile de modifier le fichier HTML au stade du développement, et nous n'avons pas besoin d'ouvrir à chaque fois le fichier CSS correspondant et de le modifier à chaque fois.
Exemple :
Code :
<html>
<head>
<style>
container-block{
font-size: 10px;
margin-top: 10px;
}
</style>
</head>
<body>
<div class=”container-block”>Hello World!</div>
</body>
3. Style externe
C'est le moyen le plus courant et le meilleur d'avoir des styles pour une page Web. Ceci est similaire au style interne, mais la différence est que les styles sont écrits dans un fichier séparé avec l'extension .css et que la référence à celui-ci est placée dans la balise head de la page Web.
La syntaxe pour lier le fichier CSS sur la page Web est :
Syntaxe :
<link rel="stylesheet" type="text/css" href="theme.css">
Les styles doivent être inclus dans la balise head, qui se trouve au-dessus de la balise body (c'est-à-dire le contenu réel) du HTML.
Quelle est la priorité entre le style en ligne, interne et externe ?
Les styles en ligne ont plus de priorité que les styles internes, puis la dernière priorité vient pour le style externe.
En ligne>Interne>Externe
Bonnes pratiques lors de l'utilisation de CSS :
- CSS peut être séparé en plusieurs fichiers au lieu d'un seul.
- Les fichiers CSS séparés peuvent être inclus un par un dans une balise head à l'aide de balises de lien.
- Ou un fichier CSS peut avoir plusieurs instructions d'importation pour importer le reste des fichiers CSS. Cela séparera logiquement le CSS mais obtiendra finalement ; tous les styles sont rendus à partir du même fichier.
Utilisation : @import ‘./process.css’;
- Des styles peuvent être définis pour n'importe quel élément de page Web avec des sélecteurs tels que la balise HTML elle-même, les noms de classe, les identifiants et tous les noms d'attributs.
- Il existe quelques pseudo-sélecteurs disponibles comme :
- avant
- après
- énième enfant
- premier enfant
- dernier-enfant
- survoler
- visité
Ce sont essentiellement des états des éléments sélectionnés et pas vraiment les éléments exacts.
- Lorsque plusieurs fichiers CSS sont inclus dans la page, le dernier a la priorité la plus élevée et remplace les styles existants des fichiers précédents ayant le même sélecteur.
- Les feuilles de style doivent être utilisées avant le HTML lui-même afin que les styles soient appliqués pendant le chargement de la page. S'il est inclus à la fin, le HTML se chargera d'abord, puis les styles seront appliqués lentement, ce qui donnera une très mauvaise expérience à l'utilisateur.
Diverses fonctionnalités des feuilles de style HTML en cascade
Les différentes fonctionnalités sont mentionnées ci-dessous :
- CSS fournit des animations : Auparavant, javascript n'était utilisé que pour les animations. Mais le dernier CSS, c'est-à-dire CSS3, fournit des animations en utilisant les propriétés elles-mêmes.
- Préfixes du fournisseur : Avant que les navigateurs ne publient le nom de version/propriété standard pour toute nouvelle fonctionnalité, les navigateurs nous fournissent certains préfixes de fournisseur pendant un certain temps à titre expérimental. Les développeurs doivent attendre que le navigateur publie ses versions standard et, en attendant, des fonctionnalités expérimentales peuvent être utilisées avec les préfixes des fournisseurs.
- Transformations CSS : La transition est utilisée pour passer progressivement d'une valeur à une autre d'une propriété au cours d'une durée donnée.
Exemple :
Code:
-webkit-transition: width 2s, height 4s;
- CSS Transforms: Transforms in CSS allow you to translate, rotate, scale and skew elements.
Media Queries
Mobile, Desktops, iPads behave differently; however, we cannot style the pages in the same way. Previous web standards have been designed in such a way that we had different CSS for every type of device.
With the progress of web standards and the way the web is built, browsers are developed to have a single CSS that can be used for any type of device. To change the styles for devices based on width and height, media queries are used with which we can specify the min or max-width of the device and write styles within it.
Example:
Code:
@media screen and (max-width: 767px){
container{
width: 60%;
padding: 20px;
}
}
Styles are definitely a boon for the web. And as web development has increased exponentially in recent times, CSS3 has definitely gained a lot of demand to make the pages extremely interactive and intuitive.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!