<!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8">

     <title></title>

     <link rel="stylesheet" type="text/css" href="style.css">

 </head>

 <body>

     <p id="p1">text-align文本水平对齐方式</p>

     <p>This    is     a    test    sentence.   汉字    之间    无     空格     会     当作     一个     单词。    </p>

     <p id="p3">abcdqwert yuiopasdfg hjklzxcvbn mnqwertyuioqwe rtyuiasdf ghjzxcvb qwetyuasdfg hzxcv bnasdfgh qwerty uwertyusdfghxcvb qwertyusdfghxcvbnoqwertyuioasdfghjklzxcvbnm</p>

     <p id="p4">abcdqwert yuiopa sdfghjklzx cvbnmnqwe rtyuioqwerty uiasdfghjzxcvb qwetyuas dfghzxcvbnasdfg hqwertyuwe rtyusd fghxcvbqwertyusdfghxcvbnoqwerty uioasdfghjklzxcvbnm</p>

     <p id="p5">abcdqwert yuiopa sdfghjklzx cvbnmnqwe rtyuioqwerty uiasdfghjzxcvb qwetyuas dfghzxcvbnasdfg hqwertyuwe rtyusd fghxcvbqwertyusdfghxcvbnoqwerty uioasdfghjklzxcvbnm</p>

     <h1>h1标签内容</h1>

 </body>

 </body>

 </html>
 /*#p1{*/

     /*text-align: justify;*//*默认left，可设right、center、justify、start、end*/

     /*line-height: 3;*//*设置行高：normal、数字、百分比、px、em*/

     /*text-indent: 20px;*//*设置首行缩进：像素、百分比、em*/

     /*text-decoration:line-through overline underline;*//*默认值none在超链接去掉默认下划线时可用到，下划线underline，上划线overline，删除线line-through，闪烁文本blink*/

     /*letter-spacing: 2em;*//*设置字符间距，默认normal，可用像素、em，可设负值*/

     /*}*/

 p{

     /*word-spacing: 2em;*//*类似letter-spacing，可设负值*/

     /*text-transform: lowercase;*//*none默认；capitalize每个单词以大写字母开头，uppercase转换为大写字母，lowercase转换为小写字母*/

     /*text-shadow: 3px 3px 3px red, -6px -6px 3px green;*//*四个参数：横向偏移、纵向偏移、模糊度、颜色，可加多个阴影用逗号隔开*/

     /*white-space: pre;*//*设置元素中空白处理方式：默认normal；pre空白会保留，类似pre标签；nowrap文本不会换行，文本会在同一行上继续，直到遇到br标签为止；pre-wrap保留空白正常换行；pre-line合并空白正常换行*/

     /*direction: rtl;*//*默认ltr*/

     /*unicode-bidi: bidi-override;*//*从右向左读文字，一般配合direction使用，默认normal，可设embed*/

 }

 #p3{

     background: green;

     width: 200px;

     word-wrap: break-word;

 }

 #p4{

     background: blue;

     width: 200px;

     word-wrap: ;

 }

 #p5{

     background: red;

     width: 200px;

     word-break: break-all;/*比work-wrap的break-word拆的更彻底。keep-all只能在半角空格或连字符处换行*/

 }

 h1{

     -webkit-text-stroke:1px red;/*多数浏览器不支持此功能，所以要加浏览器私有前缀-webkit-*/

     -webkit-text-fill-color:blue;

 }

 /*text-overflow设置是否使用一个省略标记...标示对象内文本溢出：clip默认值，当对象内文本溢出时不显示省略标记，而是将溢出部分裁掉；ellipsis当对象内文本溢出时显示省略号。此属性要和over-flow：hidden属性，white-space:nowrap配合使用。*/

 /*

 text-outline规定文本的轮廓；

 text-justify规定当text-align设置为justify时所使用的对齐方式；

 text-align-last设置如何对齐最后一行或紧挨强制换行符之前的行；

 text-emphasis向元素的文本应用重点标记以及重点标记的前景色；

 hanging-punctuation规定标点字符是否位于线框之外；

 punctuation-trim规定是否对标点字符进行修剪；

 tab-size设定一个tab在页面中的显示长度；

 text-wrap规定文本的换行规则。

 */

