1：背景（background）
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link href="MyCss.css" type="text/css" rel="stylesheet">
</head>
<body>
<div>
<p>background测试</p>
<p>background测试</p>
<p>background测试</p>
<p>background测试</p>
<p>background测试</p>
<p>background测试</p>
<p>background测试</p>
<p>background测试</p>
<p>background测试</p>
<p>background测试</p>
<p>background测试</p>
<p>background测试</p>
<p>background测试</p>
<p>background测试</p>
<p>background测试</p>
<p>background测试</p>
<p>background测试</p>
<p>background测试</p>
<p>background测试</p>
<p>background测试</p>
<p>background测试</p>
<p>background测试</p>
<p>background测试</p>
<p>background测试</p>
</div>
</body>
HTML代码
body{
background-image: url("http://image.tianjimedia.com/uploadImages/2012/236/8N64JM0J1I72.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100px;
}
CSS代码
2：文本（text）
<p id="p"> 哈哈哈哈哈呵呵呵</p> <p id="p1"> LLLLLppppp 李鹏 iL </p> <p id="p2"> LLLLLppppp 李鹏 iL </p> <p id="p3"> LLLLLppppp 李鹏 iL </p>
HTML代码
#p{
direction: ltr; /*（屏幕上）左到右*/
line-height: 50px;/*段落行高*/
letter-spacing: 20px;
text-indent: 5px;
}
#p1{ text-transform: capitalize } /*每个单词的首字母变为大写*/
#p2{ text-transform: lowercase } /*每个单词都变为小写*/
#p3{ text-transform: uppercase } /*每个单词都变为大写*/
CSS代码
效果图：
文本的阴影效果：
text-shadow: 10px 10px 1px red ;
解释:后面四个分辨为：依次为相对于原来文本左上角的X -Y 透明度 和文本颜色；
文本的自动换行：
.p{
width:100px
text-wrap:normal
}
p标签内部 宽度为100px的 自动换行 而且如果是英文它不会截断单词
时间： 2024-10-05 23:38:30