码迷,mamicode.com
首页 > Web开发 > 详细

css基本样式总结

时间:2015-04-03 22:21:40      阅读:159      评论:0      收藏:0      [点我收藏+]

标签:

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的   自动换行  而且如果是英文它不会截断单词

 

css基本样式总结

标签:

原文地址:http://www.cnblogs.com/lipeng0824/p/4391061.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!