收藏
批改狀態(tài)：合格
老師批語：總結(jié)的不錯(cuò)
css簡(jiǎn)寫規(guī)則總結(jié)
內(nèi)邊距
padding:10px 20px 30px 40px 代表上下左右
padding:10px 20px 30px 代表上10 左右相等 下
padding:10px 20px 上下相等 左右相等
padding:10px 上下左右相等
外邊距
margin:10px 20px 30px 40px 代表上下左右
margin:10px 20px 30px 代表上10 左右相等 下
margin:10px 20px 上下相等 左右相等
margin:10px 上下左右相等
邊框border
border-top:1px soild #888; 描述 寬度-樣式-前景色
border:2px soild #888; 描述 所有邊框規(guī)則都一樣
簡(jiǎn)寫例子
border-top-width:5px;
border-top-color:red;
border-top-style:solid;實(shí)線
簡(jiǎn)寫：border-top:5px soild red;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子的簡(jiǎn)化規(guī)則</title>
<!-- <link rel="stylesheet" href="樣式表"> -->
<!-- 假裝外聯(lián)樣式表 -->
<style>
.box1{
/*完整語法*/
margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px;
padding-top: 20px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 20px;
background-color: blue;
width: 200px;
height: 200px;
border-top-width:5px;
border-top-style:solid;
border-top-color: #888;
border-right-width:5px;
border-right-style:solid;
border-right-color: black;
border-bottom-width:5px;
border-bottom-style:solid;
border-bottom-color: red;
border-left-width:5px;
border-left-style:solid;
border-left-color: green;
}
.box2{
/*簡(jiǎn)化語法*/
margin:10px 20px 30px 40px;
padding: 20px;
border-top: 5px solid #888;
border-right: 5px solid black;
border-bottom: 5px solid red;
border-left: 5px solid green;
background-color: blue;
width:200px;
height: 200px;
}
</style>
</head>
<body>
<div class="box1">盒子一</div>
<br>
<div class="box2">簡(jiǎn)化后盒子一</div>
</body>
</html>點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
CSS常用選擇器
群組選擇器多用于文檔格式的初始化
相鄰選擇器是指 選中的那一個(gè)的右邊的那個(gè)
偽類選擇器
/*:nth-child(m): 關(guān)注位置*/
/*:nth-of-type(n): 除了關(guān)注關(guān)注位置外, 還需要元素的類型匹配*/
表單控件
當(dāng)表單元素可用時(shí)
form :enabled{
}
控件獲取到焦點(diǎn)時(shí)
form :focus {
}
設(shè)置鼠標(biāo)懸停時(shí)的樣式
button:hover {
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--<link rel="stylesheet" href="static/css/style4.css">-->
<title>CSS常用選擇器</title>
<style>
/*標(biāo)簽選擇器*/
ul{
border:1px soild red;
padding-left: 0;
margin:0;
}
/*層級(jí)選擇器*/
ul li{
list-style: none;
width:50px;
height: 50px;
background-color:#888;
/*文本水平居中*/
text-align: center;
line-height: 50px;
/*設(shè)置圓角度*/
border-radius: 50%;
/*設(shè)置內(nèi)聯(lián)塊*/
display: inline-block;
/*增加左外邊距*/
margin-left: 10px;
/*增加陰影效果;*/
box-shadow: 2px 2px 1px aquamarine;
}
/*id選擇器*/
#bg-2{
background-color: crimson;
}
/*類選擇器*/
.bg-1{
background-color: coral;
}
li[id=bg-3]{
border:2px solid red;
}
/*群組選擇器（應(yīng)用場(chǎng)景多用于文檔樣式的初始化）*/
#bg-10, .bg-8{
border:2px solid greenyellow;
}
/*相鄰選擇器*/
.bg-7 + * {
background-color: black;/* 第7個(gè)小球相鄰的是第8個(gè)小球被選中,可以用li,也可以用* */
}
/*兄弟選擇器*/
#bg-9 ~ * {
/*background-color: blueviolet;!* 第9個(gè)小球后面的所有同級(jí)元素全部選中 *!*/
}
/*偽類：子元素選擇器*/
ul :first-child{
background-color: darkorange;/* 第一個(gè)子元素 */
}
ul :last-child{
background-color: deeppink; /* 最后一個(gè)子元素 */
}
/*指定元素的第幾個(gè)位置使用（直接在指定元素指定第幾個(gè)）*/
ul :nth-child(7){
background-color: blue; /*第七個(gè)子元素*/
}
/*:nth-last-child(n): 倒數(shù)第n個(gè)*/
ul :nth-last-child(5) {
background-color: coral; /* 倒數(shù)第5個(gè)子元素,6號(hào)球 */
}
/*偽類選擇器（關(guān)注類型之后 在關(guān)注位置）*/
ul li:nth-of-type(4){
background-color: cornflowerblue;
}
ul li:first-of-type{
background-color: black;/*第一個(gè)li類型的元素北京*/
}
ul li:last-of-type{
background-color: black;/*最后一個(gè)li類型的元素北京*/
}
.wo{
width:200px;
height:100px;
background-color: #888888;
}
.dani {
width:200px;
height:80px;
background-color: #888888;
}
/*選中每個(gè)div中的第二個(gè)子元素背景*/
div :nth-child(2){
/*background-color: blue;*/
}
/*先選中第一個(gè)div中的第三個(gè)子元素背景*/
div:first-of-type :nth-child(3){
background-color: crimson;
}
/*選中只有一個(gè)子元素且子元素為p*/
p:only-of-type{
background-color: green;
}
/*偽類：表單控件*/
form :enabled{
/*當(dāng)表單元素可用時(shí),將背景設(shè)置成小麥色*/
background-color: greenyellow;
}
* 將單選按鈕中的文本前景色設(shè)置為紅色,使用了偽類和相鄰選擇器 */
/*選擇的過程是: 先獲取到當(dāng)前被選中的按鈕, 再獲取它的相鄰子元素, 其實(shí)就是label標(biāo)簽,再將label的文本設(shè)置為紅色*/
form :checked + * { /* 這里不用label , 用 '*' 號(hào)也可以 */
color: red;
}
/* 當(dāng)在控件中輸入無效值文本自動(dòng)變成紅色 */
/*例如郵箱文本框,如果輸入的不是一個(gè)有效的郵箱格式字符串, 就會(huì)實(shí)時(shí)的用顏色提示用戶的*/
form :invalid {
color: red;
}
/* 設(shè)置控件獲取到焦點(diǎn)時(shí)的樣式 */
/*控件獲取到焦點(diǎn)時(shí), 背景變成綠色*/
form :focus {
background-color: lightgreen;
}
/* 設(shè)置鼠標(biāo)懸停時(shí)的樣式 */
button:hover {
width: 56px;
height: 28px;
background-color: black;
color: white;
}
</style>
</head>
<body>
<ul>
<li class="bg-1">1</li>
<li id="bg-2">2</li>
<li id="bg-3">3</li>
<li id="bg-4">4</li>
<li class="bg-5">5</li>
<li class="bg-6">6</li>
<li class="bg-7">7</li>
<li class="bg-8">8</li>
<li id="bg-9">9</li>
<li id="bg-10">10</li>
</ul>
<div class="wo">
<p>我很帥</p>
<p>不能懷疑我</p>
<p>我說真的</p>
</div>
<br>
<div class="dani">
<p>不信就打你</p>
</div>
<div>
<form action="" method="GET">
<label for="uesrname">賬號(hào)：</label>
<input type="text" id="uesrname" >
<br>
<label for="pwd">密碼：</label>
<input type="password" id="pwd">
<br>
<input type="radio" id="man" name="xingbie">
<label for="man" value="man" >男</label>
<input type="radio" id="woman" name="xingbie">
<label for="woman" value="woman">女</label>
<button>登陸</button>
</form>
</div>
</body>
</html>點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
微信掃碼
關(guān)注PHP中文網(wǎng)服務(wù)號(hào)
技術(shù)交流群
QQ掃碼
加入技術(shù)交流群
Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號(hào)