Parlons de CSS sauf du dernier style

<p>CSS est un langage utilisé pour décrire le style des pages Web. Il peut styliser divers éléments des pages Web pour embellir et améliorer les pages Web. Le dernier en CSS fait référence au dernier style de la feuille de style CSS, mais en fait, il y a beaucoup de choses qui méritent d'être explorées en CSS en plus du dernier.

<p>1. Sélecteur CSS

<p>Le sélecteur CSS est utilisé pour sélectionner des éléments HTML. Ils effectuent des sélections basées sur les attributs, les relations et les positions des éléments. Les sélecteurs couramment utilisés sont :

1. Sélecteur de balises

<p>Le sélecteur de balises est le sélecteur le plus couramment utilisé, qui définit les styles en sélectionnant le nom de balise d'un élément HTML. Par exemple :

h1 {
    color: red;
    font-size: 24px;
}

<p>Le code ci-dessus utilise le sélecteur de balises pour sélectionner tous les éléments <h1>. <h1>元素。

2. 类选择器（Class Selector）

<p>类选择器通过设置class属性来选择HTML元素，并对其进行样式设置。例如：

.text-red {
    color: red;
}

<p>然后在HTML中使用该类：

<p class="text-red">这里的文字是红色的。</p>

<p>类选择器可以用于同一页面中进行风格的统一设置。

3. ID选择器（ID Selector）

<p>ID选择器选择的是具有唯一ID属性的HTML元素，并设置其样式。例如：

#my-title {
    font-size: 36px;
}

<p>在HTML中使用该ID：

<h1 id="my-title">这是我的标题</h1>

<p>需要注意，一个HTML文档中只能有一个相同的ID值。

4. 属性选择器（Attribute Selector）

<p>属性选择器根据HTML元素的属性来进行选择，并设置样式。例如：

input[type="submit"] {
    background-color: blue;
}

<p>上述代码将对所有type属性为submit的<input>元素进行蓝色的背景设置。

5. 后代选择器（Descendant Selector）

<p>后代选择器是选择某个HTML元素的后代元素，即其子元素、孙子元素、曾孙子元素等。例如：

.container .title {
    font-size: 24px;
}

<p>上述代码表示选择class为container的元素中的所有class为title的后代元素，并将它们的字体大小设为24像素。

6. 伪类选择器（Pseudo Class Selector）

<p>伪类选择器是一个定义在选择器冒号后的关键词，用于选择特定状态的元素。例如:

a:hover {
   color: red;
}

<p>上述代码表示将链接在鼠标悬停时的颜色设置为红色。

<p>二、CSS盒子模型

<p>CSS盒子模型是指一个HTML元素的每个部分都是一个“盒子”，包括内容区域、内边距区域、边框区域和外边距区域。这个模型对于理解HTML元素的总体结构和样式设置非常重要。

<p>三、CSS单位

<p>CSS中有各种不同的单位，可以用来表示不同的样式属性，从而实现各种效果。常见的单位有：

1. 像素（Pixel）

<p>像素是一个基本的长度单位，通常被用于规定屏幕上的元素的大小。例如：

p {
    font-size: 14px;
}

2. 百分比（Percentage）

<p>百分比是相对于父元素的长度单位。例如：

.container {
    width: 80%;
}

<p>上述代码表示将.container的宽度设置为其父元素宽度的80%。

3. em和rem

<p>em和rem是相对于当前元素的字体大小的长度单位。em是相对于自身元素的字体大小，而rem是相对于根元素（通常为HTML元素）的字体大小。例如：

h1 {
    font-size: 2.5em;
}

.container {
    width: 40rem;
}

<p>上述代码中，h1元素的字体大小为自身元素字体大小的2.5倍，而.container元素的宽度为根元素字体大小的40倍。

4. 视口单位

<p>视口单位是相对于视口尺寸的长度单位，通常用于响应式设计。常见的视口单位有：

• vw/vh：相对于视口宽度和高度的1%；
• vmin/vmax：相对于视口宽度和高度中较小或较大的值的1%。

<p>例如：

.container {
    width: 80vw;
    height: 50vmin;
}

<p>上述代码中，.container元素的宽度为视口宽度的80%，高度为视口宽度和高度中较小的值的50%。

<p>四、CSS属性

<p>CSS属性是用来设置元素样式的各种属性。其中一些常见的属性包括：

1. color

<p>color属性用于设置文本颜色。

h1 {
    color: red;
}

<p>上述代码将所有的<h1>元素的文本颜色设置为红色。

2. background-color

<p>background-color属性用于设置元素的背景色。

.container {
    background-color: #f8f8f8;
}

<p>上述代码将.container元素的背景色设置为浅灰色。

3. border

<p>border属性用于设置元素的边框。

.container {
    border: 2px solid black;
}

<p>上述代码将.container元素的边框宽度设置为2像素，颜色为黑色，边框样式为实线。

4. font-size

<p>font-size属性用于设置字体大小。

p {
    font-size: 16px;
}

<p>上述代码将所有的<p>

Sélecteur de classe
5. Le sélecteur de classe sélectionne les éléments HTML et les stylise en définissant l'attribut de classe. Par exemple :

h1 {
    text-align: center;
}

