Free Code Camp - practice
  • Introduction
  • Getting Start
    • Introduction
    • Join the Free Code Camp Community
    • 實做成果
  • Front End Development Certification
    • HTML5 and CSS
      • HTML5 and CSS: 01-10
      • HTML5 and CSS: 11-20
      • HTML5 and CSS: 21-30
      • HTML5 and CSS: 31-40
      • HTML5 and CSS: 41-50
      • HTML5 and CSS: 51-
    • Responsive Design with Bootstrap
      • Bootstrap 01-10
      • Bootstrap 11-20
      • Bootstrap 21-31
    • Gear up for Success
    • jQuery
    • Basic Front End Development Projects
    • Basic JavaScript
      • Basic JavaScript 030
      • Basic JavaScript 060
      • Basic JavaScript 090
      • Basic JavaScript 101
    • Object Oriented and Functional Programming
    • Basic Algorithm Scripting
    • JSON APIs and Ajax
    • Intermediate Front End Development Projects
    • Intermediate Algorithm Scripting
Powered by GitBook
On this page

Was this helpful?

  1. Front End Development Certification
  2. HTML5 and CSS

HTML5 and CSS: 01-10

PreviousHTML5 and CSSNextHTML5 and CSS: 11-20

Last updated 5 years ago

Was this helpful?

簡單的 html 元素介紹、css 選擇器

01 - Say Hello to HTML Element

<h1>Hello World</h1>

02 - Headline with the h2 Element

<h1>Hello World</h1>
<h2>CatPhotoApp</h2>

03 - Inform with the Paragraph Element

<h1>Hello World</h1>
<h2>CatPhotoApp</h2>
<p>Hello Paragraph</p>

04 - Uncomment HTML

05 - Comment out HTML

<!-- <h1>Hello World</h1> -->
<h2>CatPhotoApp</h2>
<!-- <p>Hello Paragraph</p> -->

06 - Fill in the Blank with Placeholder Text

  • 又稱佔位符

07 - Delete HTML Elements

  • 空間太少,刪個元素

08 - Change the Color of Text

<h2 style="color: red">CatPhotoApp</h2>CatPhotoApp</h2>

<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>

09 - Use CSS Selectors to Style Elements

  • css properties

  • Cascading Style Sheets 層疊樣式表

  • inline style 內聯樣式

  • selecter 選擇器

  • element 元素

  • tag 標籤 <style></style>

  • curly braces 花括號 { }

  • semicolon 分號 ;

<style>
h2 {color: blue;}
</style>

<h2>CatPhotoApp</h2>

<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>

10 - Use a CSS Class to Style an Element

  • class 類

<style>
h2 {
color: blue;
}
.red-text{
color: red;
}
</style>

<h2 class="red-text">CatPhotoApp</h2>

<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
關于 Lorem ipsum - 阮一峰的網絡日志