第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;不会把长单词放在新行里，这一行放不下就直接强制断句了