《《css技术》》由会员分享，可在线阅读，更多相关《《css技术》（6页珍藏版）》请在金锄头文库上搜索。
1、CSS技术CSS就是一种叫做样式表(style sheet)的技术，也称为层叠样式表 (Cascading Style Sheet)。在主 页制作时采用CSS技术，可以有效地对页面地布局、字体、颜色、背景和其他效果实现统一样式设置， 从而使页面格式控制更加容易，页面布局更加轻松，整个网站风格更加容易统一。一 CSS的定义1.1 CSS的每一条定义都有如下形式：selector(property:value;property:value; -.selector：样式名称，有三种形式，分别为：html 标记，如 p、body、a、h2 等classidproperty:使要被修改的样式性质，例如
2、color。value：赋给property的值，例如赋给 color的值可以是red。例：acolor:red这个例子可以使网页中的所有链接都变为红色。一般来说把这样的定义全包括在 标识中，放到里面。下面是一个简单的例子，其中定义了页面中所有链接为红色、P标识的文本背景为蓝色、文本为白色。(例 CSS1.htm)1.2 CSS selector三种形式的介绍(1) Html selector (超链接伪类)Html selector就是html的标记tag例如a、p、div、td等，还可以是标记：状态，例如a： link , 如果用CSS定义了他们，则在整页中，这个tag的性质就按照定义来显
3、示了。例如，让标识td的颜色显示为红色：atdcolor:redCSS 支持样式群定义，可以将样式一次定义给不同的元素，例如： h1,h2,tdfont-family:arial;font-size:40pt;color:red 这个定义让所有的h1、h2和td标识的文本具有字体arial,大小40pt和颜色为红色的状态。利用“标记：状态”对也可以定义链接颜色，(例如CSS2.htm)a:linkfont-family:Arial;color:blue;text-decoration:none表示超连接文本未访问时的样式a:hoverfont-fami 宋体；color:black;text-
4、decoration:underline表示光标移入移出超连接时的样式a:visitedfont-family 隶书;color:red;text-decoration:none表示访问后的超连接的样式a:activefont-family:Arial;color:green;text-decoration:none表示超连接被激活后的样式 文本密码输入 单选框 复选框 link定义了未访问链接的形式，hover定义了鼠标指针指向链接后的显示形式，visited定义了已经访问过的链接的形式，active定义了单击后处于焦点的链接形式(2) class selector(类选择符)class s
5、elector通过在html元素中关键字 class引用，实现对元素样式的控制。例如，可以让一些h1的颜色为红，另一些变绿，并且又不同的字体和大小，代码如下：(例CSS3.htm)h1.redfont-family:宋体”;font-size:12px;corlor:redh1.greenfont-family:TimesNewRoman,;font-size:9px;color:green 国际贸易 电子商务 另一种独立的 class selector,可以被任何 html标记所引用，语法：.classnameproperty:value (例 CSS4.htm).redfont-famil
6、y:宋体;font-size:10px;color:red.greenfont-family:Arial;font-size:24px;color:green 国际贸易 物流 (3) id selectorid selector其实跟独立的 class selector的功能一样，语法：# idnameproperty:valuehtml中的应用格式为：(例 CSS5.htm)#redonefont-family:宋体”;font-size:10px;color:red #greenonefont-family:Arial;font-size:24px;color:green 国际贸易 物流
7、创建文本区域html允许使用 , . , 等标识创建一个文本区域（层），从而能和CSS一块使用或用于整块文本对齐方式。这些标识的属性有：align属性指明在定义的区域内文本对齐方式（left , right , center）。nowrap属性指明在定义的文本区域内，在文本到达某一行结尾时， 将不会保持整个单词完整的换行。二 CSS的声明CSS使用之前，必须定义CSS,把CSS定义在标识标识中，即确定CSS的声明形式。CSS共有以下三种声明方式：2.1嵌入式CSS （内联样式表）嵌入式CSS就是前面见到的把样式定义在标识的标识中，格式为：selectorproperty:value;prope
8、rty:value; -.2.2超链接CSS声明文件（外联样式表）如果样式定义比较复杂，或者同样的样式单将用在多个文件当中时候，常常将CSS定义到一个后缀名为.CSS的文件中，在需要使用的页面中通过标识引用。#文件名例如：表单声明文件 samp.CSS和samp.htm2.3插入式（CSS内联样式表）插入式 CSS在需要应用样式表的html标识中直接通过style属性定义样式，格式为： 例如：金融专科 国际贸易 三CSS属性line-height:行距text-align :文本对齐text-indent :段落第一行空格text-transform :字母大/J、写text-decorati
9、on :文本修饰3.1行距（line-height:# #=整数有时候可能会想把行距加大，使得文字能看得清楚一些，行距属性设置行距得倍数，例如：（行距属性.htm） 行距 1 行距 1行距 2 行距 2行距 3 行距 33.2文本对齐（text-align:# #=left,center,right控制文本得对齐方向，默认是向左对齐。例如：（文本对齐.htm）向左看齐 对中看齐 向右看齐 3.3段落第一行空格（text-indent:#空格距离默认单位是象素pix。想让段落得首行空几格，可以用 text-indent,例如：（首行空格.htm）首行不空格首行空出 10pix首行空出 1cm3.
10、4字母的大小写（text-transform:# # capitalize,uppercase,lowercase控制英文文本字母单词首字母大写、全部大写或小写，例如：（字母大小写控制.htm）abcd efabcd efabcd ef3.5文本修饰（text-decoration:# #=none,underline,line-through可以在文字上加下划线，或中间加条线，最常用得是去掉链接下面的下划线，例如：（CSS2.htm）四CSS的字体属性font-family:字形font-size:大小font-style:物理字体font-weight:加重4.1 font-family :字形（例 CSS 字型属性.htm）（font-family:# #=font name控制文本的字型，取值可以是各种标准字体。例如：today is Sunday.Today is Sundayj 今天星期日 4.2 font-size：大小（例CSS 大小属性.htm）(font-si
