背景简写
background {color image repeat position}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 276px;
height: 258px;
background: no-repeat url(img/2.jpg) -267px -37px red;
}
</style>
</head>
<body>
<div></div>
</body>
</html>背景图片大小
1.使用像素
background-size: 100px 100px;
2.使用百分比
background-size: 60%;
3.使用cover 把图片扩展到足够大,使背景图片完全覆盖背景区域,背景图片的某些部分也行许无法显示在背景区域中
background-size: cover;
4.使用contain把图片扩展到最大尺寸,以使其宽高完全适应内容区域
background-size: contain;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 600px;
height: 600px;
background-image: url(img/2.jpg);
background-color: red;
background-repeat: no-repeat;
background-size: contain;
}
</style>
</head>
<body>
<div></div>
</body>
</html>背景透明
background: rgba(0,0,0,0.3);
背景透明
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
a {
text-decoration: none;
color: #666;
}
.nav a {
width: 150px;
height: 50px;
border: solid 1px green;
border-radius: 25px/25px;
/* a是行内元素,无法设置大小,转化为行内块元素 */
display: inline-block;
/* 水平居中 */
text-align: center;
/* 垂直居中 */
line-height: 50px;
}
.nav a:hover {
background: url(img/btn.png) no-repeat center;
}
</style>
</head>
<body>
<div class="nav">
<a href="">首页</a>
<a href="">业务展示</a>
<a href="">人才招聘</a>
<a href="">关于我们</a>
<a href="">联系我们</a>
</div>
</body>
</html>字体图标
font class
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="fonts/iconfont.css">
<style>
.icon-a-068_chongwu {
font-size: 60px;
color: red;
}
</style>
</head>
<body>
<span class="iconfont icon-a-068_chongwu
"></span>
</body>
</html>unicode
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
@font-face {
font-family: "iconfont";
/* Project id */
src: url('fonts/iconfont.ttf?t=1718596076990') format('truetype');
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: red;
}
</style>
</head>
<body>
<span class="iconfont"></span>
</body>
</html>list-style 属性
list-style-typ:
none 无标记
disc 实心圆
circle 空心圆
square 实心方块
list-style-position
inside列表项目标记放置在文本以内，且环绕文本根据标记对齐。
outside默认值。保持标记位于文本的左侧，列表项目标记放置在文本以外，且环绕文本不根据标记对齐。
list-style-image urlcssc
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.nav ul {
list-style-type: none;
list-style-position: inside;
list-style-image: url(../day0614/img/1.png);
}
</style>
</head>
<body>
<div class="nav">
<ul>
<li><a href="">首页</a></li>
<li><a href="">业务展示</a></li>
<li><a href="">人才招聘</a></li>
<li><a href="">关于我们</a></li>
<li><a href="">联系我们</a></li>
</ul>
</div>
</body>
</html>css层叠性
相同类型:就近原则
不同类型:行内>嵌入>外部样式表
id>类>标记选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#z {
color: orange;
}
.w {
color: red;
}
.q {
color: blue;
}
</style>
</head>
<body>
<div class="w q" id="z">王者荣耀策划道歉，《王者荣耀》面临「鸡爪流」玩法争议，策划团队承认系统不足并计划重构</div>
</body>
</html>css继承性
/* 继承:字体大小颜色可以继承a除外 a标签颜色不能继承 line-height */
/* 下面属性不具有继承性:边框,外边距,内边距,背景,定位元素宽高属性 */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.father {
font-size: 50px;
color: #f00;
}
</style>
</head>
<body>
<div class="father">
<div class="son1"> div元素</div>
<a href="" class="son2">链接元素a</a>
</div>
</body>
</html>css优先级
!important>行内样式表>ID选择器>类选择器>标签选择器>通配符>继承的样式>浏览器默认样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.father {
color: #0f0;
}
* {
color: #00f;
}
div {
color: red!important;
}
#q {
color: aquamarine;
}
</style>
</head>
<body>
<div class="father">
<div class="con" id="q" style="color: rebeccapurple;">华灯初上，上海市虹口区嘉兴路街道瑞虹新城二期小区生活垃圾投放点，年近七旬的社区垃圾分类志愿者吴青葆用手机扫描二维码后，将纸板箱投入智能垃圾厢房的可回收物投口。</div>
</div>
</body>
</html>css的权重
标记选择器的权重为1
类选择器的权重为10
ID选择器的权重为100
继承样式的权重为0
行内样式优先
权重相同时,css遵循就近原则
!important命令,该命令被赋予最大的优先级
复合选择器的权重无论为多少个标记选择器的叠加,其权重都不会高于类选择器
复合选择器的权重无论为多少个标记选择器和类选择器的叠加,其权重都不会高于id选择器
盒子模型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.con {
width: 200px;
height: 150px;
border: 20px solid red;
padding: 20px;
margin: 30px;
}
</style>
</head>
<body>
<!-- content
padding内边距
border边框
margin外边距 -->
<div class="con">你好</div>
<div class="con">都好</div>
</body>
</html>边框
solid 单实线
dashed 虚线
dotted 点线
double 双实线
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.con1 {
border-top: 2px solid red;
}
.con2 {
border-right: 2px solid red;
}
.con3 {
border-bottom: 2px solid red;
}
.con4 {
border-left: 2px solid red;
}
.con5 {
border-style: solid dashed dotted double;
}
.con1,
.con2,
.con3,
.con4,
.con5 {
width: 200px;
height: 100px;
background-color: pink;
margin: 10px;
}
</style>
</head>
<body>
<!-- div.con${边框$}*4 -->
<div class="con1">边框1</div>
<div class="con2">边框2</div>
<div class="con3">边框3</div>
<div class="con4">边框4</div>
<div class="con5">边框5</div>
</body>
</html>圆角边框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.con1,
.con2,
.con3 {
width: 200px;
height: 150px;
background-color: pink;
margin: 20px;
}
.con1 {
border-radius: 50px;
}
.con2 {
border-radius: 10px 25px 20px 30px;
}
.con3 {
width: 200px;
height: 200px;
border-radius: 50%;
}
</style>
</head>
<body>
<div class="con1">圆角边框1</div>
<div class="con2">圆角边框2</div>
<div class="con3">圆角边框3</div>
</body>
</html>内边距
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.con {
width: 200px;
height: 150px;
background-color: pink;
/* 上下左右都20px */
padding: 20px;
/* 上下20 px 左右10px */
padding: 20px 10px;
/* 上 左右 下 */
padding: 10px 20px 30px;
/* 上 右 下 左 */
padding: 10px 20px 30px 40px;
}
</style>
</head>
<body>
<div class="con">辛苦了</div>
</body>
</html>外边距
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.con {
width: 200px;
height: 150px;
background-color: pink;
/* 上下左右都20px */
margin: 20px;
/* 上下20 px 左右10px */
margin: 20px 10px;
/* 上 左右 下 */
margin: 10px 20px 30px;
/* 上 右 下 左 */
margin: 10px 20px 30px 40px;
}
</style>
</head>
<body>
<div class="con">辛苦了</div>
</body>
</html>边框塌陷
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.f {
width: 300px;
height: 300px;
background-color: pink;
/*给元素设置边框可以把父元素定义为1像素的上边框或上内边距
border-top: 1px solid red; */
padding-top: 1px;
}
.s {
height: 100px;
width: 100px;
background-color: aqua;
margin-top: 30px;
}
</style>
</head>
<body>
<div class="f">
<div class="s">啊啊啊</div>
</div>
</body>
</html>
716
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
