码迷,mamicode.com
首页 > Web开发 > 详细

css笔记

时间:2016-10-14 23:58:41      阅读:392      评论:0      收藏:0      [点我收藏+]

标签:标签

css的调用:

<!--css文件的用法-->
<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<div style="height: 45px;background: blue;"></div>

	<div>
	<div style="height: 500px;background-color:green;float: left;width: 30%;">left</div>
	<div style="height: 500px;background-color: pink;float: left;width: 70%">right</div>
	</div>
</body>
</html>
###################整个标签调用(全局)#######################
<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		div{
		background-color:red;
		}	
	</style>

</head>

<body>
	<div style="height: 45px;background: blue;"></div>
	<div>
		<div>left</div>
		<div>right</div>
	</div>
</body>
</html>

########################################################
###分组调用,第一个和三个是红色,第二个和第四个为绿色###
<!DOCTYPE html>
<html>
<head>
	<title></title>
<style type="text/css">
	.d1{
	background-color:red;
	}
	.d2{
	background-color:green;
	}	
	</style>

</head>

<body>
	
		<div class="d1">div1</div>
		<div class="d2">div2</div>
		<div class="d1">div3</div>
		<div class="d2">div4</div>

</body>
</html>
#########全局和局部同时存在########
<!DOCTYPE html>
<html>
<head>
	<title></title>
<style type="text/css">
	.d1{
	background-color:red;
	}
	.d2{
	background-color:green;
	}
	div{
		background-color: orange
	}	
	</style>

</head>

<body>
		<div>d0</div>
		<div class="d1">div1</div>
		<div class="d2">div2</div>
		<div class="d1">div3</div>
		<div class="d2">div4</div>

</body>
</html>


##########################################
<!--css可以写在这里下面引用,只能在本页使用-->
<!DOCTYPE html>
<html>
<head>
	<title></title>
<style type="text/css">
	.h1{
		background-color:red;
	}
	.h2{
		background-color:green;
	}
	.h3{
		background-color: orange;
	}
	h1,h2,h3,h4{
		background-color: brown;
	}	
	</style>

</head>

<body>
		<h1>h1</h1>
		<h2>h2</h2>
		<h3>h3</h3>
		<h4 class="h2">h4</h4>
</body>
</html>


##############################################
<!DOCTYPE html>  
<html>  
<head>  
    <title></title>  
<style type="text/css">  
    .d1{  
    background-color:red;  
    }  
    .d2{  
    background-color:green;  
    }  
    div{  
        background-color: orange  
    }     
    </style>  
  
</head>  
  
<body>  
        <div>d0</div>  
        <div class="d1">div1</div>  
        <div class="d2">div2</div>  
        <div class="d1">div3</div>  
        <div class="d2">div4</div>  
  
</body>  
</html>  
################-id-only-one#########################
<!DOCTYPE html>  
<html>  
<head>  
    <title></title>  
<style type="text/css">  
    #id_test{  
        background-color:orange;
        height: 300px;
        width: 500px; 
    }
    </style>  
</head>  
<body>  
    <div id="id_test">d0</div>      
</body>  
</html>  
##################与后台交互时需要用到name的变量########################
<!DOCTYPE html>  
<html>  
<head>  
    <title></title>  
<style type="text/css">  
    .a1{  
        background-color:orange;
        height: 300px;
        width: 500px; 
    }
    </style>  
</head>  
<body>  
    <div name="name_test" class="a1">d0</div>      
</body>  
</html>
##################属性选择器########################
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
    <title>wangjiadongge</title>
    <style type="text/css">
        .a1 input[type=‘text‘]{
            width: 100px;
            height: 200px;
        }   
    </style>
</head>
<body>
    <input type="text">
    <div class="a1">
    <input type="text">    
    </div>
</body>
</html>
--------------------主要适用于批量操作---------------------
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
    <title>wangjiadongge</title>
    <style type="text/css">
        .a1 input[type=‘text‘]{
            width: 100px;
            height: 200px;
        }
        .a1 h1{
            background-color: orange;
        }

    </style>
</head>
<body>
    <input type="text">
    <div class="a1">
    <input type="text">
    <h1 class="h1">我是一个神!</h1>    
    </div>
</body>
</html>

####################################################  
############鼠标放所在改变显示颜色和大小############

<!DOCTYPE html>  
<html>  
<head>  
    <title></title>  
<style type="text/css">  

    li:hover{  
        color:red;
        font-size: 50px;    
    }      
    </style>  
  
</head>  
  
<body>  
        <ul>
            <li>111</li>
            <li>222</li>
            <li>333</li>
        </ul> 
</body>  
</html>  
###################background-image#########################
<!DOCTYPE html>  
<html>  
<head>  
    <title></title>  
<style type="text/css">  

    .bg{  
        background-image: url(/image/a1.jpg);
        height: 500px;
        width: 500px;
        background-repeat: no-repeat;   #不重复铺图,只显示一张
        background-repeat: repeat-x;    #水平平铺
        background-repeat: repeat-y;    #垂直平铺
    }      
    .po{
        background-position: -22px -22px;     #位置点移动
    }

    .bk{
        border: 3px solid red;height: 10px;   #边框的粗细
        border: 3px 
    }

    </style>  
</head>  
<body>  
        <ul>
            <li>111</li>
            <li>222</li>
            <li>333</li>
        </ul>
        <h1>background</h1>
        <div class="bg"></div>
----------------------------------
    <div style="border:10px solid orange;height:70px;margin-top:10px;">
        <div style="background-color:red;height:70px;margin-top:10px;"></div>
    </div>
-----------------------------------
<h1>display</h1>
<div style="display:none">none</div>   #隐藏
<div style="display:block"></div>
<div style="display:inline"></div>

<h1>cursor显示鼠标手势</h1>
<div style="cursor:pointer;height:20px"></div>
<p>
    <span style="cursor:pointer;">pointer</span>
    <span style="cursor:help;">help</span>
    <span style="cursor:wait;">wait</span>
    <span style="cursor:move;">move</span>
    <span style="cursor:crosshair;">crosshair</span>
</p>
</body>  
</html> 
######################postion########################
<!DOCTYPE html>
<html>
<head>
    <title></title>

</head>
<body>
    <div style="height:400px;"></div>
    
    <div style="height:400px;">
        <div style="height:200px;width:30px;background-color:red;position:relative;top:20px"></div>
    </div>

    <div style="height:400px;">
        <div style="height:200px;width:30px;background-color:red;position:absolute;top:0px"></div>
    </div>

    <div style="height:400px;">
        <div style="height:200px;width:30px;background-color:red;position:fixed;top:0px"></div>
    </div>

</body>
</html> 
######################wen jian jia zhong#########################
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/oldboy.css">
<meta charset="utf-8">
    <title>title</title>
</head>
<body>
    <div class="pg-header"></div>
    
    <div class="pg-body">
        <div class="menu"></div>
        <div class="content"></div>
    </div>

</body>
</html>
###################################################


本文出自 “小东哥” 博客,谢绝转载!

css笔记

标签:标签

原文地址:http://xiaodongge.blog.51cto.com/11636589/1862047

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!