DIV CSS网页布局第二课.ppt

—高级网页设计人才培训专家! 主讲：张鹏 —高级网页设计人才培训专家! —高级网页设计人才培训专家! 主讲：张鹏 —高级网页设计人才培训专家! 主讲：张鹏 Div+Css网页布局第二课CSS高级 主讲：张鹏邮箱：seo100@126.com 目标 CSS选择符的详细使用 CSS常用属性、CSS控制边框、背景等 CSS选择符类型 1、类型选择符： 就是HTML文档中的元素[作用于html标记] 如：p{属性:值} 2、类选择符：可以自己定义样式，应用于一个或多个网页元素，类在网页中可以出现多次，用于定义重复的样式。类以英文“.”开头，后面的名字自己定义，类定义后还需要在网页中加入class=类名称，加以调用。 如： .warning {属性:值} p class=“warning”……/p 3、ID选择符：与类基本相似，只是以英文“#”开头，因为ID具有唯一性，所以在网页中只能出现一次，用于定义只出现一次的样式。 如：#main {属性:值} p id=“warning”……/p CSS选择符类型 4、通配选择符：* {属性:值}，用于定义所有元素 5、包含选择符：语法e1 e2 {属性:值}， 含义是所有被e1包含的e2， 如：table td {属性:值} 同时给某个元素应用多个类与ID p class=“a1 a2” id=“a6”……/a 6、选择符分组：将同样的样式定义用于多个选择符，选择符之间用逗号分隔。如：p,div,.waring {属性:值} CSS选择符类型 7、标签指定式选择符：如果既想使用id或class，也想同时使用标签选择符 h1#content{} 表示针对所有id为content的h1标签 h1.p1{} 表示针对所有class为p1的h1标签 8、组合选择符：将以上选择符进行组合使用 h1 .p1{}表示h1标签下的所有class为p1的标签 h1 .p1,#content h1{} CSS控制边框属性 功能 语法 设置边框粗细 border-top-width :12px； 设置边框样式 border-top-style :solid[实线]、dashed[虚线] 设置边框颜色 border-top-color :#000000 设置某一边框属性的简捷方式 border-边框位置:线宽 线型 颜色; 设置某一元素四条边框属性的简捷方式[仅限于四条边框属性完全相同] border:线宽 线型 颜色; CSS控制背景 功能 语法 背景 background:颜色 图片 平铺方式 固定方式 位置 背景颜色 background-color: #ccc; 背景图像 background-image:url(背景图像的位置及全称) 背景图像的重复方式 background-repeat:[repeat、no-repeat、repeat-x、repeat-y] 背景图像的位置 background-position:top [left center right] center[left center right] bottom[left center right], x坐标 y坐标[第一个值是水平位置，第二个值是垂直位置。左上角是 0 0。单位是像素 (0px 0px) ] 背景图像的依附方式 background-attachment:[scroll、fixed] CSS控制列表 功能 语法 列表属性 list-style:list-style-type list-style-position list-style-image 列表项目类型 list-style-type: none[无符号] disc[实体的小圆点] circle[空心的小圆点] square[实心的小方块] decimal [1,2,3...] lower-roman [i,ii,iii...] upper-roman [I,II,III...] lower-alpha [a,b,c,...] upper-alpha [A,B,C,...] 列表项目位置 list-style-position: inside[列表项目较往右移] outside[ 列表项目正常显示] 列表项目图片 list-style-image: URL [list-style-image:url(lmk.gif)] none 不会显示任何图象 功能 语法 设置元素的宽度 width:100px; 设置元素高度 height:100px; 设置元素最小宽与高 min-width:50px; min-height:50px;[IE6不支持] 设置元素最大宽与高 max-width:50px; max-h