Fundamental text and font styling

CSS中樣式文本涉及到什么？

正如你已經(jīng)在使用HTML和CSS工作中經(jīng)歷過的，元素內(nèi)部的文本被放置在元素的內(nèi)容框中。 它從內(nèi)容區(qū)域的左上角(或右上角，在RTL語言內(nèi)容的情況下)開始，并流向行尾。 一旦它到達(dá)結(jié)束，它下來到下一行并繼續(xù)，然后下一行，直到所有的內(nèi)容被放置在框中。 文本內(nèi)容有效地表現(xiàn)為一系列內(nèi)聯(lián)元素，布置在彼此相鄰的線上，并且在到達(dá)線的末尾之前不創(chuàng)建換行符，或者除非使用 //developer.mozilla.org/zh-CN/docs/Web/HTML/Element/br"> < br> 元素。

用于樣式文本的CSS屬性通常分為兩類，我們將在本文中單獨(dú)查看:

• Font styles: Properties that affect the font that is applied to the text, affecting what font is applied, how big it is, whether it is bold, italic, etc.
• Text layout styles: Properties that affect the spacing and other layout features of the text, allowing manipulation of, for example, the space between lines and letters, and how the text is aligned within the content box.

字體

讓我們直接查看字體樣式的屬性。 在這個例子中，我們將對同一個HTML示例應(yīng)用一些不同的CSS屬性，如下所示:

<h1>Tommy the cat</h1>

<p>I remember as if it were a meal ago...</p>

<p>Said Tommy the Cat as he reeled back to clear whatever foreign matter
 may have nestled its way into his mighty throat. Many a fat alley rat 
had met its demise while staring point blank down the cavernous barrel of
 this awesome prowling machine. Truly a wonder of nature this urban 
predator — Tommy the cat had many a story to tell. But it was a rare 
occasion such as this that he did.</p>

您可以在Github上找到完成的示例(另請參閱 a class ="external">源代碼)。

顏色

color 屬性設(shè)置前景內(nèi)容的顏色 所選擇的元素(通常是文本，但也可以包括一些其他東西，例如使用 docs / Web / CSS / text-decoration"> text-decoration 屬性)。

color 可接受任何 CSS顏色單位，例如:

p {
  color: red;
}

這將導(dǎo)致段落變?yōu)榧t色，而不是標(biāo)準(zhǔn)瀏覽器默認(rèn)黑色，如此:

<h1>Tommy the cat</h1>

<p>I remember as if it were a meal ago...</p>

<p>Said Tommy the Cat as he reeled back to clear whatever foreign matter
 may have nestled its way into his mighty throat. Many a fat alley rat 
had met its demise while staring point blank down the cavernous barrel of
 this awesome prowling machine. Truly a wonder of nature this urban 
predator — Tommy the cat had many a story to tell. But it was a rare 
occasion such as this that he did.</p>

字體系列

要在文本上設(shè)置不同的字體，請使用 font-family 代碼> 屬性 - 這允許您指定瀏覽器應(yīng)用于所選元素的字體(或字體列表)。 瀏覽器只會應(yīng)用一種字體，如果它是可用的機(jī)器上的網(wǎng)站被訪問; 如果沒有，則只使用瀏覽器默認(rèn)字體。 一個簡單的例子如下:

p {
  font-family: arial;
}

這將使頁面上的所有段落采用任何計(jì)算機(jī)上可以找到的arial字體。

Web safe fonts

說到字體可用性，只有一定數(shù)量的字體通常可用于所有系統(tǒng)，因此可以毫不費(fèi)力地使用。 這些是所謂的網(wǎng)絡(luò)安全字體。

大多數(shù)時(shí)候，作為web開發(fā)人員，我們希望對用于顯示我們的文本內(nèi)容的字體有更具體的控制。 問題是找到一種方法來知道在用于查看我們的網(wǎng)頁的計(jì)算機(jī)上可用的字體。 在每種情況下都沒有辦法知道這一點(diǎn)，但是網(wǎng)絡(luò)安全字體已知在最常用的操作系統(tǒng)(Windows，Mac，最常見的Linux發(fā)行版，Android和iOS)的幾乎所有實(shí)例上都可用。

