一.CSS背景及应用
<style type="text/css">
div {
width: 400px;
height: 400px;
/*background-color: pink; */ /*背景颜色*/
/*background-image: url(image/wo.jpg);*/ /*背景图片*/
/*background-repeat: no-repeat;*/ /* 图片是否平铺*/
/*background-position: bottom center;*/ /*背景图片下,居中*/
/*background-position: 10px 20px;*/ /*x轴10像素,y轴20像素*/
/*background-position: 10px center; x轴10像素,y轴居中
background-attachment: fixed;*/ /*背景是否滚动,默认滚动,fixed,固定住*/
/*background: pink url(image/wo.jpg) no-repeat fixed 10px center; */ /*背景设置简写,位置随意,最好按顺序来*/
/*background: hotpink url(image/wo.jpg) no-repeat;
background-size: 100px 200px; 固定背景图片宽高
background-size: cover; 图片等比例缩放,充满整个背景,会有部分看不到;
background-size: contain; 背景图片等比例缩放,如果图片高度或者宽度有一个和背景一样大,就停止,保持图片完整*/
/*background: url(image/wo.jpg) no-repeat left top,
url(image/wo.jpg) no-repeat right bottom hotpink; 多背景图片,逗号隔开,背景颜色设置放在最后一组上*/
}
p {
color: #ccc;
font: 700 80px "微软雅黑";
}
p:first-child {
/*text-shadow: 水平位置 垂直位置 模糊距离 阴影颜色;*/
text-shadow: 1px 1px 1px #000,-1px -1px 1px #fff;
}
p:last-child {
text-shadow: -1px -1px 1px #000,1px 1px 1px #fff;
}
body {
background-color: #ccc;
}
</style>
</head>
<body>
<h3>背景样式</h3>
<div>
<p>我是凸起的文字</p>
<p>我是凹下的文字</p>
</div>
</body>
二.CSS三大特性
<head>
<meta charset="UTF-8">
<title>CSS的三大特性</title>
<style type="text/css">
div { /* 标签选择器 0,0,0,1*/
color: pink;
}
ul li :first-child { /* 伪类选择器 0,0,1,0 */
color: green;
}
.king { /* 类选择器 0,0,1,0 */
color: blue;
}
#wang { /* id选择器 0,1,0,0 */
color: red;
}
</style>
</head>
<body>
<h3>1.层叠性</h3>
<ol>
<li>1. 样式冲突,遵循的原则是就近原则。 那个样式离着结构近,就执行那个样式。</li>
<li>2. 样式不冲突,不会层叠</li>
<li>3.important就是重要的 级别最高 一旦出现优先执行</li>
</ol>
<h3>1.继承性</h3>
<ul>
<li>一般字体,颜色,样式集成</li>
</ul>
<h3>1.优先及</h3>
</body>
三.盒模型及应用
<style type="text/css">
nav {
background-color: #FCFCFC;
height: 40px;
border-top: 3px solid #FF8500; /*上边框样式*/
border-bottom: 1px solid #EDEEF0; /*下边款样式*/
/*border-radius: 5px;*/ /*边跨圆角设置*/
/*border-collapse: collapse; */ /* 合并相邻边框的线条 */
}
a {
text-decoration: none; /*除去链接的下划线*/
height: 40px;
line-height: 40px; /* 行间距与行高一样,文字就居中了*/
display: inline-block; /*把块元素变成行元素,行元素变成块元素,可以改宽高*/
color: black;
font-size: 14px;
padding: 0px 15px; /*内边距,上下0,左右15,按照顺时针方向布局*/
}
a:hover {
background-color: #ccc;
}
</style>
</head>
<body>
<h3>导航栏案</h3>
<nav>
<a href="#">网址</a>
<a href="#">天下客</a>
<a href="#">客户导流端</a>
<a href="#">网址导航</a>
</nav>
<hr>
</body>
四.盒子阴影
<style type="text/css">
div {
width: 150px;
height: 150px;
line-height: 150px;
border-radius: 50%;
margin: 0 auto;
text-align: center;
font-size: 30px;
color: rgba(255,255,255,0.7);
background-color: pink;
background: url(image/wo.jpg) 0 0 no-repeat;
box-shadow: 5px 5px 10px 16px rgba(255,255,2550.4) inset,5px 5px 10px rgba(0,0,0,0.3);
}
</style>
</head>
<body>
<h1>盒子阴影</h1>
<ol>
<li>box-shadow:水平位置 垂直位置 模糊距离 阴影尺寸 阴影颜色 内外阴影</li>
<li>h-shadow(必填) y-shadow(必填) blur sprad color inset/outset</li>
</ol>
<div>
影子图片效果
</div>
<h1>盒模型</h1>
<p>box:sizing:content-box 盒子大小为width+padding+border</p>
<p>box:sizing:border-box 子大小为width+padding</p>
</body>
五.案例
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/06d3f613c211508010f41a6f94d5a82f.png)