首页 > Web开发 > 详细

css文本样式

时间:2016-08-08 14:07:21      阅读:299      评论:0      收藏:0      [点我收藏+]

1、

body{
    color:aqua;  /*可继承的颜色*/
    text-align: center; /*文本对齐方式*/
    
}

 

2、缩进:

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
     <link href="style2.css" type="text/css" rel="stylesheet">
</head>
<body>
      
      <div>
        <h1>静夜思</h1>
        <p>床前明月光,</p>
        <p>床前明月光。</p>
        <p>床前明月光,</p>
        <p>床前明月光。</p>
      </div>
    
</body>
</html>


 

没有缩进的效果:

技术分享

加上css样式:

h6{
    text-indent: 2em;/*首行缩进2个像素*/
}

效果:

技术分享

1 h6{
2     text-indent: -2em;/*首行退2个像素*/
3     padding-left: 2em
4 }
5 p{
6     padding-left: 2em
7 }

效果:

技术分享

 

3、大小写:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
     <link href="style2.css" type="text/css" rel="stylesheet">
</head>
<body>
      
      <p id="p1">this Is my web page</p>
      <p id="p2">this Is my Web page</p>
      <p id="p3">this Is my web page</p>
</body>
</html>

css:

1 #p1{
2     text-transform: capitalize;/*每个单词的第一个字母变为大写*/
3 }
4 #p2{
5     text-transform: lowercase;/*所有变为小写*/
6 }
7 #p3{
8     text-transform: uppercase;/*所有变为大写*/
9 }

效果:

技术分享

 

4、设置阴影效果:

p{
    text-shadow: 5px 5px 1px #FF0000;/*设置背景,参数分别为:距左 距上 清晰度 背景颜色*/
}

效果:

技术分享

5、测试自动换行:

原来效果:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
     <link href="style2.css" type="text/css" rel="stylesheet">
</head>
<body>
      
      <p>测试阴影效果测试阴影效果测试阴影效果测试阴影效果测试阴影效果测试阴影效果测试阴影效果测试阴影效果</p>
      
</body>
</html>

加入css:

p{
    width:100px;
    text-wrap:normal;/*换行:正常,100px*/
}

效果:
技术分享

 

css文本样式

原文:http://www.cnblogs.com/UniqueColor/p/5748795.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!