css简写规则总结
内边距
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; 描述 所有边框规则都一样
简写例子
border-top-width:5px;
border-top-color:red;
border-top-style:solid;实线
简写：border-top:5px soild red;
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子的简化规则</title>
<!-- <link rel="stylesheet" href="样式表"> -->
<!-- 假装外联样式表 -->
<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{
/*简化语法*/
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">简化后盒子一</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
CSS常用选择器
群组选择器多用于文档格式的初始化
相邻选择器是指 选中的那一个的右边的那个
伪类选择器
/*:nth-child(m): 关注位置*/
/*:nth-of-type(n): 除了关注关注位置外, 还需要元素的类型匹配*/
表单控件
当表单元素可用时
form :enabled{
}
控件获取到焦点时
form :focus {
}
设置鼠标悬停时的样式
button:hover {
}
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--<link rel="stylesheet" href="static/css/style4.css">-->
<title>CSS常用选择器</title>
<style>
/*标签选择器*/
ul{
border:1px soild red;
padding-left: 0;
margin:0;
}
/*层级选择器*/
ul li{
list-style: none;
width:50px;
height: 50px;
background-color:#888;
/*文本水平居中*/
text-align: center;
line-height: 50px;
/*设置圆角度*/
border-radius: 50%;
/*设置内联块*/
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;
}
/*群组选择器（应用场景多用于文档样式的初始化）*/
#bg-10, .bg-8{
border:2px solid greenyellow;
}
/*相邻选择器*/
.bg-7 + * {
background-color: black;/* 第7个小球相邻的是第8个小球被选中,可以用li,也可以用* */
}
/*兄弟选择器*/
#bg-9 ~ * {
/*background-color: blueviolet;!* 第9个小球后面的所有同级元素全部选中 *!*/
}
/*伪类：子元素选择器*/
ul :first-child{
background-color: darkorange;/* 第一个子元素 */
}
ul :last-child{
background-color: deeppink; /* 最后一个子元素 */
}
/*指定元素的第几个位置使用（直接在指定元素指定第几个）*/
ul :nth-child(7){
background-color: blue; /*第七个子元素*/
}
/*:nth-last-child(n): 倒数第n个*/
ul :nth-last-child(5) {
background-color: coral; /* 倒数第5个子元素,6号球 */
}
/*伪类选择器（关注类型之后 在关注位置）*/
ul li:nth-of-type(4){
background-color: cornflowerblue;
}
ul li:first-of-type{
background-color: black;/*第一个li类型的元素北京*/
}
ul li:last-of-type{
background-color: black;/*最后一个li类型的元素北京*/
}
.wo{
width:200px;
height:100px;
background-color: #888888;
}
.dani {
width:200px;
height:80px;
background-color: #888888;
}
/*选中每个div中的第二个子元素背景*/
div :nth-child(2){
/*background-color: blue;*/
}
/*先选中第一个div中的第三个子元素背景*/
div:first-of-type :nth-child(3){
background-color: crimson;
}
/*选中只有一个子元素且子元素为p*/
p:only-of-type{
background-color: green;
}
/*伪类：表单控件*/
form :enabled{
/*当表单元素可用时,将背景设置成小麦色*/
background-color: greenyellow;
}
* 将单选按钮中的文本前景色设置为红色,使用了伪类和相邻选择器 */
/*选择的过程是: 先获取到当前被选中的按钮, 再获取它的相邻子元素, 其实就是label标签,再将label的文本设置为红色*/
form :checked + * { /* 这里不用label , 用 '*' 号也可以 */
color: red;
}
/* 当在控件中输入无效值文本自动变成红色 */
/*例如邮箱文本框,如果输入的不是一个有效的邮箱格式字符串, 就会实时的用颜色提示用户的*/
form :invalid {
color: red;
}
/* 设置控件获取到焦点时的样式 */
/*控件获取到焦点时, 背景变成绿色*/
form :focus {
background-color: lightgreen;
}
/* 设置鼠标悬停时的样式 */
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">账号：</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>运行实例 »
点击 "运行实例" 按钮查看在线实例