1.

1. 文本缩进
text-indent：值；
值为数字，最常用的数值单位是px(像素)，也可以直接是百分比！
text-indent:100px;
text-indent:10%;
2. 文本对齐
text-align:对其方式;
可以的值为：left、center、right
3. 文本行高
line-height:值;
line-height:23px;
line-height:120%;
默认：normal
4. 字间隔(单词)
word-spacing:10px;
默认值：normal
5. 字母间隔
letter-spacing:5px;
默认值：normal
6. 文字下划线
text-decoration:none;
值：underline 或者none 等，常用值就这两个
7. 字体
font-family:微软雅黑;
多个字体用逗号隔开
font-family:"Times New Roman",Georgia,Serif;
font-family:字体1,字体2;
8. 字体风格
font-style:值;
normal
italic
oblique
9. 字体大小
font-size:数值;
数值单位为px
10. 文本颜色
color:颜色值;
颜色值可以为一些简单的英语单词
color:red;
实际工作中用的比较多的是颜色代码
color:#111111;

11. 文本加粗
font-weight:值;
常用值：
normal
bold
12. 关于样式继承
样式的继承问题！

  1. <html>
  2.   <head>
  3.     <meta name="generator"
  4.     content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
  5.     <meta charset="utf-8" />
  6.     <title>css构造文本</title>
  7.     <style type="text/css">
  8. p{
  9. text-align:center;/*文本对齐*/
  10. line-height:50px;/*文本行高*/
  11. word-spacing:40px;/*英文单词的间隔*/
  12. letter-spacing:10px;/*英文字母或汉字的间隔*/
  13. text-decoration:underline;/*文字下划线*/
  14. }
  15. </style>
  16.   </head>
  17.   <body>
  18.     <h1>行高</h1>
  19.     <p>hello world
  20.     english我是一个我是一个段我是一个段我是一个段我是一个段我是一个段我是一个段我是一个段我是一个段我是一个段我是一个段我是一个段我是一个段我是一个段我是一个段我是一个段我是一个段我是一个段我是一个段我是一个段我是一个段我是一个段我是一个段我是一个段我是一个段我是一个段段落</p>
  21.   </body>
  22. </html>
  1. <html>
  2.   <head>
  3.     <meta name="generator"
  4.     content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
  5.     <meta charset="utf-8" />
  6.     <title>css构造文本</title>
  7.     <style type="text/css">
  8. p{
  9. text-indent：50px;/*文本缩进*/
  10. text-align:center;/*文本对齐*/
  11. line-height:50px;/*文本行高*/
  12. word-spacing:40px;/*英文单词的间隔*/
  13. letter-spacing:10px;/*英文字母或汉字的间隔*/
  14. text-decoration:underline;/*文字下划线*/
  15. font-family:微软雅黑;/*字体*/
  16. font-style:italic;/*斜体*/
  17. font-size:30px/*字体大小*/;
  18. color:red;/*字体颜色*/
  19. font-weight:bold;/*字体加粗*/
  20. }
  21. a{text-decoration:none;
  22. }
  23. a:hover
  24. {text-decoration:underline;
  25. }/*鼠标放上去有下划线*/
  26. body{
  27. color:green;}/*继承*/
  28. div p{
  29. color:yellow;}
  30. #div1 p {
  31. font-style:italic;}
  32. </style>
  33.   </head>
  34.   <body>
  35.     <h1>行高</h1>
  36.     <p>hello world
  37.     english我是一个我是一个段我是一个段我是一个段我是一个段我是一个段我是一个段我是一个段我是一个段我是一个段我是一个段我是一个段我是一个段我是一个段我是一个段我是一个段我是一个段我是一个段我是一个段我是一个段我是一个段我是一个段我是一个段我是一个段我是一个段我是一个段段落</p>
  38.     <a href="http://www.baidu.com">百度</a>
  39.     <div>
  40.       <p>还上课大会上的聚会的军事登记九点上课</p>
  41.     </div>
  42.     <div id="div1">
  43.       <p>还上ewehJjjjjjjjjjjjjjjj急急急急急急急急急课大会上的聚会的军事登记九点上课</p>
  44.     </div>
  45.   </body>
  46. </html>

