comment utiliser les CSS
- Syntaxe CSS de base
选择器 {
声明1;
声明2;
...
}<html>
<head>
<style>
p {
color: blue;
font-size: 20px;
}
</style>
</head>
<body>
<p>这是一个段落。</p>
</body>
</html>p pour spécifier le style de tous les éléments <p>. L'instruction color est utilisée pour spécifier la couleur du texte en bleu, et l'instruction font-size est utilisée pour spécifier la taille du texte en 20 pixels. p选择器，用于指定所有<p>元素的样式。color声明用于指定文字颜色为蓝色，font-size声明用于指定文字大小为20像素。
- CSS选择器
- 标签选择器：指定所有具有相同标签名的元素，如
p表示所有<p>元素。 - ID选择器：指定具有特定ID的元素，如
#my-id指定ID为my-id的元素。 - 类选择器：指定具有特定类的元素，如
.my-class指定具有my-class类的所有元素。 - 组合选择器：将不同类型的选择器组合在一起，以缩小要设置样式的元素范围。
- 后代选择器：选择所有指定元素的后代元素，如
div p将选择所有在<div>元素中的<p>元素。 - 子元素选择器：选择指定元素的直接子元素，如
div > p将选择所有是<div>元素的直接子元素的<p>元素。
my-div的<div>元素中的所有段落元素：
#my-div p {
color: red;
}- CSS Box模型
- 内容区域：包含元素的实际内容，如文字、图片、视频等。
- 内边距区域：位于内容区域外部，用于控制内容与边框之间的间距。
- 边框区域：包围元素的边框，定义元素的尺寸和形状。
- 外边距区域：位于边框区域外部，用于控制相邻元素之间的间距。
+----------------------------------+ | Margin | | +------------------------+ | | | Border | | | | +---------------+ | | | | | Padding | | | | | | | | | | | +---------------+ | | | | Content | | | +------------------------+ | | Margin | +----------------------------------+
选择器 {
margin: 上 右 下 左;
border: 厚度 样式 颜色;
padding: 上 右 下 左;
width: 宽度;
height: 高度;
}.box {
margin: 10px;
border: 2px solid red;
padding: 20px;
background-color: blue;
}- CSS布局
- 流式布局：使用相对尺寸和百分比布局来调整页面布局大小和内容。例如，
<div>元素的宽度设置为50%可以使其跨越屏幕的一半。 - 固定布局：使用固定尺寸和绝对定位来定位页面上的元素。例如，使用
position: absolute; left: 0; top: 0;可以将元素固定在左上角。 - 弹性布局：使用弹性盒子模型来定义元素之间的关系，可以使用属性如flex-direction，justify-content和align-items来控制元素的对齐和排列方式。
- 栅格布局：使用栅格系统来定位和对齐内容。例如，使用Bootstrap框架可以轻松地构建响应式网格布局。
.row {
display: flex;
flex-wrap: wrap;
}
.col-2 {
width: calc(50% - 20px);
margin-right: 20px;
}
.col-3 {
width: calc(33.33% - 20px);
margin-right: 20px;
}- CSS动画
- transition：用于在元素状态之间设置过渡效果，例如鼠标滑过时改变颜色。例如，使用
transition: background-color 0.5s ease;可以使背景颜色在0.5秒内平滑地过渡。 - transform：用于转换元素的形状、大小和位置。例如，使用
transform: rotate(90deg);Sélecteurs CSS
- Sélecteur de balise : spécifiez tous les éléments avec le même nom de balise, tel que
p signifie que tous les <p>Element . 🎜🎜Sélecteur d'ID : spécifiez un élément avec un ID spécifique, tel que #my-id pour spécifier un élément avec un ID de my-id. 🎜🎜Sélecteur de classe : spécifiez les éléments avec une classe spécifique, telle que .my-class pour spécifier tous les éléments avec la classe my-class. 🎜🎜Combiner les sélecteurs : combinez différents types de sélecteurs pour affiner les éléments à styliser. 🎜🎜Sélecteur descendant : sélectionne tous les éléments descendants de l'élément spécifié. Par exemple, div p sélectionnera tous les <p><div>. élément /code> élément. 🎜🎜Sélecteur d'élément enfant : sélectionne les éléments enfants directs de l'élément spécifié. Par exemple, div > p sélectionnera tous les éléments qui sont des éléments enfants directs du <code><div>. ; élément ><p>. 🎜🎜🎜Par exemple, le code CSS suivant stylise tous les éléments de paragraphe dans l'élément <div> avec l'ID my-div : 🎜@keyframes blink {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}- 🎜Modèle de boîte CSS🎜🎜🎜Le modèle de boîte CSS est un modèle utilisé pour concevoir la mise en page de pages Web. Tout élément HTML peut être considéré comme une boîte, composée d'une zone de contenu, d'une zone de remplissage, d'une zone de bordure et de marges. Composition régionale. Les différentes parties du modèle de boîte sont répertoriées ci-dessous : 🎜
- 🎜Zone de contenu : Contient le contenu réel de l'élément, tel que du texte, des images, des vidéos, etc. 🎜🎜Zone de remplissage : située à l'extérieur de la zone de contenu, utilisée pour contrôler l'espacement entre le contenu et les bordures. 🎜🎜Zone de bordure : La bordure qui entoure l'élément et définit la taille et la forme de l'élément. 🎜🎜Zone de marge : située à l'extérieur de la zone de bordure, utilisée pour contrôler l'espacement entre les éléments adjacents. 🎜🎜🎜Ce qui suit est un diagramme schématique du modèle de boîte CSS : 🎜
.blink {
animation: blink 1s infinite;
}- 🎜Mise en page CSS🎜🎜🎜La mise en page CSS fait référence au contrôle de la position et de la taille des éléments de la page Web via CSS pour obtenir l'effet de mise en page de page Web souhaité. Vous trouverez ci-dessous quelques techniques de mise en page CSS couramment utilisées : 🎜
- 🎜Mise en page fluide : utilisez des tailles relatives et une mise en page en pourcentage pour ajuster la taille et le contenu de la mise en page. Par exemple, définir la largeur de l'élément
<div> à 50 % le ferait s'étendre sur la moitié de l'écran. 🎜🎜Mise en page fixe : positionnez les éléments sur la page en utilisant des tailles fixes et un positionnement absolu. Par exemple, utilisez position: Absolute; left: 0; top: 0; pour positionner un élément dans le coin supérieur gauche. 🎜🎜Mise en page flexible : utilisez le modèle de boîte flexible pour définir la relation entre les éléments. Vous pouvez utiliser des attributs tels que flex-direction, justification-content et align-items pour contrôler l'alignement et la disposition des éléments. 🎜🎜Mise en page en grille : utilisez un système de grille pour positionner et aligner le contenu. Par exemple, des mises en page de grille réactives peuvent être facilement créées à l'aide du framework Bootstrap. 🎜🎜🎜Voici un exemple de code de mise en page CSS qui utilise la disposition en grille pour diviser plusieurs éléments en deux et trois colonnes : 🎜rrreee- 🎜Animation CSS 🎜🎜🎜L'animation CSS est réalisée via des éléments HTML Appliquer des effets d'animation pour modifier l'apparence et le comportement des éléments. Voici quelques propriétés d'animation CSS couramment utilisées : 🎜
- 🎜transition : utilisée pour définir les effets de transition entre les états des éléments, comme le changement de couleur lorsque la souris survole. Par exemple, en utilisant
transition: background-color 0.5s easy; peut effectuer une transition fluide de la couleur d'arrière-plan en 0,5 seconde. 🎜🎜transform : utilisé pour transformer la forme, la taille et la position des éléments. Par exemple, utilisez transform: rotate(90deg); pour faire pivoter un élément de 90 degrés. 🎜🎜animation : utilisé pour créer des effets d'animation CSS personnalisés. Par exemple, une simple animation de clignotement peut être créée en utilisant le code suivant : 🎜🎜rrreee🎜 En utilisant l'exemple ci-dessus, l'animation de clignotement ci-dessus peut être appliquée à un élément : 🎜.blink {
animation: blink 1s infinite;
}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!
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
Qu'est-ce que l'utilisation Effecte? Comment l'utilisez-vous pour effectuer des effets secondaires?
Mar 19, 2025 pm 03:58 PM
L'article traite de l'utilisation Effecte dans React, un crochet pour gérer les effets secondaires comme la récupération des données et la manipulation DOM dans les composants fonctionnels. Il explique l'utilisation, les effets secondaires courants et le nettoyage pour éviter des problèmes comme les fuites de mémoire.
Expliquez le concept de chargement paresseux.
Mar 13, 2025 pm 07:47 PM
Le chargement paresseux retarde le chargement du contenu jusqu'à ce qu'il soit nécessaire, améliorant les performances du Web et l'expérience utilisateur en réduisant les temps de chargement initiaux et la charge du serveur.
Quelles sont les fonctions d'ordre supérieur en JavaScript, et comment peuvent-ils être utilisés pour écrire du code plus concis et réutilisable?
Mar 18, 2025 pm 01:44 PM
Les fonctions d'ordre supérieur dans JavaScript améliorent la concision du code, la réutilisabilité, la modularité et les performances par abstraction, modèles communs et techniques d'optimisation.
Comment fonctionne le currying en JavaScript et quels sont ses avantages?
Mar 18, 2025 pm 01:45 PM
L'article traite du curry dans JavaScript, une technique transformant les fonctions mulguments en séquences de fonctions à argument unique. Il explore la mise en œuvre du currying, des avantages tels que des applications partielles et des utilisations pratiques, améliorant le code
Comment fonctionne l'algorithme de réconciliation React?
Mar 18, 2025 pm 01:58 PM
L'article explique l'algorithme de réconciliation de React, qui met à jour efficacement le DOM en comparant les arbres DOM virtuels. Il traite des avantages de la performance, des techniques d'optimisation et des impacts sur l'expérience utilisateur. Compte de charge: 159
Qu'est-ce que UseContext? Comment l'utilisez-vous pour partager l'état entre les composants?
Mar 19, 2025 pm 03:59 PM
L'article explique UseContext dans React, qui simplifie la gestion de l'État en évitant le forage des accessoires. Il traite des avantages tels que les améliorations centralisées de l'État et des performances grâce à des redevances réduites.
Comment empêchez-vous le comportement par défaut dans les gestionnaires d'événements?
Mar 19, 2025 pm 04:10 PM
L'article discute de la prévention des comportements par défaut dans les gestionnaires d'événements à l'aide de la méthode empêchée dedEfault (), de ses avantages tels que une expérience utilisateur améliorée et des problèmes potentiels tels que les problèmes d'accessibilité.
Quels sont les avantages et les inconvénients des composants contrôlés et incontrôlés?
Mar 19, 2025 pm 04:16 PM
L'article traite des avantages et des inconvénients des composants contrôlés et incontrôlés dans la réaction, en se concentrant sur des aspects tels que la prévisibilité, la performance et les cas d'utilisation. Il conseille les facteurs à considérer lors du choix entre eux.
