CSS语法手册.docx
- 文档编号:7246601
- 上传时间:2023-01-22
- 格式:DOCX
- 页数:38
- 大小:45.57KB
CSS语法手册.docx
《CSS语法手册.docx》由会员分享,可在线阅读,更多相关《CSS语法手册.docx(38页珍藏版)》请在冰豆网上搜索。
CSS语法手册
CSS语法手册
字体属性
1、font-family
×能:
用于改变HTML标志或元素的字体,你可设置一个可用字体清单。
浏览器由前向后选用字体。
语×:
{font-family:
字体1,字体2,...,字体n}
2、font-style
×能:
使文本显示为扁斜体或斜体等表示强调。
数值:
normal-正常
italic-斜体
oblique-偏斜体
3、font-variant
×能:
用于在正常与小型大写字母字体间切换。
数值:
normal-如果该标志继承父元素的small-caps设置,则关键字normal将font-variant设置为正常字体。
small-caps-把小写字母显示为字体较小的大写字母。
4、font-weight
×能:
用于设置字体灰度,生成字体的深,浅版本。
数值:
正常灰度-normal
相对灰度-bold,bolder,light,lighter
梯度灰度-取值如下:
100,200,300,400(相当于normal),500,600,700(相当于bold),800,900。
5、font-size
×能:
用各种度量单位控制文本字体大小。
数值:
有四种数值方式
绝对尺寸-用具体字号表定义字体大小,可以取下列数值之一:
xx-small,x-small,small,medium,large,x-large,xx-large。
不同字体有不同的数值。
相对尺寸-larger,smaller,产生的尺寸是相对于父容器字号而言的。
长度-用毫米(mm),厘米(cm),英寸(in),点数(pt),象素(px),pica(pc),ex(小写字母x的高度)或em(字体高度)作为度量单位。
百分比-相对于其父元素字体大小的百分比。
6、font
×能:
简写属性,提供了对字体所有属性进行设置的快捷方×。
语×:
{font:
字体属性1字体属性2...字体属性n}
数值:
字体属性值为前面已列出的值,此外还可以设置行间距属性line-height(见文本属性),内容的顺序为:
font-style;font-variant;font-weight;font-size;line-height;font-family。
可省略部分属性,属性值间用空格分开。
例子:
让字体美起来
你可能正建立自己在网上的家-WEB页,又或者它已经被你安置在网络某一角里。
无论出于什么目的,你都希望有更多的指导,告诉你该如何更好的布置家。
在目前许多的指导中,他们都在诉说,应该加一点声音或者一个说话的场地。
的确我们都需要它,但我希望关心更多WEB家里底层的东西,比如如何把字体弄的漂亮些,或者让页面颜色变的活泼些,让访问者增加“看欲”,还有更多你曾经都没有关注的细微之处。
今天,我们首先来探讨页面的字体。
一、html中定义字体
字体的确是很好打交道的,一开始制作页面,它就以默认的样式显示。
随着逐步的深入,你会改变一下默认的设置,增大或者减小字体。
一般字体默认的标签格式:
<p>田涛</p>
接下来,我们把字体设置为黑体或者宋体字样式,它的标签如下:
<p><fontface="黑体">田涛</font></p>
在以上格式里,我们引出了字体的标签元素<font></font>.该标签具有下面三个属性值:
size="..."设置字体的大小,一般从1到7,它的默认值是+3,每次改变字体都是+3或者-3。
color="..."字体颜色的设置。
定义颜色可以利用RGB的16进制值,比如:
color=“#ffffff”。
也可以直接利用颜色英文来定义,比如:
color=“white”
face="..."字体样式的设置,比如:
face=“黑体”。
或者face=“黑体,宋体”。
后者的格式,每当浏览器访问第一种字体失败后,浏览器就会访问第二种字体,依此类推。
下面是一个完整的字体格式:
<fontface="黑体"size="2"color="#FFFFFF">田涛</font>
HTML还提供了以下字体样式标签:
1.六个标题样式
从h1到h6,如:
<h1><fontface="黑体"size="2">田涛</font></h1>
2.字体风格
斜体字:
<em>田涛</em>
粗体字:
<strong>田涛</strong>
斜体+粗体字:
<strong><em>田涛</em></strong>
3.定义文本
定义大字体
<big>田涛</big>
定义小字体
<small>田涛</small>或者<small><small><small>田涛</small></small></small>
如果你在字体标签中设置了size="...",那么<big>标签将不起作用。
除了以上常用字体标签元素外,HTML还包含很多其它标签,但不我们不多用。
二.CSS(层叠样式表)改变字体
在过去页面上的字体是一成不变的,静静的呆在那。
当DHTML(动态网页)出现后,我们能有更多方式控制字体了。
一般来说,动态字体的实现核心是CSS(层叠样式表)加JavaScript。
使用了以上两项技术后,字体就能产生许多变化。
1.CSS定义字体的标签元素
font-family:
设置字体字族。
<spanstyle="font-family:
黑体,宋体(GB)">田涛</span>
font-sytle:
设置字体类型。
<spanstyle="font-style:
normal">田涛</span>
font-weight:
设置字体的字重。
<spanstyle="font-weight:
bold">田涛</span>
font-size:
设置字体大小。
<spanstyle="font-size:
14pt">田涛</span>
font-decoration:
修饰文本字体,比如带下划线“underline”。
<spanstyle="text-decoration:
underline">田涛</span>
对于以上的字体设置,我们可以采用一个方便的方×:
<spanstyle="font:
normalbold14pt黑体">田涛</span>
在style定义的次序是:
font-style,font-weight,font-size,font-family.
2.CSS定义字体和<font>定义字体的冲突
对于CSS定义字体和<font>定义字体,我们都要注意以下问题,比如有以下字体设置:
<spanstyle="font-family:
宋体(KSC);font-size:
200pt"><font>田涛</font></span>
这时侯字体大小将以font-size:
200pt的定义来设置。
但如果你在<font>中加入size属性,比如:
<spanstyle="font-family:
宋体(KSC);font-size:
200pt"><fontsize="5">田涛</font></span>
这时侯,字体的大小以size的设置为准,font-size:
200pt将不起作用。
其它的属性也是一样。
如果你无需动态字体,就利用HTML4.0的<font>来定义字体,需要动态字体时,就需要使用CSS和JavaScritp来定义字体及引发事件。
3.定义CSS字体属性类
一般我们在制作动态字体时,我们会首先利用CSS定义出页面字体的整个属性,然后在页面中引用,而不用对每段文本进行设置,这也是实现动态字体首先一步。
<html>
<head>
<styletype="text/css">
.tt2{font-family:
"黑体";font-size:
16px;font-style:
normal;line-height:
17px}
</style>
</head>
<body>
<pclass="tt2">田涛</p>
</body>
</html>
在以上代码中,“田涛”两个字引用了.main_2类定义的字体样式。
当然你可以在<style></style>中定义不同的字体样式,以便页面中根据不同字体加以引用。
比如:
<html>
<head>
<styletype="text/css">
.tt1{font-family:
"宋体";font-size:
15px;font-style:
normal;}
.tt2{font-family:
"黑体";font-size:
16px;font-style:
normal;}
</style>
</head>
<body>
<pclass="tt1">田涛</p>
<pclass="tt2">田涛</p>
</body>
</html>
三.让字体动起来
要让字体动起来,我们可以利用本身CSS的事件或者让JavaScript引发事件。
1.CSS引发事件
例一
<html>
<head>
<styletype="text/css">
<!
--
a:
link{color:
black;text-decoration:
none}
a:
visited{color:
white;text-decoration:
none}
a:
hover{color:
blue;text-decoration:
underline}
-->
</style>
</head>
<body>
<p><ahref="
</body>
</html>
link定义的是链接在页面显示的颜色(黑色)及链接没有下划线,visited定义的是单击链接后的颜色(白色),hover定义的是指向链接时的动态颜色。
以上实例表示,当指向链接“田涛”后字体颜色从黑色变成蓝色,并加下划线,单击链接后,链接颜色变成白色。
例二
<html>
<head>
<title></title>
</head>
<body>
<ponmouseover="this.style.fontSize=200"onmouseout="this.style.fontSize=100">田涛</p>
</body>
</html>
以上实例是利用内联改变字体样式,当鼠标指向“田涛”时字体因为定义了this.style.fontSize=200,这两个字放大至200pt,当鼠标移开“田涛”时,因定义了this.style.fontSize=100,这两个字体缩小到100pt.
2.JavaScript引发事件
<html>
<head>
<style>
H1.italic{font-style:
italic}
H1.bold{font-style:
bold;}
</style>
</head>
<body>
<scriptlanguage="JavaScript">
functionchangeHead(){
if(H1_1.className=="bold"){
H1_1.className="italic"}
else{
H1_1.className="bold";}
}
</script>
<h1id="H1_1"class="bold"onmouseover="changeHead()"onmouseout="changeHead()">田涛</h1>
</body>
</html>
在上面的实例当中,我们首先定义了两个CSS类H1.italic和H1.bold,然后利用JavaScript脚本定义函数changeHead(),最后在需要的地方引发事件执行定义好的函数。
这里我们引发了两个单击事件onmouseover和onmouseout。
在这里我还要说一点,因为你定义了H1两个类H1.italic和H1.bold,所以当你在引用时,要首先设置class="bold",表示字体以bold样式出现。
然后,移动鼠标到“田涛”上,触发了事件一,移开“田涛”时,触发了事件二。
对于动态字体,我们还有很多方×来完善它。
只是在考虑利用动态字体时,需要了解不同浏览器会产生不一样的结果。
这时侯,就需要不停测试,来找到一个两全其美的方×。
最后,希望你在看完这篇文章后,找一点CSS及JavaScript的资料来看,因为它们才是实现所有“梦想”的工具。
CSS应用小技巧十四例
CSS是CascadingStyleSheets的简称,中文译作“层叠样式表单”,我把它叫作“层叠样式表”,我感到这样顺口一点,没别的意思。
实际上它是一组样式。
你可能对CSS这个名词比较陌生,实际上无论你用InternetExplorer还是NetscapeNavigator在网上冲浪,几乎随时都在与CSS打交道,在网上没有使用过CSS的网页可能不好找。
不管你用什么工具软件制作网页,都有在有意无意地使用CSS。
用好CSS能使你的网页更加简炼,为什么同样内容的网页,有的人做出来有几十KB,而高手做出来只有十几KB,CSS在其中的作用是不言而喻的。
我把我在使用CSS中的一些小经验以及一些网友来信提问的问题整理出来,供诸位参考。
1、CSS在网页制作中一般有三种方式的用×,那么具体在使用时该采用哪种用×?
当有多个网页要用到的CSS,采用外连CSS文件的方式,这样网页的代码大大减少,修改起来非常方便;只在单个网页中使用的CSS,采用文档头部方式;只有在一个网页一、两个地方才用到的CSS,采用行内插入方式。
2、CSS的三种用×在一个网页中要以混用吗?
三种用×可以混用,且不会造成混乱。
这就是它为什么称之为“层叠样式表”的原因,浏览器在显示网页时是这样处理的:
先检查有没有行内插入式CSS,有就执行了,针对本句的其它CSS就不去管它了;其次检查头部方式的CSS,有就执行了;在前两者都没有的情况下再检查外连文件方式的CSS。
因此可看出,三种CSS的执行优先级是:
行内插入式、头部方式、外连文件方式。
3、在Dreamweaver3中如何使外部文件式CSS?
在Dreamweaver3中使用外连文件式CSS并没有特殊要求,同样是用记事本创建一个*.css文件,在网页的〈head〉与〈/head〉之间加上一句这样的代码:
〈linkrel="stylesheet"href="在这里填上你的CSS文件地址(相对路径+文件名)"type="text/css"〉就行了。
4、如何用Dreamweaver3快速创建CSS外连式文件?
对于一个初接触CSS的网页设计人员来讲,要用记?
嗟谋嗉鳎ゴ唇ㄒ桓鯟SS外连式文件是相当困难的。
由于Dreamweaver3对CSS支持的很好,用它来帮助就轻松多了。
具体可以这样*作:
1)先在纸上写好在网站的网页中可能要用到的格名称,然后在Dreamweaver3的编辑窗中调出CSS面板,一个一个地定义,并在一个空白页上适当地写一点相关内容,边定义边试用,效果不满意,立即修改;
2)全部定义好后,再用记事本创建一个空的CSS外连式文件,把在〈head〉与〈/head〉之间的那段定义好的CSS复制到CSS文件中去,就大×告成了。
整个过程就是点鼠标,方便吧?
5、在Dreamweaver3中采用行内插入式CSS要手动写代码吗?
不用!
先用CSS面板定义好要用的CSS,然后,在要插入CSS的标记插入:
style="",再把你刚才定义的CSS从〈head〉后面拖到这个双引号中来,把花括号以外的部分删去就行了。
6、在方档头部方式和外连文件方式的CSS中都有“〈!
--”和“--〉”,好象没什么用,不要可以吗?
这一对东东的作用是为了不引起低版本浏览器的错误。
如果某个执行此页面的浏览器不支持CSS,它将忽略其中的内容。
虽然现在使用不支持CSS浏览器的人已很少了,由于互联网上几乎什么可能都会发生,所以还是留着为妙。
7、如何给一部分文字加背景色?
给文字加上不同颜色,在DW3中只要在属性面板上选取文字的颜色就行了,非常方便,但要给部分文字加不同的背景色却没有相应的×能,我们可以先做一个定义背景色的CSS(如:
bgstyle),在DW3中点几下鼠就完成了。
如一个定义淡黄色背景的CSS是这样的:
〈styletype="text/css"〉
〈!
--
.bgstyle{background:
#FFFFCC}
--〉
〈/style〉
在要用时选取那段文字,再在CSS面板上点一下“bgstyle”就行了。
8、如何给部分文字加背景图像?
与加背景色*作类似,中是在背景在选择加载图象就是了,一个定义好的加背景图象的CSS例子的代码是这样的:
〈styletype="text/css"〉
〈!
--
.imgbgstyle{background-image:
url(logo.gif)}
--〉
〈/style〉
在要用时选取那段文字,再在CSS面板上点一下“imgbgstyle”就行了。
9、如何使页面的背景在文字“滚动”时背景图案静止不动?
要使背景图案不随文字“滚动”的CSS是这样的:
〈styletype="text/css"〉
〈!
--
BODY{background:
purpleurl(bg.jpg);
background-repeat:
repeat-y;
background-attachment:
fixed
}
--〉
〈/style〉
10、如何定义字间距?
在DW3中CSS的属性定义对话框(StyleDefinitionfor.style1)的“Block”上的“letterspaceing”属性定义的就是字间距,它指的是每一个字符之间的额外间距,经长度为单位,正负值均可,当取负值时产生字符挤在一起的效果。
下面代码是一个定义好的字间距CSS例子:
〈styletype="text/css"〉
〈!
--
.style1{letter-spacing:
3px}
--〉
〈/style〉
11、如何给文字加上划线、下划线、删除线和闪烁?
在DW3中CSS的属性定义对话框(StyleDefinitionfor.style1)的“Type”上的“decoration”属性定义的就是这些内容,要注意的是闪烁属性有些版本的浏览器不支持,少用为好。
下面是一个定义好上述效果的CSS例子:
〈styletype="text/css"〉
〈!
--
.style1{text-decoration:
underlineoverlineline-throughblink}
--〉
〈/style〉
其中:
“underline”是定义下划线;“overline”是定义上划线;“line-through”定义的是删除线;“blink”定义的是文字闪烁。
12、如何使网页具有“首行缩进”×能?
由于DW3输入空格不方便,利用“首行缩进”将弥补这个不足。
在DW3中CSS的属性定义对话框(StyleDefinitionfor.style1)的“Block”上的“text-indent”属性定义的就是“首行缩进”,所谓“首行”是指每段内容的第一行,也就是直接按回车键就形成了一个新的段落。
缩进最好以“em”(字符)为单位,比如:
汉字编排要求每段开始缩进两个汉字,设置好的CSS如下所示:
〈styletype="text/css"〉
〈!
--
.style1{text-indent:
2em}
--〉
〈/style〉
在DW3要注意:
在DW3中CSS的属性定义对话框(StyleDefinitionfor.style1)的“Block”上的“text-indent”右面的缩进单位选择框中“ems”指的就是“em”。
13、在用表格进行排版时,能使某一方向上的内容离开表格线一点吗?
可以!
在DW3中CSS的属性定义对话框(StyleDefinitionfor.style1)的“Box”上的“margin”定义的就是内容离开边缘的距离,分别可定义四个方向:
“top”“bottom”“left”“right”。
下面就是定义在左边离开“10px”的CSS例子代码:
〈styletype="text/css"〉
〈!
--
.style1{margin:
0px0px0px10px}
--〉
〈/style〉
14、能给某部分内容加边框吗?
用CSS可以给某部分内容加边框,在DW3中CSS的属性定义对话框(StyleDefinitionfor.style1)的“Border”定义的就是边框线,“top”“bottom”“left”“right”四边可分别定义线的粗细和颜色,这些定义好后不要忘记在下面的“Style”中定义线型,否则将看不边框线,因为默认的线型是“none”。
下面是一个定义了上边框为:
蓝色细线;左边框为:
绿色中粗线的CSS例子:
〈styletype="text/css"〉
〈!
--
.style1{border:
solid;border-width:
thin0px0pxmedium;border-color:
#0000FFblackblack#00FF00}
--〉
〈/style〉
CSS2快速参考
CSS2快速参考
编译/周晓阳
CSS2快速参考之一
自W3C(TheWorldWideWebConsortium)制定了代号为Cougar的HTML的4.0版本以来,存在在Web页面中的动态效果首次被正式的承认了,W3C把动态超文本(DynamicHTML)的实现分为了三个部分:
脚本、支持动态效果的浏览器和CSS。
前两者也许你经常用到,但CSS是什么或许你并不清楚,如果有过制作Web页面的经历,你可能听说过样式单或风格单,如果对此你亦无耳闻,不要紧,只要你想制作出具
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- CSS 语法 手册