摘要：一、CSS样式CSS选择器id的选择器类选择器标签选择器派生选择器 CSS优先级:内联>内部>外部 CSS盒子模型通常在网页初始化时将padding和margin清0操作 *{padding: 0px ; margin: 0px ;}Padding、 Margin顺序上右下左Margin:0px auto; 居中border边框border: 1px solid #
一、CSS样式
CSS选择器
id的选择器
类选择器
标签选择器
派生选择器
CSS优先级:内联>内部>外部
CSS盒子模型
通常在网页初始化时将padding和margin清0操作 *{padding: 0px ; margin: 0px ;}
Padding、 Margin顺序上右下左
Margin:0px auto; 居中
border边框
border: 1px solid #red; <!--double 双线、dashed 虚线、dotted 点虚线-->
border-left(right、top、bottom) 调整单边框
border-radius圆角设置
border-shadow阴影
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS样式练习</title>
<style>
*{padding: 0;margin: 0;}
#outside{width: 700px; height:500px; margin: 0 auto;}
.within{width: 360px; height: 270px; margin-top: 30px; border-radius: 5px; box-shadow: 0px 5px 10px 0px #ccc;}
.within img{width: 100%; border-radius: 5px;}
.within div {width:358px; height: 28px; margin-top: 5px; border-radius: 5px; }
.within div p{font-size: 14px;color: #07111b; margin-left: 5px;}
.within div span{color: #93999f;font-size: 12px; margin-left: 5px; }
</style>
</head>
<body>
<!--
CSS样式练习
-->
<div id="outside">
<div class="within">
<img src="http://img.php.cn/upload/course/000/126/153/5ab346fc62ce4221.jpg">
<div><p>CSS视频教程-玉女心经版</p><div>
<div><span>24242人在看</span><div>
</div>
</div>
</body>
</html>
批改老师：灭绝师太批改时间：2018-11-06 09:02:44
老师总结：知识点总结和案例结合在一起有利于更好的记忆……继续保持
