HTML5 and CSS: 01-10

簡單的 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

• 關于 Lorem ipsum - 阮一峰的網絡日志

• 又稱佔位符

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>