外边距、内边距、边框的语法及建议写法
.top {
/* 外边距 */
margin: 30px 20px 10px 40px; /* 上 下 左 右 */
margin: 30px 50px 0; /* 上 左右 下 */
margin: 30px auto; /* 上下 左右 */
/* margin: 30px; 四个方向一致 */
/* 内边距 */
padding: 30px 20px 10px 40px; /* 上 下 左 右 */
padding: 30px 50px 0; /* 上 左右 下 */
padding: 20px 40px; /* 上下 左右 */
padding: 20px; /* 四个方向一致 */
/* 边框 */
border-top: 5px dotted #0094ff; /* 顶部边框 宽度 样式 颜色 */
border-right: 12px dashed #f00; /* 右部边框 宽度 样式 颜色 */
border-bottom: 8px double #4cff00; /* 底部边框 宽度 样式 样色 */
border-left: 3px inset #ff00dc; /* 左部边框 宽度 样式 颜色 */
border: 5px solid #ccc; /* 宽度 样式 颜色 简易写法 */ }
/* 子元素默认继承宽度，高度需要自行设置，如果不要继承宽度可以直接设置宽度 */
.top div {
/* 设置圆角 */
border-radius: 50%;}css常用选择器：
* 选择器
* {margin: 0 }.class选择器
.top {width: 200px}#id选择器
#top {height: 200px;}群组选择器，用英文状态下的半角逗号分隔
#top,.top {width: 200px;}层级选择器
.top ul li {display: blok;}相邻元素选择器
li + li
子元素选择器
.top > li {width: 200px;} 选择class="top"元素下的li元素伪类子元素选择器
li:only-child li:nth-child(2) li:nth-last-child(2) li:last-child
伪类类型选择器
li:only-of-type li:last-of-type li:first-of-type li:nth-of-type(2) li:nth-last-of-type(2)
属性选择器
li[class] ul[id=shuang]
实例
<!DOCTYPE html>
<html>
<head lang="zh-cn">
<!-- 网页编码 -->
<meta charset="UTF-8">
<!-- 网页标题 -->
<title>大兔子作业</title>
<!-- 内部css -->
<style>
/* 简易样式重置 ( * 选择器 ) */
* {
padding: 0;
margin: 0;
}
/* .class 选择器 */
.top {
width: 300px;
height: 300px;
background-color: #0094ff;
/* 外边距 */
margin: 30px 20px 10px 40px; /* 上 下 左 右 */
margin: 30px 50px 0; /* 上 左右 下 */
margin: 30px auto; /* 上下 左右 */
/* margin: 30px; 四个方向一致 */
/* 内边距 */
padding: 30px 20px 10px 40px; /* 上 下 左 右 */
padding: 30px 50px 0; /* 上 左右 下 */
padding: 20px 40px; /* 上下 左右 */
padding: 20px; /* 四个方向一致 */
/* 边框 */
border-top: 5px dotted #0094ff; /* 顶部边框 宽度 样式 颜色 */
border-right: 12px dashed #f00; /* 右部边框 宽度 样式 颜色 */
border-bottom: 8px double #4cff00; /* 底部边框 宽度 样式 样色 */
border-left: 3px inset #ff00dc; /* 左部边框 宽度 样式 颜色 */
border: 5px solid #ccc; /* 宽度 样式 颜色 简易写法 */
}
/* 子元素默认继承宽度，高度需要自行设置，如果不要继承宽度可以直接设置宽度 */
.top div {
background-color: #ff00dc;
height: 100%;
/* 设置圆角 */
border-radius: 50%;
}
/* #id 选择器 */
#shuang {
overflow: hidden;
text-align: center;
}
/* 层级选择器 */
#shuang li {
width: 50px;
height: 50px;
}
/* 选择父元素为 id="shuang" 元素的所有 <li> 元素。 */
#shuang > li {
text-align: center;
line-height: 50px;
display: inline-block;
margin: 0 10px;
}
/* 选择 <li> 元素之后紧跟的每个 <li> 元素 */
#shuang li + li {
border: 1px solid #ff006e;
}
/* 选择属于父元素的第一个子元素的每个 <li> 元素。 */
#shuang li:first-child {
border: 1px solid #ff006e;
background-color: aqua;
border-radius: 50%;
}
/* 选择奇数的每个 <li> 元素 */
#shuang li:nth-child(odd) {
background-color: #ccc;
}
/* 选择偶数的每个 <li> 元素 */
#shuang li:nth-child(even) {
background-color: aqua;
}
/* 属性选择器 */
#shuang li[class] {
border-radius: 50%;
}
/* 选择倒数第三个 <li> 元素 */
#shuang li:nth-last-child(3) {
border-radius: 50%;
}
/* 选择第8个 <li> 以及最后一个 <li> 元素 （ 群组选择器 ） */
#shuang li:nth-of-type(8),#shuang li:last-child {
border-radius: 25%;
}
</style>
</head>
<body>
<h1 style="font-size: 24px; text-align: center">盒模型和CSS选择器的练习 7月4日作业</h1>
<!-- 盒模型 -->
<div class="top">
<div></div>
</div>
<!-- 双色球 -->
<ul id="shuang">
<li>1</li>
<li>2</li>
<li>3</li>
<li class="ad">4</li>
<li>5</li>
<li class="ad">6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
</ul>
</body>
</html>点击 "运行实例" 按钮查看在线实例
