更多的样式
透明度
背景图
和img元素的区别
img元素是属于html的概念
背景图属于CSS的概念
1.当图片属于网页的内容时，必须使用img元素
2.当图片属于网页的美化时，必须使用背景图
涉及的CSS属性
1.background-image
2.background-repeat
图片默认情况下,背景图会在横坐标或纵坐标中进行重复
3.background-size
预设值:contain,cover,类似于object-fit
数值或百分比
4.background-position
设置背景图的位置
预设值:left,right,bottom,top,center
数值或百分比
雪碧图(精灵图)(spirit)
5.background-attachment
通常用它控制背景图是否固定.
6.背景图和背景颜色混用
7.速写(background)
通配符选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>基础选择器之通配符选择器</title>
<style>
* {
color: red;
}
/* * 这里把 html body div span li 等等的标签都改为了红色 */
</style>
</head>
<body>
<div>我的</div>
<span>我的</span>
<ul>
<li>还是我的</li>
</ul>
</body>
</html>
我的
我的
- 还是我的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS字体属性之字体大小</title>
<style>
body {
font-size: 16px;
}
/* 标题标签比较特殊,需要单独指定文字大小 */
h2 {
font-size: 16px;
}
</style>
</head>
<body>
<h2>pink的秘密</h2>
<p>那一抹众人中最漂亮的颜色,</p>
<p>优雅,淡然,又那么心中清澈.</p>
<p>前端总是伴随着困难和犯错,</p>
<p>静心,坦然,攻克一个又一个.</p>
<p>拼死也要克服它,</p>
<p>这是pink的秘密也是老师最终的嘱托.</p>
</body>
</html>
pink的秘密
那一抹众人中最漂亮的颜色,
优雅,淡然,又那么心中清澈.
前端总是伴随着困难和犯错,
静心,坦然,攻克一个又一个.
拼死也要克服它,
这是pink的秘密也是老师最终的嘱托.
687
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
