摘要：<!DOCTYPE html><html><head><meta charset="UTF-8"><title>css学习</title><style type="text/css">*{padding:0x;margin:0px;}p{color:#ccc;width: 8
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css学习</title>
<style type="text/css">
*{padding:0x;margin:0px;}
p{
color:#ccc;
width: 800px;
height: 30px;
border: 1px solid #ccc;
}
#myid{
width: 800px;
height: 30px;
color:#ccc;
border: 1px solid #ccc;
}
.myclass{
width: 800px;
height: 30px;
color: #00f;
border: 1px solid #ccc;
}
p i{
font-size: 20px;
}
a[href='#1']{
color:grey;
}
span{
padding: 5px;background-color: red;
}
#margin{
width: 500px;
height: 100px;
background-color: pink;
}
.box{
width: 1000px;
height: 100px;
border: 1px solid #ccc;
border-radius: 150px;
}
.shadow{
/*阴影效果*/
width: 500px;
height:100px;
box-shadow: 0px 6px 30px 20px #ccc inset;
}
</style>
</head>
<body>
<pre>CSS主要由选择器（需要改变样式的html元素）+声明（一个属性+一个值）构成</pre>
<p>【标签选择器】：大家好！上课的老师是灭绝，听起来很吓人。</p>
<div id="myid">1、id选择器：在标签中加入id并自定义名字，在css中用#+自定义名字书写css样式</div>
<div class="myclass">2、class选择器（类别选择器）：在标签中加入clsss并自定义类字，在css中用.+自定义名字书写css样式</div>
<p><i>3、派生选择器：不考虑加id或者class，则直接在css里写p i然后加样式</i></p>
<a href="#1">4、属性选择：直接在css里写入a[href='具体链接信息']，然后写入css样式内容</a>
<a href="#2"></a>
<div style="color:red;">CSS引入样式：1、内联样式（在标签里直接写入style="属性名：值;")</div>
<div>CSS引入样式：2、内部样式（针对当前页面在head标签内<style type="text/css">***</style>)</div>
<div>CSS引入样式：3、外部样式（用link标签引用<link rel="stylesheet" type="text/css" href="css.css">)</div>
<div>样式表优先级：内联>内部>外部</div>
<hr/>
<pre>CSS盒模型：内边距padding、外边距margin默认为0，包括边框也为0</pre>
<span>测试内边距：
padding给1个值是上下左右；
2个值是 上下、左右；
3个值是 上、左右、下
4个值 上右下左
只需要一个方向的则用padding-left</span>
<div id="margin">
测试外边距：属性同padding，如果需要div层居中，则给margin: 0px auto;上下为0，左右自动
注意：浏览器自带了一个内外边距，可以通过在css样式第一步加入*{padding:0x;margin:0px;}就可以实现清零效果了
</div>
<hr/>
<pre>边框的css样式设置</pre>
<div class="box">
边框可以有实线solid、双线double、dashed虚线、dotted点状虚线
如果需要控制不同方向的边框色则用border-top、left、right、bottom
需要将边框变成圆形用border-radius
<button style="border: none;">清除按钮的样式用none</button>
</div>
<div class="shadow">阴影：box-shadow: 5px 10px 15px 20px #ccc inset（向内）;</div>
<hr/>
</body>
</html>
批改老师：灭绝师太批改时间：2018-11-17 13:47:37
老师总结：忧伤……为什么我吓人了……不过总体目的达到了，作业完成的不错！继续保持……
