HTML/CSS 最佳实践

[jiacai2050]

参考

http://learn.shayhowe.com/html-css/writing-your-best-code/

HTML5 推荐的语义化布局

[jiacai2050]

解决浏览器 CSS 兼容的reset 代码

/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

[jiacai2050]

HTML 中的转义字符

• http://www.copypastecharacter.com/

[jiacai2050]

布局相关

float

<header>...</header>
<section>...</section>
<aside>...</aside>
<footer>...</footer>

上面 html 代码效果图

section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}

加上上面样式后效果图

类型，可以做出3列的效果

<header>...</header>
<section>...</section>
<section>...</section>
<section>...</section>
<footer>...</footer>

section {
  float: left;
  margin: 0 1.5%;
  width: 30%;
}

使用 float后，后面的元素可能会漂浮上来，解决方法有两种：

• 后面的元素用 clear: both取消之前的漂移。例如

div {
  clear: left;
}

• float 的外层包一层div，然后定义如下样式：

.group:before,
.group:after {
  content: "";
  display: table;
}
.group:after {
  clear: both;
}
.group {
  clear: both;
  *zoom: 1;
}

参考：

• http://learn.shayhowe.com/html-css/positioning-content/

[jiacai2050]

inline-block

<header>...</header>
<section>...</section>
<section>...</section>
<section>...</section>
<footer>...</footer>

section {
  display: inline-block;
  margin: 0 1.5%;
  width: 30%;
}

上面代码的效果图

修正方法有两种：

<header>...</header>
<section>
  ...
</section><section>
  ...
</section><section>
  ...
</section>
<footer>...</footer>

<header>...</header>
<section>
  ...
</section><!--
--><section>
  ...
</section><!--
--><section>
  ...
 </section>
 <footer>...</footer>

[jiacai2050]

可复用的列样式

.col-1-3 {
  width: 33.33%;
}
.col-2-3 {
  width: 66.66%;
}
.col-1-3,
.col-2-3 {
  display: inline-block;
  vertical-align: top;
}
.grid,
.col-1-3,
.col-2-3 {
  padding-left: 15px;
  padding-right: 15px;
}
.container,
.grid {
  margin: 0 auto;
  width: 960px;
}
.container {
  padding-left: 30px;
  padding-right: 30px;
}

<section class="grid">

  <!-- Speakers -->

  <section class="col-1-3">
    ...
  </section><!--

  Schedule

  --><section class="col-1-3">
    ...
  </section><!--

  Venue

  --><section class="col-1-3">
    ...
  </section>

</section>

[jiacai2050]

position 定位

relative

<div>...</div>
<div class="offset">...</div>
<div>...</div>

div {
  height: 100px;
  width: 100px;
}
.offset {
  left: 20px;
  position: relative;
  top: 20px;
}

absolute

section {
  position: relative;
}
div {
  position: absolute;
  right: 20px;
  top: 20px;
}

<section>
  <div class="offset">...</div>
</section>

[jiacai2050]

理解 CSS 选择器中的 ‘+’, ‘>’ 和 ‘~’

首先给出示例HTML代码

<div id="container">            
   <p>First</p>
    <div>
        <p>Child Paragraph</p>
    </div>
   <p>Second</p>
   <p>Third</p>      
</div>

下面的 css 样式会选中所有的p元素

div#container p{
    background-color: red;
}

> 只选择直系亲属

div#container > p {
  background-color: red;
}

+ 只选择后面的第一兄弟节点

div + p {  
   background-color: red;
} 

~ 选择后面的所有兄弟节点

div ~ p{
    background-color: red;
}