【前言】
- 文字样式
- 图片样式
【小知识】
文本样式
1.对齐：text-align:left center right
2.首行缩进：text-index：3em
3.字体间距：letter-spacing:20px
4.下划线：text-decoration:underline
5.删除线：text-decoration:line-through
<style>
p{background:red;height:60px;text-decoration:line-through}
/*鼠标在超链接上面时触发样式*/
a{text-decoration:none}
a:hover{text-decoration:underline}
</style>
</head>
<body>
<p>仙女<br></p>
<a href="">仙女</a>
</body>浏览器显示如下：
6.两端对齐：text-align:justify
7.设置图片两端文字垂直样式
<style>
p{background:red;height:60px;text-decoration:line-through}
/*鼠标在超链接上面时触发样式*/
a{text-decoration:none}
a:hover{text-decoration:underline}
/*用来设置图片两边文字的垂直位置：top、middle、 buttom*/
img{vertical-align:buttom}
</style>
</head>
<body>
<div>啦啦啦<img sre="timg.jpg">啦啦啦</div>
</body>浏览器显示如下：
8.文字阴影：shadow
阴影的颜色，坐标，效果，半径
<style>
p{background:red;height:60px;text-decoration:line-through}
/*鼠标在超链接上面时触发样式*/
a{text-decoration:none}
a:hover{text-decoration:underline}
/*用来设置图片两边文字的垂直位置：top、middle、 buttom*/
img{vertical-align:buttom}
div{text-shadow:red 3px 3px 2px} /*如果想要阴影方向变换，数字变为符号即可*/
</style>
</head>
<body>
<div>啦啦啦<img sre="timg.jpg">啦啦啦</div>
</body>浏览器显示如下：
图片样式
1.图片多张排列
<style>
/*
no-repeat:repeat-x:repeat-y
水平方向：left、center、 right
垂直方向：top、 center 、bottom
*/
div{background:pind url("1.jpg");
center center no-repeat;
height:400px
}
</style>
</head>
<body>
<img src="1.jpg">
</body>浏览器显示如下：
2.拉伸图片：
10% 10% no-repeat;
height:400px;
width:400px;
contain:cover;
background-size:50%
}3.固定背景图片：
<style>
body{background:pink url("1.jpg") no-repeat;
/*固定背景图片*/
background-attackment:fixed
}
</style>
</head>
<body>
<p>a</p><p>a</p><p>a</p><p>a</p>
<p>a</p><p>a</p><p>a</p><p>a</p>
<p>a</p><p>a</p><p>a</p><p>a</p>
</body>浏览器显示如下：
4.背景渐变：bottom、 right 、left
<style>
div{width:100px;
height:100px;
background:linear-gradient(to bottom,red,pink,blue,green)
}
</style>
</head>
<body>
<div>易烊千玺</div>
</body>浏览器显示如下：
注：可以自由使用font属性设置字体类型、风格、大小、粗细、吮吸
