HTML-day05

HTML-day05

1. <span>标签：无语义的行标签，便于添加属性一添加样式。

2. 字体样式

   属性名	含义	属性
   font-family	设置字体类型	如：“Times New Roman”, “Times” &宋体
   font-size	设置字体大小	单位：px,em等
   font-style	设置字体风格	默认normal italic:斜体字 oblique:倾斜
   font-weight	设置字体的粗细	默认normal bold:加粗 lighter:变细
   font	在一个声明中设置所有字体属性	顺序：font-style→font-weight→font-size→font-family

3. 文本样式

   属性名	含义	属性
   color	设置文本颜色	RGB:十六进制方法表示颜色:前两位表示红色分量，中间两位表示绿色分量，最后两位表示蓝色分量 rgb(r,g,b):正整数的取值为0～255 RGBA:在RGB基础上增加了控制alpha透明度的参数，其中这个透明通道值为0～1
   text-align	设置元素水平对齐方式	left:左对齐 right:右对齐 center:居中 justify:两端对齐
   text-indent	设置首行文本的缩进	单位：em
   line-height	设置文本的行高
   text-decoration	设置文本的装饰	none:默认值 underline:下划线 overline:上划线 line-through:删除线
   text-shadow	文本阴影	color:阴影颜色 x-offset:x轴位移 y-offset:y轴位移 blur-radius:阴影模糊范围

4. 超链接伪类

   伪类名	含义
   link	未单击访问时超链接样式
   visited	单机访问后超链接样式
   hover	鼠标悬浮其上时的超链接样式
   active	鼠标单击未释放的超链接样式

   设置伪类的顺序：link>visit>hover>active

5. 列表样式

   list-style-type	none:无标记符号 disc:实心圆，默认类型 circle:空心圆 square:实心正方形 decimal:数字

6. 背景样式

   属性名	含义	使用
   background-color	设置背景颜色	十六进制 - 如："#ff0000" RGB - 如："rgb(255,0,0)" 颜色名称 - 如：“red”
   background-image	设置背景图片	url(图片路径)
   background-repeat	设置背景图片的平铺方式	repeat:向水平和垂直方向平铺 repeat-x:水平平铺 repeat-y:垂直平铺 no-repeat:不平铺
   background-position	设置背景图片的位置	X Y:X表示水平位置，Y表示垂直位置 X% Y%：用百分比控制在水平和垂直方向的位置 关键字：水平方向：left,center,right;垂直方向：top,center,bottom
   background-size	设置背景图片的大小
   background-attachment	背景图像是否固定或者随着页面的其余部分滚动	auto:默认值，维持原样 percentage:相对于元素宽度来计算 cover:放大背景图片填充整个元素 contain:让背景图片保持本身的宽高比例，将背景图片缩放到宽度或者高度正好适应所定义背景的区域

   简写背景样式：background 当使用简写属性时，属性值的顺序为：:

   background-color
   background-image
   background-repeat
   background-attachment
   background-position

7. 线性渐变
   线性渐变：颜色沿着一条直线过渡:从左到右、从右到左、从上到下等
   css3渐变兼容：

   • IE: -ms-
   • Chrome:-webkit
   • Safari:-webkit
   • Opera:-o-
   • Firefox:-moz-

   举例：-webkit-linear-gradient ( position,color1，color2,…)
   posion为渐变方向