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:\\www.baidu.com" target="_blank">百度一下1</a>
<a href="https:\\www.baidu.com" target="_blank">百度一下2</a>
<a href="https:\\www.baidu.com" target="_blank">百度一下3</a>
<a href="https:\\www.baidu.com" 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:\\www.baidu.com" target="_blank">百度一下1</a>
<a href="https:\\www.baidu.com" target="_blank">百度一下2</a>
<a href="https:\\www.baidu.com" target="_blank">百度一下3</a>
<a href="https:\\www.baidu.com" 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-size
- autu：使图片保持原来的大小；
- 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>
