Maison >interface Web >tutoriel CSS >CSS : sélecteurs et propriétés
Dans cette conférence, nous plongerons dans les éléments constitutifs de CSS : les sélecteurs et les propriétés. Ce sont des concepts essentiels qui vous permettent de cibler des éléments spécifiques sur votre page Web et de les styliser efficacement.
Les sélecteurs CSS sont des modèles utilisés pour sélectionner les éléments HTML que vous souhaitez styliser. Différents types de sélecteurs vous permettent d'appliquer des styles à divers éléments en fonction de leur balise, classe, ID, attributs, etc.
Sélecteur d'élément (type) :
p { color: green; }
Cela changera la couleur de tous les e388a4556c0f65e1904146cc1a846bee éléments au vert.
Sélecteur de classe :
.highlight { background-color: yellow; }
Dans votre HTML, tout élément avec class="highlight" aura un fond jaune.
<p class="highlight">This is highlighted text.</p>
Sélecteur d'ID :
#header { font-size: 24px; }
Seul l'élément avec id="header" aura une taille de police de 24px.
<div id="header">Welcome to My Website</div>
Sélecteur de groupe :
h1, h2, h3 { color: blue; }
Cette règle fera en sorte que tous les 4a249f0d628e2318394fd9b75b4636b1, c1a436a314ed609750bd7c7d319db4da et 684271ed9684bde649abda8831d4d355 éléments bleus.
Sélecteur descendant :
div p { font-style: italic; }
Cela rendra tous les e388a4556c0f65e1904146cc1a846bee éléments à l'intérieur d'un dc6dce4a544fdca2df29d5ac0ea9906b en italique.
<div> <p>This text is italicized because it's inside a div.</p> </div>
Les propriétés CSS définissent les aspects des éléments sélectionnés que vous souhaitez styliser. Chaque propriété est suivie d'une valeur qui spécifie le résultat souhaité.
Couleur :
h1 { color: red; }
Couleur de fond :
body { background-color: #f0f0f0; }
Taille de la police :
p { font-size: 16px; }
Marge :
.box { margin: 20px; }
Rembourrage :
.content { padding: 10px; }
Combinons ce que nous avons appris avec un exemple simple.
HTML :
8ca2b4eb17525146e680c309e9dfa6a5 4a249f0d628e2318394fd9b75b4636b1Welcome to CSS Basics473f0a7621bec819994bb5020d29372a 03c914392195facb4bb03ef129401e65This is an introduction to CSS selectors and properties.94b3e26ee717c64999d7867364b1b4a3 e388a4556c0f65e1904146cc1a846beeSelectors help you target elements, and properties allow you to style them.94b3e26ee717c64999d7867364b1b4a3 16b28748ea4df4d9c2150843fecfba68
CSS :
/* ID Selector */ #container { border: 2px solid black; padding: 10px; } /* Element Selector */ h1 { color: purple; } /* Class Selector */ .intro { background-color: lightblue; font-size: 18px; } /* Group Selector */ h1, p { font-family: Arial, sans-serif; } /* Descendant Selector */ #container p { margin-bottom: 15px; }
Dans cet exemple :
Prochaine étape : Dans la prochaine conférence, nous explorerons le Modèle de boîte CSS et découvrirons comment les marges, les bordures, le remplissage et le contenu s'assemblent pour définir la disposition de votre éléments Web. Rendez-vous là-bas !
LinkedIn- Ridoy Hasan
-
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!