Références de pages en CSS (explication détaillée)

Ce chapitre vous présente les références de pages CSS. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

css

Afin d'enrichir les styles des éléments de la page Web, et d'en rendre le contenu et le style de pages Web détachables Par ailleurs, CSS est né de cette idée. CSS est l'acronyme de Cascading Style Sheets, ce qui signifie feuilles de style en cascade. Avec CSS, la plupart des balises qui expriment les styles en HTML ne sont plus nécessaires. HTML est uniquement responsable de la structure et du contenu du document, et la présentation est entièrement laissée au CSS, ce qui rend les documents HTML plus concis.

Syntaxe de base du CSS

La méthode de définition du CSS est :

Sélecteur {attribut : valeur attribut : valeur attribut : valeur;}

selection L'attribut est le nom qui associe le style à l'élément de page et l'attribut est l'attribut de style que vous souhaitez définir. Chaque attribut a une ou plusieurs valeurs. Exemple de code :

p{ width:100px; height:100px; color:red }

Méthode d'introduction de page CSS :

1. Lien externe : lien vers la feuille de style externe dans la page via la balise link.

<link>

2. Intégré : créez une feuille de style intégrée sur la page Web via la balise de style.

<style>
    p{ width:100px; height:100px; color:red }
        ......
</style>

3. Inline : Écrivez le style directement sur l'étiquette via l'attribut style de l'étiquette.

        <p>......</p>

Paramètres de texte CSS

Styles CSS couramment utilisés pour le texte appliqué :

• color définit la couleur du texte, par exemple : color:red;

• font-size définit la taille du texte, par exemple : font-size:12px;

• font-family définit la police du texte, par exemple : font-family:'Microsoft Yahei';

• font-style définit si la police est incliné, tel que : font-style:'normal '; Définir pour ne pas s'incliner, font-style:'italic'; Définir l'inclinaison du texte

• font-weight Définir si le texte est en gras , tels que : font-weight:bold; Définir la police en gras -weight:normal Mettre en gras

• font Définir plusieurs attributs du texte en même temps. Il y a des problèmes de compatibilité dans. l'ordre d'écriture. Il est recommandé d'écrire dans l'ordre suivant : police : s'il faut mettre en gras la taille/ligne de police Police haute telle que : police : normal 12px/36px 'Microsoft Yahei';

• line-height définit la hauteur de ligne du texte, tel que : line-height:24px;

• text-decoration définit le soulignement du texte, tel que : text -decoration:none; supprime le soulignement du texte

• text-indent définit l'indentation de la première ligne du texte, Par exemple : text-indent:24px ; première ligne de texte à 24px

• text-align Définit l'alignement horizontal du texte, tel que text-align:center Définit le centrage horizontal du texte

Représentation des couleurs CSS

Il existe trois manières principales de représenter les valeurs de couleur CSS :

1. Représentation du nom de la couleur, telle que : rouge, or

2. RVB représentation, par exemple : rgb(255,0,0) représente le rouge

            3、16进制数值表示，比如：#ff0000 表示红色，这种可以简写成 #f00

css选择器

常用的选择器有如下几种：

1、标签选择器

        标签选择器，此种选择器影响范围大，建议尽量应用在层级选择器中。
举例：

*{margin:0;padding:0}
p{color:red}   

<p>....</p>   <!-- 对应以上两条样式 -->
<p>....</p>   <!-- 对应以上两条样式 -->

2、id选择器

        通过id名来选择元素，元素的id名称不能重复，所以一个样式设置项只能对应于页面上一个元素，不能复用，id名一般给程序使用，所以不推荐使用id作为选择器。

举例：

#box{color:red} 

<p>....</p>   <!-- 对应以上一条样式，其它元素不允许应用此样式 -->

3、类选择器

        通过类名来选择元素，一个类可应用于多个元素，一个元素上也可以使用多个类，应用灵活，可复用，是css中应用最多的一种选择器。

举例：

.red{color:red}
.big{font-size:20px}
.mt10{margin-top:10px} 

<p>....</p>
<h1>....</h1>
<p>....</p>

4、层级选择器

        主要应用在选择父元素下的子元素，或者子元素下面的子元素，可与标签元素结合使用，减少命名，同时也可以通过层级，防止命名冲突。

举例：