實(shí)際的網(wǎng)絡(luò)安全字體的列表將隨著操作系統(tǒng)的發(fā)展而改變，但是可以考慮以下網(wǎng)絡(luò)安全的網(wǎng)絡(luò)，至少現(xiàn)在(許多已經(jīng)由于Microsoft //en.wikipedia.org/wiki/Core_fonts_for_the_Web"class ="external"> Web上的核心字體 在90年代末和21世紀(jì)初)

Default fonts

CSS為字體定義了五個通用名稱: serif ， sans-serif， style ="font-family:Open Sans，Arial，sans-serif;"> monospace ， cursive和 這些是非常通用的，使用這些通用名稱時(shí)使用的確切字體由每個瀏覽器決定，并且可能因?yàn)樗鼈冋谶\(yùn)行的每個操作系統(tǒng)而有所不同。 它表示最糟糕的情況，其中瀏覽器將盡力提供至少一個看起來合適的字體。 serif ， sans-serif 和 monospace 是可以預(yù)測的，應(yīng)該提供一些合理的。 另一方面， cursive 和 fantasy 不太可預(yù)測，我們建議非常仔細(xì)地使用它們，隨時(shí)測試。

五個名稱定義如下:

Font stacks

由于您無法保證要在網(wǎng)頁上使用的字體的可用性(甚至網(wǎng)絡(luò)字體可能由于某種原因而失敗)，您可以提供字體堆棧 使瀏覽器有多種字體可供選擇。 這只涉及一個由多個字體名稱組成的 font-family 值，用逗號分隔。

p {
  font-family: "Trebuchet MS", Verdana, sans-serif;
}

在這種情況下，瀏覽器在列表的開始處開始，并查看該字體在機(jī)器上是否可用。 如果是，則將該字體應(yīng)用于所選元素。 如果沒有，它會移動到下一個字體，等等。

在堆棧的末尾提供一個合適的通用字體名稱是一個好主意，因此如果沒有列出的字體可用，瀏覽器至少可以提供大致合適的東西。 為了強(qiáng)調(diào)這一點(diǎn)，段落給出了瀏覽器的默認(rèn)襯線字體如果沒有其他選項(xiàng)可用 - 這通常是時(shí)間新羅馬 - 這是沒有好的無襯線字體！

A font-family example

讓我們加入我們前面的例子，給段落一個sans-serif字體:

p {
  color: red;
  font-family: Helvetica, Arial, sans-serif;
}

這給我們以下結(jié)果:

<h1>Tommy the cat</h1>

<p>I remember as if it were a meal ago...</p>

<p>Said Tommy the Cat as he reeled back to clear whatever foreign matter
 may have nestled its way into his mighty throat. Many a fat alley rat 
had met its demise while staring point blank down the cavernous barrel of
 this awesome prowling machine. Truly a wonder of nature this urban 
predator — Tommy the cat had many a story to tell. But it was a rare 
occasion such as this that he did.</p>

字體大小

在我們上一個模塊的 CSS值和單元文章中，我們查看了 長度和大小單位。 字體大小(使用 font-size 設(shè)置) 屬性)可以采用大多數(shù)這些單位(以及其他單位，例如百分比)衡量的值，但最常見的單位 你將使用的大小文本是:

• px (pixels): The number of pixels high you want the text to be. This is an absolute unit — it results in the same final computed value for the font on the page in pretty much any situation.
• ems: 1em is equal to the font size set on the parent element of the current element we are styling (more specifically, the width of a capital letter M contained inside the parent element.) This can become tricky to work out if you have a lot of nested elements with different font sizes set, but it is doable, as you'll see below. Why bother? It is quite natural once you get used to it, and you can use ems to size everything, not just text. You can have an entire website sized using ems, which makes maintenance easy.
• rems: These work just like ems, except that 1rem is equal to the font size set on the root element of the document (i.e. <html>), not the parent element. This makes doing the maths to work out your font sizes much easier, but unfortunately rems are not supported in Internet Explorer 8 and below. If you need to support older browsers with your project, you can either stick to using ems or px, or use a polyfill such as REM-unit-polyfill.?

元素的 font-size 繼承自該元素的父元素。 這一切都從整個文檔的根元素開始 - < html> - 其中的 font-size 在各瀏覽器中設(shè)置為16像素。 根元素內(nèi)的任何段落(或其他沒有由瀏覽器設(shè)置的大小的元素)的最終大小為16像素。 其他元素可能有不同的默認(rèn)尺寸，例如 < h1> 代碼> 元素的大小默認(rèn)為2ems，因此最終大小為32px。

