HTML、CSS学习笔记（二）

一、CSS基本元素

1.背景图像

background-image:url(images/background.gif);

默认的背景图像是重复的，background-repeat属性有no-repeat值，浏览器默认的背景图像的位置是元素的左上方，可以用background-position属性来设置。

background-position:top left;  // 可以用像素、百分数或top,left,right,bottom,center

background-repeat:no-repeat; //还有值 repeat-x  repeat-y inherit(继承父元素的值)

2.边框

border-style：控制边框的外观；

solid 实线；dotted 一系列点线；double 两条线；dashed 虚线；groove样式看起来像凹进页面里；inset像是嵌入到页面中；outset 从页面升起的一块凸出；ridge 页面中凸出的边界

定义边框的一侧：

border-top-color;

border-top-style;

border-top-width;

二、HTML中JPEG和GIF格式的区别：

JPEG：

1.可以连续调次（复制品中有中间层次，如照片）图像中获得最好效果；

2.可以用1600万种不同的颜色显示图像；

3.是一种“有损”格式，因为文件缩小时会丢失部分图像信息，为了获得能在网页上传送的大小合理的图像，必须损失一些图片质量；

4.不支持透明。

GIF：

1.对于几种纯色组成的图像、线条组成的图像（如logo、剪贴画）和含有小段文字的图像，使用GIF比较合适；

2.用256种颜色显示图像；

3.GIF同样会压缩文件来减小尺寸，但是不会丢失任何东西，是种“无损”格式；

4.允许把背景颜色设为“透明”的，图像背景就可以穿透显示。

一个JPEG照片通常比同质量的GIF小，而GIF logo通常看起来更佳，而且文件比JPEG格式的小。

img标签的属性

alt：当遇到损坏的图像时，浏览器用alt中的内容来代替图片显示；

width和height：使用这两个属性预先告诉浏览器页面中图像的大小

HTML页是纯文本，所以图像永远不是页面的一部分，它是独立的。

三、div

#elixirs h2表示选择的<h2>是id为“elixirs”的元素的所有孩子及孙子；

#elixirs> h2表示选择的<h2>是id为“elixirs”的元素的直接孩子；

如果需要一些更复杂的东西，比如一个<h2>，是在饮料部分中一个<blockquote>的孩子：

  #elixirs blockquote h2{
    color:red;
}

line-height有些特殊，可以只用一个数字代替相对值（比如em或%）来设置line-height的值，如果只用一个数字1，就是指元素的行间距为他们自己font-size的一倍。

font属性的缩写：font：font-style font-variant font-weight font-size/line-height font-family；必须定义字体大小

四、链接

链接的状态：link，未被访问的链接；visited，已被访问的链接；hover，选择鼠标停留在上面的链接；

五、元素漂移

漂移的元素必须有宽度

 #amazing{

    width：200px;

    float:right;

 }

块元素忽略漂移元素，而内联元素知道它们在哪儿。

可以用clear属性，它会把一个块元素向下移植到它的右边‘左边或两边都没有漂移元素。

绝对布局：布局的默认值是“static”，static布局把元素放置在正常的文档流中，并且不用你布置——浏览器决定哪个元素放哪儿。可以用float属性把一个元素从流中拿出来，可以决定它应该漂向左边还是右边，不过最终还是浏览器决定它放置的位置。与之相对应的是position的属性值“absolute”，用绝对布置，你告诉浏览器放置元素的精确位置。当绝对放置一个元素时，就把它从正常的页面流中移走了。

position有四个值，static absolute fixed relative；fixed把一个元素放置在跟浏览器窗口（而不是页面）有关的位置，所有fixed元素不移动；relative取出一个元素并让它正常地流到页面上，然后在页面显示之前让它偏移，relative多用于比较高级的布局和特殊的效果。

六、页面布局方法

1.漂移布局：用一个float属性，页脚中用了一个clear，缺点是会导致内容放置顺序改变；

2.凝胶物布局：通过把页面中所有的内容用固定大小的<div>包围来创建一个冻结布局，然后通过用“auto”属性值让边界扩展来做成凝胶物布局。这种方法可以创造出外观美妙的布局，也解决了内容顺序的问题，缺点是内容不会随着浏览器窗口的变化而扩展。

3.绝对布局：创建一个流动布局，内容顺序正确，缺点是不能用clear属性，浏览器变宽时页脚蔓延到了sidebar下面

#sidebar {

  position:     absolute;
  top:              128px;
  right:            0px;
  width:          280px;
}

4.固定布局：把元素固定在网页上，只要显示页面它就一直显示在那个位置；固定布置的元素总是以相对于浏览器窗口的位置放置，页面滚动时不移动，页面中其他内容在这些元素下面滚动；

#coupon {
  position:         fixed;
  top:              300px;
  left:             -90px;
}

5.相对布局：如下是一条选择图像的新规则，用子孙选择符来选择只在beanheading里的图像定义了一个相对位置，指定图像应该显示在相对于文档流位置的左边120像素，如果用绝对位置，图片移动了，因为它不在流中了，页面其他的部分就会移动到它下面，被它覆盖。

.beanheading img{
  position:         relative;
  left:             120px;
}

6.普通页面流中的两个并列放置的块元素，上边元素的下边界和下边元素的上边界会重叠，它们之间的边界就是较大边界的大小，或者如果大小相等就是一个边界的大小；

   漂移元素被移出了正常的流，放到左边或右边；

   漂移元素必须设置一个明确的宽度值，不能是默认的；

   流动布局是当你扩大浏览器窗口时，页面内容也随之扩大来填满页面；

   冻结布局是内容的宽度是固定的，不随浏览器窗口的变化而扩大或缩小，可以更好的控制设计，代价是不能有效利用浏览器宽度；

   凝胶物布局是内容区的宽度是固定的，但边界随着浏览器窗口的变化扩大或缩小，凝胶物布局通常用来把内容放在页面的中间；

   绝对布置的元素可以用z-index属性互相层叠放置，较大的z-index值表明它在上层；

7.CSS属性中Display与Visibility的不同

   visibility属性用来确定元素是显示还是隐藏，这用visibility="visible|hidden"来表示，visible表示显示，hidden表示隐藏。当visibility被设置为"hidden"的时候，元素虽然被隐藏了，但它仍然占据它原来所在的位置；

display属性就有一点不同了。visibility属性是隐藏元素但保持元素的浮动位置，而display实际上是设置元素的浮动特征。当display被设置为block(块)时，容器中所有的元素将会被当作一个单独的块，就像<div>元素一样，它会在那个点被放入到页面中。(实际上你可以设置<span>的display:block，使其可以像<div>一样工作。将display设置为inline，将使其行为和元素inline一样---即使它是普通的块元素如<div>，它也将会被组合成像<span>那样的输出流。最后是display被设置：none,这时元素实际上就从页面中被移走，它下面所在的元素就会被自动跟上填充。