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

8月8日

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

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

2、嵌入样式表：在html中使用

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

引入

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

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

(2)或在html文件中

属性：

background-img:url(“”);背景图片，inherit(继承，该继承父类的背景图片，在div中孙子类页可以继续图片，在table中

下的设置的背景图片是不会继续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(显示小型大写)