Web基本教程~04.css入門
阿新 • • 發佈：2021-01-06
Web基本教程~04.css入門
上一期
CSS 的引入方式
內聯樣式（行內樣式）
<p style="background: orange; font-size: 30px;">MyFirstCSS<p>
內部樣式
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
p {
background: orange;
font-size 外部樣式
<link rel="stylesheet" type="text/css" href="xxx.css">
基礎選擇器
全域性選擇器
可以和任何元素匹配,不推薦使用
*{
margin: 0;
padding: 0;
}
元素選擇器
就是內部樣式案例的方式,不過實際應用中最常用的還是類選擇器
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
p {
background: orange;
font-size: 30px;
}
</style>
</head>
<body>
<p>元素選擇器<p>
</body>
</html>
類選擇器
這個最為靈活,實戰中也用的最多。一般都是把css作為一個單獨的檔案存放,寫完後直接呼叫需要的類即可。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
.one{
width:800px;
}
</style>
</head>
<body>
<h2 class="one">today</h2>
</body>
</html>
ID 選擇器
相對來講還可以
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
#my{
border:3px dashed green;
}
</style>
</head>
<body>
<h2 id="my">today</h2>
</body>
</html>
背景屬性
CSS 背景屬性主要有以下幾個
background-color 屬性
屬性設定背景顏色
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.background{
width: 300px;
height: 200px;
background-color: aquamarine;
}
</style>
</head>
<body>
<div class="background">
color 顏色值<br/>
transparent 預設值,背景是透明的<br/>
inherit 從父類繼承
</div>
</body>
</html>
background-image 屬性
設定元素的背景影象
元素的背景是元素的總大小， 包括填充和邊界（ 不包括外邊距）。預設情況下background-image 屬性放置在元素的左上角，如果影象不夠大的話會在垂直和水平方向平鋪影象，如果影象大小超過元素大小從影象的左上角顯示元素大小的那部分。
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.background{
width: 300px;
height: 200px;
background-image:url(./img/a.jpg);
}
</style>
</head>
<body>
<div class="background">
url 影象的地址 <br/>
transparent 預設值,沒有背景影象<br/>
inherit 從父類繼承
</div>
</body>
</html>
background-repeat 屬性
該屬性設定如何平鋪背景影象
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.background{
width: 300px;
height: 200px;
background-image:url(./img/a.jpg);
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div class="background">
repeat 預設值，像垂直水平方向平鋪<br/>
repeat-x 只像水平平鋪<br/>
repeat-y 只像垂直平鋪<br/>
no-repeat 不平鋪 <br/>
inherit 從父類繼承
</div>
</body>
</html>
background-size 屬性
屬性設定背景影象的大小
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.background{
width: 300px;
height: 200px;
background-image:url(./img/a.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
}
</style>
</head>
<body>
<div class="background">
length 設定背景圖片的競度和高度。簡一個值設定寬度，第二個值設定高度。如果只沒置一個值，第二個值會預設為auto
peroentage 計算相對於背景定位區域的百分比。第一個值設定寬度，第二個值設定高度。如果只設置一個值，那麼第二個值預設為auto
cover 保持影象的淑模比並將影象縮沒成完全覆蓋背最定位區域的最小大小
contain 保持圖傍的調模比並將影象運瞞成適合背景定位區域的最大大小
</div>
</body>
</html>
background-position
該屬性設定背景影象的起始位置，其預設值是：0% 0%
background-position: center;
background-attachment 屬性
該屬性設定背景影象是否固定或者隨頁面滾動。簡單來說就是一個頁面有滾動條的話， 滑動滾動條背景是固定的還是隨頁面滑動的