PTA Data Structures and Algorithms (English) 6-17
css
css選擇器:
1.基礎選擇器
2.複合選擇器
1.1標籤選擇器
可以選出所有相同的標籤,例如p標籤 p {color: red}
1.2類選擇器
用"."(圓點)來定義,可以選出1個或者多個標籤 .red {color: red}
1.3 id選擇器
用"#"來定義,一次只能選擇一個標籤,並且在HTML文件中只能出現一次 #red {color: red}
1.4 萬用字元選擇器
可以選擇所有的標籤(標題標籤除外) * {color: red}
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h4 {
font: 700 20px Microsoft yahei;
text-align: center;
}
.juzhong {text-align: center;}
</style>
</head>
<body>
<h4 >靜夜思</h4>
<p class="juzhong">
床前明月光,疑是地上霜。<br>
舉頭望明月,低頭思故鄉。<br>
</p>
</body>
</html>
css字型屬性
1.文字系列
css使用font-family
p {
font-family: "Microsoft Yahei",Arial;
}
- 各種字型之間必須使用英文狀態下的逗號隔開
- 一般情況下,如果有空格隔開的多個單片語成的字型需要加引號
2.文字大小
css使用font-size屬性定義字型大小
p {
font-size: 20px;
}
- px(畫素)大小是網頁的最常用單位
- 不同瀏覽器可能預設顯示的字號不一樣,儘量給一個明確值
- 可以給body指定整個頁面文字的大小
3.文字粗細
css使用font-weight屬性設定文字字型的粗細
normal 預設值,不加粗的
bold 定義粗體
100-900 400相當於normal,而700相當於bold,且這個數字後面不加單位
p {
font-weight: 700;
}
4.文字樣式
css使用font-style屬性設定文字的風格
normal 預設值
italic 顯示斜體樣式
p{
font-style: italic;
}
5.字型複合屬性
body{
font: font-style font-weight font-size/font-height font-family
}
使用font屬性時,必須按上面語法格式中的順序書寫,不能更換順序,並且各個屬性之間以空格隔開
不需要設定的屬性可以省略取預設,但必須保留font-size和font-family屬性
css文字屬性
1.文字顏色
color屬性用於定義文字的顏色
div {
color: red;/color: #ff0000
}
#ff000000 #ff6600 #35d765 為十六進位制,並且前面必須帶有#
2.對其文字
text-align 屬性用於設定元素內文字內容的水平對齊方式
div{
text-align: center;
}
left 左對齊(預設) right 右對齊 center 居中對齊
3.裝飾文字
text-decoration屬性,可以新增下劃線、刪除線、上劃線等
none 預設,沒有裝飾線
underline 下劃線
overline 上劃線
line-through 刪除線
4.文字縮排
text-indent屬性用來定義指定文字的第一行縮排
div {
text-indent: 16px;/text-indent: 2em;
}
2em—空兩格子的大小
5.行間距
line-height屬性用於設定行間的距離
p {
line-height: 28px;
}
css引入方式
1.行內樣式表
在元素標籤內部的style屬性中設定css樣式,適於修改簡單樣式
<div style="color: red; font-size: 12px;">
鍵盤敲爛,月入過萬
</div>
2.外部樣式表
-
新建一個字尾為.css的檔案,把所有的css程式碼放入此檔案中
-
在HTML頁面,使用<link>標籤引入這個檔案
<link rel="stylesheet" href="css檔案路徑">