- css為選擇的HTML元素提供樣式东揣，典型的規(guī)則包含一個選擇器践惑，以及一個或多個屬性和值。
例子：
p{
color:black;
}
這個規(guī)則中嘶卧，把<p>元素作為選擇器尔觉，會選擇所有段落的元素，應(yīng)用顏色為黑色芥吟。color為屬性侦铜，它的值為black。所有的屬性和值都要放在大括號{}里钟鸵。
- 可以用逗號
,分割開元素名钉稍，可以一次選擇多個元素
例子：
p,h1{
color:black;
}
此規(guī)則，一次選擇了<p>和<h1>兩個元素棺耍，所有段落和h1標題都會應(yīng)用為黑色贡未。
- 在HTML中包含一個樣式，使用
<style>標記
例子：
<!doctype html>
<html>
<head>
<meat charset="utf-8">
<title>this is ......</title>
<style>
p{
color:green;
}
</style>
</head>
<body>
<p>
示例段落......
</p>
</body>
</html>
- 如果是一個復(fù)雜的HTML頁面蒙袍，最好鏈接到一個外部的樣式表俊卤，使用
<link>元素來包含一個外部樣式表。
例子：
<!doctype html>
<html>
<head>
<meat charset="utf-8">
<title>Head first Louge Elixirs</title>
<link type="text/css" rel="stylesheet" href="../lounge.css">
</head>
<body>
......
</body>
</html>
此時需要寫一個外部的css樣式表,文件名為：“l(fā)ounge.css”
例子：
body {
font-family: sans-serif;
}
h1, h2 {
color: gray;
}
h1 {
border-bottom: 1px solid black;
}
p {
color: maroon;
}
p.greentea {
color: green;
}
- 很多元素都能繼承害幅，如果為
<body>元素設(shè)置了一個可繼承的屬性瘾蛋，那么<body>元素中所有的子元素都會繼承這個屬性。
如果<body>元素中的子元素創(chuàng)建了一個更特定的屬性矫限，那個這個屬性就會覆蓋<body>元素的屬性哺哼。
例子：
body{
color:black;
}
p{
color:green;
}
此規(guī)則中佩抹，p的屬性綠色就會覆蓋body元素的屬性黑色。瀏覽器會優(yōu)先選擇更特定的的屬性顯示取董。
-
類選擇器
首先要在HTML中加入一個類棍苹，需要使用<class>屬性，再為其提供一個值茵汰。
例子：
<p class="greentea">
示例段落...
</p>
然后再在CSS中創(chuàng)建一個類選擇器枢里。
例子：
p.greentea{
color:green;
}
先選擇元素p,再選擇它的類名greentea，中間用一個.隔開蹂午。這樣就會選擇greentea類中的所有段落的文本為綠色栏豺。
- 使用
".classname"可以選擇屬性這個類的所有元素
例子：
.greentea{
color:greet;
}
此規(guī)則中，所有屬性值（屬性的類名）為greentea的元素的文本都會成為綠色
- 可以在一個
class屬性中放入多個類名豆胸，中間用空格隔開奥洼，這個元素就屬于多個類。
例子：
<p class="greentea raspberry blueberry">
- 初識CSS一些屬性
| 屬性 | 定義 |
|---|---|
| color | 設(shè)置文本元素的顏色 |
| top | 控制元素頂部位置 |
| font-weight | 控制文本粗細晚胡，可以用它設(shè)置粗體 |
| left | 指定一個元素的左邊位置 |
| line-height | 設(shè)置一個文本元素中的行間距 |
| background-color | 控制元素的背景顏色 |
| borde | 在元素周圍加邊框灵奖。可以為實線估盘、虛線等 |
| padding | 內(nèi)邊距：元素內(nèi)容和元素邊緣之間的距離 |
| font-size | 控制文本大小 |
| text-align | 控制文本居中瓷患、左對齊、右對齊 |
| letter-spacing | 在字母之母之間設(shè)置間距遣妥，如：LIke this |
| font-style | 設(shè)置斜體文本 |
| list-style | 允許改變列表中列表項的外觀 |
| background-image | 在元素后面放置一個圖像 |
