20160726 2016-07-26学习日志
3.CSS基础
什么是CSS？
- 层叠样式表、级联样式表
CSS特点
- 页面内容与表现形式分离
- 可很好地控制页面的布局
- 提高网页加载速度
- 降低服务器的成本
- 呈现一致的效果
CSS的引入方式
- 在标签内引入
- 优先级最高
- 冗余代码多，代码量大
- 不利于维护
- 个别特殊效果的使用
- head头部引入
- 速度快，没有服务器请求压力
- 相对于外部引入单页代码量少
- 不易改版与维护
- 代码较乱不易前后台沟通
- 常见于大型互联网首页 如：百度、网易等
- 外部引入
- 一个CSS文件可控制多个页面
- 易改版、便于维护
- 减少代码量，代码简洁规范易于分工协作
- 有效利用缓存机制
- 相对于单页有垃圾代码
- 外部引入中的href属性会给服务器造成请求的压力
- 常应用于访问量巨大的网页 如：淘宝、hao123等
link和@import的区别
- link是XHTML标签，除了加载CSS部分，还可以定义RSS等其他事物；@import属于CSS范畴，只能加载CSS
- link引用CSS时，在页面载入时同时加载；@import需要页面完全载入以后加载
- link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持
- link支持JavaScript控制DOM去改变样式；而@import不支持
CSS基本语法
- ID选择器
- 优先级最高，页面中不能有同名的ID
- 类选择器
- 优先级次于ID选择器，可以有相同的类名
- 标签名选择器
- 优先级与ID选择器和类选择器相比最低
- 群组选择器
- 把几个ID、class或者标签名中具有相同的css取出，来减少代码的冗余
- 后代选择器
- 使用多个选择器的组合来找到具体要控制的标签
各类选择器的优先级快速运算
- 标签内引入的样式高于一切选择器 1000
- ID选择器权重值 100
- Class选择器权重值 10
- 标签选择器权重值 1
如权重相同后面的样式覆盖前面的样式
字体设置
font-family
- 宋体、微软雅黑、Arail、Tabhoma;
- 中文页面建议以宋体为首，其他字体次之
- 英文页面建议以Arail/Tabhoma等字体
- 中英结合建议最好用英文字体
- 特殊字体一律用图片
font-size
- PC端最小字体12px
font-sytle
- normal/italic/ablique
font-weight
- normal/bold/bolder/lighter/number100-900整百数
font复合属性
- style-weight-size-family
color
- 设置文本的显示颜色
text-decoration
- none/underline/line-through/overline
text-indent
- length:常用单位是px或者em
text-align
- center
- left
- right
- justify两端对齐文本 IE不支持中文
vertical-align文本垂直对齐：table中使用
- top/bottom/middle