當(dāng)你開始改變嵌套元素的字體大小時(shí)，事情變得更加棘手。 例如，如果您有 < article> a>元素，并將其字體大小設(shè)置為 1.5em s(這將計(jì)算為24px的最終大小)，然后想要< article> 代碼>元素的計(jì)算字體大小為20px，你會使用什么em值？

<!-- document base font-size is 16px -->
<article> <!-- If my font-size is 1.5em -->
  <p>My paragraph</p> <!-- How do I compute to 20px font-size? -->
</article>

您需要將其em值設(shè)置為20/24或 0.83333333em 。 數(shù)學(xué)可能是復(fù)雜的，所以你需要小心你如何風(fēng)格的東西。 最好是使用可能的地方，保持簡單，避免在可能的情況下設(shè)置容器元素的字體大小。

A simple sizing example

在調(diào)整文本大小時(shí)，通常最好將文檔的基本 font-size 設(shè)置為10px，這樣數(shù)學(xué)很容易解決 - 必需(r)em值 然后是像素字體大小除以10，而不是16.在這之后，你可以很容易地將不同的類型，如果文檔中的文本大小到你想要的大小。 最好將所有 font-size 規(guī)則集列在樣式表的指定區(qū)域，以便于查找。

我們的新結(jié)果如下:

<h1>Tommy the cat</h1>

<p>I remember as if it were a meal ago...</p>

<p>Said Tommy the Cat as he reeled back to clear whatever foreign matter
 may have nestled its way into his mighty throat. Many a fat alley rat 
had met its demise while staring point blank down the cavernous barrel of
 this awesome prowling machine. Truly a wonder of nature this urban 
predator — Tommy the cat had many a story to tell. But it was a rare 
occasion such as this that he did.</p>

html {
  font-size: 10px;
}

h1 {
  font-size: 2.6rem;
}

p {
  font-size: 1.4rem;
  color: red;
  font-family: Helvetica, Arial, sans-serif;
}

字體樣式，字體重量，文本變換和文本裝飾

CSS提供了四個常見屬性來改變文本的視覺重量/強(qiáng)調(diào):

