第5章 css3文本

word-spacing与letter-spacing的区别

word-spacing定义单词与单词之间的距离,对中文无效;
letter-spacing定义字母与字母之间的距离

text-overflow属性的语法及参数

text-overflow属性的参数

clip:不显示省略标记(...),只是简单的裁剪;
ellipsis:文本溢出时显示省略标记(...),

需要两属性的配合

这个div设置文本不换行

text-overflow-clip{
    width:100px;
    padding:10px;
    border:1px solid #ccc;
    text-overflow:clip;/*文本剪裁*/
    white-space:nowrap;/*强制不换行*/
    overflow:hidden;/*溢出隐藏==*/
}

文字属性书写顺序

  1. 定位:其中有的属性为:position z-index left right top bottom clip
  2. 尺寸:其中属性为:width height min-height max-height min-width max-width
  3. 文字:其中属性有:color font-size letter-spacing, text-align等
  4. 背景:其中属性有:background-image border等
  5. 其他:一般有:animation, transition等

CSS命名规范(常用的CSS命名规则)

头:header
内容:content/container
尾:footer
导航:nav
侧栏:sidebar
栏目:column
页面外围控制整体佈局宽度:wrapper
左右中:left right center
登录条:loginbar
标志:logo
广告:banner
页面主体:main
热点:hot
新闻:news
下载:download
子导航:subnav
菜单:menu
子菜单:submenu
搜索:search
友情链接:friendlink
页脚:footer
版权:copyright
滚动:scroll
内容:content
标签:tags
文章列表:list
提示信息:msg
小技巧:tips
栏目标题:title
加入:joinus
指南:guide
服务:service
注册:regsiter
状态:status
投票:vote
合作伙伴:partner

ID的命名:

页面结构

容器: container
页头:header
内容:content/container
页面主体:main
页尾:footer 导航:nav
侧栏:sidebar
栏目:column
页面外围控制整体布局宽度:wrapper
左右中:left right center

CSS样式表文件命名:

主要的 master.css
模块 module.css
基本共用 base.css
版面 layout.css
主题 themes.css
专栏 columns.css
文字 font.css
表单 forms.css
补丁 mend.css
打印 print.css

word-wrap:break-word;与word-break:break-all;的区别

word-wrap:break-word;防止长单词溢出,在内部断句;
word-break:break-all;直接进行单词内断句;
不同点:word-wrap:break-word;会首先起一个新行来放置长单词,新的行放不下,这个单词会被强制断句; word-break:break-all;不会把长单词放在新行里,这一行放不下就直接强制断句了

时间: 2024-10-14 18:20:57

第5章 css3文本的相关文章

第 21 章 CSS3 文本效果

学习要点: 1.文本阴影 2.文本裁剪 3.文本描边 4.文本填充 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS3 中文本效果,其中也包含一些之前讲过的 CSS3 文本属性. 一.文本阴影 CSS3 提供了 text-shadow 文本阴影效果,这个属性在之前讲过,只是没有涉及浏览器支持情况. text-shadow Opera Firefox Chrome IE Safari 9.5+ 3.5+ 4+ 10+ 3.1+ 这里有几个注意点:1.text-shadow 在 CSS2 的时

27.CSS3文本效果

第二十一章 CSS3文本效果 **************************************************** *查询适应的最低版本,可以去:"http://caniuse.com"* **************************************************** 一.文本阴影(CSS3提供了text-shadow文本阴影效果) 浏览器支持情况如下 Opera     Firefox     Chrome    IE    Safari

CSS3 文本效果(阴影)

CSS3中包含几个新的文本特征. 在本章中您将了解以下文本属性: text-shadow box-shadow text-overflow word-wrap word-break CSS3 的文本阴影 CSS3 中,text-shadow属性适用于文本阴影. 您指定了水平阴影,垂直阴影,模糊的距离,以及阴影的颜色: <style> h1 { text-shadow: 5px 5px 5px #FF0000; } </style> 1. CSS3 box-shadow属性 CSS3

第28章 CSS3多列布局

第 28章 CSS3多列布局学习要点:1.早期多列问题2.属性及版本3.属性解释 本章主要探讨 HTML5中 CSS3提供的多列布局,通过多列布局我们方便的创建流体的多列布局.一.早期多列问题我们有时想布局成报纸.杂志那样的多列方式(至少两列,一般三列以上),但早期CSS提供的布局方式都有着极大的限制.如果是固体布局,那么使用浮动或定位布局都可以完成.但对于流体的多列,比如三列以上,那只能使用浮动布局进行,而它又有极大的限制.因为它是区块性的,对于动态的内容无法伸缩自适应,基本无能力.//五段内

[HTML] CSS3 文本效果

CSS3 文本效果 CSS3中包含几个新的文本特征. 在本章中您将了解以下文本属性: text-shadow word-wrap 浏览器支持 Internet Explorer 10, Firefox,Chrome, Safari, 和 Opera支持text-shadow 属性. 所有的主流浏览器支持自动换行(word-wrap)属性. 注意: Internet Explorer 9及更早IE版本不支持 text-shadow 属性. CSS3的文本阴影 CSS3中,text-shadow属性

CSS3文本温故

1.CSS早期属性,分为三大类:字体.颜色和文本: 2.CSS文本类型有11个属性: 注:还有一个颜色属性:color,主要用来设置文本颜色 3.CSS3文本阴影属性:text-shadow语法:text-shadow:none | <length> none | [<shadow>,] * <shadow>或none | <color> [,<color]*也就是:text-shadow:[颜色color] x轴位移(x-offset) y轴位移(y

HTML 学习笔记 CSS3 (文本效果)

text-shadow 语法 text-shadow : none | <length> none | [<shadow>, ] * <shadow> 或none | <color> [, <color> ]* 也就是: text-shadow:[颜色(Color) x轴(X Offset) y轴(Y Offset) 模糊半径(Blur)],[颜色(color) x轴(X Offset) y轴(Y Offset) 模糊半径(Blur)]... 或

第24章 CSS3变形效果(上)

第 24章 CSS3变形效果[上]学习要点:1.transform2.transform-origin3.浏览器版本 本章主要探讨 HTML5中 CSS3的变形效果,通过变形效果,可以平移.缩放和旋转元素的功能. 一.transformCSS3提供了元素变形效果,也叫做变换.它可以将元素实现旋转.缩放和平移的功能.属性有两个:transform和 transform-origin.属性 说明transform 指定应用的变换功能transform-origin 指定变换的起点 对于 transf

CSS3 文本效果

1 CSS3 文本阴影在 CSS3 中,text-shadow 可向文本应用阴影,能够规定水平阴影.垂直阴影.模糊距离,以及阴影的颜色.text-shadow: 5px 5px 5px red; 2 CSS3 自动换行在 CSS3 中,word-wrap 属性允许您允许文本强制文本 进行换行 ,对单词进行拆分:word-wrap:break-word; 3 text-align-last 设置如何对齐最后一行或紧挨着强制换行符之前的行. 4 text-emphasis 向元素的文本应用重点标记以