So legen Sie die Schriftgröße in CSS fest
In CSS können Sie die Schriftgröße über das Attribut „font-size“ festlegen. Das Syntaxformat lautet „font-size: value;“. Der Wert dieses Attributs kann Schlüsselwörter wie „klein“, „groß“, „kleiner“, „größer“ usw. sein; es kann auch ein Wert in px, em, rem oder %-Einheiten sein.
Die Betriebsumgebung dieses Artikels: Acer S40-51, CSS3&&HTML5&&HBuilder. Schriftgröße: Das Attribut „font-size“ wird zum Festlegen der Schriftgröße verwendet. Wenn ein Element das Attribut „font-size“ nicht explizit definiert, erbt es automatisch das Berechnungsergebnis des Attributs „font-size“ des übergeordneten Elements.
Beachten Sie, dass das Attribut „font-size“ tatsächlich die Höhe der Zeichenfelder in der Schriftart festlegt. Die tatsächliche Zeichenglyphe kann höher oder kürzer als diese Felder sein (normalerweise kürzer).
Attributwerte, die eingestellt werden können:Beispiel 1:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
/* font-size属性设置字体大小--“数字+长度值”
*/
.length1 {
font-size: 20px;
/*
px，像素，它是 CSS 中最常用的长度单位，可以用来指定字体大小，元素的宽度、高度、边框、内边距，外边距的大小等等,
它是一个虚拟长度单位，是计算机系统的数字化图像长度单位，如果px要换算成物理长度，需要指定精度DPI
px 单位的值必须是整数值
*/
}
.length2 {
font-size: 2em;
/* em
相对长度单位，取决于目标元素字体尺寸。
em 单位的值等于基本元素或父元素的字体大小。
*/
}
.length3 {
font-size: 2rem;
/* rem
CSS3中加入的 相对长度单位，
取决于文档根元素（通常为:root）的字体尺寸，适用于依据字体尺寸进行的排版，适用于自适应。 */
}
.length4{
font-size:200%;
/* 相对于父元素的尺寸的取值，
实际使用中，如果父元素是一个非稳定的取值，可能会导致父元素被撑开，
而实际值取决于其祖先元素中最近的一个拥有稳定取值的元素。整数取值，并不适用于解决自适应问题。 */
}
</style>
</head>
<body>
<p>这是测试段落</p>
<p class="length1">这是测试段落</p>
<p class="length2">这是测试段落</p>
<p class="length3">这是测试段落</p>
<p class="length4">这是测试段落</p>
</body>
</html>
Rendering:
Beispiel 2:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
/* font-size属性设置字体大小--相对大小值 */
.larger {
font-size: larger;
/* 把 font-size 设置为比父元素更大的尺寸。 */
}
.smaller {
font-size: smaller;
/* 把 font-size 设置为比父元素更小的尺寸。 */
}
</style>
</head>
<body>
<p>这是测试段落</p>
<p class="larger">这是测试段落</p>
<p class="smaller">这是测试段落</p>
</body>
</html>
Rendering: Beispiel 3:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
/*font-size属性设置字体大小--绝对大小值*/
.xx-small {font-size: xx-small;}
.x-small {font-size: x-small;}
.small {font-size: small;}
.medium {font-size: medium;}
.large {font-size: large;}
.x-large {font-size: x-large;}
.xx-large {font-size: xx-large;}
</style>
</head>
<body>
<p>这是测试段落</p>
<p class="medium">这是测试段落</p>
<p class="xx-small">这是测试段落</p>
<p class="x-small">这是测试段落</p>
<p class="small">这是测试段落</p>
<p class="large">这是测试段落</p>
<p class="x-large">这是测试段落</p>
<p class="xx-large">这是测试段落</p>
</body>
</html>
Rendering:
Weitere Kenntnisse zum Thema Programmierung finden Sie unter:
Einführung in die Programmierung
! !Das obige ist der detaillierte Inhalt vonSo legen Sie die Schriftgröße in CSS fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Heiße KI -Werkzeuge
Undress AI Tool
Ausziehbilder kostenlos
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Clothoff.io
KI-Kleiderentferner
Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Was ist die CSS-Aspekt-Verhältnis-Eigenschaft und wie kann ich sie verwenden?
Aug 04, 2025 pm 04:38 PM
Thespect-ratiocsSpropertydefinästhespen-to-hweigthtratioofanelemente, sicherzustellen, dass die Verbreitung von Verantwortung durchgesetzt wird
Was sind die Apps für virtuelle Währungshandel? _Die Top Ten empfohlene offizielle Apps Virtual Currency Trading Apps im Jahr 2025
Aug 08, 2025 pm 06:42 PM
1. Binance ist bekannt für sein riesiges Transaktionsvolumen und die reichhaltigen Handelspaare. Es bietet diversifizierte Handelsmodelle und perfekte Ökosysteme. Es gewährleistet auch die Sicherheit von Benutzeranlagen über SAFU -Fonds und mehrere Sicherheitstechnologien und erhält den konformen Vorgängen von großer Bedeutung. 2. OKX Ouyi bietet eine breite Palette von Handelsdiensten für digitale Asset und einheitliche Handelskonto -Modelle, bereitet das Web3 -Feld aktiv bereit und verbessert die Sicherheit und Erfahrung der Transaktion durch strenge Risikokontrolle und Benutzerausbildung. 3.. Gate.io Sesam öffnet die Tür und verfügt über eine gute Währungsgeschwindigkeit und eine reichhaltige Währung, bietet diversifizierte Handelsinstrumente und Wertschöpfungsdienste, nimmt mehrere Sicherheitsüberprüfungsmechanismen an und hält sich an die Transparenz von Asset-Reserven zur Verbesserung des Benutzervertrauens. V.
Wie benutze ich die CSS: leere Pseudoklasse?
Aug 05, 2025 am 09:48 AM
Die: Leerepseudo-KlasseSelectSselementsWithnochildrenorContent, einschließlich Spacesorcomponenten, SoonlyTryEmptyElementslikematchit; 1.itcanhideemptyContainersByusing: leer {display: none;} tocleanuPlayouts; 2.itallowsaddingPlaceLylingsSylingvise :::.
Wie benutze ich CSS-Clip-Pfad für kreative Formen?
Aug 04, 2025 pm 02:55 PM
Verwenden Sie CSSCLIP-Pfad, um nicht-respektuläre Formen im Browser ohne zusätzliche Bilder oder komplexe SVG zu erstellen. 2. Gemeinsame Formfunktionen umfassen Inset (), Circle (), Ellipse () und Polygon (), wobei Polygon () benutzerdefinierte Formen implementiert, indem Koordinatenpunkte definiert werden, die zum Erstellen kreativer Designs wie Dialogblasen geeignet sind; 3.. Clip-Pfad kann durch CSS-Übergang oder Keyframe-Animation dynamische Effekte erzielen, z. B. die Kreiserweiterung während des Schwebes, unterstützt jedoch nur Interform-Animationen desselben Typs und derselben Anzahl von Scheitelpunkten. 4. Achten Sie auf Reaktionsfähigkeit und Zugänglichkeit, um sicherzustellen, dass der Inhalt weiterhin verfügbar ist, wenn sie nicht unterstützt werden. Der Text ist lesbar, vermeiden Sie übermäßiges Anschneiden und steuern Sie die Anzahl der Polygonscheitelpunkte, um die Leistung zu optimieren. Gleichzeitig ist es notwendig, das zu wissen
So verwenden Sie VW- und VH -Einheiten in CSS
Aug 07, 2025 pm 11:44 PM
VW- und VH -Einheiten erreichen reaktionsschnelles Design, indem sie Elementgrößen mit Ansichtsfenster und Höhe in Verbindung bringen. 1 VW entspricht 1% der Ansichtsfensterbreite, und 1 VH entspricht 1% der Ansichtsfensterhöhe; häufig im Vollbildbereich, reaktionsschnellen Schriftarten und elastischen Abstand verwendet; 1. Verwenden Sie im Vollbildbereich 100VH oder besser 100DVH, um den Einfluss der Mobile Browser -Adressleiste zu vermeiden. 2. Responsive Schriftarten können mit 5 VW begrenzt und mit einer Klemme (1,5REM, 3VW, 3REM) in Kombination der minimalen und maximalen Größe begrenzt werden. 3. Elastischer Abstand wie Breite: 80VW, Rand: 5VHAUTO, Polsterung: 2VH3VW, kann das Layout anpassungsfähig machen; Achten Sie auf Kompatibilität, Zugänglichkeit und Inhaltskonflikte für mobile Geräte. Es wird empfohlen, zuerst DVH zu verwenden.
So verwenden Sie die Filtereigenschaft in CSS
Aug 11, 2025 pm 05:29 PM
ThecssFilterPropertyAllowsvisualeffects-ähnlich, Helligkeit und GryscaletobeAppliedDirecttoHtmlelements.1) Usethesyntaxfilter: Filterfunktion (Wert) toappyeffects.2) Kombination
So erstellen Sie eine vertikale Linie mit CSS
Aug 11, 2025 pm 12:49 PM
Verwenden Sie einen DIV mit Rand, um schnell vertikale Linien zu erstellen und Stile und Höhen zu definieren, indem Sie randlinks und Höhe einstellen. 2. Verwendung :: vor oder :: Nach Pseudoelementen, um vertikale Linien ohne zusätzliche HTML-Tags hinzuzufügen, die für die dekorative Trennung geeignet sind; 3. In Flexbox -Layout können adaptive vertikale Trennwände zwischen elastischen Behältern erreicht werden, indem die Breite und die Hintergrundfarbe der Trennklasse festgelegt werden. 4. Fügen Sie in CSSGrid vertikale Linien als unabhängige Spalten (z. B. Autowidth -Spalten) in das Gitterlayout ein, das für reaktionsschnelles Design geeignet ist. Die am besten geeignete Methode sollte gemäß dem spezifischen Layout ausgewählt werden, um sicherzustellen, dass die Struktur einfach und leicht zu warten ist.
Was ist die 'enthaltene Eigenschaft' in CSS?
Aug 04, 2025 pm 12:03 PM
ThecontainPropertyincsSimProveSperformanceByIsolatinganelement'Slayout, Farbe, Orstyle.1.IntellStheBrowserThatchangesinSsideTheLementwon'PectContentoutside.2.
