18.CSS
选择器
1.标签上直接设置style属性
<p style="color: red">直接标签里面写</p>2.id选择器
<style>
#i1{
color: green;
}
</style>
</head>
<body>
<p id="i1">以#开头命名</p>
</body>3.class选择器
<style>
.c1{
color: green;
}
</style>
</head>
<body>
<p class="c1">以点开头命名</p>
</body>4.标签选择器
<style>
p{
background-color: red;
}
</style>
</head>
<body>
<p >以标签命名</p>
</body>5.关联选择器（层级选择器）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*中间用空格隔开*/
span div{
background-color: red;
}
</style>
</head>
<body>
<div>第一层</div>
<span>
<div>span里面的div添加样式</div>
</span>
<div>第二层</div>
</body>
</html>6.组合选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*中间用逗号隔开*/
h1,h2,h3{
background-color: #dddddd;
}
</style>
</head>
<body>
<h1>第一个</h1>
<h2>第二个</h2>
<h3>第三个</h3>
</body>
</html>7.属性选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
input[name="derek"]{
width: 20px;
height: 20px;
}
</style>
</head>
<body>
<input type="text" name="derek">
<input type="password" name="pwd">
</body>
</html>根据属性进行筛选匹配，只有name="derek"的input标签才匹配上对应的样式
引用方法
1.样式优先级
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
background-color: red;
color: white;
}
.c2{
background-color:black;
}
</style>
</head>
<body>
<div class="c2 c1" style="color:palegreen" >第一层</div>
</body>
</html>style优先级最大，其它的按编写顺序，越靠近越优先
2.外部样式引用方法
<link rel="stylesheet" href="common.css">边框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
height: 48px; #边框高度
width: 80%;
border: 1px dotted black; #边框宽度 样式 颜色
font-size: 30px; #字体大小
line-height: 48px; #设置跟边框高度值一样，里面的字会垂直居中
text-align: center; #水平居中
}
</style>
</head>
<body>
<div style="border: 1px solid red">第一个边框</div>
<div class="c1">第二个边框</div>
</body>
</html>浮动（float）
默认块级标签会独占一行，用float可以让块级标签浮动在一起
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
width: 20%;
background-color: red;
float: left;
}
.c2{
width:60%;
background-color: black;
float: right;
}
</style>
</head>
<body>
<div class="c1">左边</div>
<div class="c2">右边</div>
</body>
</html>float实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.pg-header{
height: 38px;
background-color: #dddddd;
line-height: 38px;
}
.c2{
width: 98px;
height: 30px;
border: 1px solid green;
float: left;
}
</style>
</head>
<body style="margin: 0 auto">
<div class="pg-header">
<div>收藏本站</div>
<div>
<a>登陆</a>
<a>注册</a>
</div>
</div>
<div style="width: 300px;border: 1px solid red;">
<div class="c2"></div>
<div class="c2"></div>
<div class="c2"></div>
<div class="c2"></div>
<div class="c2"></div>
<div style="clear:both"></div>
</div>
</body>
</html>注：<body style="margin: 0 auto;">消除与浏览器顶部之间的缝隙；<div style="clear: both"></div>子边框浮动后，显示父边框的边框线
display
<body>
<!--改成行内标签-->
<div style="display: inline;background-color: red">1</div>
<!--改成块级标签-->
<span style="display: block;background-color: red">2</span>
<!--inline-block具有inline，默认自己有多少占多少-->
<!--具有block,可以设置高度，宽度，padding,margin-->
<span style="display: inline-block;background-color: blue">3</span>
<!--默认不显示-->
<div style="display: none">不显示</div>
</body>边距
1.外边距margin
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
border: 1px solid red;
height: 70px;
}
.c2{
background-color: green;
height: 50px;
/*margin-top: 25px;*/
}
</style>
</head>
<body>
<div class="c1">
<div class="c2"></div>
</div>
</body>
</html>注：margin-top：25px表示外边距，子边框与父边框top之间的距离为25px
2.内边距padding
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
border: 1px solid red;
height: 70px;
}
.c2{
background-color: green;
height: 50px;
padding-top: 10px;
}
</style>
</head>
<body>
<div class="c1">
<div class="c2"></div>
</div>
</body>
</html>注：padding-top：25px表示内边距，子边框内自己与top之间的距离为25px
position
1.position:fixed
-->固定在页面的某个位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
width: 50px;
height: 50px;
background-color: black;
color: white;
position: fixed;
bottom: 20px;
right: 20px;
}
.c2{
height: 5000px;
background-color: #eee;
}
</style>
</head>
<body>
<div class="c1">返回顶部</div>
<div class="c2"></div>
</body>
</html>2.让头部标题栏固定不动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.pg-header{
height: 48px;
background-color: black;
color: #dddddd;
/*固定不动*/
position: fixed;
top: 0px;
left: 0px;
right: 0px;
}
.pg-body{
height: 5000px;
margin-top: 50px;
background-color: #eee;
}
</style>
</head>
<body>
<div class="pg-header">头部</div>
<div class="pg-body">内容</div>
</body>
</html>3.实现三层
z-index -->层级顺序
opticy -->透明度（0~1）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
z-index: 10;
position: fixed;
/*让最外面一层的div居中*/
top: 50%;
left: 50%;
height: 400px;
width: 500px;
margin-left: -25px;
margin-top: -20px;
background-color: black;
}
.c2{
z-index: 9;
position: fixed;
background-color: black;
top: 0;
bottom: 0;
right: 0;
left: 0;
opacity: 0.5;
}
.c3{
height: 5000px;background-color: red;
}
</style>
</head>
<body style="margin: 0 auto">
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>
</body>
</html>overflow
1.over:auto
-->超出范围则出现滚动条
<div style="height: 200px;width: 140px;overflow: auto;">
<img src="fanye.jpg" />
</div>2.over:hidden
-->超出范围则隐藏
<div style="height: 200px;width: 140px;overflow: hidden;">
<img src="fanye.jpg" />
</div>hover(伪类)
抽屉网顶部条栏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.pg-header{
position: fixed;
right: 0;
left: 0;
top: 0;
height: 48px;
background-color: #2459a2;
line-height: 48px;
}
.pg-body{
margin-top: 50px;
}
.u{
width: 980px;
margin: 0 auto;
}
.pg-header .menu{
display: inline-block;
padding:0 10px;
color: white;
}
/*鼠标移动到当前标签上面时，以下css属性才生效*/
.pg-header .menu:hover{
background-color: blue;
}
</style>
</head>
<body>
<div class="pg-header">
<a class="logo">logo</a>
<a class="menu">全部</a>
<a class="menu">42区</a>
<a class="menu">段子</a>
</div>
<div class="pg-body">
<div class="u">正文</div>
</div>
</body>
</html>background-image
background-repeat有四个属性repeat（默认，重复占满）,no-repeat（不重复）,repeat-x（只横着重复放）,repeat-y（只竖着重复放）
background-position-x表示看背景图片的窗口水平方向想右移动，background-position-y表示看背景图片的窗口垂直向下移动
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
background-image: url('fanye.jpg');
height: 700px;
width: 700px;
border:1px solid red;
background-repeat: no-repeat;
background-position-x:100px;
background-position-y:100px;
}
</style>
</head>
<body>
<div class="c1"></div>
</body>
</html>上面的可css简写成
<div style="background:url('fanye.jpg') 100px 100px no-repeat;height: 700px;width:700px;border:1px solid red;"></div>本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2018-01-20 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
