DIV+CSS基础入门教程.doc

DIV+CSS基础培训 CSS 是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。一、如何使用CSS样式1、链接外部样式（推荐）link href=/style.css rel=stylesheet type=text/css / 特点：样式与代码分离2、定义内部样式块对象style type=text/css body { 属性 } h1 { 属性 } h2 { 属性 } p { 属性 } /style 特点：页面内部使用，方便，下载流量会适当减少。3、内联定义。p style=属性文字文字/p 特点：随意、方便二、语法样式表语法 (CSS Syntax)元素 { 属性:值 }三、选择符通配选择符、类型选择符、属性选择符、包含选择符、子对象选择符、类选择符、ID选择符、选择符分组、伪类和伪对象选择符。1、类型选择符div{font-size:12px;} div定义的样式/div 特点：不用定义额外的元素，直接可以写CSS样式。2、ID选择符（#）#id{font-size:12px;} div id=”text”定义的样式/div 特点：可以为单独为某个元素定义的样式。 3、类选择符（点） .text{font-size:12px;} div class=”text”定义的样式/div 特点：可以为一个页面里面多个应用此类的元素定义样式。 4、包含选择符 div #text{font-size:12px;}p id=text定义的样式/p#text p{font-size:12px;} 特点：精准定位到某个元素。四、常用的属性。 1、字体：font, font-size, font-family, font-weight, text-decoration, line-heightA. font是一个复合属性。所有后面的这几个属性的值都可以放在font里面用。B. font-size定义文字的大小。C. font-family定义字体。D. font-weight定义文字的粗细。E. text-decoration定义文字的装饰。F. line-height定义行高。 2、文本：text-indent, vertical-align, text-alignA. text-indent，设置对象的缩进。B. vertical-align，设置对象的上下对齐方式。C. text-align，设置对象的左右对齐方式。 3、背景：background, background-color, background-image, background-position, background-repeatA. background定义背景的一个复合属性。和上面的font一样，可以把后面这几个属性的值都放在font里面用。B. background-color定义的是背景的颜色。C. background-image定义的是背景的图片。D. background-position定义背景的位置。E. background-repeat定义背景的是否平铺。 4、定位：position, z-index, top, right, bottom, left.A. position定位方式。B. z-index 定义层叠顺序。C. top, right, bottom 和left表示距离他父级的上边，右边，下边和左边的距离。 5、尺寸：width, heightA. width定义对象的宽度。B. height定义对象的高度。 6、布局：clear, float, displayA. clear 设置不允许又浮动对象的边。B. float设置对象浮动及如何浮动。C. display设置对象是否及如何显示。D. visibility 设置对象是否显示。”lc”/div div class=”clear”/div 7、边框：border, border-top, border-right, border-bottom, border-leftA. margin定义外补丁的一个复合属性。同上。B. margin-top定义对象的上边距离父级的边框。C. margin-right 定义对象的右边距离父级的边框。D. margin-bottom 定义对象的下边距离父级的边框。E. margin-left 定义对象的左边距离父级的边框。 8、外补丁：margin, margin-top, margin-right, margin-bottom, margin-left同上（外补丁）。 9、内补丁：padding, padding