Chap08_CSS.pptxVIP

Ch 8 CSS 传 播 学 院 陈 建 chenj@ 教学参考内容 视频: div+css入门教程 DIV+CSS网站制作教程第一课：DIV基础知识 网页MENU制作 Css模板/css-templates/ 台湾科技大学 /tw/ 3 简介 样式表单 类别选择器 id 选择器 前后文选择器 段落属性 背景属性 边框属性 区块属性 链接属性 定位属性 文本属性 CSS语法简介 4 Separation of style from structure 将样式（装饰）和文章结构分开 HTML卷标只用来标示文章结构 CSS负责装饰 CSS和JavaScript搭配使用，可以动态改变网页的呈现效果 /Style/CSS/ CSS基本语法 5 CSS的修饰对象可以是任何HTML Tag 多个HTML Tag之间以逗点（,）分隔 属性定义以大括号（{ }）括住 属性定义的写法是属性名称:属性值 多个属性定义之间以分号（;）分隔 style type=text/css h1, h2 { color:red; font-weight:bold } /style CSS样式规则与选择器 6 CSS的种类 7 Inline (同列) :使用HTML标记的style属性，只于定义的区段有效。 p style=background-color:#0000FF Embedding (内嵌) :使用style.../style标记，置于body本文区之前，供整个网页使用。可使用多个style.../style标记 HTML文件开始 style TYPE=text/css排版样式区开始 ！-- body {background-color:red} -- /style排版样式区结束 body本文区开始 本文区内容 /body本文区结束 /HTML文件结束 CSS的种类（续） 8 Linking (连结) :使用link标记(用于HEAD区)。 将排版样式分开处理，以. CSS为扩展名储存成一个独立的文本文件，再连结使用。 可使用多个link标记。 HTML文件开始 HEAD标头区开始 LINK TYPE=text/css REL=stylesheet HREF=s1.css连结CSS檔 /HEAD标头区结束 BODY本文区开始 本文区内容 /BODY本文区结束 /HTML文件结束 CSS相关的HTML标记、属性 9 CSS相关的HTML标记: style.../style设定Style Sheet格式 link链接指令 div.../div分离区段(允许重迭显示) span.../span小区段范围 ?CSS相关的HTML标记属性: style = css-properties样式 id = value代号 class = class-name种类 Style Sheet样式表单 10 样式宣告的格式:??选择器{样式规则;} 选择器(Selector)：样式要套用的对象 样式规则(Rule)：样式设定的内容 每个样式后要加; Style Sheet样式表单（续） 11 集中宣告格式：同时宣告数个样式 body { background:green; color:blue; font:12; font-family:新细明体; } Style Sheet样式表单（续） 12 分开写也OK body { ??? background:green ; ??? color:blue ; } body { ??? font:12 ; ????font-family:新细明体?; } Style Sheet样式表单（续） 13 一次指定多个选择器 p, h1, h2 { ?color:red } 将样式表单用到网页上 Inline：直接将CSS写在HTML标签的style属性之中。 Embedding：将CSS写在head区内，依照标签种类套用到整个页面。 Class Selector：在head区内定义CSS类别（以名称以.开头），在页面里以HTML标签的class属性选择样式类别加以套用。 ID Selector：依据HTML中各标签的ID值自动的套用样式 。 外部CSS檔：先建立好.CSS样式文件 以link标签将CSS档案引入。 以@import指令将CSS档案引入。 14 style @import url(h1.css); /style 将样式表单用到网页上inline 15 使用于HTML标签中的style指令 在每个HTML标签中，都可用style参数，将CSS设定于后，CSS字符串要用引号括住 div style=position:absolute; width:20px; height:20px 将样式表单用到网页上