<!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. 创建mysql快捷登录方式

    1.先找到mysql的bin目录,将Mysql.exe发送快捷方式到桌面,到这里还没有完成. 2.然后右键选择属性,将目标后面添加上 -uroot -p 我的完整目标如下: D:\install\my ...

  2. WinForm 窗体之间相互嵌套

    public FrmScan() { InitializeComponent(); Form1 frm = new Form1(); frm.Dock = DockStyle.Fill; frm.Fo ...

  3. Composer笔记

    安装 windows中安装Composer 一般来说,windows下安装composer有两种办法,一种是直接下载并运行Composer-Setup.exe,这种方法在中国似乎很难完成安装.另一种就 ...

  4. prometheus client_golang使用

    序言 Prometheus是一个开源的监控系统,拥有许多Advanced Feature,他会定期用HTTP协议来pull所监控系统状态进行数据收集,在加上timestamp等数据组织成time se ...

  5. html基本标签与属性

    HTML 超文本标记语言 html5 建立一个HTML文件:文件名 . 后缀(html)   解析:就是去识别 注释:就是给开发人员开的批注------浏览器不去解析(不去输出)   HTML的整体框 ...

  6. NOIP2017-普及组复赛第2题 题解

    Description 图书馆中每本书都有一个图书编码,可以用于快速检索图书,这个图书编码是一个正整数.  每位借书的读者手中有一个需求码,这个需求码也是一个正整数.如果一本书的图书编码恰好以读者的需 ...

  7. ubuntu下mysql提示Changed limits: max_open_files:1024解决办法

    在配置我的md5解密网站cmd5.la的时候,mysql5.7出现了max_open_files: 1024, max_connections: 214,warning: Changed limits ...

  8. Abp后台工作者类使用hangfire

    一.Abp中的后台工作及后台工作者类 请阅读这篇文章 二 .Abp官方实现的缺点 Abp官方实现方式很简单,也很容易上手,但缺点是工作者类依赖了具体的基类(PeriodicBackgroundWork ...

  9. 在本地搭建play-with-docker

    安装play-with-docker 官方Github地址 https://github.com/play-with-docker/play-with-docker 本人Github地址 https: ...

  10. java版Web Socket，实现消息推送

    # web socket是什么? WebSocket协议是基于TCP的一种新的网络协议. 它实现了浏览器与服务器全双工(full-duplex)通信,允许服务器主动发送信息给客户端. ## 用途 实时 ...