CSS基础幻灯片.ppt

CSS 基 础 教 程 CSS stands for Cascading Style Sheets Styles define how to display HTML elements Styles are normally stored in Style Sheets External Style Sheets can save you a lot of work External Style Sheets are stored in CSS files  什么是CSS层叠样式表? CSS (Cascading Style Sheets)，就是“层叠样式表”。正如其名，就是将多种的格式设置象洋葱的皮一样, 一层一层地加到网页上面去, 每加一层, 整个页面就象涂上了一层新的油漆, 获得了新的格式设置。 以往，要定义字的颜色，必须在HTML文件中的字所在位置加上格式限定，如果网页中有十二行标题，都需要设定为红色，就只好每行标题处都作设定。 例如: font color= “red”This is a title．/font 样式表 Style Sheets 样式表Style Sheets, 就是指对网页特定的内容一次过添加格式设置。 用了样式表，就不必在每行需要格式设置的字的前后加上标签了。 你可以设定好一个样式表，把它放在HTML文件的合适位置，这个样式表就会对整个文件要格式的相应部分起作用。 例如: td{ font- color: # FF0000} 该网页中所有带＜td＞标签的文字，即标题字，都会变成红色了，不必逐行格式设置。 而当你想把红色改为黑色时，就直接把# FF0000改为# 000000，一次过就把所有的标题改了颜色。 W3C从HTML3.2版本开始, 样式表就开始推广使用了。 CSS的应用是网页编辑的一大革命 通过设置CSS，我们可以随意地控制网页中字体的大小、颜色等，便于统一网站的整体风格； 可以方便地为网页中的各个元素设置背景颜色和图片并进行精确的定位控制； 可以为网页中的元素设置各种滤镜，从而产生诸如阴影、辉光、模糊等只有在图像处理软件中才能实现的效果； 可以与脚本语言相结合，在网页中实现很多动态滤镜效果。 CSS是网站设计必不可少的一个重要组成部分 二、样式表语法 HTML 语言由标志和属性构成,CSS 也是如此。 样式表基本语法： 选择器 {属性1：值；属性2：值；……} h3 {color: red; text-align: left; font-size: 8pt} 对 H3 标签内容样式定义: 红色字, 居左, 8字号 练 习（1） CSS如何起作用? 在 HTML 页面内直接引用样式表的方法。 练 习（1） 在DW再建另一个TABLE, 通过设置CSS观察其变化 在DW里写入p li h2 hr及里面的内容, 通过设置CSS观察其变化 分别把TABLE用不同的CLASS命名，通过设置CLASS 的CSS观察其变化 要求：图片优化处理，空白处不能用图片，初步理解TABLE排版与DIV排版的不同 理解CSS文件与HTML文件的关系. CSS基本特性：分组、继承、层叠  分组： 通常我们需要同时改变几种样式的属性，CSS允许声明通过使用分号分隔其内容的方式来进行分组。 例如：body, td, p {color:#000000; text-align: left;} CSS基本特性：分组、继承、层叠 继承： 通过继承，CSS设置可以被应用到多个标识中。绝大部分的CSS声明可以通过封闭CSS选择器中的HTML标识来被继承。 例如通过一个CSS设置来改变整个页面的字体： body { font-family: Arial; font-size: 14px; line-height: 18px; color: #000000} body标识----页面上所有元素的父标识。 CSS基本特性：分组、继承、层叠 层叠: Cascading描述了覆盖通用样式的局部样式的能力。在相同的方式中，一个普遍地应用到某一块文本上的CSS规则可以被其他应用到相同文本中某个更为特殊的部分的规则所覆盖。 三、样式表的放置  样式表放在不同的地方，产生作用的范围也不同。概括起来有四种方法。其中常用前三种。 方法一：内部（或嵌入式）CSS 样式表 方法二：外部导入CSS 样式表 方法三：外部链接CSS 样式表 方法四：行间写入式CSS 样式表. 方法一：内部（或嵌入式）CSS 样式表 直接把CSS代码粘贴到html中。 比如我们把下面一段代码粘贴入HTML代码的 head / head 之间就可以了。