• font-style: Used to turn italic text on and off. Possible values are as follows (you'll rarely use this, unless you want to turn some italic styling off for some reason):
  • normal: Sets text to normal font (turns existing italics off.)
  • italic: Sets text to use the italic version of the font if available; if not available, it will simulate italics with oblique instead.
  • oblique: Sets text to use a simulated version of an italic font, created by slanting the normal version.
• font-weight: Sets how bold the text is. This has many available values available in case you have many?font variants available (such as -light, -normal, -bold, -extrabold, -black, etc.), but realistically you'll rarely use any of them except for normal and bold:
  • normal, bold: Normal and bold font weight
  • lighter, bolder: Sets the current element's boldness to be one step lighter or heavier than its parent element's boldness.
  • 100–900: Numeric boldness values that provide finer grained control than the above keywords, if needed.?
• text-transform: Allows you to set your font to be transformed. Values include:
  • none: Prevents any transformation.
  • uppercase: Transforms all text to capitals.
  • lowercase: Transforms all text to lower case.
  • capitalize: Transforms all words to have the first letter capitalized.
  • full-width: Transforms all glyphs to be written inside a fixed-width square, similar to a monospace font, allowing aligning of e.g. latin characters along with asian language glyphs (like Chinese, Japanese, Korean.)
• text-decoration: Sets/unsets text decorations on fonts (you'll mainly use this to unset the default underline on links when styling them.) Available values are:
  • none: Unsets any text decorations already present.
  • underline: Underlines the text.
  • overline: Gives the text an overline.
  • line-through: Puts a strikethrough over the text.
  You should note that text-decoration can accept multiple values at once, if you want to add multiple decorations simultaneously, for example text-decoration: underline overline. Also note that text-decoration is a shorthand property for text-decoration-line, text-decoration-style, and text-decoration-color. You can use combinations of these property values to create interesting effects, for example text-decoration: line-through red wavy.

讓我們看看添加一些這些屬性到我們的例子:

我們的新結(jié)果如下:

<h1>Tommy the cat</h1>

<p>I remember as if it were a meal ago...</p>

<p>Said Tommy the Cat as he reeled back to clear whatever foreign matter
 may have nestled its way into his mighty throat. Many a fat alley rat 
had met its demise while staring point blank down the cavernous barrel of
 this awesome prowling machine. Truly a wonder of nature this urban 
predator — Tommy the cat had many a story to tell. But it was a rare 
occasion such as this that he did.</p>

html {
  font-size: 10px;
}

h1 {
  font-size: 2.6rem;
  text-transform: capitalize;
}

h1 + p {
? font-weight: bold;
}

p {
  font-size: 1.4rem;
  color: red;
  font-family: Helvetica, Arial, sans-serif;
}

文本投影

您可以使用 text-shadow 對文字應(yīng)用陰影， 屬性。 這最多可以有四個值，如下面的示例所示:

text-shadow: 4px 4px 5px red;

四個屬性如下:

1. The horizontal offset of the shadow from the original text — this can take most available CSS length and size units, but you'll most comonly use px. This value has to be included.
2. The vertical offset of the shadow from the original text; behaves basically just like the horizontal offset, except that it moves the shadow up/down, not left/right. This value has to be included.
3. The blur radius — a higher value means the shadow is dispersed more widely. If this value is not included, it defaults to 0, which means no blur. This can take most available CSS length and size units.
4. The base color of the shadow, which can take any CSS color unit. If not included, it defaults to black.

Multiple shadows

您可以通過包含多個由逗號分隔的陰影值來將多個陰影應(yīng)用于同一文本，例如:

text-shadow: -1px -1px 1px #aaa,
             0px 4px 1px rgba(0,0,0,0.5),
             4px 4px 5px rgba(0,0,0,0.7),
             0px 0px 7px rgba(0,0,0,0.4);

如果我們將此應(yīng)用于 < h1> >元素在我們的Tommy的貓的例子，我們將最終與這:

<h1>Tommy the cat</h1>

<p>I remember as if it were a meal ago...</p>

<p>Said Tommy the Cat as he reeled back to clear whatever foreign matter
 may have nestled its way into his mighty throat. Many a fat alley rat 
had met its demise while staring point blank down the cavernous barrel of
 this awesome prowling machine. Truly a wonder of nature this urban 
predator — Tommy the cat had many a story to tell. But it was a rare 
occasion such as this that he did.</p>

html {
  font-size: 10px;
}

h1 {
  font-size: 26px;
  text-transform: capitalize;
  text-shadow: -1px -1px 1px #aaa,
?????????????? 0px 2px 1px rgba(0,0,0,0.5),
?????????????? 2px 2px 2px rgba(0,0,0,0.7),
?????????????? 0px 0px 3px rgba(0,0,0,0.4);
}

h1 + p {
? font-weight: bold;
}

p {
  font-size: 14px;
  color: red;
  font-family: Helvetica, Arial, sans-serif;
}

文本布局

有了基本的字體屬性，讓我們現(xiàn)在看看屬性，我們可以用來影響文本布局。

文本對齊

text-align 屬性用于控制 如何在其包含的內(nèi)容框中對齊文本。 可用的值如下，并且工作方式與在常規(guī)字處理器應(yīng)用程序中的工作方式大致相同:

• left: Left justifies the text.
• right: Right justifies the text.
• center: Centers the text.
• justify: Makes the text spread out, varying the gaps in between the words so that all lines of text are the same width. You need to use this carefully — it can look terrible, especially when applied to a paragraph with lots of long words in it. If you are going to use this, you should also think about using something else along with it, such as hyphens, to break some of the longer words across lines.

如果我們將 text-align:center; 應(yīng)用于 >< h1> ，我們最終會得到這樣的結(jié)果:

<h1>Tommy the cat</h1>

<p>I remember as if it were a meal ago...</p>

<p>Said Tommy the Cat as he reeled back to clear whatever foreign matter
 may have nestled its way into his mighty throat. Many a fat alley rat 
had met its demise while staring point blank down the cavernous barrel of
 this awesome prowling machine. Truly a wonder of nature this urban 
predator — Tommy the cat had many a story to tell. But it was a rare 
occasion such as this that he did.</p>

html {
  font-size: 10px;
}

h1 {
  font-size: 2.6rem;
  text-transform: capitalize;
  text-shadow: -1px -1px 1px #aaa,
?????????????? 0px 2px 1px rgba(0,0,0,0.5),
?????????????? 2px 2px 2px rgba(0,0,0,0.7),
?????????????? 0px 0px 3px rgba(0,0,0,0.4);
  text-align: center;
}

h1 + p {
? font-weight: bold;
}

p {
  font-size: 1.4rem;
  color: red;
  font-family: Helvetica, Arial, sans-serif;
}

線高

line-height 屬性設(shè)置 每行文字 - 這可以采用大多數(shù)長度和大小單位，但也可以采用無單位值，其作用是 一個乘數(shù)，通常被視為最佳選項(xiàng) - font-size > 乘以 line-height 。 身體文本通?？雌饋砀茫?dāng)線間隔開時(shí)更容易閱讀; 推薦的行高約為1.5-2(雙倍間距)。因此，要將文本行設(shè)置為字體高度的1.5倍，您可以使用:

line-height: 1.5;

將其應(yīng)用于 < p> 元素 在我們的例子中會給我們這個結(jié)果:

<h1>Tommy the cat</h1>

<p>I remember as if it were a meal ago...</p>

<p>Said Tommy the Cat as he reeled back to clear whatever foreign matter
 may have nestled its way into his mighty throat. Many a fat alley rat 
had met its demise while staring point blank down the cavernous barrel of
 this awesome prowling machine. Truly a wonder of nature this urban 
predator — Tommy the cat had many a story to tell. But it was a rare 
occasion such as this that he did.</p>

html {
  font-size: 10px;
}

h1 {
  font-size: 2.6rem;
  text-transform: capitalize;
  text-shadow: -1px -1px 1px #aaa,
?????????????? 0px 2px 1px rgba(0,0,0,0.5),
?????????????? 2px 2px 2px rgba(0,0,0,0.7),
?????????????? 0px 0px 3px rgba(0,0,0,0.4);
  text-align: center;
}

h1 + p {
? font-weight: bold;
}

p {
  font-size: 1.4rem;
  color: red;
  font-family: Helvetica, Arial, sans-serif;
  line-height: 1.5;
}

字母和字間距

letter-spacing 和 "https://developer.mozilla.org/zh-CN/docs/Web/CSS/word-spacing"> word-spacing 屬性允許您設(shè)置字母之間的間距和 詞在您的文本。 你不會經(jīng)常使用這些，但可能會找到用于他們獲得一定的外觀，或提高一個特別密集的字體的易讀性。 他們可以使用大多數(shù)長度和大小單位。

例如，如果我們將以下內(nèi)容應(yīng)用到 < ; p> 元素:

p::first-line {
? letter-spacing: 2px;
? word-spacing: 4px;
}

我們會得到以下結(jié)果:

<h1>Tommy the cat</h1>

<p>I remember as if it were a meal ago...</p>

<p>Said Tommy the Cat as he reeled back to clear whatever foreign matter
 may have nestled its way into his mighty throat. Many a fat alley rat 
had met its demise while staring point blank down the cavernous barrel of
 this awesome prowling machine. Truly a wonder of nature this urban 
predator — Tommy the cat had many a story to tell. But it was a rare 
occasion such as this that he did.</p>

html {
  font-size: 10px;
}

h1 {
  font-size: 2.6rem;
  text-transform: capitalize;
  text-shadow: -1px -1px 1px #aaa,
?????????????? 0px 2px 1px rgba(0,0,0,0.5),
?????????????? 2px 2px 2px rgba(0,0,0,0.7),
?????????????? 0px 0px 3px rgba(0,0,0,0.4);
  text-align: center;
}

h1 + p {
? font-weight: bold;
}

p::first-line {
? letter-spacing: 2px;
? word-spacing: 4px;
}

p {
  font-size: 1.4rem;
  color: red;
  font-family: Helvetica, Arial, sans-serif;
  line-height: 1.5;
}

其他屬性值得一看

上述屬性為您提供了如何在網(wǎng)頁上開始設(shè)置文本樣式的想法，但還有更多的屬性可以使用。 我們只是想覆蓋這里最重要的。 一旦您習(xí)慣使用上述內(nèi)容，您還應(yīng)該了解以下內(nèi)容:

字體樣式:

• font-variant: Switch between small caps and normal font alternatives.
• font-kerning: Switch font kerning options on and off.
• font-feature-settings: Switch various OpenType font features on and off.
• font-variant-alternates: Control the use of alternate glyphs for a given font-face.
• font-variant-caps: Control the use of alternate capital glyphs.
• font-variant-east-asian: Control the usage of alternate glyphs for East Asian scripts, like Japanese and Chinese.
• font-variant-ligatures: Control which ligatures and contextual forms are used in text.
• font-variant-numeric: Control the usage of alternate glyphs for numbers, fractions, and ordinal markers.
• font-variant-position: Control the usage of alternate glyphs of smaller sizes positioned as superscript or subscript.
• font-size-adjust: Adjust the visual size of the font independently of its actual font size.
• font-stretch: Switch between possible alternative stretched versions of a given font.
• text-underline-position: Specify the position of underlines set using the text-decoration-line property underline value.
• text-rendering: Try to perform some text rendering optimization.

文本布局樣式

• text-indent: Specify how much horizontal space should be left before the beginning of the first line of the text content.
• text-overflow: Define how overflowed content that is not displayed is signaled to users.
• white-space: Define how whitespace and associated line breaks inside the element are handled.
• word-break: Specify whether to break lines within words.
• direction: Define the text direction (This depends on the language and usually it's better to let HTML handle that part as it is tied to the text content.)
• hyphens: Switch on and off hyphenation for supported languages.
• line-break: Relax or strengthen line breaking for Asian languages.
• text-align-last: Define how the last line of a block or a line, right before a forced line break, is aligned.
• text-orientation: Define the orientation of the text in a line.
• word-wrap: Specify whether or not the browser may break lines within words in order to prevent overflow.
• writing-mode: Define whether lines of text are laid out horizontally or vertically and the direction in which subsequent lines flow.

字體縮寫

許多字體屬性也可以通過縮寫屬性 字體 >。 這些按照以下順序編寫: font-style a>， font-variant ， > font-weight ， //developer.mozilla.org/zh-CN/docs/Web/CSS/font-stretch"> font-stretch ， .org / zh-CN / docs / Web / CSS / font-size"> font-size ， CN / docs / Web / CSS / line-height"> line-height 和 Web / CSS / font-family"> font-family 。

在所有這些屬性中，使用 font 速記屬性時(shí)只需要 font-size 和 font-family 。

正斜杠必須放在 font-size 之間， 和 line-height 屬性 。

完整的示例如下所示:

font: italic normal bold normal 3em/1.5 Helvetica, Arial, sans-serif;

主動學(xué)習(xí):使用樣式文本

在這個主動的學(xué)習(xí)課程，我們沒有任何具體的練習(xí)，你可以做:我們只是希望你有一個很好的游戲與一些字體/文本布局屬性，看看你可以生產(chǎn)！ 您可以使用離線HTML / CSS文件執(zhí)行此操作，也可以在下面的可編輯實(shí)例中輸入代碼。

如果發(fā)生錯誤，您可以隨時(shí)使用重置按鈕重置。

<div class="body-wrapper" style="font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;">
  <h2>HTML Input</h2>
  <textarea id="code" class="html-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;">
  <p>Some sample text for your delight</p></textarea>

  <h2>CSS Input</h2>
  <textarea id="code" class="css-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;">p {

  }</textarea>

  <h2>Output</h2>
  <div class="output" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"></div>
  <div class="controls">
?   <input id="reset" type="button" value="Reset" style="margin: 10px 10px 0 0;">
  </div>
</div>

var htmlInput = document.querySelector(".html-input");
var cssInput = document.querySelector(".css-input");
var reset = document.getElementById("reset");
var htmlCode = htmlInput.value;
var cssCode = cssInput.value;
var output = document.querySelector(".output");

var styleElem = document.createElement('style');
var headElem = document.querySelector('head');
headElem.appendChild(styleElem);

function drawOutput() {
  output.innerHTML = htmlInput.value;
  styleElem.textContent = cssInput.value;
}

reset.addEventListener("click", function() {
? htmlInput.value = htmlCode;
? cssInput.value = cssCode;
? drawOutput();
});

htmlInput.addEventListener("input", drawOutput);
cssInput.addEventListener("input", drawOutput);
window.addEventListener("load", drawOutput);

概要

我們希望你喜歡在這篇文章中玩文字！ 下一篇文章將給你所有你需要知道的樣式HTML列表。