CSS學習筆記
CSSDemo
- CSS Demo1
- CSS Demo2
- Css Demo3
CSS Demo1
HTML
<html>
<head>
<title>這是網頁的標題</title>
<link rel="stylesheet" type="text/css" href="css.css">
<style type="text/css">
.center{text-align:center; color:red}
</style>
</head>
<body>
<h1 class="center">這是網頁現實的內容</h1>
<p class="center">hello world</p>
<p class="center">right demo</p>
<p class="center">center demo</p>
<a href="http://www.baidu.com">這是一個連接</a>
</body>
<html>
CSS
p {text-align:center;color:red}
h1,h2,h3,h4,h5,h6 {color:blue}
p.right{text-align:right}
p.center{text-align:center}
.center{text-align: center;color:blue}
#green{color:green}
CSS Demo2
HTML
<html>
<head>
<link rel="stylesheet" type="text/css" href="lab1.css">
</head>
<body>
<h1>hello world</h1>
<h2>welcome to mark</h2>
<p>zhangsan lisi wangwu</p>
</body>
</html
CSS
body{background-color:red}
h1{font-size: 36pt}
h2{color: blue}
p{margin-left: 50px}
CSS Demo3
HTML
<html>
<head>
<link rel="stylesheet" type="text/css" href="lab2.css">
</head>
<body>
<h1>hello world</h1>
<hr>
<p>welcome to mark</p>
<p><a href="http://www.google.com.hk">This is a link</a></p>
</body>
</html>
CSS
body {background-color: orange}
h1 {color:green; font-size: 20pt}
hr {color:red}
p {font-size: 11pt; margin-left: 15px}
a:link {color: green}
a:visited {color: yellow}
a:hover {color: black}
a:active {color: blue}