primer
除了段落可以重排之外,CSS還可以把標籤刷成不同的外表。這裡把DIV標籤刷成BUTTON。
原來的
原始碼(css_selector_hw1.html)
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'/>
<title>CSS Selectors</title>
<link rel='stylesheet' href='css_selector_hw1.css'/>
</head>
<body>
<div class='page'>
<h1>CSS <em>Selectors</em></h1>
<p class='synopsis'>CSS selectors let you <em>select</em> individual HTML elements in an HTML
document. This is <strong>super</strong> useful.</p>
<p>Classes are ridiculously important, since they allow you to select
arbitrary boxes in your web pages.</p>
<p>We’ll also be talking about links in this example, so here’s
<a href='https://internetingishard.com'>Interneting Is Hard</a> for us to
style.</p>
<div>Button One</div>
<div class='button'>Button Two</div>
<div class='call-to-action button'>Button Three</div>
<a class='button' href='nowhere.html'>link button one</a>
<a class='button call-to-action' href='nowhere.html'>link button two</a>
<button>Button Three</button>
<hr/>
<p>
This is a paragraph with a specified bottom padding
</p>
<p>
This is another paragraph with a specified bottom padding in percent
</p>
<div class='spec1'>
<p>
This is a paragraph with a specified bottom padding
</p>
<p >
This is another paragraph with a specified bottom padding in percent
</p>
</div>
</div>
</body>
</html>改成
原始碼(css_selector.html)
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'/>
<title>CSS Selectors</title>
<link rel='stylesheet' href='css_selector.css'/>
</head>
<body>
<div class='page'>
<h1>CSS <em>Selectors</em></h1>
<p class='synopsis'>CSS selectors let you <em>select</em> individual HTML elements in an HTML
document. This is <strong>super</strong> useful.</p>
<p>Classes are ridiculously important, since they allow you to select
arbitrary boxes in your web pages.</p>
<p>We’ll also be talking about links in this example, so here’s
<a href='https://internetingishard.com'>Interneting Is Hard</a> for us to
style.</p>
<div>Button One</div>
<div class='button'>Button Two</div>
<div class='call-to-action button'>Button Three</div>
<a class='button' href='nowhere.html'>link button one</a>
<a class='button call-to-action' href='nowhere.html'>link button two</a>
<button>Button Three</button>
</div>
</body>
</html>