HEAD FIRST --- HTML & CSS

2017-08-03 本文已影响0人这个是LOEY的微博

HTML

<& copyright >
<p> < &copyright ></p>
直接链接到网页#位置-
<a href="index.html #chai"> See Chai Tea</a>
打开窗口target
<a target="_blank" href="...."> xxxx </a>
如果图片不能显示 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

重叠问题

首先需要浮动的栏必须是在其他元素的div上方
为了不合其他元素重叠可以在其他元素的中定义 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 id="tableContainer">
    <div id="tableRow">
        .....
    </div>
</div>

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

display: table-cell;   <!-- 在main和sidebar中加入 使得<div> 作为单元格-->
border-spacing:    表格中的单元格的边框间距。（border-spacing和外边距创建的空间不会折叠！）
vertical-align:    确保表格两个单元格中所有内容相对于单元上边对齐。

H5标记

<header> 页眉
<section> 区块
<footer> 页脚
<aside> 侧边栏
<article> 文章
<time> 时间 <time datatime="2012-02-18"> 2/18/2012 </time>
<nav> 导航栏
<source> source标记有src的属性
<video> 视频 chrome：.wedm
<object> 标签用于包含对象，比如图像、音频、视频、Java applets、ActiveX、PDF 以及 Flash
<mark> 突出显示
<audio> 声音内容
<canvas> JS绘制的图像和动画
<figure> 代码清单
header.top img#headerSlogan{ float: right; }

<body>
    <header class="top">
          <img id="headerLogo"
                   src="image/header......">
          <img id="headerSlogan"
                   src="image/....>
    </header>
</body>
...

list-style-type : 项目符号

<video>元素工作

controls 提供控件，控制视频和音频的播放
autoplay 一旦加载就开始播放
poster 未播放时会显示这个图像
preload 细粒度地控制视频如何加载（none、metadata 下载元数据、auto）
loop 循环播放

<video controls autoplay width="512" height="288" src=".../...mp4" 
      poster=".../..png" id="video">
</video>

<source>视频格式

type 文件类型
video/ogg 类型指定的容器格式
codecs 编解码器对视频和音频编码
theora 视频编解码器
vorbis 音频编解码器

<source src="video/ tweetsip.ogv" type='video/ogg; codecs="theora, vorbis" '>

建立表格

H5

<table>
    <caption>
          标题在浏览器中显示在表格上方
    </caption>
    <tr>          某一列的表头
        <th>      表头是前后排列的</th>
        <th>      1  </th>
        <th>      2  </th>
        <th>      3  </th>
    </tr>
    <tr>
         <td>     每个元素包含表格中的一个单元格</td>
         <td>     每个单元格分别构成一列</td>
         <td>     所有的td构成一行---表格数据</td>
    </tr>
</table>

CSS

边框折叠： border-collapse: collapse;

表行上色： ntd-child（）伪类

类:伪类 {属性}
e.g. p:ntd-child(odd) { background-color: blue;}

表格跨行： rowspan=" 数字"
表格跨列： colspan="数字"
定制表格标记：list-style-image: url (images/ backpack.gif)

建立表单

<select> 下拉菜单
<option> 下来菜单的选项