interface Web
tutoriel CSS
Lesson03_01 Qu'est-ce que CSS et comment le configurer_Tutoriel de base
Lesson03_01 Qu'est-ce que CSS et comment le configurer_Tutoriel de base
第3讲 CSS
- 何为CSS
- CSS的几种设置方式
- 样式规则选择器
- 样式规则的注释与有效范围
- 样式属性详解
什么是CSS和CSS的设置方式
什么是CSS
CSS即:Cascading Style Sheets这几个英文单词的缩写,中文为:层叠样式表.它除了可以轻松设置网页元素的显示位置和格式外,还能产生滤镜,图像淡化,网页淡入淡出的渐变效果.简而言之.CSS就是要对网页的显示效果实现与Word一样的排版控制.例如下的代码:
<body style="FONT-SIZE:20px;COLOR:bule;FONT-FAMILY:宋体;BACKGROUND-COLOR:gray;TEXT-DECORATION:underline"> </body>
即设置了一个CSS样式.
由上可知:一个HTML元素的style属性可以指定多种样式风格,每种样式 风格的名称和它的设置值之间用冒号来分开,每种样式风格之间用分号来分开.各种"样式风格名称"被称之为"CSS属性",样式风格的"设置值"被称为"CSS属性值".这种设置网页元素的显示效果的方式就是CSS.
CSS的设置方式
- 内联样式表(inline style sheets)
例如：
<body style="FONT-SIZE:20px;COLOR:bule;FONT-FAMILY:宋体;BACKGROUND-COLOR:gray;TEXT-DECORATION:underline"> </body>在使用内联样式表时HTML4.01标准建议用户在网页的标签之间增加一个标签,
如下:
使用这种方法有两点不足:
1、如果要将同样的样式风格设置到所有的段落上，则要对每一个
标签进行重复的设置。
2、一个网页可以在多种介质或媒体上输出，使用内联样式表设置的样式会在所有的媒体上输出时都会起作用，而没法为不同的媒体指定不同的样式表。
- 嵌入样式表(Embedded style sheets)
media说明这个样式在什么介质上显示
是为了那些不支持CSS的浏览器而写的
在之间的样式规则定义语句放在一个单独的外部文件中，这个外部文件就是外部样式表文件，其扩展名这.css。一个外部样式表文件可以通过HTTP的标签连接到HTML文档中。
例：
| 先建一个test.css文件，代码如下： P{ "FONT-SIZE:20px;COLOR:bule;FONT-FAMILY:宋体;BACKGROUND-COLOR:gray;TEXT-DECORATION:underline" } |
| 再写一个要使用该样式表的文件，设他俩在同一文件夹下： type和media是可选的,rel和href是必须的 |
- Feuilles de style importées
Exemple :
|
注：所有的@import部分要放在前面 |
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Sujets chauds
Demystifier les lecteurs d'écran: formulaires accessibles et meilleures pratiques
Mar 08, 2025 am 09:45 AM
Ceci est le 3ème article d'une petite série que nous avons faite sur l'accessibilité. Si vous avez manqué le deuxième article, consultez "Gestion de la mise au point des utilisateurs avec: Focus-visible". Dans
Créez un formulaire de contact JavaScript avec le cadre Smart Forms
Mar 07, 2025 am 11:33 AM
Ce tutoriel montre la création de formulaires JavaScript professionnels à l'aide du cadre Smart Forms (Remarque: non plus disponible). Bien que le cadre lui-même ne soit pas disponible, les principes et techniques restent pertinents pour d'autres constructeurs de formulaires.
Ajout d'ombres de boîte aux blocs et éléments WordPress
Mar 09, 2025 pm 12:53 PM
Le CSS Box-Shadow et les propriétés de contour ont gagné le thème. Laissez regarder quelques exemples de la façon dont cela fonctionne dans des thèmes réels et des options que nous devons appliquer ces styles aux blocs et éléments WordPress.
Travailler avec GraphQL Caching
Mar 19, 2025 am 09:36 AM
Si vous avez récemment commencé à travailler avec GraphQL ou examiné ses avantages et ses inconvénients, vous avez sans aucun doute entendu des choses comme "GraphQL ne prend pas en charge la mise en cache" ou
Faire votre première transition Svelte personnalisée
Mar 15, 2025 am 11:08 AM
L'API de transition Svelte fournit un moyen d'animer les composants lorsqu'ils entrent ou quittent le document, y compris les transitions Svelte personnalisées.
Barbars CSS personnalisés chics et cool: une vitrine
Mar 10, 2025 am 11:37 AM
Dans cet article, nous plongerons dans le monde des barres de défilement. Je sais, ça ne semble pas trop glamour, mais croyez-moi, une page bien conçue va de pair
Show, ne dit pas
Mar 16, 2025 am 11:49 AM
Combien de temps passez-vous à concevoir la présentation de contenu pour vos sites Web? Lorsque vous écrivez un nouveau blog ou créez une nouvelle page, pensez-vous à
Que diable sont les commandes NPM?
Mar 15, 2025 am 11:36 AM
Les commandes NPM exécutent diverses tâches pour vous, soit en tant que processus unique ou en cours d'exécution pour des choses comme le démarrage d'un serveur ou la compilation de code.
