Comment utiliser CSS dans la conception Web et ses caractéristiques

Présentation des fonctionnalités CSS aux débutants et comment utiliser le CSS déjà défini dans les pages Web.

Le W3C (The World Wide Web Consortium) divise le HTML dynamique (Dynamic HTML) en trois parties à implémenter : le langage de script (incluant JavaScript, Vbscript, etc.), les navigateurs prenant en charge les effets dynamiques (notamment Internet Explorer, Netscape Navigator, etc.) et les feuilles de style CSS.

　Caractéristiques des feuilles de style en cascade

Sans oublier que les pages web du passé manquaient de dynamique, même dans la mise en page de le contenu du Web. Il existe de nombreuses difficultés si vous n'êtes pas un professionnel ou une personne particulièrement patiente, il est difficile de faire en sorte que la page Web affiche des informations selon vos propres idées et votre créativité. Même ceux qui maîtrisent l'essence du langage HTML doivent passer de nombreux tests avant de pouvoir maîtriser la mise en page de ces informations. Le processus est très long et pénible.

La feuille de style est née de cette exigence. La première chose à faire est de positionner avec précision les éléments sur la page Web, permettant au web designer de la contrôler facilement comme un réalisateur. Les acteurs composés de mots et d'images se comportent bien selon le scénario sur la scène de la page Web.

Deuxièmement, il sépare la structure du contenu et le contrôle du format sur la page Web. Ce que les téléspectateurs veulent voir, c'est la structure du contenu de la page Web, et afin de permettre aux téléspectateurs de mieux voir ces informations, le contrôle du format doit être utilisé pour les aider. Dans le passé, la répartition des deux sur la page Web était échelonnée et combinée, ce qui était très peu pratique à visualiser et à modifier. Désormais, séparer les deux facilitera grandement les concepteurs de sites Web. La structure du contenu et le contrôle du format sont séparés, de sorte qu'une page Web peut être composée uniquement de contenu, et le contrôle du format de toutes les pages Web est dirigé vers un certain fichier de feuille de style CSS. Ceci est bénéfique à deux égards :

Premièrement, le code de format de la page Web est simplifié, et la feuille de style externe sera également enregistrée dans le cache par le navigateur, accélérant ainsi le processus. la vitesse de téléchargement des affichages réduit également la quantité de code à télécharger (car les formats répétés ne seront enregistrés qu'une seule fois).

Deuxièmement, vous pouvez modifier le style et les caractéristiques de l'ensemble du site en modifiant simplement le fichier de feuille de style CSS qui stocke le format du site Web. Ceci est particulièrement utile lors de la modification d'un site avec une grande taille. nombre de pages. Éviter la modification des pages Web une par une, réduisant considérablement la charge de travail des travaux répétés

　Comment ajouter des feuilles de style en cascade

Il existe quatre façons d'ajouter des feuilles de style aux pages Web :

　1 La méthode la plus simple consiste à l'ajouter directement à l'identifiant HTML (tag) :

　254c8d03e1df74a7a320500c1d7f6b9bContenu de la page Web1f4adad8210bcff33d697ff6d5b62570

Par exemple :

　3cac2f59bc727b63e722c2f22bb18792Exemple CSS6fb279ad3fd4344cbdd93aac6ad173ac

Description du code :Affichez "Exemple CSS" en bleu avec une taille de police de 10 pt. Bien qu'elle soit simple à utiliser et intuitive à afficher, cette méthode n'est pas couramment utilisée car un tel ajout ne peut pas tirer pleinement parti de la feuille de style "la structure du contenu et le contrôle du format sont enregistrés séparément".

　2. Ajoutez-le à l'identifiant des informations d'en-tête HTML ef0c2772b76bfffb9337fc47aea795ed :

Ce qui suit est une citation : 　

< head> 
　　< style type=”text/css”> 
　　< !-- 样式表的具体内容 --> 
　　< /style> 
　　< /head>

　　type=”text/css”表示样式表采用MIME类型，帮助不支持CSS的浏览器过滤掉CSS代码，避免在浏览器面前直接以源代码的方式显示我们设置的样式表。但为了保证上述情况一定不要发生，还是有必要在样式表里加上注释标识符“3715a918f7df294094b5b00e68d9f0a0”。

　　3、链接样式表

　　同样是添加在HTML的头信息标识符ef0c2772b76bfffb9337fc47aea795ed里:

以下是引用片段：　　

< head> 
　　< link rel=”stylesheet” href=”*.css” type=”text/css” media=”screen”> 
　　< /head>

　　*.css是单独保存的样式表文件，其中不能包含6c1d9d1c5e7690ed0ad94b24a12b6eb7标识符，并且只能以css为后缀。

　　Media是可选的属性，表示使用样式表的网页将用什么媒体输出。取值范围:

　　·Screen(默认):输出到电脑屏幕

　　·Print:输出到打印机

　　·TV:输出到电视机

　　·Projection:输出到投影仪

　　·Aural:输出到扬声器

　　·Braille:输出到凸字触觉感知设备

　　·Tty:输出到电传打字机

　　·All:输出到以上所有设备

　　如果要输出到多种媒体，可以用逗号分隔取值表。

　　Rel属性表示样式表将以何种方式与HTML文档结合。取值范围:

　　·Stylesheet:指定一个外部的样式表

　　·Alternate stylesheet:指定使用一个交互样式表

　　4、联合使用样式表

　　同样是添加在HTML的头信息标识符ef0c2772b76bfffb9337fc47aea795ed里:

以下是引用片段：　　

< head> 
　　< style type=”text/css”> 
　　< !-- 
　　@import “*.css” 
　　其他样式表的声明 
　　--> 
　　< /style> 
　　< /head>

　　以@import开头的联合样式表输入方法和链接样式表的方法很相似，但联合样式表输入方式更有优势。因为联合法可以在链接外部样式表的同时，针对该网页的具体情况，做出别的网页不需要的样式规则。

　　需要注意的是:

　　·联合法输入样式表必须以@import开头。

　　·如果同时输入多个样式表有冲突的时候，将按照第一个输入的样式表对网页排版。

　　·如果输入的样式表和网页里的样式规则冲突时，使用外部的样式表。

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!