【CSS3】文本属性的更多相关文章

  1. 4.css3文本属性

    1.css3文本属性: ①Color:颜色. ②Text-align:文本水平对齐方式. ⑴Left默认值,right,center,justify两端对齐: ⑵新增start相当于left,end相 ...

  2. CSS3文本属性

    text-shadow(文本阴影) <h1>我有文字阴影</h1> h1{ color:#ffff00; text-shadow:1px 2px 2px #000000; } ...

  3. 第 21 章 CSS3 文本效果

    学习要点: 1.文本阴影 2.文本裁剪 3.文本描边 4.文本填充 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS3 中文本效果,其中也包含一些之前讲过的 CSS3 文本属性. 一．文本阴影 ...

  4. css3新增属性API

    写在前面:由于CSS5标准还未完全订下来,所以各种内核的浏览器都有自己的标准,为了不使属性混淆,所以各家在各自标准前加了一个前缀. -moz-  主要是firefox火狐 -webikt-主要是chr ...

  5. CSS3常用属性(边框、背景、文本效果、2D转换、3D转换、过渡、有过渡效果大图轮播、动画)

    CSS3边框: 1.CSS3圆角:border-radius  属性--创建边框线的圆角 <body style="font-size:24px; color:#60F;"& ...

  6. CSS3新增文本属性实现图片点击切换效果

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. CSS3 新增的文本属性

    一.CSS1&2中的文本属性(W3C标准) text-indent CSS1 检索或设置对象中的文本的缩进 letter-spacing CSS1 检索或设置对象中的文字之间的间隔 word- ...

  8. css3新增文本属性

    css3新增属性 边框属性 背景属性 文本属性 颜色属性 文本属性 属性 说明 text-shadow 为文字添加阴影 box-shadow 在元素的框架上添加阴影效果 text-overflow 确 ...

  9. CSS3常用属性

    CSS是我们常用的控制网页样式和布局的一种标准. CSS3是最新的CSS标准. CSS3被拆分为"模块",旧的规范也已经拆分为小的块,同时还增加了新的属性. 一些比较重要的CSS3 ...

  10. CSS3文本温故

    1.CSS早期属性,分为三大类:字体.颜色和文本: 2.CSS文本类型有11个属性: 注:还有一个颜色属性:color,主要用来设置文本颜色 3.CSS3文本阴影属性:text-shadow语法:te ...

随机推荐

  1. ASP.NET Core 认证与授权[5]:初识授权

    经过前面几章的姗姗学步,我们了解了在 ASP.NET Core 中是如何认证的,终于来到了授权阶段.在认证阶段我们通过用户令牌获取到用户的Claims,而授权便是对这些的Claims的验证,如:是否拥 ...

  2. mysql数据库表卡死解决方法

    ---恢复内容开始--- 问题引起原因: 由于在执行大量插入操作的时候意外终止程序之后, MySQl的线程并没有被终止,导致表不能打开和操作 -  解决思路就是找到等待的线程并kill -- 查看所有 ...

  3. 撸起袖子加油干 golang入坑系列

    还是提醒一下,里面有段子,不都是技术. 冲着技术来的,慢走不送.没有版权,但可以给我发邮件(ztao8607@gmail.com) 在我的发小朋友中,终于最后一位打光棍的要结婚了. 说实话,真心不容易 ...

  4. BootStra相关脚本引用说明

    先看一个简单的模板(DOCTYPE是html5的文档类型) <!DOCTYPE html> <html lang="zh-CN"> <head> ...

  5. 天梯赛 L3-013 非常弹的球 找规律

    L3-013. 非常弹的球 时间限制 100 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 俞勇(上海交通大学) 刚上高一的森森为了学好物理,买了一个 ...

  6. 贝叶斯来理解高斯混合模型GMM

    最近学习基础算法<统计学习方法>,看到利用EM算法估计高斯混合模型(GMM)的时候,发现利用贝叶斯的来理解高斯混合模型的应用其实非常合适. 首先,假设对于贝叶斯比较熟悉,对高斯分布也熟悉. ...

  7. HTMLCSS实现左侧固定宽度右侧内容可滚动

    在做移动端页面的时候,经常会碰到一个div中分左右两个div,左侧div固定宽度或百分比,右侧div中内容左右溢出,需要左右滑动才可以浏览到全部内容,为此写了一个demo. 处理这个问题的核心关键点是 ...

  8. python 3.6 MJ小工具

    2017.07.14 update 做了个界面,不需要使用cmd命令行+文件路径的方式来使用了: 链接如下: http://www.cnblogs.com/chenyuebai/p/7150382.h ...

  9. Spring3.0官网文档学习笔记（二）

    1.3 使用场景 典型的成熟的spring web应用 spring使用第三方框架作为中间层 远程使用场景 EJB包装 1.3.1 依赖管理.命名规则(包)     spring-*.jar *号代表 ...

  10. EasyUI实现异步载入tree(整合Struts2)

    首先jsp页面有一ul用于展现Tree <ul id="mytree"></ul> 载入Tree <script type="text/ja ...