HEAD FIRST --- HTML & CSS

HTML

• <& copyright >
  

  < ©right >

• 直接链接到网页#位置-
  See Chai Tea
• 打开窗口target
  xxxx
• 如果图片不能显示 alt中的文字会显示出来
  < img src="http://....png" alt =" xxxxx ">
• thumbnails 缩略图

CSS

• 属性声明的最后加上"!important"就可以覆盖样式
• 样式表中出现在后面的规则 更重要

对选择器中特定的部分进行编辑

/*-- 对greentea类中的p元素进行编辑--*/
p.greentea{
  color: green;
}
/* 对greentea类中的blockquote元素进行编辑 */
blockquote.greentea{
  color: green;
}
/*-- 对id 为 greentea 的p元素进行编辑--*/
p#greentea{
  color: green;
}
/* 对父元素（div）的所有子孙元素（h2）进行编辑*/
div h2{
    color: black;
}
/* 对父元素（id为elixirs）的所有子孙元素（h2）进行编辑*/
#elixirs h2{
    color: black;
}

字体

• SANS-SERIF 常用字
• SERIF 报纸字
• MONOSPACE 代码字
• CURSIVE 手写体
• FANTASY 装饰字

要加载由src URL指定的字体文件。

@font-face{
      font-family: " Emblema One";
      src: url(" http:// wickedlysmart.com / hfhtmlcss/ chapter8 .woff"),
            url(" http:// wickedlysmart.com / hfhtmlcss/ chapter8 .woff");
}

媒体查询

如果设备屏幕宽度大于480px就会使用这个规则

@media screen and (min-device-width: 480px){
      #guarantee{
            margin-right: 250px;
      }
}

@media (orientation: portrait) 横屏
@media (orientation: landscape) 竖屏

width属性只指定内容区的宽度

div width = margin-left + border-left-width + padding-left + width内容区 + padding-right + border-right-width + margin-right 

border设置

.test{
  border-style: outset;
  border-bottom-color: #EEEEEE;
  border-bottom-width: 1px;
  
  border-radius : 15px;
  border-top-left-radius : 0px;

  padding: 25px;
  margin: 10px 200px 30px 200px;
}

根据元素的状态指定样式 --- 悬停、点击等等

***e.g. a:link不能有空格！！顺序很重要 ***
/* 显示为链接的时候 */
a:link{
  color:green;
}
/* 被访问过后 */
a:vistied{
  color:red;
}
/* 悬停的时候 */
a:hover{
  background: #F9F9F9；
  color:yellow;
}
/* 访问到链接时 （键盘Tab）*/
a:focus{
  color:blue;
}
/* 鼠标点击时 长按不放 */
a:active{
  color: pink;      
}

文本居中

text-align : center

上移变两栏

float : right

流和盒模型

• 上下放置取数值大的外边框px
• 并列放置取数值和px

重叠问题

1. 首先需要浮动的栏必须是在其他元素的div上方
2. 为了不合其他元素重叠 可以在其他元素的中定义 clear: right/ left ...

冻结设计（Jello凝胶）

锁定页面中内容区的宽度，使得内容区在浏览器中居中

#allcontent{
  width: 800px;
  padding-top: 5px;
  margin-left: auto;
  margin-right: auto;
}

绝对定位

相对于父元素的定位

#annoyingad{
  position: absolute;
  top: 150px;
  left: 100px;
  width: 400px;
}

上面的元素越靠近 z-index的值越大 z-index =

值	描述
absolute	生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed	生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative	生成相对定位的元素，相对于其正常位置进行定位。因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
static	默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
inherit	规定应该从父元素继承 position 属性的值。

表格显示

    

        .....
    

div#tableContainer{
  display:table;
}
div#tableRow{
  display: table-row;
}

display: table-cell;   
border-spacing:    表格中的单元格的边框间距。（border-spacing和外边距创建的空间不会折叠！）
vertical-align:    确保表格两个单元格中所有内容相对于单元上边对齐。

H5标记

• 页眉
• 区块
• 页脚
• 侧边栏
• 文章
• 时间 2/18/2012
• 导航栏
• source标记有src的属性