CSS3 新增的文本属性
一、CSS1&2中的文本属性(W3C标准)
text-indent
|
CSS1
|
检索或设置对象中的文本的缩进
|
letter-spacing
|
CSS1
|
检索或设置对象中的文字之间的间隔
|
word-spacing
|
CSS1
|
检索或设置对象中的单词之间插入的空格数。
|
vertical-align
|
CSS1/CSS2
|
设置或检索对象内容的垂直对其方式
|
white-space
|
CSS1
|
设置或检索对象内空格的处理方式
|
direction
|
CSS2
|
检索或设置文本流的方向
|
unicode-bidi
|
CSS2
|
用于同一个页面里存在从不同方向读进的文本显示。与direction属性一起使用
|
line-height
|
CSS1
|
检索或设置对象的行高。即字体最底端与字体内部顶端之间的距离
|
属性
|
版本
|
简介
|
text-overflow
|
CSS3
|
设置或检索是否使用一个省略标记(...)标示对象内文本的溢出
|
text-align
|
CSS1/CSS3
|
设置或检索对象中文本的对齐方式
|
text-transform
|
CSS1/CSS3
|
检索或设置对象中的文本的大小写
|
text-decoration
|
CSS1/CSS3
|
复合属性。检索或设置对象中的文本的装饰,如下划线、闪烁等
|
text-decoration-line
|
CSS3
|
检索或设置对象中的文本装饰线条的位置。
|
text-decoration-color
|
CSS3
|
检索或设置对象中的文本装饰线条的颜色。
|
text-decoration-style
|
CSS3
|
检索或设置对象中的文本装饰线条的形状。
|
text-shadow
|
CSS3
|
设置或检索对象中文本的文字是否有阴影及模糊效果
|
text-fill-color
|
CSS3
|
设置或检索对象中的文字填充颜色
|
text-stroke
|
CSS3
|
复合属性。设置或检索对象中的文字的描边
|
text-stroke-width
|
CSS3
|
设置或检索对象中的文字的描边厚度
|
text-stroke-color
|
CSS3
|
设置或检索对象中的文字的描边颜色
|
tab-size
|
CSS3
|
检索或设置对象中的制表符的长度
|
word-wrap
|
CSS3
|
设置或检索当当前行超过指定容器的边界时是否断开转行
|
<style>
p{width:100px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis}
</style>
<body>
<p>哇塞,有灰机灰过去了,一会又一架灰机灰来了</p>
</body>
<style>
p{text-align:start; border:1px solid red;
direction:rtl; /*将文档流变成从右向左书写*/
unicode-bidi:bidi-override;
}
</style>
<body>
<p>看看我在哪里,左边还是右边还是中间捏?</p>
<!--
在从左向右书写的文字中,左是开始,右是结束(汉语、英语)
left=start right=end
在从右向左书写的文字中,右是开始,左是结束(维语)
left=end right=start
--->
</body>
lDirection 定义文字排列方式(全兼容)
<style>
p{width:300px;border:1px solid #000;font:14px/30px "宋体";direction:rtl;unicode-bidi:bidi-override;}
</style>
</head>
<body>
<p>妙味课堂</p>
</body>
3.text-transform属性
text-decoration : overline //CSS1实例
text-decoration : #F00 double overline //CSS3实例
<style type="text/css">
p{color:red;
font-size:40px;
text-shadow:
3px 3px 3px rgba(0,255,0,0.5),
6px 6px rgba(0,0,255,0.5),
9px 9px #f90
;
/*
第一个参数表示 水平移动方向
第二个参数表示 垂直移动方向
第三个参数表示[模糊程度(长度)] 可以省略
第四个参数表示 [阴影颜色] 可以省略
*/
}
</style>
<body>
<p>我是一个正直的人,又正又值。</p>
</body>
<style>
h1{ font:100px/200px "微软雅黑"; text-align:center; color:#fff; text-shadow:4px 4px 4px red;}
</style>
</head>
<body>
<h1>妙味课堂</h1>
</body>
文字模糊:
鼠标移动上去时
<style>
h1{ font:100px/200px "微软雅黑"; text-align:center; color:#000; text-shadow:0 0 0 rgba(0,0,0,0.5); border:1px solid #000; transition:1s;}
h1:hover{color:rgba(0,0,0,0.5);text-shadow:0 0 100px rgba(0,0,0,0.1);} </style>
</head>
<body>
<h1>妙味课堂</h1>
</body>
火焰文字
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
p{text-shadow: 0 0 20px #fefcc9, 10px -10px 30px #feec85, -20px -20px 40px #ffae34, 20px -40px 50px #ec760c, -20px -60px 60px #cd4606, 0 -80px 70px #973716, 10px -90px 80px #451b0e; font-family:Verdana, Geneva, sans-serif; font-size:100px; font-weight:bold; color:white;}
</style>
</head>
<body>
<p>妙味课堂</p>
</body>
</html>
光晕效果:
<style>
p{color:white; font-size:100px; text-shadow:0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;}
</style>
</head>
<body>
<p>妙味课堂</p>
</body>
<style type="text/css">
p{
font-size:100px;
/*浏览器私有前缀属性*/
-webkit-text-fill-color:blue;
-webkit-text-stroke:2px green;
/*W3C标准*/
/*text-fill-color:red;*/
/*text-stroke:2px green;*/ /*私有前缀
IE:-ms-
谷歌、苹果、猎豹、360急速(webkit内核):-webkit-
opera:-o-
firefox:-moz- 更正:火狐浏览器的内核为Gecko 但是似有前缀是-moz-
*/
}
</style>
<body>
<p>文艺青年欢乐多。</p>
</body>
12.text-stroke-width属性
<style type="text/css">
p{
font-size:100px;
/*浏览器私有前缀属性*/
-webkit-text-fill-color:white;
-webkit-text-stroke-color:blue;
-webkit-text-stroke-width:2px;
/*W3C标准
text-fill-color:white;
text-stroke-color:blue;
text-stroke-width:2px;*/ }
</style>
<body>
<p>文艺青年欢乐多。</p>
</body>
14.tab-size属性
<style type="text/css">
p{tab-size:30} /*支持倍数方式*/
/*p{tab-size:800px;}谷歌浏览器暂不支持长度定义*/
</style>
<body> <pre>
<p> tab键长度测试</p>
</pre>
<!--
HTML在处理不可见字符的时候,通常忽略或者变成一个英文字符空格
在开头或者结尾:忽略掉所有空白字符
在字符中间:把连续的所有空白变成一个英文的空格
-->
</body>
15.word-wrap属性
<style type="text/css">
p{width:90px;border:1px solid red;word-wrap:break-word}
</style>
<body>
<p>howareyouhowoldareyou?</p>
</body>
<style> /*这段代码在 http://www.fontsquirrel.com/fontface/generator转换字体格式生成兼容代码 导入一个字体后自动生成代码,和字体*/
@font-face {
/*该属性的原理就是当用户的电脑没有下面的字体的话,就随着网页将字体带到用户的电脑里去*/
font-family: 'miaov';/*给字体起名字*/
src: url('1-webfont.eot');
src: url('1-webfont.eot?#iefix') format('embedded-opentype'),
url('1-webfont.woff') format('woff'),
url('1-webfont.ttf') format('truetype'),
url('1-webfont.svg#untitledregular') format('svg');
font-weight: normal;
font-style:normal; }
body{font-family:"miaov"; font-size:200px; color:#000; font-weight:bold; text-align:center; letter-spacing:30px; transition:1s;}
body:hover{color:red;}
</style>
</head>
<body>
AAA
</body>
CSS3 新增的文本属性的更多相关文章
- css3新增的背景属性
有时候我们需要往边框文字上添加背景与背景图片的时候就有用处了 background的css3有两个新增属性分别是background-clip与background-origin;背景-修剪与背景起点 ...
- css3新增的background属性
1.background-size 可取值:auto(背景图片正常显示) size size (150px 40%) cover (背景图片覆盖整个背景) contain(背景图片缩小填满整个背景) ...
- CSS3新增(选择器{属性选择器,结构伪类选择器,伪元素选择器})
1.属性选择器 属性选择器,可以根据元素特定的属性来选择元素,这样就不用借助 类 或者 id选择器. E [ att ] 选择具有 att 属性的 E 元素 例如:input [ value ...
- css文本属性
CSS1&2中的文本属性 属性 版本 简介 text-indent CSS1 检索或设置对象中的文本的缩进 letter-spacing CSS1 检索或设置对象中的文字之间的间隔 word- ...
- css3新增的属性有哪些
徐先森讲web CSS3新增的属性有哪些: CSS 用于控制网页的样式和布局. CSS3 是最新的 CSS 标准. CSS3新增了很多的属性,下面一起来分析一下新增的一些属性: 1.CSS3边框: b ...
- CSS3新增的属性有哪些:
CSS 用于控制网页的样式和布局. CSS3 是最新的 CSS 标准. CSS3新增了很多的属性,下面一起来分析一下新增的一些属性: 1.CSS3边框: border-radius:CSS3圆角边框. ...
- 学习css之文本属性
css3之文本属性: 1.缩进和水平对齐:text-indent, 通过使用 text-indent 属性,所有元素的第一行都可以缩进一个给定的长度,甚至该长度可以是负值. 这个属性最常见的用途是将段 ...
- CSS3新增文本属性实现图片点击切换效果
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- css3新增文本属性
css3新增属性 边框属性 背景属性 文本属性 颜色属性 文本属性 属性 说明 text-shadow 为文字添加阴影 box-shadow 在元素的框架上添加阴影效果 text-overflow 确 ...
随机推荐
- MVC应用jQuery动态产生数据
在前一篇<MVC应用程序JsonResult()的练习>http://www.cnblogs.com/insus/p/3402042.html中.Insus.NET在练习中学会了在视图中, ...
- JS继承实现的几种方式
//继承的几种实现: //解决方案1.通过原型继承 function Parent1(){ this.name = 'Parent1'; } function Child1(){} Child1.pr ...
- 【转】.NET NPOI操作Excel常用函数
最近因项目接触了NPOI,感觉还是蛮不错的,网络上的教程普遍版本较老,本篇记录所常用操作,采用NPOI 2.0版本. 推荐: NPOI官方网站 NPOI 1.2.4/1.2.5 官方教程 新建Exce ...
- oracle安装与备份导入
win10安装oracle因运行版本问题导致安装时提示错误(可能win10未被甲骨文公司认证) 跳过的问题 需要更改配置文件: 配置位置在 : 具体操作如下图: 在安装时win10跳过了 许是因为环 ...
- Improving the GPA(hdu4968)dfs
Improving the GPA Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 131072/131072 K (Java/Others) ...
- Mybatis中的缓存
Mybatis提供缓存查询功能,用于减轻数据库压力,提升数据查询能力. Mybatis中定义了两级缓存:包括一级缓存与二级缓存.示意图如下所示: 一.一级缓存 一级缓存的特点: 每一个SqlSessi ...
- Apache 、SUN、ORACLE
Apache: 全称:Apache Software Foundation 解释:apache 软件基金会.是专门为支持开源软件项目而办的一个非盈利性组织.在它所支持的Apache项目与子项目中,所发 ...
- 一个关于A标签和分页的怪问题!
用bootstrap做了用户电话号码查询的前端页面. 并且用了MVCPager分页. Bootstrap前端页如下: 一开始使用了用A标签,分页成功后,我进入第二页,点击这个A标签,页面会自动跳转到第 ...
- Textarea输入字数限制(兼容iOS&安卓)
最近在做一个微信公众号的页面,其中有对textarea做输入字数限制,而且需要兼容iOS和安卓手机,下面直接贴代码: <!DOCTYPE html> <html lang=" ...
- Postman Postman测试接口之POST提交本地文件数据
Postman测试接口之POST提交本地文件数据 by:授客 QQ:1033553122 本文主要是针对用Postman POST提交本地文件数据的方法做个简单介绍 举例: 文件同步接口 接口地址 ...