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