html+css入门

1html介绍

定义关于 HTML 文档的元信息。定义文档与外部资源的关系。

8选择器

.class多次，同时多个样式

{

color : red

};

…

#id唯一，只能一个样式样式

{

color : red

};

…

*{}

a:hover{}

9.继承

p{color:red;}具有

p{border:1px solid red;}不具体

10.排版

（文字排版——字体）font-family:"宋体",sans-serif;

（文字排版——字号）font-size:12px;color:#666

（文字排版——粗体）font-weight:bold

（文字排版——斜体）font-style:italic;

（文字排版—下划线）text-decoration:underline;

（文字排版—删除线）text-decoration:line-through

（段落排版——缩进）text-indent:2em;

（段落排版—行间距）line-height:2em;

（段落排版—字间距）letter-spacing:50px

（段落排版——对齐）text-align:center;

11.模型

块级元素

、

、

、

、

和

• display:block;

  内联元素、、、、

  display:inline;

  内联块状元素、

  display:inline-block

  盒子模型

  盒子里padding内边距、盒子与盒子的margin外边距

  盒子边框border

  盒子模型的边框就是围绕着内容及补白的线，这条线你可以设置它的粗细、样式和颜色(边框三个属性)。

  如下面代码为 div 来设置边框粗细为 2px、样式为实心的、颜色为红色的边框：

  div{

  border:2px solid red;

  }

  上面是 border 代码的缩写形式，可以分开写：

  div{

  border-width:2px;

  border-style:solid;

  border-color:red;

  }

  注意：

  1、border-style（边框样式）常见样式有：

  dashed（虚线）| dotted（点线）| solid（实线）。

  2、border-color（边框颜色）中的颜色可设置为十六进制颜色，如:

  border-color:#888;//前面的井号不要忘掉。

  3、border-width（边框宽度）中的宽度也可以设置为：

  thin | medium | thick（但不是很常用），最常还是用像素（px）。

  现在有一个问题，如果有想为 p 标签单独设置下边框，而其它三边都不设置边框样式怎么办呢？css 样式中允许只为一个方向的边框设置样式：

  div{border-bottom:1px solid red;}

  同样可以使用下面代码实现其它三边(上、右、左)边框的设置：

  border-top:1px solid red;

  border-right:1px solid red;

  border-left:1px solid red;

  盒子填充padding

  元素内容与边框之间是可以设置距离的，称之为“填充”。填充也可分为上、右、下、左(顺时针)。如下代码：

  div{padding:20px 10px 15px 30px;}

  顺序一定不要搞混。可以分开写上面代码：

  div{

  padding-top:20px;

  padding-right:10px;

  padding-bottom:15px;

  padding-left:30px;

  }

  如果上、右、下、左的填充都为10px;可以这么写

  div{padding:10px;}

  如果上下填充一样为10px，左右一样为20px，可以这么写：

  div{padding:10px 20px;}

  盒子边界

  元素与其它元素之间的距离可以使用边界（margin）来设置。边界也是可分为上、右、下、左。如下代码：

  div{margin:20px 10px 15px 30px;}

  也可以分开写：

  div{

  margin-top:20px;

  margin-right:10px;

  margin-bottom:15px;

  margin-left:30px;

  }

  如果上右下左的边界都为10px;可以这么写：

  div{ margin:10px;}

  如果上下边界一样为10px，左右一样为20px，可以这么写：

  div{ margin:10px 20px;}

  总结一下：padding和margin的区别，padding在边框里，margin在边框外。

  12.css布局模型

  在网页中，元素有三种布局模型：

  1、流动模型（Flow）（默认）

  2、浮动模型 (Float)

  3、层模型（Layer）

  div{

  width:200px;

  height:200px;

  border:2px red solid;

  float:left;

  }

  层模型有三种形式：

  1、绝对定位(position: absolute)

  2、相对定位(position: relative)

  3、固定定位(position: fixed)

  absolute和relative

  #box3{

  width:200px;

  height:200px;

  position:relative;

  }

  #box4{

  position:absolute;

  width:99%;

  bottom:0px;

  }

  13.css代码缩写，减少带宽

  （斜体）font-style:italic;

  （文字参数）font-variant:small-caps;

  （排版粗体）font-weight:bold;

  （字号，颜色）font-size:12px;

  （行高）line-height:1.6em;

  （字体） font-family:"宋体",sans-serif;

  body{

  font-style:italic;

  font-variant:small-caps;

  font-weight:bold;

  font-size:12px;

  line-height:1.5em;

  font-family:"宋体",sans-serif;

  }

  这么多行的代码其实可以缩写为一句：

  body{

  font:italic small-caps bold 12px/1.5em "宋体",sans-serif;

  }

  注意：

  1、使用这一简写方式你至少要指定 font-size 和 font-family 属性，其他的属性(如 font-weight、font-style、font-variant、line-height)如未指定将自动使用默认值。

  2、在缩写时 font-size 与 line-height 中间要加入“/”斜扛。

  一般情况下因为对于中文网站，英文还是比较少的，所以下面缩写代码比较常用：

  body{

  font:12px/1.5em "宋体",sans-serif;

  }

  只是有字号、行间距、中文字体、英文字体设置。

  14.颜色值

  在网页中的颜色设置是非常重要，有字体颜色（color）、背景颜色（background-color）、边框颜色（border）等，设置颜色的方法也有很多种：

  1、英文命令颜色

  前面几个小节中经常用到的就是这种设置方法：

  p{color:red;}

  2、RGB颜色

  这个与 photoshop 中的 RGB 颜色是一致的，由 R(red)、G(green)、B(blue) 三种颜色的比例来配色。

  p{color:rgb(133,45,200);}

  每一项的值可以是 0~255 之间的整数，也可以是 0%~100% 的百分数。如：

  p{color:rgb(20%,33%,25%);}

  3、十六进制颜色

  这种颜色设置方法是现在比较普遍使用的方法，其原理其实也是 RGB 设置，但是其每一项的值由 0-255 变成了十六进制 00-ff。

  p{color:#00ffff;}

  配色表：

  长度单位总结一下，目前比较常用到px（像素）、em、% 百分比，要注意其实这三种单位都是相对单位。

  1、像素

  像素为什么是相对单位呢？因为像素指的是显示器上的小点（CSS规范中假设“90像素=1英寸”）。实际情况是浏览器会使用显示器的实际像素值有关，在目前大多数的设计者都倾向于使用像素（px）作为单位。

  2、em

  就是本元素给定字体的 font-size 值，如果元素的 font-size 为 14px ，那么 1em = 14px；如果 font-size 为 18px，那么 1em = 18px。如下代码：

  p{font-size:12px;text-indent:2em;}

  上面代码就是可以实现段落首行缩进 24px（也就是两个字体大小的距离）。

  下面注意一个特殊情况：

  但当给 font-size 设置单位为 em 时，此时计算的标准以 p 的父元素的 font-size 为基础。如下代码：

  html:

  以这个例子为例。

  css:

  p{font-size:14px}

  span{font-size:0.8em;}

  结果 span 中的字体“例子”字体大小就为 11.2px（14 * 0.8 = 11.2px）。

  3、百分比

  p{font-size:12px;line-height:130%}

  设置行高（行间距）为字体的130%（12 * 1.3 = 15.6px）。

  15.css样式设置的小技