.box span{color:red}
.box .red{color:pink}
.red{color:red}

<p>
    <span>....</span>
    <a>....</a>
</p>

<h3>....</h3>

5、组选择器

        多个选择器，如果有同样的样式设置，可以使用组选择器。

举例：

.box1,.box2,.box3{width:100px;height:100px}
.box1{background:red}
.box2{background:pink}
.box2{background:gold}

<p>....</p>
<p>....</p>
<p>....</p>

6、伪类及伪元素选择器

        常用的伪类选择器有hover，表示鼠标悬浮在元素上时的状态，伪元素选择器有before和after,它们可以通过样式在元素中插入内容。

.box1:hover{color:red}
.box2:before{content:'行首文字';}
.box3:after{content:'行尾文字';}


<p>....</p>
<p>....</p>
<p>....</p>

css元素溢出

当子元素的尺寸超过父元素的尺寸时，需要设置父元素显示溢出的子元素的方式，设置的方法是通过overflow属性来设置。

Éléments de réglage du débordement :
1. valeur par défaut visible. Le contenu ne sera pas coupé et sera rendu en dehors de la zone de l'élément.
2. Le contenu masqué sera coupé et le reste du contenu sera invisible. Cet attribut a également pour fonction d'effacer les flotteurs et d'effacer l'effondrement de la marge supérieure.
3. Le contenu du défilement sera coupé, mais le navigateur affichera des barres de défilement pour afficher le contenu restant.
4. auto Si le contenu est coupé, le navigateur affichera des barres de défilement pour afficher le contenu restant.
5.herit stipule que la valeur de l'attribut overflow doit être héritée de l'élément parent.

Élément de bloc, élément en ligne, élément de bloc en ligne

L'élément est une étiquette. Il existe trois étiquettes couramment utilisées dans la mise en page, l'élément de bloc, l'élément en ligne et l'élément de bloc en ligne. Comprenez ces trois uniquement par. en utilisant les caractéristiques de ces éléments, vous pouvez mettre en page la page avec compétence.

Élément de bloc
L'élément de bloc peut également être appelé élément de ligne. Les balises couramment utilisées dans la mise en page sont : p, p, ul, li, h1~h6, dl, dt, dd. et ainsi de suite sont tous des éléments de bloc. Son comportement dans la mise en page :

• Prend en charge tous les styles

• Si la largeur n'est pas définie, la valeur par défaut est celle par défaut. la largeur est 100 % de la largeur parent

• La boîte occupe une ligne, même si la largeur est définie

Éléments en ligne
Les éléments en ligne peuvent également être appelés éléments en ligne. Les balises couramment utilisées dans la mise en page telles que : a, span, em, b, strong, i, etc. sont toutes des éléments en ligne. Leur comportement dans la mise en page. 🎜 >

Prend en charge certains styles (largeur, hauteur, marge supérieure et inférieure, le rembourrage supérieur et inférieur ne sont pas pris en charge)
La largeur et la hauteur sont déterminées par le contenu
Les cases sont placées sur une seule ligne
Le code se casse, et il y aura un espace entre les cases
Les éléments enfants sont des éléments en ligne et l'élément parent peut être utilisé. L'attribut text-align définit l'alignement horizontal des éléments enfants et la valeur de l'attribut line-height définit l'alignement vertical

Méthodes pour résoudre l'écart dans les éléments en ligne

1, Supprimez les sauts de ligne entre les éléments en ligne 2. Définissez la taille de police du parent de l'élément en ligne sur 0, et définissez la taille de police de l'élément en ligne lui-même

pour l'élément de bloc en ligne

L'élément de bloc en ligne, également appelé élément de bloc en ligne, est un nouveau type d'élément Existant. Les éléments n'entrent pas dans cette catégorie. Les éléments img et input se comportent de la même manière que cet élément, mais sont également classés dans les éléments Inline, nous pouvons utiliser l'attribut display pour convertir les éléments de bloc ou les éléments en ligne en de tels éléments. Leur comportement dans la mise en page :

