首页 > 代码库 > css笔记
css笔记
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="http://www.mamicode.com/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笔记
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。