搜索
CSSCSS是CascadingStyleSheets（层叠样式表单）的简称。更多的人把它称作样式表。顾名思义，它是一种设计网页样式的工具。借助CSS的强大功能，网页将在您丰富的想象力下千变万化。实际上CSS的代码都是由一些最基本的语句构成的。它的基本语句的结构是这样的：选择符{属性：属性值}CSS注释以/*开头，以*/结尾样式表能为我们做什么•可以将格式和结构分离。•可以以前所未有的能力控制页面布局。•可以制作体积更小下载更快的网页。•可以将许多网页同时更新，比以前快更容易。•浏览器将具有更友好的界面用CSS语句就可以实现许多需要专业软件才可以达到的效果。利用属性可以设置字体、颜色、背景等页面格式；利用定位可以使页面布局更加规范、好看；利用滤镜可以使页面产生多媒体效果。局部引用样式表HTMLSTYLETYPE=“text/css”!--H1{color:green;font-family:impact}P{background:yellow;font-family:courier}--/STYLEHEADTITLE局部引用样式表/TITLE/HEADBODYH1局部引用H1标记/H1P局部引用P1标记/P/BODY/HTML定义H1标签此H1标签会被样式表中的H1所替换此P标签会被样式表中的P所替换定义局部样式表,TYPE=“text/css”指定了使用CSS样式表定义应写在注释内，以防止不兼容的浏览器不能正常显示定义P标签外部链接样式表HTMLHEADTITLE外部样式表的使用/TITLELINKREL=stylesheetHREF=mystyles.cssTYPE=text/css/HEADBODYH1欢迎来到ASP/H1P这里是动态网页制作/P/BODY/HTMLmystyles.css文件内容如下：H1{color:green;font-family:黑体}P{background:yellow;font-family:宋体}Rel指明类型href指明引用文件的名称引用外部样式表的语法在行内加入样式HTMLHEADTITLE在行内加入样式/TITLE/HEADBODYH1STYLE=color:orange;font-family:宋体欢迎来到ASP/H1PSTYLE=background:yellow;font-family:黑体动态网页/P/BODY/HTMLCSS类选择符用类选择符你能够把相同的元素分类定义不同的样式，定义类选择符时，在自定类的名称前面加一个点号。假如要两个不同的段落，一个段落向右对齐，一个段落居中，可以先定义两个类：p.right{text-align:right}p.center{text-align:center}然后用不在不同的段落里，只要在HTML标记里加入定义的class参数：pclass=right这个段落向右对齐/ppclass=center这个段落是居中排列的/p注意：类的名称可以是任意英文单词或以英文开头与数字的组合，一般以其功能和效果简要命名。CSS类选择符类选择符还有一种用法，在选择符中省略HTML标记名，这样可以把几个不同的元素定义成相同的样式：.center{text-align:center}（定义.center的类选择符为文字居中排列）这样的类可以被应用到任何元素上。下面我们使h1元素（标题1）和p元素（段落）都归为“center”类，这使两个元素的样式都跟随“.center”这个类选择符：h1class=“center”这个标题是居中排列的/h1pclass=“center”这个段落也是居中排列的/p注意：这种省略HTML标记的类选择符是我们以后最常用的CSS方法，使用这种方法，可以很方便的在任意元素上套用预先定义好的类样式。一个CSS例子HTMLHEADTITLE这是一个CSS的例子/TITLE/HEADBODYH1WelcomeToASP/H1P这是一个CSS的例子/P/BODY/HTML在HTML和BODY标签之间插入以下代码：STYLETYPE=text/css!--H1{color:green;font-size:37px;font-family:黑体}P{text-indent:1cm;background:yellow;font-family:宋体}--/STYLECSS例子htmlheadtitlecssword/titlestyle!--div{width:200;filter:blur(add=true,direction=100,strengh=20);}--/style/headbodydivpstyle=font-size:48;font-style:bold;color:red;hongen/p/div/body/html定义DIV范围内的样式，包括宽度(width)、模糊滤镜属性(blur)CSS字体属性pstyle=“font-family：宋体”hongen/ppstyle=“font-style：italic”hongen/ppstyle=“font-style：oblique；font-weight：bold；font-size：24pt”hongen/p颜色和背景属性属性属性含义属性书写格式属性值color前景色P{color:blue}颜色background-color背景色Body{background-color:yellow}颜色Background-image背景图片Body{background-image:url(1.jpg)}图片路径Background-repeat背景图片重复方式Body{background-repeat:repeat-x}Repeat-x;repeat-y;no-repeatBackground-attachment背景图片是否滚动Body{background-attachment:fixed}Fixed;scrollBackground-position背景图片的初始位置Body{background-position:90%80%}Top;left;right;Center;bottom文本属性pstyle=letter-spacing:1em;text-align:justify;text-indent:4em;line-height:17pt…/pletter-spacing设置了字间距为1em，其中1em为一个长度单位；text-align设置了对齐方式为两端对齐；indent设置了缩进格为4em；line-height设置了行高为17pt一个CSS例子htmlheadstyletype=text/css!--H1{background-color:#ffff00;/*背景色*/color:#0000ff;/*文字颜色*/text-align:center;/*文字居中*/font-family:/*黑体;字体名称*/font-size:20pt;/*字体大小*/letter-spacing:10px;/*字符间距*/word-spacing:1cm;/*文字间距*/background-repeat:no-repeat;/*背景图象重复方式*/background-image:url(1.jpg);/*背景图象*/}--/style/headbodyh1welcometoASP/h1/body/html鼠标激活的状态，颜色为蓝色(blue),文本装饰属性值为上划(overline)，字体大小为20pt访问过的状态，颜色为红色,文本装饰属性值为没有装饰超链接htmltitlelinkcss/titlehead!--定义伪类元素（ａ：），大括号内定义了前景色属性和文本装饰属性，hover加上‘font-size’属性目的是让鼠标激活链接时改变字体--!--未访问时的状态，颜色为绿色(green)，文本装饰属性(text-decoration)值为没有(none)--!--访问过的状态，颜色为红色(red)，文本装饰属性值为没有--!--鼠标激活的状态，颜色为蓝色(blue)，文本装饰属性值为上划(overline)，字体大小为20pt--style!--a:link{color:green;text-decoration:none}a:visited{color:red;text-decoration:none}a:hover{color:blue;text-decoration:overline;font-size:20pt}--/style/headbodybrstyle=font-family:黑体;font-size:12ptahref=1.html未访问的链接/a!--加链接，显示三种不同状态，并且定义了链接文本的字体和大小--brahref=2.html访问过的链接/abrahref=3.html鼠标激活的链接/a/body/htmlhtmlheadtitlelinkcss/titlestyle!--a:link{color:green;text-decoration:none}a:visited{color:red;text-decoration:none}a:hover{color:blue;text-decoration:overline;font-size:20pt}--/style/headbodybrstyle=font-family:黑体;font-size:12ptahref=1.html未访问的链接/a!--加链接，显示三种不同状态，并且定义了链接文本的字体和大小--brahref=2.html访问过的链接/abrahref=3.html鼠标激活的链接/a/body/html未访问时的状态,颜色为绿色,文本装饰属性(text-decoration)值为没有边距属性边距顺序是上、右、下、左。body{margin：1em2em3em4em}定义文本的上、右、下、左的边距分别为1、2、3、4em鼠标属性鼠标效果演示htmlheadtitlechangemouse/title/headbodyh1style=font-family:文鼎新艺体简鼠标效果/h1!--设置字体--pstyle=font-family:行书体;font-size:16pt;color:red请把鼠标移到相应的位置观看效果。/p!--设置字体的名称,大小,颜色--divstyle=font-family:行书体;font-size:24pt;color:green;!--设置该区域内的字体名称、大小、绿色--pspanstyle=cursor:hand手的形状/spanbr!--设置鼠标属性为手的形状--spanstyle=cursor:move移动/spanbr!--设置鼠标属性为移动--spanstyle=cursor:ne-resize反方向/spanbr!--设置鼠标属性为反方向--spanstyle=cursor:wait等待/spanbr!--设置鼠标属性为等待--spanstyle=cursor:help求助/span!--设置鼠标属性为求助