CSS原文档资料

1、CSS、CSS 既述1.1 CSS 概述? CSS级联样式表单-Cascading Style Sheet-对WE页面进行外观控制的机制-将页面的内容和表现分离? CSS 版本-目前为止，CSS有两个官方标准：CSS1和CSS2-CSS1的功能在大多数浏览器中都被支持1.2 示例 - 无 CSSCSS 入门 注意：此页面没有用到CSS羊式，很显然源代码重复的比较多，有冗余;vh2欢迎同学们学习CSS 欢迎同学们学习CSS 欢迎同学们学习CSS 1.2 示例 - 有 CSSCSS 入门 h2font-family：宋体; color：red注意:此页面用到了 CSS请查看源代码，是不是干净了许多

2、；欢迎同学们学习CSS欢迎同学们学习CSS欢迎同学们学习CSS1.3 CSS 优点? 优点-代码独立，便于控制-样式文件可在浏览器中缓存-便于分工合作-提高了可访问性-提供更多的外观控制手段二、CSS的样式2.1 样式? CSS样式-内联样式-嵌入样式-外联样式2.2 内联? 内联样式-把样式代码内联到标记内? 使用 style 作为属性，样式语句作为属性值? 如： ? 控制 标记的边框样式为不折叠2.2 内联特点? 内联样式特点-看上去很直观-针对个别元素控制-和传统的外观控制方式没有本质的不同-不推荐使用2.3 嵌入? 嵌入样式-使用标记把样式代码插入到页面中-一般插入到记中-女口： CS

3、S 语句 2.3 嵌入特点? 特点-将CSS语句直接写在HTM文档中，但它独立存在，方便维护和修改 -仅针对一个HTM文档进行设置-代码是HTM文档的一部分，没有利用浏览器的缓存机制2.4 外联? 外联样式-通过外部样式文件对页面进行控制-外部的样式文件通过 HTM的link元素连接到HTML文档中link rel= “ styl esheet ” href= “ myCSS.css” type= “ text/css ”/ href 属性指定了样式文件的相对地址； rel 和 type 属性表明这是一个样式文件2.4 外联使用? 使用-建立外部样式文件(.CSS )-外部的样式文件不能含有任

4、何像head或style这样的HTM标记-样式表文件仅仅由样式规则或声明组成例如: h3font-family: “宋体” Color:red 文件名 myCSS.CSS2.4 外联特点? 特点-当样式被应用到很多的网页时，推荐使用外部样式表-网页制作者使用外部样式表，在改变整个网站的外观时，仅需要改变一个文件-大多数浏览器会保存外部样式表在缓冲区，从而如果样式表在缓冲区就避免了在展示网页时的延迟-在实际开发中一般都使用外联样式 三、CSS基本语法3.1 语法? 选择符属性 1:属性值 1; 属性 2:属性值 2;-选择符(selector): 指定样式适用的标记,除指定标记外,样式不起作用-

5、属性：样式的关键字-属性值：描述样式的值；-格式：属性与属性之间使用分号分隔，属性与属性值之间使用冒号分隔-女口： Pfont-size:12pt; coloured;3.1 语法? 例子 :bodycolor:black 单个属性示例 .pfont-family:“sans serif” 多个单词属性需要括起来“”ptext-align:center ； color:red - 多个属性用分号隔开 . p 注意代码的格式可读性text-align:center ； color:black ； tont-family:arial3.2 选择符分类 ? 选择符分类- 普通选择符- 类选择符- i

6、d 选择符3.2.1 普通选择符? 普通选择符-任意的HTML标记-其样式仅仅作用在选择符指定的 HTM元素上-如:pcolor:red3.2.2 类选择符? 类选择符-同一类型的不同元素通过设置不同CLAS睐显示不同样式，但一个元素只能设置一个CLASS属性-HTML元素名加上类名，中间用“ ”号分开,类名供该HTML元素的CLASS属性使 用- 如: 使用不同颜色显示 , 下面例子建立了两个类 ,OddColor 和 EvenColor, 供 tr 使 用? tr.OddColor coloured? tr.Eve nColor color:blue-如果省略HTML元素名只写“ 类名”表

