CSS 入門

3/25 by Lamuyang

網頁的組成

HTML

CSS

Javascript

CSS 的標準格式

selector {                     /選取器
    property: value            /屬性：數值
}

body{
    background-color: red;
}

像是這樣：

在網頁中加入 CSS 設定的方式

分為以下三種方式

1.外部套用

2.整頁套用

3.行內套用

1.外部引入

<!DOCTYPE html>
<html>
<head>
	<title>Test123</title>
    <style type="text/css">
        @import url(my_css.css);
    </style>
</head>
<body>
	<p>test123</p>
</body>
</html>

2.整頁套用

<!DOCTYPE html>
<html>
<head>
	<title>Test123</title>
	<style type="text/css">
        p {  
            background-color: blue;
            font-size: 12px;
        }
	</style>
</head>
<body>
	<p>test123</p>
</body>
</html>

3.行內套用

<!DOCTYPE html>
<html>
<head>
	<title>TEST123</title>
</head>
<body>
    <p style="color:blue";> 測試用喔喔 </p>
</body>
</html>

CSS的選取器

class選取器

ID選取器

標籤選取器

class選取器

Class 的宣告法，是先放一個句點「.」，之後再列出選擇器名稱。

.【Class 名稱】{屬性：設定值；...}

ID選取器

ID 的宣告法，是先放一個井字號 (#)，之後再列出選擇器名稱。

#【ID 名稱】{ 屬性：設定值；...}

標籤選取器

就是所有帶有某種標籤的都生效。

p{color:red;}

lab

<!DOCTYPE html>
<html>
<head>
	<title>Santa's list</title>
</head>
<body>
	<div id="Title">Santa's list

		<p id="John" class="name" class="boy">John</p>
		<p id="Cathy" class="name" class="girl">Cathy</p>
		<p id="Cindy" class="name" class="girl">Cindy</p>
		<p id="Willy" class="name" class="boy">Willy</p>
	</div>
</body>
</html>

請加入背景以及調整文字大小和排版

https://flukeout.github.io/