css构造文本的更多相关文章

  1. CSS换行文本溢出显示省略号

    现代浏览器中使用css可以实现文本溢出,使用 text-overflow: ellipsis;在有些场景下没有效果,这个时候你需要检查应用的场景是是否是块元素,是否有确切的width. 如果是行内元素 ...

  2. 推荐20款基于 jQuery & CSS 的文本效果插件

    jQuery 和 CSS 可以说是设计和开发行业的一次革命.这一切如此简单,快捷的一站式服务.jQuery 允许你在你的网页中添加一些真正令人惊叹的东西而不用付出很大的努力,要感谢那些优秀的 jQue ...

  3. css构造块级元素

    css 1. 宽高width:数值;height:数值;也可用百分比!长高的设置不会被后代继承2. 背景(1)背景颜色background-color:颜色值;元素的背景颜色默认为transparen ...

  4. CSS控制文本超出指定宽度后用省略号代替，CSS控制文本不换行

    CSS控制文本超出指定宽度后用省略号代替,CSS控制文本不换行. 一般的文字截断(适用于内联与块): .text-overflow {     display:block;/*内联对象需加*/     ...

  5. 关于用css实现文本和图片垂直水平居中

    关于用css实现文本和图片垂直水平居中   一直相信好记性不如烂笔头,最近遇到很多用到垂直居中的,整理一下以便日后查阅. 一.文本垂直水平居中 1.水平居中: 文字水平居中没什么好说的,用text-a ...

  6. css常用文本属性

    [CSS常用文本属性] 1. 字体.字号类: ① font-weight: 字体粗细. bold-加粗.normal-正常.lighter-细体 也可以使用100-900数值,400表示normal, ...

  7. 24, CSS 构造超链接

    1. 超链接边框 2. 派生超链接 3. 属性选择器超链接 4. 动态超链接 5. 图像翻转超链接 6. CSS 工具提示 1.给链接加上边框 A:link { Color: #f00; Text-d ...

  8. jq选择器（jq 与 js 互相转换），jq操作css样式 / 文本内容， jq操作类名，jq操作全局属性,jq获取盒子信息,jq获取位置信息

    jq选择器(jq 与 js 互相转换) // 获取所有的页面元素jq对象 $('css3选择器语法'); var $box = $(".box:nth-child(1)"); 获取 ...

  9. 23 , CSS 构造列表与导航

    1. 列表图片 2. 背景列表 3. 翻转列表 4. 水平导航 1. 内边距与外边距 Ul { Margin: 0; Padding: 0; } 2. 使用图片作为列表图标 Ul { Margin: ...

随机推荐

  1. userdate和table类型的效率对比

    做cocos2d-x开发的人可能有不少人在实现类时会利用cocos2d-x自己给出的类的实现,也即在luaBinding目录下extern.lua的文件中给出的实现: --Create an clas ...

  2. java笔记--适配器模式的运用

    适配器模式的运用 --如果朋友您想转载本文章请注明转载地址"http://www.cnblogs.com/XHJT/p/3884785.html "谢谢-- 主要应用: 可以在符合 ...

  3. Unity3D Optimizing Graphics Performance for iOS

    原地址:http://blog.sina.com.cn/s/blog_72b936d801013ptr.html icense Comparisons http://unity3d.com/unity ...

  4. 新的开始---cocos2d

    今天是一个新的开始,cocos2d的环境搭配好了,并且打包案桌apk的环境也搭配好了,安卓的这个搭配环境还是出了一点问题,前面弄了两个晚上(11-12.30)没弄出来,中间好几天都没有去弄,今天光棍节 ...

  5. GAE初探-一鼻子灰

    考虑到GAE可以一定条件下免费发布app,再加上之前有潜在客户需要用到GAE. 遂决定了解一番. 以比较熟悉的django作为切入点, 1. 首先安装 GAE-launcher,似乎没有太大问题 2. ...

  6. winform 添加“设置文件”

    添加配置文件 ·右击服务项目---添加新项---设置文件:----确定 ·把Settings1.settings,拖到properties里,双击Settings1.settings: 名称:是自己定 ...

  7. 【OpenStack】OpenStack系列3之Swift详解

    Swift安装部署(与keystone依赖包有冲突,需要安装不同版本eventlet) 参考:http://www.server110.com/openstack/201402/6662.html h ...

  8. Android 和iOS 创建本地通知

    1 Android 中的发送本地通知的逻辑如下 先实例化Notification.Builder,再用builder创建出具体的Notification,创建时要指定好启动用的PendingInten ...

  9. 快速排序模板qsort（转载）

     qsort  用 法: void qsort(void *base, int nelem, int width, int (*fcmp)(const void *,const void *)); 各 ...

  10. Java删除文件夹和文件

    转载自:http://blog.163.com/wu_huiqiang@126/blog/static/3718162320091022103144516/ 以前在javaeye看到过关于Java操作 ...