Maison > Article > interface Web > Unités CSS, valeurs et conseils de style partagés

Unités CSS, valeurs et conseils de style partagés

高洛峰original: 2017-03-09 10:40:451401parcourir

1. Unités et valeurs

　1.1 Valeur de couleur

Les paramètres de couleur dans la page Web sont très importants, y compris la police couleur (color ), couleur d'arrière-plan (background-color), couleur de bordure (border), etc. Il existe de nombreuses façons de définir la couleur :

1. Commande anglaise color

fréquemment utilisée dans les sections précédentes Voici la méthode de réglage :

p{color:red;}
2. Couleur RVB

Ceci est cohérent avec la couleur RVB dans Photoshop, composée de R(rouge ), Utilisez le rapport des trois couleurs G (vert) et B (bleu) pour faire correspondre la couleur.

p{color:rgb(133,45,200);}
La valeur de chaque élément peut être un entier compris entre 0 et 255, ou un pourcentage entre 0 % et 100 %. Tels que :

p{color:rgb(20%,33%,25%);}
3. Couleur hexadécimale

Cette méthode de réglage des couleurs est plus courante maintenant Le principe de la méthode utilisée est en fait le réglage RVB, mais la valeur de chaque élément passe de 0-255 à hexadécimal 00-ff.

p{color:#00ffff;}

Table des couleurs :

Unités CSS, valeurs et conseils de style partagés
1.2 Valeur de longueur

Pour résumer les unités de longueur, actuellement, Px (pixels), em et % sont couramment utilisés. Il convient de noter que ces trois unités sont en fait des unités relatives.

1. Pixel

Pourquoi le pixel est-il une unité relative ? Parce que les pixels font référence à de petits points sur l'écran (la spécification CSS suppose « 90 pixels = 1 pouce »). La situation réelle est que le navigateur utilise la valeur réelle des pixels de l'affichage. À l'heure actuelle, la plupart des concepteurs ont tendance à utiliser les pixels (px) comme unité.

　2.em

　est la valeur de la taille de police de la police donnée de cet élément. Si la taille de la police de l'élément est de 14 px, alors 1em = 14 px ; est de 18px, alors 1em =18px. Le code suivant :

p{font-size:12px;text-indent:2em;}
Le code ci-dessus peut réaliser l'indentation de la première ligne d'un paragraphe de 24px (c'est-à-dire la distance entre deux tailles de police).

Faites attention à un cas particulier ci-dessous :

Mais lorsque l'unité de taille de police est définie sur em, la norme de calcul à ce moment est basée sur la taille de police de l'élément parent de p. Le code suivant :

html :

Prenez ceci example

css:

p{font-size:14px>
span{font-size:0.8em;}
　Police dans l'étendue du résultat" exemple " La taille de la police est de 11,2 px (14 * 0,8 = 11,2 px).

　3. Pourcentage

p{font-size:12px;line-height:130%}

Définissez la hauteur de ligne (espacement des lignes) à 130 % de la police (12 * 1,3 = 15,6 px).

2. Compétences en matière de définition de style

2.1 Centrage horizontal - éléments en ligne

Dans le travail réel, nous rencontrons souvent des scénarios où un centrage horizontal est requis pour. Par exemple, par souci d’esthétique, le titre d’un article est généralement affiché horizontalement et centré.

Ici, nous avons deux autres situations : les éléments en ligne ou les éléments de bloc sont divisés en éléments de bloc à largeur fixe et en éléments de bloc à largeur variable. Aujourd'hui, nous allons d'abord apprendre comment centrer horizontalement des éléments vers le bas ?

Si l'élément en cours de définition est un élément en ligne tel qu'un texte ou une image, le centrage horizontal est obtenu en définissant text-align:center sur l'élément parent. (Élément parent et élément enfant : Dans le code html suivant, p est l'élément parent du texte "Je souhaite l'afficher horizontalement et centré dans le conteneur parent". Au contraire, ce texte est l'élément enfant de p) code suivant :

code html :

<body>
  <p class="txtCenter">我想要在父容器中水平居中显示。</p>
</body>
css代码：   

<style>
  .txtCenter{   
    text-align:center;   
  }   
</style>

2.2 Bloc à largeur fixe centering

Lorsque Lorsque l'élément est défini comme un élément de bloc, text-align: center ne fonctionnera pas. Dans ce cas, il existe deux situations : les éléments de bloc à largeur fixe et les éléments de bloc à largeur variable.

Dans cette section, nous parlerons d'abord des éléments de bloc à largeur fixe. (Éléments de bloc à largeur fixe : la largeur des éléments de bloc est une valeur fixe.)

Les éléments qui remplissent les deux conditions de largeur fixe et de bloc peuvent être obtenus en définissant la valeur "marge gauche et droite" sur " auto" Centré. Regardons un exemple de définition de l'élément de bloc p pour qu'il soit centré horizontalement :

code HTML :

<span style="font-family: 楷体; font-size: 14pt;"><body>
  <p>我是定宽块状元素，哈哈，我要水平居中显示。</p>
</body>
css代码：   

<style>
p{   
    border:1px solid red;/*为了显示居中效果明显为 p 设置了边框*/   

    width:200px;/*定宽*/   
    margin:20px auto;/* margin-left 与 margin-right 设置为 auto */   
}   

</style></span>

也可以写成：

margin-left:auto;
margin-right:auto;
注意：元素的“上下 margin” 是可以随意设置的。

　2.3 不定宽

　　在实际工作中我们会遇到需要为“不定宽度的块状元素”设置居中，比如网页上的分页导航，因为分页的数量是不确定的，所以我们不能通过设置宽度来限制它的弹性。(不定宽块状元素：块状元素的宽度width不固定。)

　　不定宽度的块状元素有三种方法居中（这三种方法目前使用的都很多）：

加入 table 标签
设置 display: inline 方法：与第一种类似，显示类型设为行内元素，进行不定宽元素的属性设置
设置 position:relative 和 left:50%：利用相对定位的方式，将元素向左偏移 50% ，即达到居中的目的
　　这一小节我们来讲一下第一种方法：

　　为什么选择方法一加入table标签? 是利用table标签的长度自适应性---即不定义其长度也不默认父元素body的长度（table其长度根据其内文本长度决定），因此可以看做一个定宽度块元素，然后再利用定宽度块状居中的margin的方法，使其水平居中。

　　第一步：为需要设置的居中的元素外面加入一个 table 标签 ( 包括

、、 )。

　　第二步：为这个 table 设置“左右 margin 居中”（这个和定宽块状元素的方法一样）。

　　举例如下：

　　html代码：

<span style="font-family: 楷体; font-size: 14pt;"><p>
 <table>
  <tbody>
    <tr><td>
    <ul>
        <li>我是第一行文本</li>
        <li>我是第二行文本</li>
        <li>我是第三行文本</li>
    </ul>
    </td></tr>
  </tbody>
 </table>
</p>
css代码：   

<style>
table{   
    border:1px solid;   
    margin:0 auto;   
}   
</style></span><span style="font-family: 楷体; font-size: 14pt;">　</span>

除了上一节讲到的插入table标签，可以使不定宽块状元素水平居中之外，本节介绍第2种实现这种效果的方法，改变元素的display类型为行内元素，利用其属性直接设置。

第二种方法：改变块级元素的 display 为 inline 类型（设置为行内元素显示），然后使用 text-align:center 来实现居中效果。如下例子：

html代码：

<body>
<p class="container">
    <ul>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
    </ul>
</p>
</body>
css代码：   

<style>
.container{   
    text-align:center;   
}   
/* margin:0;padding:0（消除文本与p边框之间的间隙）*/   
.container ul{   
    list-style:none;   
    margin:0;   
    padding:0;   
    display:inline;   
}   
/* margin-right:8px（设置li文本之间的间隔）*/   
.container li{   
    margin-right:8px;   
    display:inline;   
}   
</style>

这种方法相比第一种方法的优势是不用增加无语义标签，但也存在着一些问题：它将块状元素的 display 类型改为 inline，变成了行内元素，所以少了一些功能，比如设定长度值。

　　除了前两节讲到的插入table标签，以及改变元素的display类型，可以使不定宽块状元素水平居中之外，本节介绍第3种实现这种效果的方法，设置浮动和相对定位来实现。

方法三：通过给父元素设置 float，然后给父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left: -50% 来实现水平居中。

我们可以这样理解：假想ul层的父层（即下面例子中的p层）中间有条平分线将ul层的父层（p层）平均分为两份，ul层的css代码是将ul层的最左端与ul层的父层（p层）的平分线对齐；而li层的css代码则是将li层的平分线与ul层的最左端（也是p层的平分线）对齐，从而实现li层的居中。

代码如下：

<body>
<p class="container">
    <ul>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
    </ul>
</p>
</body>
css代码：   

<style>
.container{   
    float:left;   
    position:relative;   
    left:50%   
}   

.container ul{   
    list-style:none;   
    margin:0;   
    padding:0;   

    position:relative;   
    left:-50%;   
}   
.container li{float:left;display:inline;margin-right:8px;}   
</style>

这三种方法使用得都非常广泛，各有优缺点，具体选用哪种方法，可以视具体情况而定。

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Introduction détaillée à l'arrière-plan et au texte de style CSSArticle suivant：Introduction détaillée à l'arrière-plan et au texte de style CSS

Articles Liés

Voir plus