css+div基础知识.ppt

1、1,HTML标签的外观样式比较单一 颜色只有黑白 字体类型和大小无变化 样式表的作用相当于华丽的衣服,内容相同,外观不同,CSS样式表,字体,字体： font-family:用于设置字体类型; font-size:用于设置字体大小，一般用px表示; font-style:用于设置字体样式：Normal:正常,italic:斜体;oblique:正常文字倾斜; text-decoration:underline:下划线;overline:上划线;line-through:中划线;none:无; font-weight:设置字体的粗细。 color:(1)使用#RRGGBB 或 内定颜色：red,

2、yellow;,背景,背景颜色： 方法一：background-color:设置背景色; 方法二：background:设置背景色; 背景图片: 方法一： background-image:设置背景图象; background-repeat:背景是否重复, repeat:水平方向和垂直方向重复 repeat-x:水平方向重复 repeat-y:垂直方向重复 no-repeat:水平方向和垂直方向都不重复 方法二：background:设置背景图象 repeat-x/repeat-y/no-repeat;,文本,text-align:设置文本的对齐方式 left:左对齐 right:右对齐 ce

3、nter：居中 text-indent:设置文本的第一行的缩进，负值文本向外拉,边框,上下左右线条不同： border-top:上边框的像素值 线的类型 线的颜色； border-bottom:下边框的像素值 线的类型 线的颜色； border-left:左边框的像素值 线的类型 线的颜色； border-right:右边框的像素值 线的类型 线的颜色； 上下左右线条相同： border：上下左右边框的像素值 线的类型 线的颜色； 边框类型： dotted(点线) dashed(虚线) solid(实线) double(双线),列表,list-style: 指定目录列表项标记样式类型 none

4、 disc:实心圆 circle:空心圆 square:方块 decimal:阿拉伯数字 其它 cursor: hand;,边框,margin类:用于设置元素边界与其它元素边界的空隙大小 margin-top: margin-right: margin-bottom: margin-left: padding类:用于设置元素边界与内部内容之间的空隙大小. padding-top: padding-right: padding-left: padding-bottom;,浮动属性,float:定义网页中的其它文本如何环绕该元素. left 文本浮动在这个元素的左边; right 文体浮动在这个元

5、素的右边; none 元素两边不允许有文本;,边框,上下左右线条不同： border-top:上边框的像素值 线的类型 线的颜色； border-bottom:下边框的像素值 线的类型 线的颜色； border-left:左边框的像素值 线的类型 线的颜色； border-right:右边框的像素值 线的类型 线的颜色； 上下左右线条相同： border：上下左右边框的像素值 线的类型 线的颜色； 边框类型： dotted(点线) dashed(虚线) solid(实线) double(双线),10,常用的样式属性,方框属性,margin-right 右边界,margin-left 左边界,m

6、argin-top 上边界,margin-bottom 下边界,margin,border,padding,border-width 边框的宽度,padding-left 左填充,padding-bottom 下填充,Margin属性,margin类:用于设置元素边界与其它元素边界的空隙大小 margin-top: margin-right: margin-bottom: margin-left:,缩写规则 margin: 5px 6px 7px 6px;,上,右,下,左,=margin-top: 5px ; margin-right: 6px ; margin-bottom:7px ; ma

7、rgin-left:6px;,缩写规则 margin: 5px 7px 6px;,上,左右,下,=margin-top: 5px ; margin-right: 7px ; margin-bottom:6px ; margin-left:7px; 左右相等,缩写规则 margin: 5px 6px ,上,=margin-top: 5px ; margin-right: 6px ; margin-bottom:5px ; margin-left:6px; 上下像素相等，左右像素相等,下,左,右,缩写规则 margin: 5px,=margin-top: 5px ; margin-right: 5

8、px ; margin-bottom:5px ; margin-left:5px; 上下左右都相等,上下左右,padding类:,用于设置元素边界与内部内容之间的空隙大小. padding-top: padding-right: padding-left: padding-bottom;,缩写规则 padding: 5px 6px 7px 6px;,上,右,下,左,=padding -top: 5px ; padding -right: 6px ; padding -bottom:7px ; padding -left:6px;,缩写规则 padding : 5px 7px 6px;,上,左右

9、,下,=padding -top: 5px ; padding -right: 7px ; padding -bottom:6px ; padding -left:7px; 左右填充像素相等,缩写规则 padding : 5px 6px ,上,=padding -top: 5px ; padding -right: 6px ; padding -bottom:5px ; padding -left:6px; 上下，左右填充像素相等,下,左,右,缩写规则 padding : 5px,=padding -top: 5px ; padding -right: 5px ; padding -bottom:5px ; padding -left:5px; 上下填充像素都一样,上下左右,CSS的选择符,标签选择符 Id选择符 类(class)选择符 通用选择符* 分组选择符 包含选择符 高级(伪类)选择符,css的样式分类,内联样式 内部样式 外部样式,1.样式命名