Blogger Information
Blog 34
fans 1
comment 1
visits 40821
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
盒模型的简化规则和CSS常用选择器总结——2019年7月5日16时0分
嘿哈的博客
Original
639 people have browsed it

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>

运行实例 »

点击 "运行实例" 按钮查看在线实例

Correction status:qualified

Teacher's comments:总结的不错
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post