<p> Utilisez ensuite cette classe en HTML :
rrreee🎜Le sélecteur de classe peut être utilisé pour définir uniformément le style dans la même page. 🎜
🎜Sélecteur d'ID🎜🎜🎜Le sélecteur d'ID sélectionne les éléments HTML avec des attributs d'ID uniques et définit leurs styles. Par exemple : 🎜rrreee🎜Utilisez cet identifiant en HTML : 🎜rrreee🎜 Veuillez noter qu'il ne peut y avoir qu'une seule même valeur d'ID dans un document HTML. 🎜
🎜Sélecteur d'attribut 🎜🎜🎜Le sélecteur d'attribut sélectionne et définit les styles en fonction des attributs des éléments HTML. Par exemple : 🎜rrreee🎜Le code ci-dessus définira un arrière-plan bleu pour tous les éléments <input> dont l'attribut type est submit. 🎜🎜🎜Sélecteur descendant (Sélecteur descendant)🎜🎜🎜Le sélecteur descendant sélectionne les éléments descendants d'un élément HTML, c'est-à-dire ses éléments enfants, ses éléments petits-enfants, ses éléments arrière-petits-enfants, etc. Par exemple : 🎜rrreee🎜Le code ci-dessus signifie sélectionner tous les éléments descendants de la classe title dans l'élément avec la classe container et définir leur taille de police sur 24 pixels. 🎜
🎜Pseudo Class Selector 🎜🎜🎜Pseudo Class Selector est un mot-clé défini après les deux points du sélecteur, utilisé pour sélectionner des éléments dans un état spécifique. Par exemple : 🎜rrreee🎜Le code ci-dessus signifie définir la couleur du lien sur rouge lorsque la souris survole. 🎜🎜2. Modèle de boîte CSS🎜🎜Le modèle de boîte CSS signifie que chaque partie d'un élément HTML est une "boîte", comprenant la zone de contenu, la zone de remplissage, la zone de bordure et la zone de marge. Ce modèle est important pour comprendre la structure globale et le style des éléments HTML. 🎜🎜3. Unités CSS 🎜🎜Il existe différentes unités en CSS, qui peuvent être utilisées pour représenter différents attributs de style afin d'obtenir divers effets. Les unités courantes sont : 🎜🎜🎜Pixel (Pixel) 🎜🎜🎜Le pixel est une unité de longueur de base et est généralement utilisé pour spécifier la taille des éléments à l'écran. Par exemple : 🎜rrreee
🎜Percentage (Pourcentage) 🎜🎜🎜Percentage est l'unité de longueur relative à l'élément parent. Par exemple : 🎜rrreee🎜Le code ci-dessus signifie définir la largeur de .container à 80 % de la largeur de son élément parent. 🎜
🎜em et rem🎜🎜🎜em et rem sont des unités de longueur relatives à la taille de la police de l'élément actuel. em est la taille de la police par rapport à son propre élément, tandis que rem est la taille de la police par rapport à l'élément racine (généralement un élément HTML). Par exemple : 🎜rrreee🎜Dans le code ci-dessus, la taille de la police de l'élément h1 est 2,5 fois la taille de la police de son propre élément et la largeur du .container L'élément est 40 fois la taille de police de l'élément racine. 🎜
🎜Unités de fenêtre🎜🎜🎜Les unités de fenêtre sont des unités de longueur par rapport à la taille de la fenêtre, souvent utilisées dans la conception réactive. Les unités de fenêtre courantes sont : 🎜

🎜vw/vh : 1 % par rapport à la largeur et à la hauteur de la fenêtre ; 🎜🎜vmin/vmax : 1 par rapport à la valeur plus petite ou plus grande de la largeur et de la hauteur de la fenêtre. 🎜

🎜Par exemple : 🎜rrreee🎜Dans le code ci-dessus, la largeur de l'élément .container est de 80 % de la largeur de la fenêtre d'affichage et la hauteur est de 50 % de la plus petite des valeurs largeur et hauteur de la fenêtre. 🎜🎜4. Propriétés CSS 🎜🎜Les propriétés CSS sont diverses propriétés utilisées pour définir le style des éléments. Certaines des propriétés courantes incluent : 🎜🎜🎜color🎜🎜🎜La propriété color est utilisée pour définir la couleur du texte. 🎜rrreee🎜Le code ci-dessus définit la couleur du texte de tous les éléments <h1> sur rouge. 🎜

🎜background-color🎜🎜🎜La propriété background-color est utilisée pour définir la couleur d'arrière-plan de l'élément. 🎜rrreee🎜Le code ci-dessus définit la couleur d'arrière-plan de l'élément .container sur gris clair. 🎜
🎜border🎜🎜🎜border L'attribut est utilisé pour définir la bordure d'un élément. 🎜rrreee🎜Le code ci-dessus définit la largeur de la bordure de l'élément .container sur 2 pixels, la couleur sur noir et le style de bordure sur ligne continue. 🎜
🎜font-size🎜🎜🎜font-size l'attribut est utilisé pour définir la taille de la police. 🎜rrreee🎜Le code ci-dessus définit la taille de la police de tous les éléments <p> à 16 pixels. La propriété 🎜🎜🎜text-align🎜🎜🎜text-align est utilisée pour définir l'alignement du texte. 🎜

h1 {
    text-align: center;
}

<p>上述代码将所有的<h1>元素的文本居中对齐。
<p>五、CSS框架
<p>CSS框架是指提供一组预定义的CSS样式和JavaScript交互，可以快速搭建网页的开发工具。常见的CSS框架有Bootstrap、Foundation、Materialize等。它们提供了大量的预设样式和交互组件，可以极大地加速开发的进度和提升用户体验。
<p>以上就是CSS的一些基本内容和重要性，虽然CSS的最后一个很重要，但我们也要关注其它内容，以了解并掌握CSS的全部知识，从而开发出更为优秀的网页。

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!