css总结

语义化

图片语义化

1. alt和title属性

   • 都是用于描述图片的
   • alt:当图片无法显示的时候,页面会显示alt的文字(给浏览器看)
   • title:当鼠标移动到图片上时,会显示title的内容(给用户看)

2. figure和figcaption

   图片+图注

       <figure>        <img alt="" title="">        <figcaption></figcaption>    </figure>

表格语义化

<table>   表格     <caption> 标题     <thead>   表头(语义划分)   <tbody>   表身(语义划分)    <tfoot>   表尾(语义划分)     <tr>      行       <th>      表头单元格<td>      表格单元格

表单语义化

1. label
   
   • 语义上绑定了label元素和input元素
   • 增强鼠标可读性,点击label时,所关联的表单元素也会获得焦点
2. fieldset与legend
   -增强表单的语义(用fieldest给表单分组,legend分组的标题)
   -可以定义fieldset的disabled属性来禁用整组的表单元素

其他语义化

css基础知识

css单位

px%emrem

1. %

   • width,height,font-size的百分比是相对于父元素”相同属性”的值来计算的
   • line-height 的百分比是相对于父元素的font-size的值来计算的
   • vertical-align 的百分比是相对当前元素的line-height来计算的

2. em

   em是相对于当前元素font-size大小而言的,如果当前元素没有font-size,当前元素回继承父元素的font-size

   首行缩进text-indent:2em;

3. rem

   rem是相对于根元素(html标签)的font-size而言的

css特性

1. 继承

   • 文本相关属性

     font-family,font-sixe,font-style,font-weight,font,line-heihgt,text-align,text-indent,word-spacing

   • 列表相关属性

     list-style-image,list-style-position,list-style-type,list-style

   • 颜色相关属性

     color

2. 优先级
   行内样式>id选择器>class选择器>元素选择器

   选择器权重

   通配符      0伪元素      1(::before,::after,::first-letter,::first-line)元素选择器   1class选择器 10伪类        10(:hover,:first-child)属性选择器   10id选择器     100行内样式     1000

   !important

css规范

1. css文件名

2. id和class命名

   网页主体部分命名

     页面外围控制整体布局宽度：wrapper  头：header  内容：content/container  尾：footer  导航：nav  侧栏：sidebar  栏目：column  左右中：left right center  登录条：loginbar  标志：logo  广告：banner  页面主体：main  热点：hot  新闻：news  下载：download  子导航：subnav  菜单：menu  子菜单：submenu  搜索：search  友情链接：friendlink  页脚：footer  版权：copyright  滚动：scroll  内容：content  标签页：tab  文章列表：list  提示信息：msg  小技巧：tips  栏目标题：title  加入：joinus  指南：guild  服务：service  注册：regsiter  状态：status  投票：vote  合作伙伴：partner  左右中：left right center(2)导航      导航：nav      主导航：main-bav      子导航：sub-nav      顶导航：top-nav      边导航：side-bar      左导航：leftside-bar      右导航：rightside-bar(3)菜单  菜单：menu  子菜单：submenu(4)其他  标题: title  摘要: summary(5)功能  标志：logo  广告：banner  登陆：login  登录条：loginbar  注册：regsiter  搜索：search  功能区：shop  标题：title  加入：joinus  状态：status  按钮：btn  滚动：scroll  标签页：tab  文章列表：list  提示信息：msg  当前的: current  小技巧：tips  图标: icon  注释：note  指南：guild  服务：service  热点：hot  新闻：news  下载：download  投票：vote  合作伙伴：partner  友情链接：link  版权：copyright\