一、盒子模型
1、盒子模型是由contnt、padding、border、margin组成。
2、padding和margin均可从top、right、bottom、left四个方向设置距离。
3、border单边框完整语法：例 边框宽度:borde-width:1px;边框颜色border-color:#ccc;边框线条样式:border-style:solid;
4、border简写语法：例 border:1px solid #ccc;
二、选择器
1、实操中常用的选择器：
元素选择器:匹配所有的标签名 例 p{} ，a{}
ID选择器：匹配唯一的ID值的 例 id="one" #one{} 一个文档只允许一个ID名
clss选择器：匹配所有class值的 例 class="two" .two{} class 允许多次使用
属性选择器:匹配标签内所有属性 例 <a tarset="_bank"></a> a[tarset="_bank"]
群组选择器：多个选择器相关联的 例 #one , #two{}
兄弟相邻选择器:同级别的选择器 例 ul + ol + dl {}
通配选择器：匹配所有选择器的 例 *{}
伪类：是对选择器添加一些特殊效果 例 #one :hover{}。伪类以冒号符分割。
2、伪类：
first-child 匹配父元素的第一个子元素
last-child 匹配父元素的最后一个子元素
nth-child() 匹配父元素中任意子元素
nth-of-type() 匹配父元素中指定标签类型的子元素 当匹配不到时不生效
enabled 匹配所有form中input元素
实例
<!doctype html>
<html lang="en">
<head>
<title>0704作业</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="0704.css">
<link rel="shortuct" type="image/x-icon" href="favcion">
<script src="js/0704.js" type="text/javascript" ></script>
<style>
/*盒子完整语法*/
#div1{
width: 200px;
height:200px;
background-color: blue;
text-align: center;
line-height: 200px;
color: #fff;
font-size: 20px;
/*内边距*/
padding-top: 10px;
padding-right: 20px;
padding-bottom: 30px;
padding-left: 40px;
/*外边距*/
margin-top:10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px;
/*边框*/
/*上*/
border-top-width: 5px;
border-top-color: black;
border-top-style: solid;
/*右*/
border-right-width: 5px;
border-right-color: black;
border-right-style: dotted;
/*下*/
border-bottom-width: 5px;
border-bottom-color: black;
border-bottom-style: double;
/*左*/
border-left-width: 5px;
border-left-color: black;
border-left-style: dashed;
}
#div2{
width: 200px;
height: 200px;
text-align: center;
line-height: 200px;
font-size: 20px;
color: #fff;
background: green;
border: 5px solid black;
padding: 30px;
margin: 40px;
}
/*选择器*/
/*层级（后代）选择器*/
ol li{
color: pink;
font-size: 20px;
list-style-type: none;
}
/*ID选择器*/
#id{
color: blue;
font-size: 25px;
margin-left: 40px;
}
/*class选择器*/
.class{
color: yellow;
font-size: 30px;
margin-left: 40px;
}
/*属性选择器*/
a[href="#"]{
color: purple;
font-size: 35px;
margin-left: 40px;
text-decoration: none;
}
/*群组选择器*/
p,.qunzu,#qunzu{
color: orange;
font-size: 38px;
margin-left:40px;
}
/*相邻选择器*/
#xianglin + .xianglin{
color: green;
font-size: 38px;
margin-left:40px;
}
/*兄弟选择器*/
ol li~*{
font-size: 38px;
color: #DDA0DD;
margin-left:40px;
list-style:none;
}
/*伪类选择器*/
ul{
width: 600px;
height: 50px;
border: 2px solid red;
}
ul li,i{
width: 30px;
height: 30px;
border: 1px solid #ccc;
margin-left: 10px;
float: left;
line-height:30px;
text-align: center;
margin-top: 10px;
border-radius: 50%;
background: yellow;
color: black;
list-style:none;
}
/*ul下第一个子元素*/
ul :first-child{
background:pink;
}
/*ul下最后一个子元素*/
ul :last-child{
background: red;
}
/*从左到右指定任意子元素*/
ul :nth-child(2){
background: #0a628f;
}
/*从右到左指定任意子元素*/
ul :nth-last-child(4){
background: green;
}
/*在ul下指定i标签类型的元素*/
ul i:nth-of-type(2){
font-size: 30px;
}
/*表单伪类*/
/*指定所有input标签*/
form :enabled{
background: yellow;
}
/*指定被禁用的input标签*/
form :disabled{
background: red;
}
*{
/*font-size: 50px;*/
}
/*清除浮动*/
.lear{
clear: both;
}
</style>
</head>
<body>
<!-- 盒子完整语法 -->
<div id="div1">盒子完整语法</div>
<!-- 盒子简写语法 -->
<div id="div2">盒子简写语法</div>
<!--层级（后代）选择器-->
<ol>
<li>层级（后代）选择器</li>
</ol>
<!-- ID选择器 -->
<div id="id">ID选择器</div>
<!-- class选择器 -->
<div class="class">class选择器1</div>
<div class="class">class选择器2</div>
<div class="class">class选择器3</div>
<!-- 属性选择器 -->
<a href="#">属性选择器</a>
<!-- 群组选择器 -->
<p>群组选择器</p>
<span class="qunzu">群组选择器</span>
<div id="qunzu">群组选择器</div>
<!-- 相邻选择器 -->
<div class="xl">
<div id="xianglin">相邻选择器</div>
<div class="xianglin">相邻选择器</div>
</div>
<!-- 兄弟选择器 -->
<ol>
<li>兄弟选择器1</li>
<li>兄弟选择器2</li>
<li>兄弟选择器3</li>
<li>兄弟选择器4</li>
<li>兄弟选择器5</li>
</ol>
<!-- 伪类选择器 -->
<div class="clear"></div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<i>你</i>
<i>好</i>
<i>吗</i>
</ul>
<hr>
<!-- 表单伪类 -->
<form action="#" method="post" name="form">
<div>
<label for="username">账号:</label>
<input type="text" name="username" id="username" placeholder="指定input元素">
</div>
<div>
<label for="password">密码:</label>
<input type="text" name="username" id="password" placeholder="指定input内disabled属性" disabled>
</div>
<div>
<label for="email">邮箱:</label>
<input type="text" name="username" id="email" placeholder="请输入账号" readonly>
</div>
<input type="button" value="提交"><input type="reset" value="重置">
</form>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
