一、组合标签
<span style="font-size:14px;"><!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>组合标签</title>
</head>
<body>
<!-- 列表 -->
<ol>
<li>有序列表1</li>
<li>有序列表2</li>
<li>有序列表3</li>
<li>有序列表4</li>
</ol>
<ul>
<li>无序列表</li>
<li>无序列表</li>
</ul>
<!-- dl自定义列表 -->
<dl>
<dt>标题</dt>
<dd>详情详情详情1</dd>
<dt>标题2</dt>
<dd>详情详情详情2</dd>
</dl>
</body>
</html></span>二、边框
<span style="font-size:14px;"><!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title></title>
</head>
<body>
<!-- 边框 -->
<!-- solid：实线；dashed：虚线；dotted：点状线 -->
<div style="width:100px;height:100px;background:green;border:5px blue solid;"></div>
<br/>
<div style="width:100px;height:100px;background:green;border:5px blue dashed;"></div>
<br/>
<div style="width:100px;height:100px;background:green;border:5px blue dotted;"></div>
<!-- 外边框：实际不占空间，只存在视觉效果 -->
<div style="width:100px;height:100px;background:pink;outline:5px red solid;"></div>
</body>
</html> </span>三、单位
<span style="font-size:14px;"><!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>单位</title>
</head>
<body>
<div style="width:600px;height:100px;background:pink;">
<div style="width:50%;height:100px;background:#000000;"></div>
</div>
<div style="width:10px;height:10px;border:200px solid green;border-top-color:red;border-right-color:orange;border-bottom-color:yellow;">
</div>
<div style="font-size:30px;color:red;">
<div style="font-size:2em;">
你是儿子div
</div>
</div>
</body>
</html></span>四、外边距margin
<span style="font-size:14px;"><!doctype html>
<html>
<span style="white-space:pre"> </span><head>
<span style="white-space:pre"> </span><meta charset="utf-8"/>
<span style="white-space:pre"> </span><title>外边距margin</title>
<span style="white-space:pre"> </span></head>
<span style="white-space:pre"> </span><body>
<span style="white-space:pre"> </span><!-- margin：外边距
<span style="white-space:pre"> </span>margin-top:
<span style="white-space:pre"> </span>margin-right:
<span style="white-space:pre"> </span>margin-bottom:
<span style="white-space:pre"> </span>margin-left:
<span style="white-space:pre"> </span>margin:0px 0px 0px 0px;
<span style="white-space:pre"> </span> 上 右 下 左
<span style="white-space:pre"> </span>margin:0px 0px 0px;
<span style="white-space:pre"> </span> 上 左右 下
<span style="white-space:pre"> </span>margin:0px 0px;
上下 左右
<span style="white-space:pre"> </span>margin:0px;
<span style="white-space:pre"> </span> 上下左右
<span style="white-space:pre"> </span>-->
<span style="white-space:pre"> </span><!-- 如果父级没有触发BFC属性，那么给子集设置margin-top的时候，就会把父级带下来
<span style="white-space:pre"> </span>可以触发BFC的属性的：
<span style="white-space:pre"> </span>1、border
<span style="white-space:pre"> </span>2、float
<span style="white-space:pre"> </span>3、position
<span style="white-space:pre"> </span>-->
<span style="white-space:pre"> </span><!-- 对于行标签margin只能水平方向起作用(margin-top、margin-bottom不起作用) -->
<span style="white-space:pre"> </span><!--
<span style="white-space:pre"> </span>1、水平方向的margin会相加
<span style="white-space:pre"> </span>2、竖直方向上的margin会取最大值(同为100，共100，不是200)
<span style="white-space:pre"> </span>3、分别为Block 和 inline-Block时margin竖直方向也会相加 -->
<span style="white-space:pre"> </span><div style="width:200px;height:200px;background:red;margin:50px 50px 80px 200px;"></div>
<span style="white-space:pre"> </span><div style="width:200px;height:200px;background:blue;"></div>
<span style="white-space:pre"> </span><div style="width:500px;height:500px;background:green;display:inline-block;margin:150px;">
<span style="white-space:pre"> </span><div style="width:200px;height:200px;background:yellow;margin:110px;"></div>
<span style="white-space:pre"> </span></div>
<span style="white-space:pre"> </span><div style="width:500px;height:500px;background:grey;display:inline-block;margin-left:100px;"></div>
<span style="white-space:pre"> </span><span style="width:100px;height:100px;background:red;margin:100px;">我是span</span>
<span style="white-space:pre"> </span><div style="background:purple;width:200px;height:200px;margin:0 auto;"></div>
<span style="white-space:pre"> </span></body>
</html></span>
五、内边距padding
<span style="font-size:14px;"><!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- padding
padding的效果：
1、padding可以改变原始元素的大小
2、padding会影响子级控件（内容）的位置
3、padding对行标签来讲竖直方向无效
-->
<div style="width:200px;height:200px;border:5px solid red;padding:50px;">
<div style="width:100px;height:100px;background:blue;"></div>
</div>
<span style="width:100px;height:100px;background:orange;padding:50px;">我是span1</span>
<span>我是span2</span>
</body>
</html></span>六、CSS引入和选择器
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>CSS引入和选择器</title>
<!-- 通过style方式引入CSS可以解决的问题
1、可以让代码更加简洁，更有结构感，不会破坏原有的html
2、可以让一些重复的样式得到复用
-->
<style type="text/css">
/*选择器*/
/*1、ID选择器
①给标签的id属性设置一个值代表这个标签的唯一标识
②在style标签里面通过#id名，找到对应的标签设置样式
注意：id名不能重复！！*/
#bigdiv {
width: 200px;
height: 200px;
background: red;
}
#smalldiv {
width: 300px;
height: 300px;
background: blue;
}
/*2、类选择器
①给标签的class属性一个类名
②在style标签里面通过.类名来设置这一类标签的样式（可以达到样式的复用）
注意：一个类可以被多个标签使用，一个标签可以有多个类
*/
.border1 {
border: 2px solid purple;
}
.font50 {
font-size: 50px;
}
/*3、标签选择器
标签名来选择所有这个名字的标签
特点：范围很广，不宜设置特殊的样式，但可以用来重置系统自带的默认属性
*/
div {
margin-left: 30px;
}
p {
margin: 0px;
}
/*4、通配选择器
*范围最广，给所有的标签设置样式
*/
/** {
color: green;
}*/
/*5、后代选择器
标签选择器、id选择器、类选择器的一个组合，中间用空格分隔，代表的是一个结构
注意：div span为例，只要是被div包裹的span标签都有这种样式（隔级包裹也算）
*/
div span {
color: red;
}
/*6、群组选择器
标签选择器、id选择器、类选择器、后代选择器的一个组合，中间用逗号隔开。
*/
#bigdiv,#smalldiv,.border1,.border1 span {
font-size: 60px;
}
</style>
</head>
<body>
<div id="bigdiv" class="border1 font50">1</div>
<div id="smalldiv" class="border1"><span>我是内部span标签的内容</span></div>
<span>我是外部span标签的内容</span>
<p>我是p标签</p>
</body>
</html>七、CSS外部引入和选择器优先级
<span style="font-size:14px;"><!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>CSS外部引入和选择器优先级</title>
<!-- css的第三种引入方式，外部引入，可以达到完全复用的效果，是最常用的方式 -->
<link rel="stylesheet" type="text/css" href="选择器的优先级.css"/>
</head>
<body>
<div class="bgpurple">
<div class="seconddiv">
</div>
</div>
</body>
</html></span><span style="font-size:14px;">body {
margin: 0px;
background: lightgray;
}
/* 选择器的优先级，按照权值来计算
通配选择器: 0
标签选择器: 1
类选择器 : 10
id 选择器: 100
style : 1000
!important:10000(慎用)
后代选择器：各个选择器权值相加
优先级是当两个选择器样式有冲突的时候才会产生
1、权值相同的时候，后面的选择器覆盖前面的
2、后代选择器在相加的时候，不同级别的选择器不能跨级比较
（十一个标签选择器组成的后代选择器优先级没有类选择器高）
*/
* {
background: red;
color: white;
}
* {
background: gold;
}
div {
background: green;
}
.bgpurple {
width: 500px;
height: 500px;
background: purple;
}
/*权值10*/
.seconddiv {
width: 250px;
height: 250px;
background: green;
}
/*权值11*/
body .seconddiv {
background: blue;
}</span>八、边框border
<span style="font-size:14px;"><!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>border边框</title>
<link rel="stylesheet" type="text/css" href="border.css"/>
</head>
<body>
<div>
div
</div>
</body>
</html></span><span style="font-size:14px;">div {
<span style="white-space:pre"> </span>width: 800px;
<span style="white-space:pre"> </span>height: 500px;
<span style="white-space:pre"> </span>background: blue;
<span style="white-space:pre"> </span>font-size: 50px;
<span style="white-space:pre"> </span>color: gold;
<span style="white-space:pre"> </span>border: 10px red solid;
<span style="white-space:pre"> </span>/*是一种复合写法，等价于下面3句
<span style="white-space:pre"> </span>border-width：默认是3px；
<span style="white-space:pre"> </span>border-color：默认是和字体颜色一样；
<span style="white-space:pre"> </span>border-style：solid；
<span style="white-space:pre"> </span>border-方向-属性名(color style width)
<span style="white-space:pre"> </span>*/
<span style="white-space:pre"> </span>
<span style="white-space:pre"> </span>/*border-width: 10px;
<span style="white-space:pre"> </span>border-left-width: 10px;
<span style="white-space:pre"> </span>border-right-width: 100px;
<span style="white-space:pre"> </span>border-top-width: 50px;
<span style="white-space:pre"> </span>border-bottom-width: 20px;
<span style="white-space:pre"> </span>border-left-style: dashed;
<span style="white-space:pre"> </span>border-right-style: dotted;
<span style="white-space:pre"> </span>border-top-style: dashed;
<span style="white-space:pre"> </span>border-bottom-style: solid;
<span style="white-space:pre"> </span>border-left-color: green;
<span style="white-space:pre"> </span>border-right-color: pink;
<span style="white-space:pre"> </span>border-top-color: orange;
<span style="white-space:pre"> </span>border-bottom-color: red;*/
<span style="white-space:pre"> </span>/*圆角效果*/
<span style="white-space:pre"> </span>border-radius: 50%;
<span style="white-space:pre"> </span>border-top-left-radius: 10%;
<span style="white-space:pre"> </span>border-top-right-radius: 20%;
<span style="white-space:pre"> </span>border-bottom-left-radius: 30%;
<span style="white-space:pre"> </span>border-bottom-right-radius: 40%;
}</span>
九、背景background
<span style="font-size:14px;"><!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>背景</title>
<link rel="stylesheet" type="text/css" href="背景.css">
</head>
<body>
<div></div>
</body>
</html></span>新建一个CSS文件：背景.css
<span style="font-size:14px;">div {
width: 500px;
height: 500px;
background-color: green;
background-image: url("money.png");
/*contain 居中 cover平铺*/
background-size: 100px;
/*no-repeat repeat-x repeat-y*/
background-repeat: no-repeat;
/*background-repeat: repeat-x;
background-repeat: repeat-y;*/
/*top right center bottom left*/
background-position: top;
background: url("money.png") no-repeat 40px 200px green;
}</span>补充：CSS雪碧图
什么是雪碧图？
CSS雪碧 即CSS Sprite，也有人叫它CSS精灵，是一种CSS图像合并技术，该方法是将小图标和背景图像合并到一张图片上，然后利用css的背景定位来显示需要显示的图片部分。
为什么要用雪碧图、雪碧图分别有什么优缺点？
优点：
1、减少加载网页图片时对服务器的请求次数
2、提高页面的加载速度
3、减少鼠标滑过的一些bug
缺点：
1、影响浏览器的缩放功能
2、拼图维护比较麻烦
3、让CSS的编程变得略微困难
下面来看一下雪碧图的实际运用
<span style="font-size:14px;"><!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title></title>
<style type="text/css">
div {
width: 500px;
height: 150px;
/*background-color: red;*/
margin-bottom: 10px;
}
#div1 {
width: 112px;
background:url("雪碧图.png") no-repeat 0px 0px;
}
#div2 {
width: 144px;
background:url("雪碧图.png") no-repeat -112px 0px;
}
#div3 {
width: 140px;
background:url("雪碧图.png") no-repeat -256px 0px;
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</body>
</html></span>
扫一扫
2698
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
