1. Introduction de base au CSS
La feuille de style en cascade (feuille de style en cascade) est appelée « CSS », généralement également appelée « feuille de style (feuille de style) », qui est utilisée pour styliser le Web pages conçues. Par exemple, si vous souhaitez que le mot du lien soit bleu lorsqu'il n'est pas cliqué, puis devienne rouge et souligné lorsque la souris est déplacée dessus, il s'agit d'un style. En configurant une feuille de style, vous pouvez contrôler uniformément les attributs d'affichage de chaque marque en HTML. Les feuilles de style en cascade permettent aux utilisateurs de contrôler plus efficacement l'apparence des pages Web. À l'aide de feuilles de style en cascade, vous pouvez étendre votre capacité à spécifier avec précision la position et l'apparence des éléments de page Web et à créer des effets spéciaux.
CSS est l'abréviation de l'anglais CascadingStyle Sheets (Cascading Style Sheets). C'est un langage informatique utilisé pour exprimer des styles de fichiers tels que HTML ou XML. La dernière version de CSS est CSS3, un langage de conception de style capable de véritablement séparer les performances et le contenu des pages Web. Par rapport aux performances du HTML traditionnel, CSS peut effectuer un contrôle précis au niveau des pixels sur la position et la disposition des objets dans les pages Web, prend en charge presque toutes les tailles et styles de police, a la capacité de modifier les objets de page Web et les styles de modèle et peut effectuer interactions préliminaires. Le design est actuellement le meilleur langage de conception expressif basé sur l’affichage de texte. CSS peut simplifier ou optimiser les méthodes d'écriture en fonction de la capacité de compréhension des différents utilisateurs, ce qui le rend hautement lisible pour tous les types de personnes.
2. Comment utiliser CSS
Il existe trois façons d'utiliser les feuilles de style sur les pages du site :
Styles en ligne - utilisés dans le "style" des éléments HTML attribut
Feuille de style interne - utilisez l'élément <style> dans la zone <head> du document HTML pour inclure CSS
Références externes - utilisation de fichiers CSS externes
Chaque méthode a ses avantages et ses inconvénients :
Lorsque vous souhaitez appliquer le même style de manière cohérente à tout ou partie du pages de votre site, vous pouvez utiliser une feuille de style de référence externe. Définir des styles dans une ou plusieurs feuilles de style externes et les lier à toutes les pages Web garantit une apparence cohérente sur toutes les pages Web. Si les gens décident de changer le style, ils n'ont qu'à le modifier une seule fois dans la feuille de style externe, et le changement sera reflété sur toutes les pages liées à la feuille de style. Habituellement, les feuilles de style externes ont .css comme extension de fichier, comme le style commun Common.css dans un système de communiqués de presse. Ensuite, liez-le dans la page qui nécessite ce style, par exemple :
<link href="/css/Common.css" rel="stylesheet" type="text/css"/ >
Lorsque les gens souhaitent simplement définir le style de la page Web actuelle, des feuilles de style internes peuvent être utilisées. Une feuille de style interne est une feuille de style en cascade « intégrée » dans la balise <HEAD> Les styles des feuilles de style intégrées ne peuvent être utilisés que sur la même page Web. Tels que :
<style type="text/css">
<!-- /* Inclure le style déclaré dans un commentaire HTML, ce qui peut résoudre le problème des anciens navigateurs ne reconnaissant pas le style*/ -->
body {background:grey ;}
</style>
Utilisez des styles en ligne pour appliquer des attributs de feuille de style en cascade aux éléments de la page Web. Par exemple :
<pstyle="@importurl('style3.css');">Document CSS</p>
<!-- Impossible d'utiliser @import dans l'attribut de style -->
Si la page Web est liée à une feuille de style externe, les styles en ligne ou internes créés pour la page Web étendront ou remplaceront les attributs spécifiés dans la feuille de style externe. feuille de style.
Pour utiliser les styles d'une feuille de style externe sur une page Web, liez la page Web à la feuille de style à l'aide de la commande Lien vers la feuille de style du menu Format. Vous pouvez lier une ou plusieurs feuilles de style à la page Web actuelle en mode d'affichage de page Web, à une page Web sélectionnée dans une liste de dossiers ou à toutes les pages Web du site.
La zone Style répertorie les balises HTML standards, telles que le titre 1, ainsi que les sélecteurs de classe ou d'ID contenus dans les feuilles de style intégrées ou les feuilles de style externes liées à la page Web. Pour appliquer un style à un élément de page Web, sélectionnez le style et cliquez sur le style ou le sélecteur dans la zone Style.
Dans Microsoft FrontPage 2000, certaines fonctionnalités de formatage sont automatiquement appliquées en tant que styles en ligne. Par exemple : Si vous utilisez la commande Bordures et ombres (dans le menu Format) pour appliquer un cadre autour d'un paragraphe normal, FrontPage écrit les informations de mise en forme en tant que propriétés de style en ligne de la marque de paragraphe (par exemple : <pstyle=" border-style : solide">). Cependant, l’application de certaines propriétés nécessite l’utilisation de CSS, et d’autres nécessite l’utilisation de HTML. Si l'on souhaite uniquement appliquer des styles en ligne à l'aide de CSS, il peut utiliser le bouton Styles (situé dans la boîte de dialogue Propriétés de l'élément Web) pour appliquer des sélecteurs de classe ou d'ID ou des styles en ligne.
Exemple 1
L'attribut Background-color définit la couleur d'arrière-plan d'un élément :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body style="background-color: green;">
<h2 style="background-color: red;">标题</h2>
<p style="background-color: blue;">内容</p>
</body>
</html>
Exemple 2
Utiliser l'attribut font-family (police), color (color) et font-size (taille de la police) ) pour définir le style de police :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<h1 style="font-family:verdana;">文字的标题</h1>
<p style="font-family:arial;color:red;font-size:20px;">下面是一句话。</p>
</body>
</html>
Exemple 3
Utilisez l'attribut text-align (alignement du texte) pour spécifier le texte horizontal et vertical Alignement :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<h1 style="text-align:center;">居中对齐的标题</h1>
<p>这是一个段落。</p>
</body>
</html>
section suivante