CSS-Schriftart und Textstil
Text: Farbe, Schriftgröße, Schriftart, Fettdruck usw.
Text: Zeilenhöhe, Ausrichtung und Textdekoration usw.
Textstilattribute:
Schriftfamilie
Schriftgröße
Farbe
Schriftgröße
Schriftstil
在html4.0之前，可以用font，但4之后就不用了
<font face="宋体" color="red" size="12px">hiii</font>
<style>
h1{
font-family:"宋体"，"Times New Roman";}
</style>
Verwenden Sie jetzt den CSS-Stil anstelle des Font-Tags
Schriftgröße
Relative Einheit:
px Pixel Betroffen von der Monitorauflösung
im/% em und% sind die festgelegte Größe für das übergeordnete Element
Die absolute Größe kann sich nicht mit der Browserauflösung oder der Größe des übergeordneten Elements ändern
Farbe definiert die Farbe des Textes im Element
Farbe | RGB | #ffffff
Farbe: Rot;
Farbe: RGB (33,43,34); Zahl 0 ~ 255 Prozent ist 0% -100%
Farbe: #fff; # Anfang, 6 Ziffern: 0 ~ f kann mit 3 Ziffern abgekürzt werden, ohne zwischen Groß- und Kleinschreibung zu unterscheiden
Schriftgröße
:
normal | fett | kühner | heller | 100 ~ 900
Tatsächlich zeigen Fett und kühn im Grunde den gleichen Effekt an, 100 ~ 600 ist der gleiche, 700-900 ist auch der gleiche. Der
Standardwert ist normal, was 400 entspricht, und 700 entspricht fett
斜体：normal kursiv schräg im
Schriftstil
Schriftvariante Schriftverformung
Setzen Sie den Text im Element auf Kleinbuchstaben normal | Kapitälchen
Textausrichtung wird verwendetBlockelement
Legen Sie die horizontale Ausrichtung des Texts innerhalb des Elements fest :
Attributwerte:
links, rechts, zentriert, ausrichten
Wenn Sie möchten, dass das Bild in der Mitte ausgerichtet wird , müssen Sie ein Element auf Blockebene wie div außerhalb verschachteln
Wenn Sie in der Mitte unter verschiedenen Browsern anzeigen möchten und der Text im p-Tag unter dem div zentriert ist, müssen Sie
<style>
.first{
text-align:center;}
.first p{
width:50%;margin:0 auto;}
</style>
<div class="first">
<p> fsadfasdfasdfsa</p>
</div>
Vertikal ausrichten Nur wirksam für Inline-Elemente
Der Inhalt des Elements wird vertikal als
Grundlinie, Unter-, Super-, Oben-, Text-Oben-, Mittel-, Unten-, Text-Unten- Länge, der Prozentsatz der positiven negativen Unterscheidung,
die vertikal angewendet wird, als vertikal angewendete
vertikale Mitte mit einer
Zeile
bereitgestellt : Zeilenhöhe und -höhe als großer Text -align: center;
Mehrzeiliger Text ist vertikal zentriert:
Inline-Elemente können nicht in Elementen auf Blockebene platziert werden
Anzeige: Tabelle zum übergeordneten Element hinzufügen, zum
mittleren Element hinzufügen :
vertikal ausrichten: Mitte;
Anzeige: Tabellenzelle;
Das Zeilenhöhenattribut wird verwendet, um die Höhe und
Länge der Textzeile im Element festzulegen . Der Prozentsatz
überlappt sich, wenn die Zeilenhöhe 16 Pixel kleiner als die Schriftgröße 20 Pixel ist.
Es wird empfohlen, sie als Einheit für die Zeilenhöhe zu verwenden, Damit sich
em und% nicht mit der Schriftgröße überschneiden
Textindex: 2em; oberes Raster
Wenn die Zeilenhöhe auf die Schriftgröße oder 1em oder 100% eingestellt ist, wird der Abstand zwischen den Zeilen kleiner und der Browser hat eine Standardzeilenhöhe. Chrome ist 16px. Die Zeilenhöhe
kann vererbt werden
Vererbt ist der berechnete Wert . Anstatt den Wert em oder% direkt zu erben, kann es zu Überlappungen kommen, wenn Schriftgröße> Zeilenhöhe
Textstilattribute:
Wortabstand Legen Sie den Abstand zwischen Wörtern im Element festVerwenden Sie standardmäßig Leerzeichen
Buchstabenabstand Legen Sie den Abstand zwischen den Buchstaben im Element fest. Der
Wert kann als positiv oder negativ festgelegt werden, und die Einheit kann em,%, px usw. sein.
Texttransformation Legen Sie die Groß- und Kleinschreibung des Texts im Element fest: Groß- und Kleinschreibung, Kleinbuchstaben, keine
Textdekoration Legen Sie die Dekoration des Textes innerhalb des Elements fest.
Unterstreichen, Überstrichen, Durchstrichen, Blinken, kein
Blinken hat Kompatibilitätsprobleme
Kann nicht erben
Anwendung
<style>
p{
background-color:#ececec;height:150px;text-align:center;line-height:150px;}
.one{
font-size:80px;color:#c9394a;font-weight:bold;}
.two{
font-size:40px;color:gray;text-decoration:underline;letter-spacing:5px;vertical-align:15px;}
.three{
font-size:80px;color:gray;font-style:oblique;}
</style>
<p><span class="one">郑乾</span><span class="two">小白啊</span><span class="three">!</span></p>
um zusammenzufassen:
Webseitenproduktion vom Ganzen bis zum Teil
mit Hilfe von Handbüchern und dem Internet
文字样式
font-family
font-size
Farbe
font-weight
font-style
text-align
line-height
vertical-align
Wortabstand
Buchstaben-Abstand
text-trans
text-decoration
NÄCHSTER:
CSS-Hintergrund und Liste
