【HTML5】文本属性

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title></title>
 6     <link rel="stylesheet" type="text/css" href="style.css">
 7 </head>
 8 <body>
 9     <p id="p1">text-align文本水平对齐方式</p>
10     <p>This    is     a    test    sentence.   汉字    之间    无     空格     会     当作     一个     单词。    </p>
11     <p id="p3">abcdqwert yuiopasdfg hjklzxcvbn mnqwertyuioqwe rtyuiasdf ghjzxcvb qwetyuasdfg hzxcv bnasdfgh qwerty uwertyusdfghxcvb qwertyusdfghxcvbnoqwertyuioasdfghjklzxcvbnm</p>
12     <p id="p4">abcdqwert yuiopa sdfghjklzx cvbnmnqwe rtyuioqwerty uiasdfghjzxcvb qwetyuas dfghzxcvbnasdfg hqwertyuwe rtyusd fghxcvbqwertyusdfghxcvbnoqwerty uioasdfghjklzxcvbnm</p>
13     <p id="p5">abcdqwert yuiopa sdfghjklzx cvbnmnqwe rtyuioqwerty uiasdfghjzxcvb qwetyuas dfghzxcvbnasdfg hqwertyuwe rtyusd fghxcvbqwertyusdfghxcvbnoqwerty uioasdfghjklzxcvbnm</p>
14     <h1>h1标签内容</h1>
15 </body>
16 </body>
17 </html>
 1 /*#p1{*/
 2     /*text-align: justify;*//*默认left,可设right、center、justify、start、end*/
 3     /*line-height: 3;*//*设置行高:normal、数字、百分比、px、em*/
 4     /*text-indent: 20px;*//*设置首行缩进:像素、百分比、em*/
 5     /*text-decoration:line-through overline underline;*//*默认值none在超链接去掉默认下划线时可用到,下划线underline,上划线overline,删除线line-through,闪烁文本blink*/
 6     /*letter-spacing: 2em;*//*设置字符间距,默认normal,可用像素、em,可设负值*/
 7     /*}*/
 8 p{
 9     /*word-spacing: 2em;*//*类似letter-spacing,可设负值*/
10     /*text-transform: lowercase;*//*none默认;capitalize每个单词以大写字母开头,uppercase转换为大写字母,lowercase转换为小写字母*/
11     /*text-shadow: 3px 3px 3px red, -6px -6px 3px green;*//*四个参数:横向偏移、纵向偏移、模糊度、颜色,可加多个阴影用逗号隔开*/
12     /*white-space: pre;*//*设置元素中空白处理方式:默认normal;pre空白会保留,类似pre标签;nowrap文本不会换行,文本会在同一行上继续,直到遇到br标签为止;pre-wrap保留空白正常换行;pre-line合并空白正常换行*/
13     /*direction: rtl;*//*默认ltr*/
14     /*unicode-bidi: bidi-override;*//*从右向左读文字,一般配合direction使用,默认normal,可设embed*/
15 }
16 #p3{
17     background: green;
18     width: 200px;
19     word-wrap: break-word;
20 }
21 #p4{
22     background: blue;
23     width: 200px;
24     word-wrap: ;
25 }
26 #p5{
27     background: red;
28     width: 200px;
29     word-break: break-all;/*比work-wrap的break-word拆的更彻底。keep-all只能在半角空格或连字符处换行*/
30 }
31 h1{
32     -webkit-text-stroke:1px red;/*多数浏览器不支持此功能,所以要加浏览器私有前缀-webkit-*/
33     -webkit-text-fill-color:blue;
34 }
35 /*text-overflow设置是否使用一个省略标记...标示对象内文本溢出:clip默认值,当对象内文本溢出时不显示省略标记,而是将溢出部分裁掉;ellipsis当对象内文本溢出时显示省略号。此属性要和over-flow:hidden属性,white-space:nowrap配合使用。*/
36 /*
37 text-outline规定文本的轮廓;
38 text-justify规定当text-align设置为justify时所使用的对齐方式;
39 text-align-last设置如何对齐最后一行或紧挨强制换行符之前的行;
40 text-emphasis向元素的文本应用重点标记以及重点标记的前景色;
41 hanging-punctuation规定标点字符是否位于线框之外;
42 punctuation-trim规定是否对标点字符进行修剪;
43 tab-size设定一个tab在页面中的显示长度;
44 text-wrap规定文本的换行规则。
45 */
时间: 2024-10-08 07:48:58

【HTML5】文本属性的相关文章

HTML5 学习笔记(二)——HTML5新增属性与表单元素

