html5-css简介和属性：border、background、font

8月8日

Css(层叠样式）和html结合有三种常用的，一种不常用的结合方法：

1、内联样式表：在html标签中使用style属性使用样式表

2、嵌入样式表：在html中使用<style></style>

3、外部样式表：使用后缀为.css的文件html

引入<link rel=””type=””href=””/>

4、输入样式表：将一个css文件导入到另外的css文件中

（1）在css文件中头部写@import url（“name.css”）html文件再引入这个css文件

（2）或在html文件中<style>@import url(name.css)</style>

属性：

background-img:url(“”);背景图片，inherit（继承，该继承父类的背景图片，在div中孙子类页可以继续图片，在table中<tr>下的<td>设置的背景图片是不会继续body或者是table，tr不是table的子类）

background-attachment：fixed；背景图片不会随滚动条滚动，而是固定

aackground-repeat:repeat(默认）repeat-x（y）、no-repeat 、inherit（从父元素继承该属性）

background-color：背景颜色

background-position:背景图片的起始位置x轴y轴（top left、top center、bottom left、center left）

background-size:背景图片的大小。设置方法1、px定义宽高，第一个值为宽，只设一个，第二个为auto   2、以父元素的百分比设置%   3、cover使背景图片扩展至足够大，以使背景图像完全覆盖背景区域。

4、contain把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域

     在background中设置以上全部值

background：#fff url(name.jpg) repeat-x fixed top left;

 border和outline属性

整一个边框的设置

border：width、style、color

border-color:边框颜色

border-style:dotted（点状）、solid（实线）、double（双线）、dashed（虚线）inherit（继承）

border-width:边框宽度

四边边框，border-bottom、border-left、border-top、border-right

border-bottom:width、style、color

border-bottom-widht:宽度border-bottom-style：样式border-bottom-color：颜色

左右上，同上。

outline声明轮廓属性，绘制元素周围的一条线，位于边框边缘外围

outline：color、style、width

outline-color：颜色、

outline-style：solid、dotted、dashed（同border-style）

outline-width：宽度（thick）

border-radius：px、%；（定义边框四角的形状）

border-bottom-left-radius定义边框的左下角形状

border-bottom-right-radius定义边框的右下角的形状

border-top-left-radius:边框的左上角形状

border-top-right-radius:边框右上角形状

border-image:url（“图片路径”）slice（向内偏移）  width（边框宽度）  outset（图像超出边框的量）  repeat

border-image-outset:边框图像区域超出边框的量

border-image-repeat:图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)。

border-image-source:用在边框的图片路径

border-image-slice:图片边框向内偏移

border-image-width:图片边框的宽度

box-shadow:

font:声明字体的属性

font-family:字体系列如宋体、微软雅黑

font-size:字体尺寸

font-style:字体的样式，normal（默认，浏览器中标准的字体样式）、italic（‘斜体‘’字体样式，属于一种字体family）

oublique（倾斜的字体样式，是将文本中的字体倾斜）、inherit（继承父元素）

font-weight:字体的粗细，normal（默认）、bold（粗体）、bolder（更粗）、lighter（更细）

100~900（没有px）、inherit（继承）

font-stretch:收缩或拉伸当前的字体系列（所有浏览器都暂不支持）wider（伸展） narrower（收缩）

font-variant：规定是否以小型大写字母的字体显示文本。small-caps（显示小型大写）