第三部分 CSS基础.ppt

,网页设计与制作,主讲：段淑凤,一、CSS简介二、CSS语法三、CSS属性四、CSS继承五、CSS冲突,第三部分CSS基础,一、CSS简介,CSS指层叠样式表(CascadingStyleSheets)定义如何显示HTML元素把样式添加到HTML中，是为了解决内容与表现分离的问题所有的主流浏览器均支持层叠样式表,只是与HTML一样，支持的效果不一致CSS1在1996年末成为推荐标准，其中包含非常基本的属性。CSS2在此基础上添加了高级概念以及高级的选择器，在1998年就已经成为推荐标准。2002年启动了CSS2.1的开发,二、CSS语法,CSS规则由两个主要的部分构成：选择器，以及一条或多条声明选择器声明1；声明2；声明n每条声明由一个属性和一个值组成，属性和值被冒号分开举例：h1color:red;font-size:14px;注释：/*/,CSS含义说明,选择器通常指代被定义样式的HTML元素声明用来定义该元素的具体设置属性和效果,2.1CSS选择器类型,标记名设置元素的默认属性。如:bodycolor:black类选择符格式：.类名（字母开头和英文和数字的组合）可作为class属性值应用于各种标记。如:.redcolor:red引用,ID选择符格式：#类名（字母开头和英文和数字的组合）可作为id属性值应用于某个标记。如:#redcolor:red引用包含选择符格式：选择符1选择符2设置包含在选择符1里面选择符2的默认属性，单独选择符1或单独选择符2无意义如：tableafont-size:12px,2.1CSS选择器类型,选择符组多个元素设置相同的默认属性格式：选择符1，选择符2，选择符n如：h1,h2,h3,h4,h5,h6color=green伪类和伪元素选择器：伪类声明a:linkcolor:#FF0000/*未访问的链接*/a:visitedcolor:#00FF00/*已访问的链接*/a:hovercolor:#FF00FF/*鼠标移动到链接上*/a:activecolor:#0000FF/*选定的链接*/,2.1CSS选择器类型,内嵌样式:使用style属性直接加在个别的标记标签里格式标记名style=“样式声明；”例如tdstyle=“color:blue；font-size:9pt”内部样式:将样式规则写在style/style之中，出现在网页的head/head部分格式：STYLETYPE=“text/css”!-样式列表-/STYLE,2.2CSS规则创建方式,将样式规则写在.CSS文件中,再以link标签链入加入在网页head/head部分例如：规则定义在同目录下的example.css文件中linkrel=“stylesheet”type=“text/css”href=“example.css”使用import引入必须放在style/style之中，可自行添加其他设置格式：STYLETYPE=“text/css”!-importurl（http:/yourweb/example.css)自定义样式规则表：-/STYLE,2.2CSS规则创建方式,三、CSS属性,文本属性背景属性布局属性定位属性列表属性光标属性其他属性补充说明,3.1文本属性,字符:颜色font-color、字体font-family、大小font-size间距:字符间距letter-spacing、单词间距wordspacing、行高height、空白设置对齐：水平对齐text-align、垂直对齐vertical-align排列:横向、纵向效果:风格font-style、粗体font-weight文字修饰:text-decoration转换:小写大写字母、大小写转换、文本反排段落:缩进text-indent,3.2背景属性,背景颜色背景图片背景图片平铺背景附件背景位置,背景效果,3.3布局属性,填充和边距属性：上、右、下、左（padding，margin）边框属性：样式、宽度、颜色（border）尺寸属性（width，height）超出显示属性overflow可见属性visibility显示属性display:inline,block,none,盒子模型布局,3.4定位属性,定位方式position定位位置topleftrightbottom层叠顺序z-index浮动属性float清除属性clear剪辑属性（绝对定位）,定位属性说明,static(静止)：元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。relative(相对)：元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。Absolute(绝对)：元素框从文档流完全删除，并相对于其父层非静止定位块位置定位。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。Fixed(固定):元素框的表现类似于将position设置为absolute，不过其包含块是屏幕本身。IE6不支持该属性,3.5列表属性,列表标记类型列表标记图标列表标记位置,3.6光标属性,自动已知类型自定义图标,3.7其他属性,滤镜分页符滚动条换行,3.8补充说明,长度单位绝对单位、相对单位百分比颜色值注意事项：语法、属性值、应用前提、浏览器支持、浏览器显示效果,四、CSS继承,也称为样式表的层叠性。样式表的继承规则是外部的元素样式会保留下来继承给这个元素所包含的其他元素例如，定义了样式表的内容如下：bodycolor：red;font-size:9pt而在页面的主体部分由如下的代码：段落文字但是有些特殊的内部选择符不继承包含它的选择符的属性值。例如，上边界属性值,五、CSS冲突,继承冲突以嵌套关系最近的CSS样式定义为准引用方式冲突ID选择