目录 一.HTML5新增属性 1.1.contextmenu 1.2.contentEditable 1.3.hidden 1.4.draggable 1.5.data-* 1.6.placeholder占位属性 1.7.required必填属性 1.8.pattern正则属性 1.9.autofocus自动聚焦属性 1.10.autocomplete自动完成属性 1.11.novalidate不验证属性 1.12.multiple多选属性 二.HTML5表单新功能解析 2.1.表单结构更自由

HTML5 dir属性

HTML5 dir属性: 此属性规定元素内容的文本方向. 语法结构: <element dir="ltr|rtl|auto"> 浏览器支持: (1).IE浏览器支持此属性. (2).谷歌浏览器支持此属性. (3).火狐浏览器支持此属性. (4).Safari浏览器支持此属性. (5).Opera浏览器支持此属性. HTML4.01与HTML5之间的差异: (1).HTML5中, dir属性可用于任何的HTML元素 (它会验证任何HTML元素.但不一定是有用). (2).HT

html5 data属性的使用

html5 data属性定义和用法 <ul> <li data-animal-type="bird">Owl</li> <li data-animal-type="fish">Salmon</li> <li data-animal-type="spider">Tarantula</li> </ul> data-* 属性用于存储页面或应用程序的私有自定义

HTML5 文本标记

HTML5 文本标记 文本标记概述 文本标记的作用 文本是网页上的重要组成部分,直接书写的文本会用浏览器默认的样式显示,包含在标记中的文本则会被显示为标记所拥有的样式: 特殊字符 注释 标题元素 段落元素 换行元素 分区元素 ... 文本与特殊字符 在网页中输入多个空格或制表符会被压缩成单个空格,即只显示一个空格.特殊字符(如空格),需要进行转义才能正常显示(字符实体).   :一个空格 > : > greater than < : < less than © : © ... 使用

HTML5 spellcheck属性

HTML5 spellcheck属性: 此属性规定是否对元素内容进行拼写检查. 可对以下文本进行拼写检查: (1).类型为text的input元素中的值(非密码). (2).textarea 元素中的值. (3).可编辑元素中的值. 语法结构: <element spellcheck="true|false"> 浏览器支持: (1).IE9以上浏览器支持此属性. (2).谷歌浏览器支持此属性. (3).火狐浏览器支持此属性. (4).Safari浏览器支持此属性. (5).

HTML5 学习总结(二)——HTML5新增属性与表单元素

一.HTML5新增属性 1.1.contextmenu contextmenu的作用是指定右键菜单. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="div1" style="height:900px; backgrou

HTML笔记(2)——HTML5新属性

HTML5 DAY01: 基本内容 HTML5目前最新的规范(标准)是2014年10月推出 2005年左右出现HTML5版本(非标准) W3C组织(两个组织定义H5规范) 学习(研究)HTML5是学习未来(将来主流) HTML版本 - 第一阶段主要学习还是4版本(包含5版本) <header><nav> HTML5版本之后,声明不再出现版本信息 有意地版本,以后可能不再会有新版本 HTML5的规范内容实时更新 注意 HTML5永远都不可能离开javascript. HTML5在移动

学习HTML5 全局属性 accesskey-title

属性classcontextmenu指定一个元素的上下文菜单.当用户右击该元素,出现上下文菜单dirdropzone指定是否将数据复制,移动,或链接,或删除idspellcheck检测元素是否拼写错误tabindextranslate指定是否一个元素的值在页面载入时是否需要翻译 描述 accesskey 设置访问元素的键盘快捷键. 规定元素的类名(classname) contenteditable规定是否可编辑元素的内容. data-*用于存储页面的自定义数据 设置元素中内容的文本方向. dr

学习css之文本属性

css3之文本属性: 1.缩进和水平对齐:text-indent, 通过使用 text-indent 属性,所有元素的第一行都可以缩进一个给定的长度,甚至该长度可以是负值. 这个属性最常见的用途是将段落的首行缩进,下面的规则会使所有段落的首行缩进6 em:p {text-indent:6em;} text-indent 属性可以继承. 2.水平对齐:text-align 是一个基本的属性,它会影响一个元素中的文本行互相之间的对齐方式. 取值范围:{left:把文本排列到左边.默认值:由浏览器决定

CSS 文本属性与值

HTML编辑文本,通过CSS的设置属性赋予HTML网页活力,改变文字类型.背景以及插入图片.视频.音频等,使网页更具生动. CSS中的文本属性 font-weight: bold; //改变字体粗细 normal //正常字体.标准字体 font-style:oblique; //字体风格(oblique倾斜) text-decoration:underline; //文字修饰(underline 下划线) overline; (上划线) line-throug; (删除线) none; (取消