CSS（2）
2022-03-06 18:03:18
1.美化网页元素
1.1 为什么要美化网页
-
-
有效的传递页面信息
-
美化页面，页面漂亮，才能吸引用户
-
凸显页面的主题
-
提高用户的体验
-
span标签：重点要突出的字，使用span套起来
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>span</title>
<style>
#one{
font-family: 华文楷体;
font-size: 50px;
color: aqua;
}
</style>
</head>
<body>
<h1>努力学习<span id="one">Java</span></h1>
</body>
</html>
1.2 字体样式
-
-
font-family: 字体
-
font-size: 字体大小
-
font-weight: 字体粗细
-
color: 字体颜色
-
1.3 文本样式
-
-
颜色 color 单词 RGB 0~F RGBA A:0~1
-
文本对齐的方式 text-align:center 排版，居中
-
首行缩进 text-indent:2em 段落首行缩进
-
行高 line-height:300px 行高，和块的高度一致，就可以上下居中
-
装饰 text-decoration:none 去掉下划线
-
文本图片水平对齐： vertical:align:middle
-
1.4超链接伪类
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
a{
text-decoration: none;
color: black;
font-size: 20px;
}
/*鼠标悬浮的状态*/
a:hover{
color: orange;
}
/*鼠标按住未释放的状态*/
a:active{
color: green;
}
p{
text-align: center;
}
</style>
</head>
<body>
<p>
<a href="#">
<img src="img/R-C.jpg" alt="">
</a>
</p>
<p>
<a href="#">穷民饱食</a>
</p>
<p>
<a href="#">斋藤茂男</a>
</p>
<p>
￥25
</p>
</body>
</html>
1.6列表
/*
ul li
none:去掉原点
circle 空心圆
decimal 数字
*/
ul{
background: #a0a0a0;
}
ul li{
height: 30px;
list-style: none;
text-indent: 1em;
}
1.7 背景
背景颜色
背景图片
div{
width: 1000px;
height: 700px;
border: 1px solid red;
/*默认是全铺的*/
background-image: url("imgs/OIP-C.jpg");
background-repeat: no-repeat;
}
背景图片位置
/* 颜色 ，图片，图片位置，平铺方式 */
background: red url("../images/d.gif") 270px 10px no-repeat
background-position:236px 2px
1.8渐变 Grabient
body{
background-color: #FBDA61;
background-image: linear-gradient(45deg, #FBDA61 0%, #FF5ACD 100%);
}
本文摘自 ：https://www.cnblogs.com/
更多科技新闻 ......