PHP基础教程_零基础学习PHP_PHP基础教程_兄弟连PHP教程_CSS简介解析

CSS简介网址：电话：4007001307CSS•DHTML简介•何为CSS(层叠样式表)•CSS的几种设置方式•样式规则的选择器•样式规则的注释与有效范围•用DreamWeaver产生CSS•样式属性详解DHTML简介DHTML=HTML脚本语言JavaScript++层叠样式表CSS指定一个网页的元素决定元素的大小颜色和位置操纵网页的元素DHTML是制作动态HTML页面的技术！DHTML示例闪烁文本移动文本消隐文本HTMLHEADTITLE设置属性/TITLE/HEADBODYPstyle=color:red;font-size:30px;font-family:隶书;这个段落应用了样式/PP这个段落按默认样式显示/P/BODY/HTML什么是样式？指定显示样式样式规则何为层叠样式表•CSS是CascadingStyleSheets的简写，它除了可以轻松设置网页元素的显示位置和格式处，甚至还能产生滤镜，图像淡化，网页淡入淡出的渐变效果。•简而言之，CSS就是要对网页的显示效果实现与Word一样的排版控制。常用的样式属性属性CSS名称说明颜色color文本属性font-size字体大小font-family字体text-align文本对齐边框属性(用于表单元素)border-style边框样式border-width边框宽度border-color边框颜色定位属性(position)top顶部边距（上边距）left左边距width宽度height高度z-indexz轴索引号，用于层CSS的几种方式•内联样式表(Inlinestyles)–metahttp-equiv=“Content-Style-Type”content=“text/css”•嵌入样式表(Embeddedstylesheets)•外部样式表(Linkedstylesheets)•输入样式表(importedsytlesheets)内联样式表您如果希望某段文字和其他段落的文字显示风格不一样，那么请采用“行内样式”。行内样式使用元素标签的STYLE属性定义。/*－－关键代码--*/p剩余时间：成交结束BR新旧程度：全新BR所在地：北京BR宝贝数量：5件BR浏览量：220次/ppstyle=“color:#FF00FF;font-family:隶书;font-weight:bold;font-size:24px另送价值50元的充电器套装！(一个充电器，两节充电电池)可使用半年以/pHTMLHEADTITLE应用样式/TITLESTYLETYPE=text/cssP{font-size:20px;color:blue;text-align:center}/STYLE/HEADBODYP我是段落1/PP我是段落2/PP我是段落3/PP我们的样式绝对统一/P/BODY/HTML嵌入样式表样式表样式规则所有的段落都采用P样式，保证样式统一行内样式表局限于某个标签，如果希望本网页内的所以同类标签都采用统一样式，这时应采用内嵌样式。选择器用分号隔开style•在style/style标签对中定义的每条样式规则的基本格式如下：–Selector{property:value;property:value;…}–Selector:当定义一条样式规则时，必须指定受这条样式规则作用的网页元素。–property:指定那些将要被修改的样式名称，即CSS属性，如color、font-size等。–value:赋给property的值，即CSS属性值。样式规则的选择器•HTMLselector•Classselector•IDselector•关联选择器•组合选择器•伪元素选择器/*--关键代码--*/HEADSTYLEtype=text/cssP{/*设置样式：字体和背景色*/font-family:System;font-size:18px;color:#3333CC;}H2{background-color:#CCFF33;text-align:center;}/STYLE/HEADBODYH2品种特征方面：/H2P1、蛋鱼：蛋鱼…….。/PP2、龙睛：龙睛……..。/PP3、高头：高头….。/P内嵌样式-HTML选择器HTML选择器应用H2样式应用P样式内嵌样式-class类选择器HEADSTYLEtype=text/css.myinput{border:1pxsolid;border-color:#D4BFFF;color:#2A00FF}/STYLE/HEADBODYFORMP用户名INPUTname=textfieldtype=textclass=myinput/PP密 码INPUTname=textfieldtype=passwordclass=myinput/PPINPUTtype=submitname=Submitvalue=重填INPUTtype=submitname=Submitvalue=提交/PCLASS类选择器应用类选择器：class＝”类名“类选择器的定义格式为：.类名{…样式规则;}Classselector•要将一种HTML标签所创建的各处网页元素分成几类，需要将这个HTML标签的class属性设置为不同的值。pclass=“stop”paragraph1/ppclass=“warning”paragraph2/ppclass=“stopwarning”paragraph3/p•在样式表中，可以分别为某个HTML标签的各个类别定义样式规则：stylep.stop{color:red}p.warning{color:yellow}/style•在样式表中，可以为某个类别的所有HTML标签定义样式规则：style.blueone{color:blue}/styleh1class=“blueone”蓝色的题目/h1pclass=“blueone”蓝色的段落/pHEADSTYLETYPE=text/css#fire{color:red;font-size:24px;}/STYLE/HEADBODYH2ID=fire我是二级标题，火是这样的/H2/BODY内嵌样式-ID选择器ID选择器ID选择器的定义格式为：＃ID名{…样式规则;}应用ID选择器：ID＝”ID名“IDselector•ID属性用来定义某一个特定的HTML元素，一个网页文件中只能有一个元素能使用某一ID属性值，IDSelector就是为样式规则定义语名选择具有某一ID属性值的HTML元素。spanid=“yellowone”texthere/span•在样式表中，ID值为yellowone的HTML元素的样式规则定义语句如下：style!—#yelowone{color:yellow}--/style选择器声明•关联选择器是指一个用空格隔开的两个或更多的单一选择器组成的字符串，例如：–PEM{background:yellow}.specialem{color:red;}#topem{color:blue}p.top.top1strong{color:green}–其中的“PEM”就是关联选择器，它表示段落中的强调文本（em/em标签对中的内容）的背景为黄色，而其它地方出现的强调文本则不受影响。–关联选择器定义的样式规则的优先权比单一选择器定义的样式规则的优先权高，即使用在PEM{background:yellow}的后面部分定义了如下样式规则：EM{background:green}但是，在段落标签p中定义的强调文本仍用黄色背景。•组合选择器–为了减少样式表的重复声明，可以在一条样式规则定义语句中组合若干个选择器，每个选择器之间用逗号（，）隔开。例如，H1,H2,H3,H4,H5,H6,TD{color:red;}•全局选择器–希望页面所有的标记都使用同一种CSS样式，又不希望逐个来生命，这时候可以利用全局生命符号“*”外部样式•根据样式文件与网页的关联方式又分为：–链接（link）外部样式表–导入（import）外部样式表样式文件P{…..}网页2网页3网页1链接外部样式表使用LINK（链接）标签，语法：HEADLINKrel=“stylesheet”type=“text/css”href=“样式表文件.css”//HEAD第一步：创建样式表文件newstyle.css第二步：把样式文件和网页关联样式文件：newstyle.cssP{…..}Onel.htmanother.htm第三步：浏览查看各网页演示：链接样式表示例导入外部样式表使用@import导入，语法：HEADSTYLETYPE=text/css@import样式表文件.css;@importurl(样式表文件.css);/STYLE/HEAD操作步骤同链接样式表导入样式表•使用@import声明的例子语句如下：styletype=“text/css”media=“screen”!--@importurl();@importurl(/stylesheets/style.css);p{background:yellow:color:black}--/style外部样式文件样式的混合使用行内样式表、内嵌样式表、外部样式表各有优势，实际的开发中常常需要混合使用：•有关整个网站统一风格的样式代码，放置在独立的样式文件*.css•某些样式不同的页面，除了链接外部样式文件，还需定义内嵌样式•某张网页内，部分内容”与众不同“，采用行内样式对于某个HTML标签：1）如果有多种样式，如果规定的样式没有冲突，则叠加；2）如果有冲突，则最先考虑行内样式表显示，如果没有，再考虑内嵌样式显示，如果还没有，最后采用外面样式表显示，否则就按HTML的默认样式显示；内嵌样式行内样式某个HTML标签样式规则的注释与有效范围•样式表中的注释–使用“/*要注释的内容*/”格式进行注释，注释不能嵌套，例如，“/*xxx/*yyy*/xxx*/”这样的注释是不允许的。•样式规则的继承–所有嵌套在某个HTML标签中的HTML标签都会继承外层标签设置的样式规则。•样式规则的优先级–ID选择器CLASS选择器HTML标签选择器–内联样式表嵌入样式表链接样式表样式属性分类•CSS中的样式属性非常之多，大体上可以分为以下几类：–字体–文本–边框–背景–列表–位置–布局–其它字体•font-family：字体类型•font-size–绝对大小的设置为xx-small、x-small、small、medium、large、x-large、xx-large中的任意一个，xx-small为最小取值，xx-large为最大取值。–相对大小的设置可以为larger或smaller.–绝对单位有：px、mm、cm、in、pt、pc.–相对单位有：em、ex、%•color–三种表示方法：＃RRGGBB、rgb(R,G,B)、red.•font-weight：字体粗细•font-style：字体斜体•text-decoration：下划线、顶划线、删除线、闪烁•text-transform：英文字母大小写•font：合并设置字体样式–例如，P{font:italicbold12ptTimes,serif}font-family:宋体,sans-serif;font-weight:normal;color:#0000FF;font