HTML5+CSS3程序设计第9章 CSS3常用属性.pptVIP

Background-size background-size属性的语法格式如下： background-size：[ length | percentage | auto ] | cover | contain CSS3新特性 本实例定义了3个div标签，并且为这3个div标签设置不同的background-origin，实现如下效果 多背景图片 CSS 3并没有为实现多背景图片提供对应的属性，而是通过为background-image、background-repeat、background-position和background-size等属性提供多个属性值来实现。 多背景图片 多背景图片 div{ width:800px; /*设置宽度*/ height:470px; /*设置高度*/ background-image:url(android.png),url(mouse.png),url(background00.jpg); /*设置背景图片*/ background-repeat:repeat-x,no-repeat,no-repeat; /*设置重复方式*/ background-position:top,center,left top; /*设置显示位置*/ } 列表相关属性 3 列表相关属性 list-style 简写属性。用于把所有用于列表的属性设置于一个声明中 list-style-image 将图像设置为列表项标志 list-style-position 列表中列表项标志的位置 list-style-type 设置列表项标志的类型 列表相关属性 本实例为运用无序列表制作导航栏，效果如下所示： 框模型 4 主要内容 概述 1 内外边距的相关属性 3 边框 3 概述 框模型 元素内容 内边距 边框 外边距 元素框的最内部分 直接包围内容的是内边距 内边距的边缘是边框 边框以外是外边距 概述 margin border padding element 内外边距的相关属性 内边距是对象的内容与对象边框之间的距离 指定1至4个属性值，各属性值以空格分隔。padding属性的语法格式如下： padding : length; length：百分比或是长度数值。百分数是基于父对象的宽度。 * * * CSS3常用属性 01 文本相关属性 02 背景相关属性 03 列表相关属性 04 框模型 05 定位相关属性 文本相关属性 1 主要内容 字体 1 文本 2 设置超链接样式 3 字体 字体 字体字体综合设置 字体大小 字体风格 字体加粗 字体英文大小写转换 对文字的格式化 使用标签 使用CSS样式 字体 1．字体设置 style p{ font-family: SimSun, Microsoft YaHei; } /style 字体 2．设置文字大小 长度单位px in inch,英寸 cm centimeter，厘米 mm millimeter,毫米 pt point,印刷的点数，在一般的显示器中1pt相当于1/72inch pc pica,1pc=12pt 字体 2．设置文字大小 长度单位em和ex .firstLetter{ font-size:3em; float:left; } 对p标签设置firstLetter样式，然后编写CSS样式代码 字体 3. 设置文字颜色 在CSS中文字颜色是通过color属性设置的 h3{color:blue;} h3{color:#0000ff;} h3{color:#00f;} h3{color:rgb(0,0,255);} h3{color:rgb(0%,0%,100%);} 1.使用颜色的英文名称作为属性值。 2.最常用的十六进数值表示。 3.第2种方式的简写方式，形如#aabbcc的颜色值，就可以简写#abc。 4.分别给出红绿蓝3个颜色分量的十进制数值。 5.分别给出红绿蓝3个颜色分量的百分比。 字体 4. 设置文字的水平对齐方式 文字的水平对齐是通过属性text-align来控制，它的值可以设置为左、中、右和两端对齐等 h1{text-align:center} left, right, jusify 字体 5. 段首缩进设置 段首缩进是通过text-indent属性设置 p{text-indent:2em} 缩进距离作为数值 字体 5. 段首缩进设置 段首缩进是通过text-indent属性