css样式设计基础.docVIP

3.1.1 什么是CSS 　　CSS是英语Cascading Style Sheets（层叠样式表单）的缩写，它是一种用来表现HTML或 XML 等文件式样的计算机语言。 CSS目前最新版本为CSS3,能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言，CSS能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象盒模型的能力，并能够进行初步交互设计，是目前基于文本展示的最优秀的表现设计语言。问：CSS已经进入黄金发展期，您认为我们所有人现在就应该学习和开始使用CSS的十大理由是什么？ Christopher:哦，下面是我的十大理由，不分排名先后： 1.CSS将从基础开始建设直到全面替代传统web设计方法。W3C组织创建的CSS技术将替代HTML的表格、font标签、frames以及其它用于表现的HTML元素。 2.提高页面浏览速度。使用CSS方法，比传统的web设计方法至少节约50%以上的文件尺寸。 3.缩短改版时间。只要简单的修改几个CSS文件就可以重新设计一个有成百上千页面的站点。 4.强大的字体控制和排版能力。CSS控制字体的能力比糟糕的FONT标签好多了，有了CSS，我们不再需要用FONT标签或者透明的1 px GIF图片来控制标题，改变字体颜色，字体样式等等。 5.CSS非常容易编写。你可以象写html代码一样轻松地编写CSS。 6.提高易用性。使用CSS可以结构化HTML，例如：p标签只用来控制段落，heading标签只用来控制标题，table标签只用来表现格式化的数据等等。你可以增加更多的用户而不需要建立独立的版本。 7.可以一次设计，随处发布。你的设计不仅仅用于web浏览器，也可以发布在其他设备上，比如PowerPoint。 8.更好的控制页面布局。不用多说。 9.表现和内容相分离。将设计部分剥离出来放在一个独立样式文件中，你可以减少未来网页无效的可能。 10.更方便搜索引擎的搜索。用只包含结构化内容的HTML代替嵌套的标签，搜索引擎将更有效地搜索到你的内容，并可能给你一个较高的评价(ranking)。 一、层叠 层叠是指在同一个Web文档中有多个样式的存在。当拥有相同特殊性的规则应用于同一个元素时，根据前后顺序，后定义的规则会被应用。由此可以推出一般情况下定义规则被利用的顺序是，内联样式（写在标签内的）内部样式表（写在文档头部的）外部样式表（写在外部样式表文件中）。 二、群选择符 可以对一组对象进行相同的样式指派，如下： h1,h2,h3,p,span{ font-size:12px; font-family:宋体; } 派生选择符，如下 h1 span{ font-weight:bold; } 当仅仅想对某一对象中的子对象进行样式指定时，派生选择符就被派上了用场，派生选择符指选择符组合中前一个对象包含后一个对象，对象之间使用空格作为分隔符。如下： h1span这是span内的文本/span/h1 注意：指派的样式仅对此结构的标签有效，对于单独存在的h1或是单独存在的span及其非h1标签下属span均不会应用此样式。 这样做的好处是避免过多id及class的设置，并且直接对所需要设置的元素进行设置即可，派生选择符除了可以二者包含，也可以多级包含，如下： body h1 span strong{ font-weight:bold; } 三、继承 如下： h1中国最大的城市em上海/em/h1 子标记还可以在父标记样式风格的基础上加以修改，进而产生新的样式，而子标记的样式风格完全不会影响父标记。 样式如下： style type=text/css h1{ color:red; text-decoration:underline; } h1 em{ color:#004400; font-size:40px; } /style em标签继承了父标签的下划线样式，而颜色和字体大小则采用了自己设置的样式风格。 四、颜色值 CSS提供4种方法表示RGB值，第一种方法使用简单的十六进制将其表示为6位数字，如下： body{ color:#CC66FF; } 第二种方法：三元RGB body{ color:rgb(204,102,255); } 第三种方法是给出颜色的百分比，如下 body{ color:rgb(80%,40%,100%); } 第四种方法是短十六进制，如下： body{ color:#C6F; } 3.2.3 CSS样式表 Css样式表是cascading style sheet（层叠样式表单）的缩写。它可以增强或控制网页的样式，并允许将样式信息与网页内容分离的一种标记语言。 样式表的分类: 按加入的方式不同，可以分为：