CSS样式表的基本应用内容大纲

CSS样式表的基本应用

1.CSS的概念、分类和作用

Cascading Style Sheet（层叠样式表）缩写形式，实现网页设计的标准化和结构化，专门用于对网页元素进行格式定义的技术，HTML必不可少的插件，HTML定义了网页的结构和各要素的功能，CSS将通过定义结构（内容结构）的部分和定义格式（表现形式）的部分分离。

形式分类（演示DW如何创建CSS）

1.内部样式表

2.外部链接样式表

3.内部嵌入式样式表

2.CSS的基本语法（演示图）

选择符｛属性：值｝或者选择符｛属性1：值1; 属性2：值2;｝

标记选择器h1 p

类别选择器.red

ID选择器#blue

（实例演示）

1.“交集”选择器(选中二者各自范围的交集)

第一个必须是“标记选择器”第二个是类别或ID选择器，两者必须连写

例：p.special {color:red;font-size:23px;}

2.“并集”选择器（也叫“集体声明”，同时选中各个基本选择器所选择的范围）

任何形式的选择器（标记、类别、ID）都可以作为并集选择器的一部分，直接逗号相连，

应用于某些选择器风格完全或者部分相同的情况。

例：h1,h2,h3,h4,h5,p {

color:red;

font-size:23px; }

3.后代选择器(嵌套的方式对特殊的HTML标记进行声明)

外层标记写前面，内层标记写后面，之间用空格分隔。当标记嵌套，内层标记就是外层标

记的后代，后代选择器影响不仅于直接后代，而且影响“各级后代”

例：.special i {color:red;} /*使用了属性special的标记里包含了 */

3.利用DW创建CSS样式

类：定义了一种通用的方式，所有应用了该方式的元素，在浏览器中都遵循该类定义的规则。类名称必须以“点号”开头，可以包含任何字母和数字的组合。不输入“点号”DW会自动添加。

标签：该选项可以对某一具体标签进行重新定义，这种方式针对HTML中的代码进行设置，其作用是当创建或修改某个标签的CSS后，所有应用到该标签进行格式化的元素将立即更新。

高级：该选项可以定义链接的四种状态，也可以对某一具体的标签组合或者含有特定ID属性的标签应用样式。

类型：用于定义CSS样式的基本字体、类型等属性

背景：用于定义CSS样式的背景属性，通过该分类可以对页面中的各种元素应用背景属性。

附件：确定背景图像是固定在原位置还是随内容一起滚动。

水平位置和垂直位置：指定背景图像相对于元素的初始位置。

区块：用于定义标签和属性的间距及对齐方式。

单词间距：设置单词的间距，选择或输入（单位：像素、字体高em）

字母间距：设置字母或者字符间的距离。（负值表示减小字符间距，可覆盖对齐文本）垂直对齐：指定垂直对齐方式。

文本对齐：设置元素中的文本对齐方式。

空格：确定如何处理元素中的空白。

正常：收缩空白

保留：保留所有空白（含空格、制表符、回车）

不换行：仅当有
文本才换行

显示：指定是否以及如何显示元素。（“无”选项表示关闭应用此属性的元素的显示）

方框：用于定义元素的边框，包括边框宽度、颜色和样式。

宽和高：设置元素的宽度和高度

浮动：设置元素（如文本、表格、图像）在哪个边围绕元素浮动，其他元素按通常方式环绕在浮动元素周围。

清除：定义元素的哪一边不允许有层，如果层出现在被清除的那一边，则元素将移至该层下方。

填充：指定元素内容与元素边框的间距。（取消“全部相同”复选框，可设置元素各个边的填充。

边界：指定一个元素在四个方向上与浏览器窗口边界或者上一级元素边界自己的距离。

边框：用于定义元素的边框，包括边框宽度、颜色和样式。

样式：设置边框的样式外观

宽度：设置元素边框的粗细

颜色：设置边框的颜色

定位：用于对元素进行定位。

类型：确定浏览器如何来定位层，有“绝对、相对、静态“3个选项。

显示：确定层的初始显示条件，有“继承、可见、隐藏”3个可见性选项。

Z轴：确定层的堆叠顺序，编号高的层显示在上面，值可以取正和负值。

溢位：确定当前层的内容超出层的大小时的处理方式。

置入：指定层的位置和大小，如果层的内容超出指定范围，超出部分将被覆盖。

裁切：指定层的那部分空间，输入的数值是距离层的四个边界的距离。

扩展：用于设置一些附加属性，这些属性设置在不同的浏览器中授支持的程度有所不同。

分页：为打印网页时设置分页标记（如：之前：总是之后：总是则分3页）

视觉效果：为网页元素添加各种效果。（16种滤镜效果P96 ）