CSS基本屬性
1. 什麼是CSS?
2. 如何導入css到html檔案中？【3種】
3. CSS的基本選擇器
4. CSS的基本屬性
4.1 修飾文本的樣式屬性
屬性名稱
屬性的作用
屬性的取值
text-transform
文本轉換大小寫
None:capitalize:Uppercase：
Lowercase
text-align
元素内容的水準對齊方式。
left | right | center....
word-spacing
單詞之間的額外間隙
數字+機關【px】可以為負數
letter-spacing
字元與字元之間的間隙
數字+機關【px】可以為負數
text-indent
定義塊内文本内容的縮進
數字+機關【px】可以為負數
vertical-align
定義行内元素在行框内的垂直對齊方式
top middle bottom
line-height
定義元素中行框的最小高度。
數字+機關【px】不能為負數
常用的文本屬性
#p1{
text-transform:none;
text-align:left;
text-indent: 50px;
}
#p2{
text-transform:capitalize;
text-align:center;
}
#p3{
text-transform:uppercase;
text-align:right;
}
#p4{
text-transform:lowercase;
}
#p5{
text-transform:full-width;
}
#p6{
word-spacing:10px;
letter-spacing:15px;
}
table{
height: 200px;
}
table tr td{
vertical-align: bottom;
}
#p7{
line-height: 20px;
}
常用的文本屬性
none：無轉換
capitalize：将每個單詞的第一個字母轉換成大寫 [常用]
Uppercase：将每個單詞轉換成大寫 [常用]
Lowercase:将每個單詞轉換成小寫 [常用]
full-width：将所有字元轉換成fullwidth形式。
如果字元沒有相應的fullwidth形式，将保留原樣。
這個值通常用于排版拉丁字元和數字等表意符号。(CSS3)
this is a html page! 這是一個html檔案
this is a html page! 這是一個html檔案
this is a html page! 這是一個html檔案
this is a html page! 這是一個html檔案
this is a html page! 這是一個html檔案
this is a html page! 這是一個html檔案
this is a html page! 這是一個html檔案
this is a html page! 這是一個html檔案
this is a html page! 這是一個html檔案
this is a html page! 這是一個html檔案
| vertical-align | 定義行内元素在行框内的垂直對齊方式 | top middle bottom |
4.2 修飾字型的樣式屬性
屬性名稱
屬性用途
屬性取值
font-style
文本是否為斜體
normal | italic | oblique
font-weight
文本字型的粗細
用數字表示文本字型粗細
100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
font-size
定義元素的字型大小
數字+機關【px】
font-family
定義元素文本的字型樣式
字型樣式名稱，可以有多個，中間用“，”
color
設定字型顔色
單詞/顔色碼
字型設定屬性
#p1{
font-style:italic;
}
#p2{
font-weight:900;
}
#p3{
font-size:50px;
font-weight:900;
}
#p4{
font-style:italic;
font-weight:900;
font-size:50px;
font-family:helvetica, verdana, sans-serif;
color: red;
}
字型設定屬性
font-style 文本是否為斜體 normal | italic | oblique
font-weight 文本字型的粗細 用數字表示文本字型粗細
font-size 定義元素的字型大小 數字+機關【px】
font-family 定義元素文本的字型樣式 字型樣式名稱，可以有多個，中間用“，”
color 設定字型顔色 單詞/顔色碼
4.3 修飾顔色的樣式屬性
屬性名稱
用途
取值
color
文本顔色
單詞/顔色碼
background-color
元素的背景色
單詞/顔色碼
顔色設定
p{
font-size: 30px;
color: red;
background-color: blue;
}
color 文本顔色 單詞/顔色碼
background-color 元素的背景色 單詞/顔色碼
4.4 修飾背景的樣式屬性
屬性名稱
用途
取值
background-color
定義元素使用的背景顔色。
單詞/顔色碼
background-image
定義元素使用的背景圖像
圖檔路徑
url(圖檔路徑);
background-repeat
定義元素的背景圖像如何填充
repeat-x： 背景圖像在橫向上平鋪
repeat-y： 背景圖像在縱向上平鋪
repeat： 背景圖像在橫向和縱向平鋪
no-repeat： 背景圖像不平鋪
背景設定
body{
background-image:url(imgs/avatar04.png);
background-repeat:no-repeat;
}
p{
font-size: 50px;
background-image: url(imgs/bg2.jpg);
}
background-color 定義元素使用的背景顔色。 單詞/顔色碼
background-image 定義元素使用的背景圖像 圖檔路徑url(圖檔路徑);
background-repeat 定義元素的背景圖像如何填充 repeat-x： 背景圖像在橫向上平鋪
repeat-y： 背景圖像在縱向上平鋪 repeat： 背景圖像在橫向和縱向平鋪 no-repeat： 背景圖像不平鋪
4.5 修飾邊框的樣式屬性
屬性名稱
用途
取值
border-width
定義元素的邊框厚度
數字。
上、右、下、左的順序
1個值 -- 全部4邊
2個值 -- 上/下 左/右
3個值-- 上 左/右 下
4個值 -- 上、右、下、左
border-style
定義元素的邊框樣式
none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
border-color
定義元素的邊框顔色
單詞/顔色碼。
上、右、下、左的順序
1個值 -- 全部4邊
2個值 -- 上/下 左/右
3個值-- 上 左/右 下
4個值 -- 上、右、下、左
border： || ||
邊框設定
#div1{
width: 100px;
height: 100px;
border: 5px double red;
}
#div2{
width: 200px;
height: 200px;
border-width: 10px;
border-style: solid;
border-color: blue;
}
#div3{
width: 300px;
height: 300px;
border-width: 10px 20px 30px 40px;
border-style: dotted;
border-color: red blue yellow greenyellow;
}
#div4{
width: 400px;
height: 400px;
border-width: 10px 20px;
border-style: dashed;
border-color: red blue;
}
img{
border: 10px outset black;
}
4.6 修飾文本裝飾樣式屬性
屬性名稱
用途
取值
text-decoration-line
設定文本的裝飾線
none： 指定文字無裝飾
underline： 指定文字的裝飾是下劃線
overline： 指定文字的裝飾是上劃線
line-through： 指定文字的裝飾是貫穿線
blink： 指定文字的裝飾是閃爍。
text-decoration-color
設定文本的裝飾線顔色
單詞/顔色碼
text-decoration-style
設定文本的裝飾線的樣式
solid | double | dotted | dashed | wavy
text-shadow
文字是否有陰影及模糊效果
數字1[水準偏移量]
數字2[垂直偏移量]
數字3[模糊度]
顔色
文本裝飾屬性
#p1{
font-size: 40px;
color: red;
text-decoration-line:underline;
text-decoration-color:blue;
text-decoration-style: double;
text-shadow: 5px 5px 20px #000000;
}
a{
font-size: 40px;
text-decoration-line:none;
color: black;
}
文本裝飾屬性---text-decoration-line---文本的裝飾線
去掉超連結上的下劃線
文本裝飾屬性---text-decoration-color---文本的裝飾線的顔色
文本裝飾屬性---text-decoration-style---文本的裝飾線的形狀
文本裝飾屬性---text-shadow---文字是否有陰影及模糊效果
4.7 修飾尺寸樣式屬性
屬性名稱
用途
取值
width
定義元素的寬度
數字
height
定義元素的高度
數字
尺寸設定
div{
width: 400px;
height: 400px;
border: 10px solid black;
background-color: red;
}
4.8修飾邊距樣式屬性
屬性名稱
用途
取值
margin
margin-top
margin-bottom
margin-left
margin-right
元素設定所有四個方向(上右下左)的外邊距
數字
上、右、下、左的順序
1個值 -- 全部4邊
2個值 -- 上/下 左/右
3個值-- 上 左/右 下
4個值 -- 上、右、下、左
padding
padding-top
padding-bottom
padding-left
padding-right
元素設定所有四個方向(上右下左)的内邊距
數字
上、右、下、左的順序
1個值 -- 全部4邊
2個值 -- 上/下 左/右
3個值-- 上 左/右 下
4個值 -- 上、右、下、左
尺寸設定
div{
width: 400px;
height: 400px;
border: 10px solid black;
background-color: red;
margin-top:-8px;
m
}
body{
padding-left: 100px;
}
4.9修飾清單樣式屬性
list-style-image--設定或檢索作為對象的清單項标記的圖像---圖檔路徑
list-style-type-----設定或檢索作為對象的清單項預設标記---disc | circle | square | decimal...
清單屬性
ul li{
font-size: 20px;
list-style-type: square;
}
ol li{
font-size: 30px;
list-style-image: url(imgs/list.png);
}
- name：張三
- age：23
- sex：男
- address：西安
- name：張三
- age：23
- sex：男
- address：西安