css教案

3.1CSS概述CSS（CascadingStyleSheet，可译为“层叠样式表”）是一组格式设置规则，用于控制Web页面的外观。通过使用CSS样式设置页面的格式，可将页面的内容与表现形式分离。CSS可以用任何写文本的工具进行开发,如文本工具,dreamweaver等。3.1.1CSS的语法结构CSS定义是由三个部分构成:选择符{属性:值;}。例如：body{background:#000000;}/*设置页面背景为黑色*/3.1.1选择符1．选择符的书写格式和使用方法（1）如果需要对一个选择符指定多个属性时，可使用分号将所有的属性和值分开，例如：p{text-align:center;color:red}/*段落居中排列;并且段落中的文字为红色*/（2）可以把相同属性和值的选择符组合起来书写，用逗号将选择符分开，这样可以减少样式重复定义，例如：h1,h2,h3,h4,h5,h6{color:green}/*六种标签的文字均为绿色*/（3）用类选择符能够把相同的元素分类定义不同的样式，定义类选择符时，在自定类的名称前面加一个点号。（4）类选择符还有一种用法，在选择符中省略HTML标记名，这样可以把几个不同的元素定义成相同的样式。假如想要两个不同的段落，一个段落向右对齐，一个段落居中，则可先定义两个类:p.right{text-align:right}p.center{text-align:center}然后用不在不同的段落的XHTML标签里加入class参数:pclass=right这个段落向右对齐的/ppclass=center这个段落是居中排列的/p（5）先在XHTML页面中为某个元素指定id参数，然后采用id选择符对这个元素定义单独的样式。ID选择符的应用和类选择符类似，只要把CLASS换成ID即可。ID只能在一个页面中出现一次,而class可以多次运用。定义ID选择符要在ID名称前加上一个“#”号。和类选择符相同，定义ID选择符的属性也有两种方法。（6）可以单独对某种元素定义包含选择符，例如要改变表格内的链接样式，而表格外的链接样式不变:tablea{font-size:12px}2．选择符的优先级别相比之下，ID选择符-------类选择符--------HTML标记选择符。3．样式表的层叠性层叠性就是继承性。事实上，所有在元素中嵌套的元素都会继承外层元素指定的属性值。另外，当样式表继承遇到冲突时，总是以最后定义的样式为准。3.1.1应用CSS样式到网页中CSS样式表可以以多种方式灵活的应用到所设计的页面中，选择方式根据设计的不同要求来制定1．内嵌样式表内嵌样式表将CSS样式所定义的内容写在XHTML代码行内，如bodystyle=background-color:#F00页面背景色为红色/body例如有CSS规则如下.center{text-align:center}/*定义.center的类选择符为文字居中排列*/使h1元素(标题1)和p元素(段落)都归为“center”类，这使两个元素的样式都跟随“.center”这个类选择符:h1class=center这个标题是居中排列的/h1pclass=center这个段落也是居中排列的/p下面这个例子，ID属性将匹配id=intro的元素:#intro{font-size:110%;font-weight:bold;}/*字体尺寸为默认尺寸的110%;粗体*/下面这个例子，ID属性只匹配id=intro的段落元素:p#intro{font-size:110%;font-weight:bold;}2．内部样式表将CSS样式统一放置在head.../head区段中。3．外部样式表外部样式表是相对于内部样式表而言的，它实际上是一个后缀名为.css的文件，独立于HTML页面，放置于网站文件夹内某个位置。外部样式表通过在某个HTML页面中添加链接的方式生效。同一个外部样式表可以被多个网页甚至是整个网站的所有网页所采用，这就是它最大的优点。【操作实例16】CSS外部样式表的建立和使用目标：建立一个CSS外部样式表css01.css，使之应用到网页example01.html中。操作过程：（1）在Dreamweaver中依次单击“文件”|“新建”菜单命令，在弹出的“新建文档”对话框中选择空白页，页面类型为CSS，单击“创建”按钮，创建CSS新文件，输入以下内容后保存为css01.css。body{background-color:#F00}（2）在Dreamweaver中新建一个XHTML网页example01.html，单击“CSS”面板下方的按钮，选择上述css01.css文件，如图所示。链接成功后网页的背景色变为红色，切换到代码视图，看到在head/head标签中出现一行链接代码：linkhref=css01.cssrel=stylesheettype=text/css/3．三种样式表的优先级别内嵌样式表--------内部样式表--------外部样式表3.3CSS样式定义在Dreamweaver中，即使不懂CSS语言代码，也可以轻松地创建与使用CSS样式表。3.3.1“CSS样式”面板“CSS样式”面板右下角的五个按钮对应含义分别是：附加样式表、新建CSS规则、编辑样式、禁用/启用CSS属性、删除CSS属性。3.3.1新建CSS样式新建的空白文档是不包含任何CSS样式的，“CSS样式”面板的列表框中显示“未定义”。要想新建CSS样式，有以下三种方法：单击属性面板中的按钮。单击“CSS样式”面板的按钮。依次单击“格式”|“CSS样式”|“新建”菜单命令。CSS选择器分为3种类型:类、ID、标签。类选择器：通常说的class选择器，定义的时候要在名称前加“.”，如：.one{color:red;font-size:25pt;}ID选择器：定义的时候要在前面加#，如：#box{color:red;font-size:25pt;}标签选择器：是利用HTML的标记直接定义标记内容的样式，如：h1{color:red;font-size:25pt;}3.3.1编辑CSS样式在“CSS规则对话框”中，可以通过类型、背景、区块、方框、边框、列表、定位和扩展项的配置，来美化页面。编辑的方法有三种：1．通过“CSS样式”面板在面板上方窗格中选择要编辑的样式，在下方的属性窗格中，单击右边的属性值直接进行编辑。2．通过“CSS样式”面板的按钮在面板上方窗格中选择要编辑的样式，单击按钮，打开“CSS规则定义”对话框进行修改，修改完毕，单击“确定”按钮退出编辑。3．在代码视图直接编辑切换到代码视图，直接修改CSS样式，如果要增加样式，只需在代码行后回车即可开启代码提示窗口，如图所示。3.3.1设置CSS样式的类型Font-family：字体。Font-size：字的大小。Font-weight：字的粗细，包括nomal（正常值）、bold（粗体）、lighter（比默认字还细）、100—900（100到900九个级别）。Font-style：字的样式，包括normal（普通）、italic（斜体）、oblique（倾斜）。Font-variant：英文大小写转换，包括normal（正常值）、small-caps(将小写英文字母转换成大写英文字母)。Line-height：行高设置，选择“normal”，表示让电脑自动调整行高，也能够使用数值和单位结合的形式自行配置。需要注意的是，单位应该和文字的单位一致。例如，文字配置为12pt，假如要创建一倍行距，则行高应该为24pt。Text-transform：控制英文文字大小写，包括capitalize（将每个英文单字的首字大写）、uppercase（全部转换成大写）、lowercase（全部转换成小写）、none（默认值）Text-decoration：文本修饰，包括underline（加下划线）、overline（加上划线）、line-through（加删除线）、blink（闪烁文字，只有netscape浏览器支持）、none（默认值）Color：定义文本颜色3.3.1设置CSS样式的背景Background-color：背景颜色，包括background-color：color-value（颜色值）Background-image：背景图像，直接填写背景图像的路径。Background-repeat：背景图像平铺属性，包括repeat（背景图像平铺）、repeat-x（背景图像以x轴方向平铺）、repeat-y（背景图像以y轴方向平铺）、no-repeat（背景图像不平铺）。Background-attachment：背景图像是否跟随网页一同滚动，包括fixed（固定）、scroll（滚动）。Background-position（x）：背景图像水平方向的位置，包括left（水平居左）、right（水平居右）、center（水平居中）,以及数值形式表示的相对页面窗口的x轴位置。Background-position（y）：背景图像垂直方向的位置，包括top（垂直居顶）、center（垂直居中）、bottom（垂直居底）,以及数值形式表示的相对页面窗口的y轴位置。3.3.1设置CSS样式的区块Word-spacing：英文单词之间的间距，包括normal（正常值）、length（标明具体长度，例如6px）。Letter-spacing：汉字字符之间的间距，包括normal（正常值）、length（标明具体长度，例如3px）。Vertical-align：元素相对于其父级元素在垂直方向的对齐方式，如表所示表3-6Vertical-align的属性值值含义baseline默认。元素放置在父元素的基线上sub垂直对齐文本的下标super垂直对齐文本的上标top把元素的顶端与行中最高元素的顶端对齐text-top把元素的顶端与父元素字体的顶端对齐middle把此元素放置在父元素的中部bottom把元素的顶端与行中最低的元素的顶端对齐text-bottom把元素的底端与父元素字体的底端对齐值使用line-height属性的百分比值来排列此元素，允许使用负值inherit规定应该从父元素继承vertical-align属性的值。Text-align：文本对齐方式，包括left（左对齐）、right（右对齐）、center（居中对齐）、justify（两端对齐）Text-indent：首行缩进，可以用负值创建凸出，但显示效果取决于浏览器。White-space：声明建立布局过程中如何处理元素中的空白符，包括normal（默认值，空白会被忽略）、pre（空白会被保留）、nowwrap（文本不换行，直到遇到br/标签为止）Display：定义建立布局时元素生成的显示框类型。提示：对于HTML等文档类型，如果使用display不谨慎会很危险，因为可能违反HTML中已经定义的显示层次结构。3.3.1设置CSS样式的方框Width：设定元素的宽度Height：设定元素的高度Float：设置元素的浮动位置，包括left（左对齐）、right（右对齐）、none（无）Clear：规定元素的一侧不许有层，包括left（左侧）、right（右侧）、both（两侧）、none（不限制）。Padding：内容与边框的距离，简称补白或填充，包括top、bottom、left、right四个方向的距离。Margin：与窗口边界或上一级元素的边界的距离，包括top、bottom、left、right四个方向的边界距离。3.3.1设置CSS样式的边框Style：定义边框的样式，包括top、right、bottom、left四个方向的边框样式，如表所示。表3-6Style的属性值值含义none定义无边框dotted定义点状边框。在大多数浏览器中呈现为实线dashed定义虚线。在大多数浏览器中呈现为