Web – HyperText Markup Language – Cascading Style Sheets

View Github Repository Open presentation in a new window

chhu0830

See all presentation from chhu0830

Web – HyperText Markup Language – Cascading Style Sheets

0 0

chhu0830.github.io

On Github chhu0830 / chhu0830.github.io

Web

HyperText Markup Language

基本架構

<!DOCTYPE HTML> <html>   <head>     <title> ... </title>   </head>   <body>     ...   </body> </html>

HTML Tags

<tagname> content </tagname>

常用標籤

<h1> describes a heading </h1> <a href="..."> describes a link </a> <div> describes a block </div> <p> describes a paragraph </p> <img src="..." alt="..."> describes a image <br> describes a line break <!-- describes a comment --> 
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>DEMO</title>
</head>
<body>
    <h1> CS-Camp </h1>
    <a href="http://camp.cs.nctu.edu.tw/">交大資工逐夢營</a>
    <div> This is a block. </div>
    <p> This is a paragraph. </p>
    <img src="CS-Camp.png" alt="CS-Camp" style="height:100px;">
    There is a <br> line break.
    <!-- CS-Camp is the best. -->
</body>
</html>

Cascading Style Sheets

CSS Syntax

Selector {
    Property: value;
    Property: value;
    Property: value;
    ...
}

記得加分號，因為很重要，所以要說三遍

Selector

Find HTML elements

The element Selector 
p {
    ...;
}
The id Selector 
#id {
    ...;
}
The class Selector 
.class {
    ...;
}