给文字添加阴影——text-shadow属性

text-shadow属性是css2中定义的,在css2.1中删除了,在css3中恢复text-shadow:length length length color; 其中前三个length表示阴影离开文字的横方向距离,纵方向距离,和阴影的模糊半径,阴影的颜色。
前两个参数为阴影离开文字的距离可以为负值,负值代表向上,向左移动。颜色的参数不能省略,省略该参数则不会绘制阴影。
指定多个阴影,并且对多个,阴影可以使用不同的颜色,指定多个阴影时使用逗号将多个阴影隔开,但目前只有Firefox,chrome,opera支持。

[id=one]{ text-shadow:-5px -5px 2px #066; color:#0C6; font-size:50px;}
[id=two]{ text-shadow:-5px -5px 2px #066,75px 15px 2px #0FF,40px 40px 1px #C39; color:#0C6; font-size:50px;}

让文本自动换行——word-break属性
浏览器有让文字自动换行的功能,对于西方文字来说,浏览器会在半角空格或者连字符的地方自动换行,而不会再单词中间换行。
对于中文会在任意中文后换行。对于有标点符号的文章,浏览器不会让标点符号作为一行行首,因此会对标点前一个文字开始换行。
word-break属性的属性值有normal:使用浏览器默认的换行规则,keep-all:只能在半角空格内或连字符处换行, break-all:允许在单词内部换行。

[id=three]{ width:300px; height:300px; background-color:#0FF; color:#000; margin-top:70px; word-wrap:break-word;}

让长单词与URL地址自动换行——word-wrap属性
在css3中使用word-wrap来实现长单词与URL地址的自动换行。不自动换行可能会使长单词发生溢出。word-wrap:break-word;目前word-wrap属性得到所有的浏览器的支持

使用浏览器端字体——web Font与@font-face属性
在css3中,新增了web-Fonts功能,使用这个功能能使用服务器端字体,只要服务器安装此字体,网页就能正常浏览。
在css3 中可以使用@font-face来利用服务器端属性
@font-face{ font-family:webFont; src:url(服务器端字体的字体文件所在路径)format(声明字体文间的格式)}
@font-face也能显示客户端字体
@font-face的属性值有font-style,font-variant,font-weight,font-strech,font-size,src。

修改字体种类而保持字体大小不变的——font-size-adjust属性
font-size-adjust:aspect值;每一个字体的aspect的值不同。

使用rem单位来定义字体的大小
rem字体尺寸单位将根据页面的根元素(一般指html元素)的字体大小来计算实际字体的大小。无论子元素的父元素的大小是多大。
多了解一下rem的使用方法,响应式布局。

css3文字与字体的相关样式的更多相关文章

  1. 3.css3文字与字体

    1.css3文字与字体: ①Font-size:大小. ⑴通常使用px.百分比.em来设置大小: ⑵xx-small.x-small.small.medium.large.x-large.xx-lar ...

  2. css3文字与字体样式

    css3使用服务器端字体: <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...

  3. CSS3——背景 文本 字体 链接 列表样式 表格

    背景 background-color rgb(255,0,0,1)      最后一个值表示透明度,范围是 0--1 background-image 默认平铺重复显示 background-rep ...

  4. CSS3 文字与字体相关样式

    给文字添加阴影 文字换行 客户端文字 font-size-adjust属性 给文字添加阴影-text-shadow属性 text-shadow:length length length color 前 ...

  5. PowerDesigner修改设计图中文字的字体大小等样式

    设计图中默认的字体是对英文比较合适的,中文就看不清楚了,特别不美观.但是可以通过修改“Display Preferences”适应我们的汉字. 我使用的PowerDesigner版本是15.1(测试版 ...

  6. css3文字与字体

    ---恢复内容开始--- 1.text-overflow(用来设置是否使用省略标记)必须和white-space:nowrap 同时使用white-space:nowrap(强制文本在一行显示) wo ...

  7. css3:与背景的相关样式

    1. (1)background-origin : border-box | padding-box | content-box;(设置元素背景图片的原始起始位置.) //需要注意的是,如果背景不是n ...

  8. CSS3文字与字体 text-overflow 与 word-wrap

    text-overflow 对象内的文本溢出部分采用省略“...”标记 或者 剪切: text-overflow:elip(超出容器边界的内容剪切掉)  | ellipsis(超出容器边界内容省略标示 ...

  9. CSS3基础(2)—— 文字与字体相关样式、盒子类型、背景与边框相关样式、变形处理、动画功能

    一. CSS3 文字与字体相关样式 1. 给文字添加阴影 text-shadow: length length length ccolor; 属性适用于文本阴影,指定了水平阴影,垂直阴影,模糊的距离, ...

随机推荐

  1. Ubuntu 12.04中文输入法的安装(zhuan)

    Ubuntu 12.04中文输入法的安装   Ubuntu上的输入法主要有小小输入平台(支持拼音/二笔/五笔等),Fcitx,Ibus,Scim等.其中Scim和Ibus是输入法框架. 在Ubuntu ...

  2. EasyRTMP+EasyDSS实现一套完整的紧急视频回传直播与存储回放方案

    需求来源 紧急视频回传云端:即拍即传.云端存储.紧急录像.云拍云录!这些需求现在可能对于我们来说比较远,大部分也是在行业中才会用到,但相信在不就的将来肯定会落地到每个人的手中,因为这是一个自我保护.自 ...

  3. CSS定位细节

    记住此三句话,很好的解决了关于浮动方面的问题: 1.浮动的元素对于没有设置浮动的元素来说是不存在的,浮动的元素将会覆盖没有浮动的元素 如图:先让d1浮动在left ,d2位置不浮动,d1覆盖了d2之上 ...

  4. HTML 学习笔记 JQueryUI(Interactions,Widgets)

    Draggable 允许使用鼠标移动元素(拖动) demo <html>    <head>        <meta charset="UTF-8" ...

  5. 如何在windows上创建文件名以“.”开头的文件

    比如要创建.env文件,正常会提示必须输入文件名才能创建的,但是可以在后面再加一个点就能创建了,.env.这样就可以了

  6. python cookbook第三版学习笔记八:解析码流

    Binascii模块 通过名字很容易知道这个模块的作用,binary, ascii.两个字母的合成,也就是二进制和ascii的转换模块 下面先介绍下字母的ascii码 a-z的ascii是从97-12 ...

  7. java.lang.UnsupportedClassVersionError: org/openqa/selenium/WebDriver : Unsupported major.minor version 51.0

    周一上班,正常打开myeclipse,随便写了一个main方法执行.发现报错了... 问题提示如下: java.lang.UnsupportedClassVersionError: org/openq ...

  8. sed 简单用法

    sed的一个简单用法: eg:在某一个文件中的一个aaa字段前后添加某些字段. 在aaa前面添加字段:sed -ne 's/aaa/&HELLO/p' test 输出结果:aaaHELLO 在 ...

  9. 使用Spring AOP实现MySQL数据库读写分离案例分析

    一.前言 分布式环境下数据库的读写分离策略是解决数据库读写性能瓶颈的一个关键解决方案,更是最大限度了提高了应用中读取 (Read)数据的速度和并发量. 在进行数据库读写分离的时候,我们首先要进行数据库 ...

  10. ListView多选和单选模式重新整理

    超简单的单选和多选ListView 在开发过程中,我们经常会使用ListView去呈现列表数据,比如商品列表,通话记录,联系人列表等等,在一些情况下,我们还需要去选择其中的一些列表数据进行编辑.以前, ...