CSS高级特性
我们大家在学习CSS之前，肯定已经接触过了HTML了吧，那么我们为什么还要学习CSS呢？首先哈，CSS可以有效的传递页面信息，使用CSS美化过的页面文本，非常漂亮，美观，并且可以突出重点，使用户看到页面的主要内容，具有良好的用户体验span标签 是行内元素，你如果想凸显出某些内容，可以使用这个标签；
div标签 是块级元素
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>/*span 内的代码等价于 font: italic bold 36px "宋体"; */span{font-family: 仿宋;font-size: 12px;/*设置字体的大小*/font-style: italic;/*斜体*/font-weight: bold;/*加粗*/background: #ff7956;}</style></head><body><span class="alert">欢迎来到郝一凡的世界！</span><span class="alert">欢迎来到郝一凡的世界！</span><span class="alert">欢迎来到郝一凡的世界！</span><p>欢迎来到郝一凡的世界！</p></body></html>
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>div{color: blue;text-align: left;/*文字靠左居中*/text-indent: 20px;/*缩进*/line-height: 25px;/*行高*/text-decoration: underline;/*加下划线*/vertical-align: middle;text-shadow: aqua 1px 1px 2px;/*参数依次是 颜色 x轴位移 y轴位移 阴影模糊的半径*/}</style></head><body><span class="alert">欢迎来到郝一凡的世界！</span><span class="alert">欢迎来到郝一凡的世界！</span><span class="alert">欢迎来到郝一凡的世界！</span><p>欢迎来到郝一凡的世界！</p><p>css2</p><p>css2</p><div>欢迎来到郝一凡的世界！</div><div>欢迎来到郝一凡的世界！</div><div>欢迎来到郝一凡的世界！</div></body></html>
可以看到有div标签的 被阴影成这个样式，感觉挺好看的吧~
3. 1超链接伪类------a:hover
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>/*a:hover 鼠标悬停样式鼠标放上去的颜色是绿色*/a:hover{color: chartreuse;}</style></head><body><a href="https:\\" target="_blank">百度一下1</a><a href="https:\\" target="_blank">百度一下2</a><a href="https:\\" target="_blank">百度一下3</a><a href="https:\\" target="_blank">百度一下4</a></body></html>
可以看到效果如下：
3.2 超链接伪类-------a:active
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>/*鼠标一直点击 不松开鼠标左键*/a:active{color: blueviolet;}</style></head><body><a href="https:\\" target="_blank">百度一下1</a><a href="https:\\" target="_blank">百度一下2</a><a href="https:\\" target="_blank">百度一下3</a><a href="https:\\" target="_blank">百度一下4</a></body></html>
4.设置伪类的顺序
a:link->a:visited->a:hover->a:active
5. 列表样式
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body><ul><li>java</li><li>pathon</li><li>big data</li><li>linux</li><li>c++</li><li>php</li></ul></body></html>
效果如下
5.1 列表样式之去掉列表小黑点
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>li{list-style: none;}</style></head><body><ul><li>java</li><li>pathon</li><li>big data</li><li>linux</li><li>c++</li><li>php</li></ul></body></html>
5.2 列表样式之 空心列表
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>li{list-style-type: circle;}</style></head><body><ul><li>java</li><li>pathon</li><li>big data</li><li>linux</li><li>c++</li><li>php</li></ul></body></html>
6.1 网页背景
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>body{background: #ff7956;}</style></head><body></body></html>
6.2 网页背景图片
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>body{background-image: url("../Image/QQ背景.gif");}</style></head><body></body></html>
6.3 背景定位
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>body{background-image: url("../Image/QQ背景.jpg");background-position: top;}</style></head><body></body></html>
6.4 背景重复
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>body{background-image: url("../Image/QQ背景.jpg");background-position: top;background-repeat: no-repeat;}</style></head><body></body></html>
6.5 背景尺寸
background-sizeautu：使图片保持原来的大小；cover：整个背景图片填充了整个元素contain：让背景图片保持本身的宽高比例，使背景图片缩放到宽度或者高度正好适应所定义的背景区域； CSS渐变
7.1 从上往下
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>#grad{height: 200px;/*谷歌浏览器 需要加前缀 -webkit- */background: -webkit-linear-gradient(red,blue);}</style></head><body><p id="grad"></p></body></html>
7.2 从左向右
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>#grad{height: 200px;/*谷歌浏览器 需要加前缀 -webkit- */background: -webkit-linear-gradient(left,red,blue);}</style></head><body><p id="grad"></p></body></html>
7.3 从右向左
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>#grad{height: 200px;/*谷歌浏览器 需要加前缀 -webkit- */background: -webkit-linear-gradient(right,red,blue);/*这里可以写好多种颜色 不止两种*/}</style></head><body><p id="grad"></p></body></html>