Prend en charge tous les styles
Si la largeur et la hauteur ne sont pas définies, la largeur et la hauteur sont déterminées par le contenu
les boîtes sont placées sur une seule ligne
des sauts de code, la boîte produira un espacement
Les éléments enfants sont des éléments de bloc en ligne, l'élément parent peut utiliser l'attribut text-align pour définir l'alignement horizontal de l'élément enfant et la valeur de l'attribut line-height pour définir l'alignement vertical de l'élément enfant
Ces trois éléments peuvent être définis via l'attribut d'affichage Conversion mutuelle, mais dans le développement réel, les éléments de bloc sont utilisés plus souvent, nous convertissons donc souvent les éléments en ligne en éléments de bloc, et une petite quantité en blocs en ligne Quand. en utilisant des éléments en ligne, utilisez les éléments en ligne directement au lieu de transformer les éléments Block.

display属性
      display属性是用来设置元素的类型及隐藏的，常用的属性有：
        1、none 元素隐藏且不占位置
        2、block 元素以块元素显示
        3、inline 元素以内联元素显示
        4、inline-block 元素以内联块元素显示

浮动

文档流 
        文档流，是指盒子按照html标签编写的顺序依次从上到下，从左到右排列，块元素占一行，行内元素在一行之内从左到右排列，先写的先排列，后写的排在后面，每个盒子都占据自己的位置。

浮动特性

        1、浮动元素有左浮动(float:left)和右浮动(float:right)两种

        2、浮动的元素会向左或向右浮动，碰到父元素边界、浮动元素、未浮动的元素才停下来

        3、相邻浮动的块元素可以并在一行，超出父级宽度就换行

        4、浮动让行内元素或块元素自动转化为行内块元素

        5、浮动元素后面没有浮动的元素会占据浮动元素的位置，没有浮动的元素内的文字会避开浮动的元素，形成文字饶图的效果

        6、父元素内整体浮动的元素无法撑开父元素，需要清除浮动

        7、浮动元素之间没有垂直margin的合并

清除浮动

• 父级上增加属性overflow：hidden

• 在最后一个子元素的后面加一个空的p，给它样式属性 clear:both（不推荐）

• 使用成熟的清浮动样式类，clearfix

  .clearfix:after,.clearfix:before{ content: "";display: table;}
  .clearfix:after{ clear:both;}
  .clearfix{zoom:1;}

  清除浮动的使用方法：

  .con2{... overflow:hidden}
  或者
  <p></p>

定位

关于定位 
       我们可以使用css的position属性来设置元素的定位类型，postion的设置项如下：

• relative 生成相对定位元素，元素所占据的文档流的位置不变，元素本身相对文档流的位置进行偏移

• absolute 生成绝对定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于上一个设置了相对或者绝对或者固定定位的父级元素来进行定位，如果找不到，则相对于body元素进行定位。

• fixed génère un élément de positionnement fixe. L'élément est séparé du flux de documents et n'occupe pas la position du flux de documents. Il peut être compris comme flottant au-dessus du flux de documents et positionné par rapport au flux de documents. fenêtre du navigateur.

• statique Valeur par défaut, pas de positionnement, l'élément apparaît dans le flux de documents normal, ce qui équivaut à annuler l'attribut de positionnement ou à ne pas définir l'attribut de positionnement

• hérite de la valeur de l'attribut position de l'élément parent

Propriétés de l'élément positionné
Éléments de bloc à position absolue et fixe et en ligne les éléments seront automatiquement convertis en blocs en ligne Élément

Niveau d'élément positionné
L'élément positionné flotte au-dessus du flux normal du document Vous pouvez utiliser l'attribut z-index pour définir le niveau de l'élément.

Disposition de positionnement typique
1. Menu fixe en haut
2. Boîte contextuelle centrée horizontalement et verticalement
3. Barre d'outils latérale fixe
4 . Fixé en bas Bouton

attribut d'arrière-plan

explication de l'attribut
l'attribut d'arrière-plan est un attribut fréquemment utilisé et important en CSS. Il est responsable de la définition de l'arrière-plan. image pour la boîte. Quant à la couleur d'arrière-plan, background est un attribut composite, qui peut être décomposé en les éléments de configuration suivants :

• background-color définit la couleur d'arrière-plan

• background-image Définissez l'adresse de l'image d'arrière-plan

• background-repeat Définissez la manière dont l'image d'arrière-plan est carrelée à plusieurs reprises

• background-position Définit la position de l'image d'arrière-plan

• background-attachment Définit si l'image d'arrière-plan est fixe ou défile avec la barre de défilement de la page

