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(显示小型大写)