css3文本和颜色
1、文本阴影text-shadow
语法 text-shadow:X-Offset Y-Offset blur color;
X-Offset:表示阴影的水平偏移距离,其值为正值时阴影向右偏移,反之向左偏移;
Y-Offset:是指阴影的垂直偏移距离,如果其值是正值时,阴影向下偏移,反之向上偏移;
Blur:是指阴影的模糊程度,其值不能是负值,如果值越大,阴影越模糊,反之阴影越清晰,如果不需要阴影模糊可以将Blur值设置为0;
Color:是指阴影的颜色,其可以使用rgba色。
比如,我们可以用下面代码实现设置阴影效果。 text-shadow: 0 1px 1px #fff
2、word-wrap(文字边界换行):normal|break-word(强制换行);
word-break:break-all(强制换行,不区分单词)| keep-all(区分单词,把单词展示完全)| normal
3、white-space (对空白操作,也可用于换行)
white-space:pre (保留所有空格,包括换行)| nowrap(不换行,文字将展示在一行内,并且不识别换行符和多个空格)| pre-line(保留换行符,合并空格,换行由单词长度决定,单词展现完全)//此属性不支持IE7.0-/Firefox3.0-和Opera9.2-以下版本浏览器| pre-wrap 保留换行符和空格,正常换行 //此属性不支持IE7.0和Firefox3.0以下版本浏览器
white-space的应用:超出部分打点
<style>
p{
width:150px;
height:200px;
border:1px solid #000;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
</style>
</head> <body>
<p>ndkfokdjfgjfldmg;dfmg;dkg;kdjfjfjjffjj</p>
</body>
4、自定义字体 font-face
@font-face{ font-family:”myFirstFont”;
src:url('Sansation_Light.ttf'),
url(‘Sansation_Light.eot') format(‘eot’);
}
p{
font-family:”myFristFont”;
}
地址:http://www.w3cplus.com/content/css3-font-face
format: 此值指的是你自定义的字体的格式,主要用来帮助浏览器识别浏览器对@font-face的兼容问题,这里涉及到一个字体format的问题,因为不同的浏览器对字体格式支持是不一致的,浏览器自身也无法通过路径后缀来判断字体
5、文本溢出属性text-overflow
text-overflow:clip | ellipsis; 文本溢出切断 | 省略号
超出打点功能:
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
6、columns多列布局
为了能在Web页面中方便实现类似报纸、杂志那种多列排版的布局,W3C特意给CSS3增加了一个多列布局模块(CSS Multi Column Layout Module)。它主要应用在文本的多列布局方面,这种布局在报纸和杂志上都使用了几十年了,但要在Web页面上实现这样的效果还是有相当大的难度,庆幸的是,CSS3的多列布局可以轻松实现。
语法: columns: [column-width] [column-count];
column-width:指每一列的宽度 根据容器宽度自适应 (最小宽度)
column-count:指规定的列数 唯一精准的是列数
不要两一起使用 会乱
css3文本和颜色的更多相关文章
- 第 21 章 CSS3 文本效果
学习要点: 1.文本阴影 2.文本裁剪 3.文本描边 4.文本填充 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS3 中文本效果,其中也包含一些之前讲过的 CSS3 文本属性. 一.文本阴影 ...
- CSS3文本温故
1.CSS早期属性,分为三大类:字体.颜色和文本: 2.CSS文本类型有11个属性: 注:还有一个颜色属性:color,主要用来设置文本颜色 3.CSS3文本阴影属性:text-shadow语法:te ...
- HTML 学习笔记 CSS3 (文本效果)
text-shadow 语法 text-shadow : none | <length> none | [<shadow>, ] * <shadow> 或none ...
- [HTML] CSS3 文本效果
CSS3 文本效果 CSS3中包含几个新的文本特征. 在本章中您将了解以下文本属性: text-shadow word-wrap 浏览器支持
- css3 文本效果
CSS3 文本效果 1 CSS3 文本阴影在 CSS3 中,text-shadow 可向文本应用阴影,能够规定水平阴影.垂直阴影.模糊距离,以及阴影的颜色.text-shadow: 5px 5px ...
- css3 文本记
css3 文本 在css文本功能上主要分为三大类:字体,颜色和文本. text-shadow 设置文本阴影 text-shadow:color x-offset y-offset blur-radiu ...
- 第七十八节,CSS3文本效果
CSS3文本效果 一.文本阴影 CSS3提供了text-shadow文本阴影效果,这个属性在之前讲过,只是没有涉及浏览器 支持情况. 浏览器支持情况 text-shadow Opera ...
- CSS3 文本效果(阴影)
CSS3中包含几个新的文本特征. 在本章中您将了解以下文本属性: text-shadow box-shadow text-overflow word-wrap word-break CSS3 的文本阴 ...
- 4.css3文本属性
1.css3文本属性: ①Color:颜色. ②Text-align:文本水平对齐方式. ⑴Left默认值,right,center,justify两端对齐: ⑵新增start相当于left,end相 ...
随机推荐
- kafka 消息系统
一.为什么需要消息系统 1.解耦: 允许你独立的扩展或修改两边的处理过程,只要确保它们遵守同样的接口约束. 2.冗余: 消息队列把数据进行持久化直到它们已经被完全处理,通过这一方式规避了数据丢失风险. ...
- 介绍Collection框架的结构;Collection 和 Collections的区别
介绍Collection框架的结构:Collection 和 Collections的区别 集合框架: Collection:List列表,Set集 Map:Hashtable,HashMap,Tre ...
- Java 文件类 File
1.File 类 1.File 类 1.1.构造方法 文件的 抽象路径名(操作系统无关) 构造方法 格式 说明 File(String filename) 把文件路径名字符串转换为“抽象路径名”,用来 ...
- form表单的默认行为
<form action=""></form> action 位空,默认提交数据到当前页.不知名method,默认为get方法 /?arg1=val1&am ...
- web前端基本开发手册
--------------------------------- 一.概况 1.1 WEB 标准 二.实现WEB标准 2.1 XHTML.CSS介绍 2.2 XHTML书写规范 2.2.1 X ...
- 【Excel技能】字符串包含某字符串个数?替换许多组字符串?
=len(单元格A)-len(substitute(单元格A,某字符串,)) 原理:将某字符串替换成空,前后字符串长即为减去的这个字符串长度,这个字符串出现个数=前后字符串长度之差/这个字符串长度 = ...
- uva-11054-模拟
题意:一条街有许多卖酒的店,有些店需要进酒,有些店需要出酒,所有的店的需求总和为0,问怎么移动,使酒的移动总和最少. 模拟,考虑一家店的需求为xi,无论是从左或者是从右或者其他形式,让xi->0 ...
- CouldnotcreatetheJavaVirtualMachine/1709
Section A: symptom -------------------- SWPM1024 S/4hana 1709 安装过程中遇到error, 错误提示错误信息在/tmp/sapinst_ ...
- REST api文档管理工具
问题: 不同软件/程序在网络中互相传递信息不统一. 交互不便. REST API 作用: RESTful API就是一套协议,用来规范多种形式的前端和同一个后台的交互方式. 原理: 组成/流程/规范: ...
- CMD定时倒数
修改if %count%==20 goto finish改变秒数 CMD: mode con: cols=80 lines=25color 4ftitle Please WaitSET /P var= ...