css技术.docVIP

CSS技术 CSS就是一种叫做样式表（style sheet）的技术，也称为层叠样式表（Cascading Style Sheet）。在主页制作时采用CSS技术，可以有效地对页面地布局、字体、颜色、背景和其他效果实现统一样式设置，从而使页面格式控制更加容易，页面布局更加轻松，整个网站风格更加容易统一。 一 CSS的定义 1.1 CSS的每一条定义都有如下形式： selector{property:value;property:value;…..} selector：样式名称，有三种形式，分别为： html标记，如p、body、a、h2等 class id property：使要被修改的样式性质，例如color。 value：赋给property的值，例如赋给color的值可以是red。 例：a{color:red} 这个例子可以使网页中的所有链接都变为红色。一般来说把这样的定义全包括在style标识中，放到head…/head里面。下面是一个简单的例子，其中定义了页面中所有链接为红色、P标识的文本背景为蓝色、文本为白色。 （例CSS1.htm） 1.2 CSS selector三种形式的介绍 （1）Html selector（超链接伪类） Html selector就是html的标记tag例如a、p、div、td等，还可以是“标记：状态”，例如a：link，如果用CSS定义了他们，则在整页中，这个tag的性质就按照定义来显示了。 例如，让标识td的颜色显示为红色：“td{color:red}” CSS支持样式群定义，可以将样式一次定义给不同的元素，例如：“h1,h2,td{font-family:arial;font-size:40pt;color:red}” 这个定义让所有的h1、h2和td标识的文本具有字体arial，大小40pt和颜色为红色的状态。利用“标记：状态”对也可以定义链接颜色，(例如CSS2.htm) html head style type=text/CSS a:link{font-family:Arial;color:blue;text-decoration:none} 表示超连接文本未访问时的样式 a:hover{font-fami宋体;color:black;text-decoration:underline} 表示光标移入移出超连接时的样式 a:visited{font-family隶书;color:red;text-decoration:none} 表示访问后的超连接的样式 a:active{font-family:Arial;color:green;text-decoration:none} 表示超连接被激活后的样式 /style /head body A href=textpass.htm文本密码输入/Abr a href=radio.htm单选框/abr a href=checkbox.htm复选框/a /body /html link定义了未访问链接的形式，hover定义了鼠标指针指向链接后的显示形式，visited定义了已经访问过的链接的形式，active定义了单击后处于焦点的链接形式 （2）class selector（类选择符） class selector通过在html元素中关键字class引用，实现对元素样式的控制。例如,可以让一些h1的颜色为红，另一些变绿，并且又不同的字体和大小，代码如下：（例CSS3.htm） html head style type=text/CSS h1.red{font-family:宋体;font-size:12px;corlor:red} h1.green{font-family:TimesNewRoman,;font-size:9px;color:green} /style /head body h1 class=red国际贸易/h1 h1 class=green电子商务/h1 /body /html 另一种独立的class selector，可以被任何html标记所引用， 语法：.classname{property:value} (例 CSS4.htm) html head style type=text/CSS .red{font-family:宋体;font-size:10px;color:red} .green{font-family:Arial;font-size:24px;color:green} /style /head body h1 class=red国际贸易/h1 h1 class=green物流/h1 /body /html （3）id selector i