文字样式
font-size:30px;文字大小
font-weight:bold;文字加粗
font-style：italic；文字倾斜
font-family:“宋体”；字体
font-variant：small-caps；小型大写字母
@font-face{}自定义字体
文本样式
第一个水平方向位移
第二个竖直方向向上位移
第三个模糊度
第四个颜色
text-shadow:3px 2px 3px green;文本阴影
text-decorationg:none；去线
line-through下划线
underline删除线
text-transform：capitalize;字母大写（只针对英文）
text-indent:2em;首行缩进(只应用到p标签上)
text-align：center；文本居中
line-height:20px；文本行高 一般用来做竖直位置上的居中效果
word-wrap：break-word；文本换行
word-wrap ： nowrap； 不换行
可以通过空格叠加
背景
background-color：；背景颜色
background-repeat：no-repeat；背景不重复
border边框线
background-position：center；背景定位
background-size：100%；背景尺寸
background-size：cover；背景覆盖=100%（照片可能不完全展示）
background-size：contain；照片宽和高一边完全覆盖，图片完全展示
padding-bottom：1000px；填充
background-attachment：fixd；背景固定
background-origin：content-box ； 背景盒模型定位（默认从padding开始）
background-clip：padding-box；背景裁剪（默认值时不裁剪）
边框样式
border：线宽 线样式 颜色；
box-shadow：；盒子阴影（和文字样式的一样）
transition：0.3s；延缓时间
权重
style>id>class>tag>*>继承
代码练习
<!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 {
width: 500px;
height: 700px;
background-size: 20%, 40%, 45%, 50%;
background-origin: border-box;
border: 15px groove rgba(212, 29, 29, 0.453);
padding: 20px;
background-clip: border-box, border-box, content-box, border-box;
background-position: 100% 100%, 0% 0%, 0% 0%, 0% 0%;
background-repeat: no-repeat, no-repeat, repeat, repeat;
background-image: url(../img/背景练习素材/sc17.png),
url(../img/背景练习素材/sc16.png),
url(../img/背景练习素材/sc5.png),
url(../img/背景练习素材/sc18.png);
}
</style>
</head>
<body>
<center>
<div class="a">
</div>
</center>
</body>
</html>
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