7、示这个类名适用于所有的HTML元素的CLASS属性-下面例子建立了一个类note，可以被任何元素使用- note font-size:small; color:red3.2.3 id 选择符? id 选择符- 个别地定义每个元素的成分-可以作用到任意HTML元素的ID属性上- 尽量少用,因为 id 选择符具有一定的局限 （严格来说,在一个页面中 , 每个id只能使用一次）.- 要有“ #”在名字前面- 如：#svpfont-size:12pt3.2.4组合使用-关联? 关联- 是一个用空格隔开的两个或更多的单元选择符组成的字符串 - 这些选择符可以指定一般属性 , 而且因为层叠顺序的规则 ,

8、它们的优先权 比单一的选择符大 - 如：? p em background:yellow?表示段落（p）中的强调文本（em）是黄色背景,而其它部分的强调文 本不受影响 3.2.4 组合使用 ? 组合使用 h2 .p1 #content h1 h1 .p1,#content h1 h1#content h2h1 标签下的所有 class 为 p1 的标签id 为 content 的标签下的所有的 h1 标签 以上二者进行群组选择id 为 content 的 h1 的标签下的 h2 标签3.2.5 练习? 练习-建立一个HTM文件，其中有h1-h6标记的文字;-对hl与h2标记使用类型选择符设置样

9、式；-对h3与h4标记使用id选择符设置样式；-对h5标记使用通用的类型选择符设置样式；-对h6标记使用通用的id选择符设置样式3.3 样式就近原则? 样式就近-并列的定义? 当定义重复时，后出现的定义会覆盖前面的定义 例子： lifont-size:12pt;lifont-size:14pt;-对同一结点指定样式，但层次结构不一样?在层次结构上最接近指定结点的CSS起作用3.4 伪类及伪对象? 伪类及伪对象-由CSS自动支持，属CSS的一种扩展型类-名称不能被用户自定义-使用时只能按照标准格式进行应用选择符: 伪对象 属性: 值 p:first-letterfont-weight:bold；

10、 color:red选择符 : 伪类属性: 值3.4 超链接伪类? a:linkcolor:#ffffff;? a:visitedcolor:#db7093;? a:hovercolor:#564b47;? a:activecolor:#000000;- 未访问的链接状态- 已访问的链接状态- 鼠标悬停在链接上状态- 被激活的链接状态a:hoverbackground-color:#0000003.4 常用伪对象? 示例：div:first-linecolor:red; font-size:16px;p:first-lettercolor:red; font-size:16px;3.5 注释?

11、注释-/* */，但要注意不要将注释嵌入到选择器语句里面3.6 常用的样式属性属性名称说明颜色color文本属性font-size字体大小font-family字体text-ahgn文本对齐边框属性（用于表 单兀素）bo rde restyle边框样式border-width边框宽度border-color边框颇色定位属性(position)top顶部边距（上边距）left左边距width宽度height高度z*indexz轴索引号，用于层3.6 常用的样式属性值一型 类ffi怵性 字属宋 rlf Seri laL Ar本生 文属% 或 B 度It框属性Br rd bo上% 或 Ik% 或 呈

12、 度定位 属性op呈 度% 或igh hel% 或 g 度left至r o ol c称 名 色 颜两 a b四、CSS布局4.1 div? div-放置内容的容器.-用于大面积，大区域的块状排版-div本身与样式没有任何关系.-样式需要编写CSS来实现.4.2 盒模型?盒模型-将所有元素都放置在一个盒子中，然后通过对这个盒子的外观控制来实 现整个页面的外观控制。-一个盒模型包括4个区?内容（content ）?内边距（padding ）?边框（border）?外边距（margin）4.2 盒模MARGINBOX4.2 盒模型可见区城widthheightbordercontentpadding

