基于CSS入門基礎(chǔ)必備
CSS選擇器:
標(biāo)簽選擇器:
標(biāo)簽名{樣式名1:樣式值1;.......}
作用: 會將當(dāng)前網(wǎng)頁內(nèi)的所有該標(biāo)簽增加相同的樣式
id選擇器:
#標(biāo)簽的id屬性值{樣式名1:樣式值1;.......}
作用:給某個指定的標(biāo)簽添加指定的樣式
類選擇器:
.類選擇器名{樣式名1:樣式值1;.......}
作用:給不同的標(biāo)簽添加相同的樣式
全部選擇器:
*{樣式名1:樣式值1;.......}
作用:選擇所有的HTML標(biāo)簽,并添加相同的樣式
----------------------------------------------------------------------------------
組合選擇器:
選擇器1,選擇器2,.....{樣式名1:樣式值1;.......}
作用:解決不同的選擇器之間重復(fù)樣式的問題
子標(biāo)簽選擇器:
選擇器1 子標(biāo)簽選擇器{樣式名1:樣式值1;.......}
屬性選擇器:
標(biāo)簽名[屬性名=屬性值]{樣式名1:樣式值1;.......}
作用:選擇某標(biāo)簽指定具備某屬性并且屬性值為某屬性的標(biāo)簽
CSS使用過程:
1.聲明css代碼域
2.使用選擇器選擇要添加樣式的標(biāo)簽
根據(jù)需求:
使用*選擇器給整個頁面添加基礎(chǔ)樣式
使用類選擇器給不同的標(biāo)簽添加基礎(chǔ)樣式
使用標(biāo)簽選擇器來給某類標(biāo)簽添加基礎(chǔ)樣式
使用id,屬性選擇器,style屬性聲明的方式給某一個標(biāo)簽添加個性化樣式
3.書寫樣式單
邊框設(shè)置
border:solid 1px;
字體設(shè)置
font-size:10px設(shè)置字體的大小
font-family:"黑體"; (設(shè)置字體的格式)
font-weight:bold; (設(shè)置字體加粗)
字體顏色設(shè)置
color:顏色;
背景色設(shè)置
background-color:顏色;
背景圖片設(shè)置
background-img:url(圖片的相對路徑)
background-repeate:no-repeate; 設(shè)置圖片不重復(fù)
background-size:cover;圖片平鋪整個頁面
寬高設(shè)置
浮動設(shè)置:
float:left; || float:right;
行高設(shè)置:
line-height:10;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css選擇器</title>
<style>
/*標(biāo)簽選擇器*/
table{
background-color: aquamarine;
border: solid 1px;
}
/*id選擇器*/
#t1{
background-color: blue;
}
/*類選擇器*/
.common{
width: 300px;
color: black;
height: 20px;
background-color: blueviolet;
}
/*全部選擇器*/
/*
*{
background-color: crimson;
}*/
/*組合選擇器*/
#t1,table{
width: 200px;
height: 200px;
}
/*子標(biāo)簽選擇器*/
p a{
color: crimson;
}
/*屬性選擇器*/
table[id=t2]{
background-color: blueviolet;
}
</style>
</head>
<body>
<h3>css選擇器</h3>
<br>
<hr class="common">
<hr>
<table id="t1" class="common">
<tr>
<td ></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<table id="t2">
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<p id="as">
<a >百度一下</a>
<a>360搜索</a>
</p>
</body>
</html>
CSS選擇器的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css選擇器使用</title>
<style>
table{
/* background-image: url("../img/1.jpg");
background-repeat: no-repeat;
background-size: cover;*/
}
body{
background-image: url("../img/1.jpg");
background-repeat: no-repeat;
background-size: cover;
}
td{
width: 100px;/*設(shè)置寬*/
color: yellow;/*設(shè)置文本的顏色*/
border: solid 1px red;/*設(shè)置邊框的顏色和大小*/
border-radius:10px;/*設(shè)置表框的角度*/
text-align: center;/*設(shè)置文本位置*/
font-weight: bold;/*設(shè)置文本加粗*/
letter-spacing: 10px;/*設(shè)置字體間距*/
}
ul{
background-color: gray;
height: 50px;
}
/*使用屬性選擇器*/
li{
list-style-type: none;/*設(shè)置li標(biāo)識符*/
float: left;/*設(shè)置菜單左浮動*/
/*display: inline; !*也表示設(shè)置去除li的小黑點或者空心原點等標(biāo)識符*!*/
}
/*子標(biāo)簽選擇器*/
li a {
color: blueviolet;
text-decoration: none; /*去掉超鏈接的下劃線*/
font-weight: bold;/*加粗超鏈接文字*/
font-size: 20px;/*設(shè)置超鏈接內(nèi)部標(biāo)簽字間距*/
margin-left: 20px;/*設(shè)置超鏈接標(biāo)簽的間距*/
}
</style>
</head>
<body>
<h3>css樣式獲取</h3>
<table>
<tr>
<td>姓名</td>
<td>學(xué)號</td>
<td>成績</td>
</tr>
<tr>
<td>張三</td>
<td>101</td>
<td>88</td>
</tr>
<tr>
<td>李四</td>
<td>102</td>
<td>99</td>
</tr>
</table>
<ul>
<li><a target="_blank">百度</a></li>
<li><a target="_blank">京東</a></li>
<li><a target="_blank">淘寶</a></li>
</ul>
</body>
</html>
顯示效果
CSS制作照片墻
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>照片墻</title>
<style>
body{
background-color: aqua;
text-align: center;
}
img{
width: 200px;
height: 200px;
padding: 10px;
background-color: white;
margin: 30px;
transform: rotate(-10deg) ;/*設(shè)置*/
}
/*偽類選擇器*/
img:hover
{
transform:rotate(0deg) scale(1.5);/*設(shè)置傾斜角度和縮放比例*/
z-index: 1;/*設(shè)置顯示優(yōu)先級別*/
transition: 1.5s;/*設(shè)置顯示時間*/
}
</style>
</head>
<body>
<br>
<br>
<br>
<br>
<img src="../img/c8.jpg" alt="">
<img src="../img/c14.jpg" alt="">
<img src="../img/c9.jpg" alt=""><br>
<img src="../img/c4.jpg" alt="">
<img src="../img/c5.jpg" alt="">
<img src="../img/c10.jpg" alt="">
</body>
</html>
效果顯示:
圖片.png
