<!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. window下安装Apache+PHP

    本地系统为windows 10,Apache选择httpd-2.4.25-x64-vc14-r1,PHP选择php7.1_x64线程安全版. 1.安装Apache 将apache解压到c:/serve ...

  2. 使用JavaScript生成二维码教程-附qrcodejs中文文档

    使用javascript生成二维码 依赖jquery 需要使用到的库 https://github.com/davidshimjs/qrcodejs DIV <div id="qrco ...

  3. Python crawler access to web pages the get requests a cookie

    Python in the process of accessing the web page,encounter with cookie,so we need to get it. cookie i ...

  4. 《java.util.concurrent 包源码阅读》09 线程池系列之介绍篇

    concurrent包中Executor接口的主要类的关系图如下: Executor接口非常单一,就是执行一个Runnable的命令. public interface Executor { void ...

  5. c语言的预处理指令分3种 　　1> 宏定义 　　2> 条件编译 　　3> 文件包含

    宏简介 1.C语言在对源程序进行编译之前,会先对一些特殊的预处理指令作解释(比如之前使用的#include文件包含指令),产生一个新的源程序(这个过程称为编译预处理),之后再进行通常的编译 所有的预处 ...

  6. IPhoneX网页布局

    IPhoneX全面屏是十分科技化的,但是由于其圆角和摄像头刘海位置以及操控黑条的存在使得我们需要去对其样式做一些适配,没有X的同学可以开启 Xcode 9 的iPhone X 模拟器作为学习和调试. ...

  7. layer,Jquery,validate实现表单验证，刷新页面，关闭子页面

    1.表单验证 //获取父层 var index = parent.layer.getFrameIndex(window.name); //刷新父层 parent.location.reload(); ...

  8. java agent

    cmd使用java -help可以看到关于agent参数: -agentlib:<libname>[=<选项>] 加载本机代理库 <libname>, 例如 -ag ...

  9. listview优化加强版

    import android.content.Context;import android.graphics.Bitmap;import android.graphics.BitmapFactory; ...

  10. 服务器获取浏览器发送请求中的cookies，选取自己需要的cookie

    String cookieName = “userID”; // 设置自己需要的cookie名 Cookie cookies[] = request.getCookies(); // 获取请求中的所有 ...