13、_margin4.2内、外补丁属性td padd ing: 2px 2px 2px 2px; td padd in g-left: 2px; padd in g-right: 2px; padd in g-top: 2px;padd in g-bottom: 2px;bodymargi n-left: 0px; margi n-right: 0px; margi n-top: 0px;margi n-bottom: 0px;4.3 CSS布局?设计布局结构-米用2层CSS结构.-既能够统一全站风格，又能够根据不同的页面设计独立的样式.-如口：一个网站中有一个index.html文件，可以做设置

14、 4.4 使用div布局?使用div布局-真正使用div布局,要把页面的内容和表现完全分离开， 在页面的内容部 分不应该出现表现控制标记，如 font 、color 、height 、width 、align 等标 记。-使用Div+css设计：? 1 、用 div 来定义语义结构；? 2、使用CSS来美化网页? 3、在 div 定义的盒子内加入内容4.5 示例4.5.1 布局步骤 1? 1 、使用 div 定义语义结构 .-一个典型的版面分栏结构：页头、导航栏、内容、版权.-结构代码：? ? ? ? -把这四个盒子装进一个更大的盒子，body中，如下 上面四行代码 .4.5.2 布局步骤 2

15、-这样，我们定义最外边的大盒子(body)的属性，让它在页面居中，并 定义其宽度为 760 像素，加上边框，如下： bodyfont-family:Arial,Helvetica,sans-serif; font-size:12px;margin:0px auto; height:auto; width:760px; border:1px solid #006633;4.5.3 布局步骤 3-对于页头，我们应用一幅背景图，并在其下边界设计一定的间隙，使页 头的图片不要和下面的导航栏连在一起，如下：#header height:100px; width:760px; background-ima

16、ge:url(web_head.jpg); background-repeat:no-repeat; margin:0px 0px 3px 0px;4.5.4 布局步骤 4-对于导航栏，做成像一个个小按钮，鼠标移上去会改变按钮的背景色和 字体色,而这些小按钮我们也可以理解为小盒子 , 则是一个盒子嵌套的问题 了, 如下：/* 定义一个导航栏的长盒子 */#nav height:25px; width:760px; font-size:14px; list-style-type:none; /*让nav这个大盒子下面的小盒子 LI列表样式不显示，这对于标准浏览器很重要 */ #nav li fl

17、oat:left; /* 让 LI 这些小盒子左对齐 */4.5.5 布局步骤 5/* 让 LI 盒子里面的链接样式没有下滑线 */ #nav li acolor:#000000; text-decoration:none; padding-top:4px; display:block;/* 让 LI 里面的链接块状呈现 ， 像一个按钮 ， 而不必一定要点中链接文字才起作用 */ width:97px;height:22px; text-align:center; background-color:#009966;margin-left:2px; 4.5.6 布局步骤 6/* 鼠标移到链接盒子

18、上面改变盒子背景色 */ #nav li a:hover background-color:#006633;color:#FFFFFF; 4.5.7 布局步骤 7-对于内容部分，主要是放入文章内容，有标题和段落；给标题加粗，使 用H标记;段落首行缩进2个字,同时所有内容看起来与大盒子的边框要 有一定距离，如下：#content height:auto; width:740px; line-height:1.5em; padding:10px; #content p text-indent:2em; #content h3font-size:16px; margin:10px; 4.5.8 布局

19、步骤 8-对于版权栏，加上背景，与页头呼应，里面的文字要居中对齐，有多行内容 时, 行间距合适 , 如下：#footerheight:50px; width:740px; line-height:2em; text-align:center; background-color:#009966;padding:10px; 4.5.9 布局步骤 9-最后，在开头增加如下样式代码，用通配符初始化各标记边界和填充 （因 为有部分标记默认有一定的边界，如 form 标记）：* margin:0px; padding:0px;4.5.10 布局步骤 10? 结构代码如下：首页v/li文 章 相册 Blog 论坛 帮助 前言vp第一段内容（插入大量文字）解 CSS盒子模式 第二段内容（插入大量文字）关于|广告服务|招聘|客服中心| Q Q留言|网站管 理 | 会员登录 | 购物车 Copyright ?2006- 2008 AllRights Reserved五、使用JavaScript 控制CSS5.1 控制 CSS-style? style 对象-利用style对象来