border-radius -边框的圆角效果

*值顺序=左上、右上、右下、左下

• 分开写：
  - border-top-left-radius:
  - border-top-right-radius:
  - border-bottom-right-radius:
  - border-bottom-left-radius:

• 如果4个圆角都为10px，
  border-radius: 10px;

• 如果左上和右下圆角效果一样为10px，右上和左下圆角一样为20px，
  border-radius: 10px 20px;

• 圆形
  - 圆角效果值为元素宽度的一半 
  - 也可以写为50%

只为一个方向的边框设置样式

• border-top -上边框 

• border-right -右边框

• border-bottom -下边框

• border-left -左边框

盒子模型的边框-围绕着内容及补白的线

• 宽度 -border-width:
  -thin/medium/thick（不常用）
  -像素（px）（常用）

• 样式 -border-style:
  -dashed（虚线）
  -dotted（点线）
  -solid（实线）

• 颜色 -border-color:
  -颜色可设置为十六进制颜色

*缩写形式：
 border：（宽度） （样式） （颜色）；

background-color: 颜色值 - 设置背景色

*行内元素和块状元素都可以被设置

创建表格的四个元素：table、tr、th、td

1、<table>…</table>：整个表格以<table>标记开始、</table>标记结束。

2、<tr>…</tr>：表格的一行，所以有几对tr 表格就有几行。

3、<td>…</td>：表格的一个单元格，一行中包含几对<td>...</td>，说明一行中就有几列。

4、<th>…</th>：表格的头部的一个单元格，表格表头。

5、表格中列的个数，取决于一行中数据单元格的个数。

6、border属性可以为表格添加边框，属性值为数字。

注意：

1、table标签用来定义整个表格，为双标签，必须有结束标签。

2、table标签里面可以放caption标签和tr标签。

3、caption标签用来定义表格的标题。

4、tr标签用来设置表格的行，tr里面只能放th或者td标签，一组tr标签代表一行。

5、th用来设置表格的标题，会加粗居中显示。也就是th标签中的文本默认为粗体并且居中显示。

6、td同来设置表格的列，一组td标签代表一列。

7、table表格在没有添加border属性之前, 在浏览器中显示是没有表格线的。

a:hover{color:red;}

伪类选择器

关于伪类选择符，到目前为止，可以兼容所有浏览器的“伪类选择符”就是 a 标签上使用 :hover 了（其实伪类选择符还有很多，尤其是 css3 中，但是因为不能兼容所有浏览器，本教程只是讲了这一种最常用的）。其实 :hover 可以放在任意的标签上，比如说 p:hover，但是它们的兼容性也是很不好的，所以现在比较常用的还是 a:hover 的组合。

a为对象；hover表示鼠标经过会产生反应

通用选择器是功能最强大的选择器，它使用一个（*）号指定，它的作用是匹配html中所有标签元素，如下使用下面代码使用html中任意标签元素字体颜色全部设置为红色：

标签选择器，标签名{}，作用于所有此标签。

类选择器， .class{}，在标签内定义class=""，属图形结构。

ID选择器，#ID{}, 在标签内定义id=""，有严格的一一对应关系。

子选择器， .span>li{}，作用于父元素span类下一层的li标签。

包含选择器，.span li{}，作用于父元素span下所有li标签。

通用选择器，*{}，匹配所有html的标签元素。

创建表格的四个元素：table、tr、th、td

1、<table>…</table>：整个表格以<table>标记开始、</table>标记结束。

2、<tr>…</tr>：表格的一行，所以有几对tr 表格就有几行。

3、<td>…</td>：表格的一个单元格，一行中包含几对<td>...</td>，说明一行中就有几列。

4、<th>…</th>：表格的头部的一个单元格，表格表头。

5、表格中列的个数，取决于一行中数据单元格的个数。

6、border属性可以为表格添加边框，属性值为数字。

target属性

a标签有的target属性，代表打开网页的方式。可选值为”_self和_blank”，默认值为_self，代表在当前页面打开链接，_blank代表在新窗口打开链接。

添加图片

<img src="图片地址" alt="下载失败时的替换文本" title = "提示文本">

1、src：标识图像的位置；

2、alt：指定图像的描述性文本，当图像不可见时（下载不成功时），可看到该属性指定的文本；

3、title：提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本)；

4、图像可以是GIF，PNG，JPEG格式的图像文件。

有序列表

<ol>
   <li>信息</li>
   <li>信息</li>
   ......
</ol>

包含选择器，即加入空格,用于选择指定标签元素下的后辈元素。如右侧代码编辑器中的代码：

.first  span{color:red;}

这行代码会使第一段文字内容中的“胆小如鼠”字体颜色变为红色。

请注意这个选择器与子选择器的区别，子选择器（child selector）仅是指它的直接后代，或者你可以理解为作用于子元素的第一代后代。而后代选择器是作用于所有子后代元素。后代选择器通过空格来进行选择，而子选择器是通过“>”进行选择。

总结：>作用于元素的第一代后代，空格作用于元素的所有后代。

无序列表

<ul>
  <li>信息</li>
  <li>信息</li>
   ......
</ul>

还有一个比较有用的选择器子选择器，即大于符号(>),
用于选择指定标签元素的第一代子元素。如右侧代码编辑器中的代码：

.food>li{border:1px solid red;}

Relativexiang与Absolute组合使用

相对与绝对组合使用

1、参照定位的元素必须是相对定位元素的前辈元素：

2、参照定位的元素必须加入position:relative;

3、定位元素加入position:absolute，便可以使用top、bottom、left、right来进行偏移定位了。

 #box3 {
         width: 200px;
         height: 200px;
         position:relative;
         }
 #box4 {
          width: 99%;
          position:absolute;
          bottom:0px;
          }

 <div id="box3">
 <img src="http://img1.sycdn.imooc.com/541a7d8a00018cf102000200.jpg">
 <div id="box4">当我还是三年级的学生时是一个害羞的小女生。</div>
 </div>