Heim > Artikel > Web-Frontend > CSS-Einheiten, Werte und Styling-Tipps geteilt

CSS-Einheiten, Werte und Styling-Tipps geteilt

高洛峰Original: 2017-03-09 10:40:451387Durchsuche

1. Einheiten und Werte

　1.1 Farbwert

Die Farbeinstellungen auf der Webseite sind sehr wichtig, einschließlich der Schriftart Farbe (color), Hintergrundfarbe (background-color), Rahmenfarbe (border) usw. Es gibt viele Möglichkeiten, die Farbe festzulegen:

1. Englische Befehlsfarbe

wird häufig verwendet in Die vorherigen Abschnitte Dies ist die Einstellungsmethode:

p{color:red;}
2. RGB-Farbe

Dies stimmt mit der RGB-Farbe in Photoshop überein, bestehend aus R(red ), Verwenden Sie das Verhältnis der drei Farben G (Grün) und B (Blau), um die Farbe anzupassen.

p{color:rgb(133,45,200);}
Der Wert jedes Elements kann eine Ganzzahl zwischen 0 und 255 oder ein Prozentsatz zwischen 0 % und 100 % sein. Zum Beispiel:

p{color:rgb(20%,33%,25%);}
3. Hexadezimale Farbe

Diese Farbeinstellungsmethode ist jetzt häufiger anzutreffen. Das Prinzip von Die verwendete Methode ist eigentlich die RGB-Einstellung, aber der Wert jedes Elements wird von 0-255 in hexadezimal 00-ff geändert.

p{color:#00ffff;}

Farbtabelle:

CSS-Einheiten, Werte und Styling-Tipps geteilt
1.2 Längenwert

Um die Längeneinheiten zusammenzufassen, Derzeit werden häufig Px (Pixel), em und % verwendet. Es ist zu beachten, dass es sich bei diesen drei Einheiten tatsächlich um relative Einheiten handelt.

1. Pixel

Warum ist Pixel eine relative Einheit? Denn Pixel beziehen sich auf kleine Punkte auf dem Display (die CSS-Spezifikation geht von „90 Pixel = 1 Zoll“ aus). Die tatsächliche Situation ist, dass der Browser den tatsächlichen Pixelwert der Anzeige verwendet. Derzeit neigen die meisten Designer dazu, Pixel (px) als Einheit zu verwenden.

　2. em

　ist der Schriftgrößenwert der angegebenen Schriftart dieses Elements. Wenn die Schriftgröße des Elements 14 Pixel beträgt, dann ist 1em = 14 Pixel ist 18px, dann ist 1em =18px. Der folgende Code:

p{font-size:12px;text-indent:2em;}
Der obige Code kann die Einrückung der ersten Zeile eines Absatzes um 24 Pixel (d. h. den Abstand) erreichen zwischen zwei Schriftgrößen).

Beachten Sie den folgenden Sonderfall:

Wenn die Einheit der Schriftgröße jedoch auf em eingestellt ist, basiert der Berechnungsstandard zu diesem Zeitpunkt auf der Schriftgröße des übergeordneten Elements von p. Der folgende Code:

html:

Nehmen Sie dieses Beispiel

css:

p{font-size:14px}
span{font-size:0.8em;}
Schriftart im Ergebnis span „example“ Die Schriftgröße beträgt 11,2 Pixel (14 * 0,8 = 11,2 Pixel).

　3. Prozentsatz

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

Stellen Sie die Zeilenhöhe (Zeilenabstand) auf 130 % der Schriftart ein (12 * 1,3 = 15,6 Pixel).

2. Stileinstellungsfähigkeiten

2.1 Horizontale Zentrierung – Inline-Elemente

Bei der tatsächlichen Arbeit stoßen wir häufig auf Szenarien, in denen eine horizontale Zentrierung erforderlich ist Aus ästhetischen Gründen wird beispielsweise der Titel eines Artikels im Allgemeinen horizontal und zentriert angezeigt.

Hier haben wir zwei weitere Situationen: Inline-Elemente oder Blockelemente werden in Blockelemente mit fester Breite und Blockelemente mit variabler Breite unterteilt. Heute erfahren wir zunächst, wie man nach unten gerichtete Elemente horizontal zentriert.

Wenn es sich bei dem festzulegenden Element um ein Inline-Element wie Text oder Bild handelt, wird die horizontale Zentrierung durch Festlegen von text-align:center auf das übergeordnete Element erreicht. (Übergeordnetes Element und untergeordnetes Element: Wie im folgenden HTML-Code ist p das übergeordnete Element des Textes „Ich möchte ihn horizontal und zentriert im übergeordneten Container anzeigen“. Im Gegenteil, dieser Text ist das untergeordnete Element von p) Der folgende Code:

HTML-Code:

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

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

2.2 Feste Breite Blockzentrierung

Wenn das Element als Blockelement festgelegt ist, funktioniert text-align: center nicht. In diesem Fall gibt es zwei Situationen: Blockelemente mit fester Breite und Blockelemente mit variabler Breite.

In diesem Abschnitt werden wir zunächst über Blockelemente mit fester Breite sprechen. (Blockelemente mit fester Breite: Die Breite von Blockelementen ist ein fester Wert.)

Elemente, die die beiden Bedingungen feste Breite und Block erfüllen, können erreicht werden, indem der Wert „linker und rechter Rand“ auf „ auto" Zentriert. Schauen wir uns ein Beispiel für die horizontale Zentrierung des p-Blockelements an:

HTML-Code:

<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>

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

Das obige ist der detaillierte Inhalt vonCSS-Einheiten, Werte und Styling-Tipps geteilt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Detaillierte Einführung in den Hintergrund und Text im CSS-StilNächster Artikel：Detaillierte Einführung in den Hintergrund und Text im CSS-Stil

In Verbindung stehende Artikel

Mehr sehen