Dans l'application réelle, nous pouvons utiliser l'attribut background pour définir ce qui précède. Rassemblez tous les éléments de configuration, et il est également recommandé de le faire, ce qui a des performances plus élevées et une meilleure compatibilité, comme : "background: #00FF00 url( bgimage.gif) pas de répétition au centre gauche fixe", ici "#00ff00" sert à définir la couleur d'arrière-plan ; "url(bgimage.gif)" sert à définir l'image d'arrière-plan ; "no-repeat" sert à définir la répétition d'arrière-plan ; "centre gauche" consiste à définir la position de l'arrière-plan ; "fixe" consiste à définir la pièce jointe de l'arrière-plan, chaque élément de paramètre est séparé par des espaces. Il est acceptable de laisser certains éléments de paramètre non écrits et il utilisera la valeur par défaut.

Exemple :

Les exemples suivants utilisent l'image suivante comme image d'arrière-plan :

1. "background:url(bg.jpg)", une adresse d'image est définie par défaut, et l'image remplira la boîte en commençant par le coin supérieur gauche de la boîte.

2. "background:cyan url(bg.jpg) repeat-x", mosaïque la boîte horizontalement, et les autres parties de la boîte afficheront le couleur de fond "cyan".

3、“background:cyan url(bg.jpg) repeat-y”，纵向平铺盒子，盒子其他部分显示背景颜色“cyan”。

4、“background:cyan url(bg.jpg) no-repeat”，背景不重复，背景和盒子左上角对齐，盒子其他部分显示背景颜色“cyan”

5、“background:cyan url(bg.jpg) no-repeat left center”，背景不重复，背景和盒子左中对齐，盒子其他部分显示背景颜色“cyan”。

6、“background:cyan url(bg.jpg) no-repeat right center”，背景不重复，背景和盒子右中对齐，也就是背景图片的右边对齐盒子的右边，盒子其他部分显示背景颜色“cyan”。

相关代码：

nbsp;html>


    <meta>
    <title>test background</title>
    <style>
        .backshow{
            width:320px;
            height:160px;
            border:3px solid #333;
            float:left;
            margin:10px;            
        }
        .bg1{background:cyan url(bg.jpg);}
        .bg2{background:cyan url(bg.jpg) repeat-x;}
        .bg3{background:cyan url(bg.jpg) repeat-y;}
        .bg4{background:cyan url(bg.jpg) no-repeat;}
        .bg5{background:cyan url(bg.jpg) no-repeat left center;}
        .bg6{background:cyan url(bg.jpg) no-repeat right center;}
    </style>


    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>

例子说明：
        代码中使用到的背景图片，可以直接在页面上的背景图片上点右键另存下来，命名为：“bg.jpg”，并且和网页文件存在同一个目录下。

        关于背景图片的background-position的设置，设置背景图片水平位置的有“left”、“center”、“right”，设置背景图片垂直位置的有“top”、“center”、“bottom”，水平和垂直的属性值两两组合，就可以把背景图设置到对齐盒子的四个角或者四个边的中心或者盒子的正中心位置。还可以设置具体的像素值来把背景图片精确地定位到盒子的某个位置，特别是对于背景图片尺寸大于盒子尺寸的这种情况，我们可以用数值定位，截取大图片的某一块做为盒子的背景。

 比如说，我们想把下边的盒子用右边的图片作为背景，并且让背景显示图片中靠近底部的那朵花：

用上面中间那张图片作为左边那个比它尺寸小的盒子的背景，如果不设置background-position，默认背景图的左上角会和盒子的左上角对齐，如果设置，可以用两个数值定位背景图，上面右边的实现效果设置为：“background:url(location_bg.jpg) -110px -150px”，第一个数值表示背景图相对于自己的左上角向左偏移110px，负值向左，正值向右，第二个数值表示背景图相对于自己的左上角向上偏移150px，负值向上，正值向下。

实现原理示意图：

对应代码：

nbsp;html>


    <meta>
    <title>test background</title>
    <style>
        .backshow{
            width:320px;
            height:160px;
            border:3px solid #333;
            float:left;
            margin:10px;            
        }        
        .bg{width:94px;
            height:94px;
            border:3px solid #666;
            background:url(location_bg.jpg) -110px -150px;
        }
    </style>


    <p></p>

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!