Carlsbad caves

Carlsbad caves is a national park in the United States, located in the southeast of New Mexico. Visitors can enter on foot through the natural entrance or directly reach the 230 meter deep cave through the elevator.

<h1>Carlsbad Caverns (CarLsbad Caverns)</h1>
<p>
  Carlsbad Caverns (Carlsbad Caverns) It is a national park in the United States,
  Located in southeastern New Mexico. Visitors can pass through the day
  However, the entrance can be entered on foot, or you can directly reach the 230 meter deep cave through the elevator.
</p>
<style>
  h1 {
    font-family: Optima, Georgia, serif;
  }
  body {
    font-family: Helvetica, sans-serif;
  }
</style>

Generic font family

Font family usage suggestions

• The generic font family is written at the end of the font list. If the corresponding font cannot be found, it will be approximately replaced
• English font is placed in front of Chinese font, and Chinese characters include English

Using Web Fonts

Web fonts are awesome !

<h1>Web fonts are awesome !</h1>
<style>
  @font-face {
  font-family: "Megrim" ;
  src:
  urL(https://fonts.gstatic.com/s/megrim/v11/46kulbz5WjvLqJZVam_hVUdI1w.woff2)
  format('woff2' );
  }
  h1 {
  font-family; Megrim, Cursive;
  }
</style>

Font size font size

• keyword
  • small,medium,large
• length
  • px,em
• percentage
  • Font size relative to parent element

<section>
  <h2>A web font example</h2>
  <p class="note">Notes: Web fonts ...</p>
  <p>With this in mind, let's build...</p>
</section>
<style>
  section {
    font-size: 20px;
  }
  section h1 {
    /* // h1 Should be twice the parent 40px */
    font-size: 2em;
  }
  section .note {
    /* // Parent 80% 16px */
    font-size: 80%;
    color: orange;
  }
</style>

Font tilt

Normal Text

Italic Text

Word weight

• Fifty strings without reason (100)
• Jinse groundless fifty strings (200)
• Jinse groundless fifty strings (300)
• Fifty strings without reason (400 normal)
• Jinse unprovoked fifty strings (500)
• Jinse unprovoked fifty strings (600)
• Jinse unprovoked fifty strings (700 BOLD)
• Fifty strings without reason (800)
• Jinse groundless fifty strings (900)

<ul>
  <li class="w1">Fifty strings without reason(100)</li>
  <li class="w2">Fifty strings without reason(200)</li>
  <li class="w3">Fifty strings without reason(300)</li>
  <li class="w4">Fifty strings without reason(400-normal)</li>
  <li class="w5">Fifty strings without reason(500)</li>
  <li class="w6">Fifty strings without reason(600)</li>
  <li class="w7">Fifty strings without reason(700-bold)</li>
  <li class="w8">Fifty strings without reason(800)</li>
  <li class="w9">Fifty strings without reason(900)</li>
</ul>
<style>
  .W1 {
    font-weight: 100;
  }
  .W2 {
    font-weight: 200;
  }
  .W3 {
    font-weight: 300;
  }
  .W4 {
    font-weight: 400;
  }
  .w5 {
    font-weight: 500;
  }
  .W6 {
    font-weight: 600;
  }
  .w7 {
    font-weight: 700;
  }
  .w8 {
    font-weight: 800;
  }
  .w9 {
    font-weight: 900;
  }
</style>

Line height

<section>
  <h1>Font families recap</h1>
  <p>
    As we looked at in fundamental text and font styling, the fonts applied to
    your HTML can be controlled using the font-family property. This takes one
    or more font family names.
  </p>
</section>
<style>
  h1 {
    font-size: 30px;
    line-height: 45px;
  }
  p {
    font-size: 20px;
    /* For pure numbers, 20 * 1.6 = 32 will be calculated according to the font size  */
    line-height: 1.6;
  }
</style>

font: style weight size/height family

h1 {
  /* Italic weight size / line height font family */
  font: bold 14px/1.7 Helvetica, sans-serif;
}
p {
  font: 14px serif;
}

Text align text alignment:

Spacing spacing

Letter spacing: letter spacing
Word spacing: word spacing

Text indent
Can be set to negative

Text decoration

Text decoration: none, underline, line through middle underline, overline upper underline

White space blank

Debug CSS

• Right click the page and select "check"
• Use shortcut keys
  • Ctrl+Shift+I (Windows)
  • Cmd+Opt+I (Mac)

Q&A

vh: 1% of screen height
vw: 1% of screen width

rem: calculated from root element
em: parent element calculation
px: absolute size