仓酷云

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 1087|回复: 8
打印 上一主题 下一主题

[DIV+CSS] CSS教程之CSS使用基本教程(2) 使用体例

[复制链接]
冷月葬花魂 该用户已被删除
跳转到指定楼层
楼主
发表于 2015-1-16 00:17:59 | 显示全部楼层 回帖奖励 |倒序浏览 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
学习这篇入门教程之前,请确定你已经具有了一定的HTML基础。
<P>C S S 的 声 明 方 式
  这章节将入手下手为您先容CSS的使用。固然一入手下手要先容的是怎样往创建个款式表(StyleSheets),包含了声明的体例和使用在网页上的办法,最後还会为您概述一下CSS的一些特征。大要来讲,CSS的声明有三种体例:
1、基础声明:最典范的CSS声明体例。
element{property:value} 用中文来暗示的话,也就是
元件(标签){性子(属性)称号:设定值}
比方:
H3{COLOR:BLUE} 即为一组声明。
2、个人声明:同时声明某个或数个元件(标签)(各元件(标签)间以逗号分开)的一组或数组款式划定规矩(性子)(各组划定规矩间以分号分开)。
元件(标签){
性子(属性)称号1:设定值1;
性子(属性)称号2:设定值2;
...}
或是
元件A(标签A),元件B(标签B),元件C(标签C),...{
性子(属性)名称1:设定值1;
性子(属性)称号2:设定值2;
...}
比方:
TD{
COLOR:BLUE;
font-size:9pt;
}
或是
TD,P,DIV{
COLOR:BLUE;
font-size:9pt;
}
3、分项声明:将很多款式划定规矩分组再分离声明。
元件A(标签A){性子(属性)称号1:设定值1;性子(属性)称号2:设定值2;}
元件A(标签A){性子(属性)称号3:设定值3;性子(属性)称号4:设定值4;}
比方:
TD{COLOR:BLUE;font-size:9pt}
TD{font-family:"标楷体";line-height:150%}
如许子的声明体例其实不会相互冲突,由于所声明的性子是分歧的。假如不当心对一样一本性质作了反复的声明,则只要後来声明的设定值才会产生感化。
  要附带提一下的是,在您的声明中,只需您的格局准确就会被承受,而不管是巨细写、空缺或换行都不会对显现的了局有影响的,您可依本人习气来编写。


C S S 的 应 用 方 法
  接上去要为您先容的是将所创建的款式表使用在网页上的四种基础办法。
1、利用STYLE属性:将STYLE属性间接加在一般的元件标签里。
<元件(标签)STYLE="性子(属性)1:设定值1;性子(属性)2:设定值2;...}
比方:
<TDSTYLE="COLOR:BLUE;font-size:9pt;font-family:"标楷体";line-height:150%>
这类用法的长处是可乖巧使用款式於各标签中,可是弱点则是没有整篇文件的『一致性』。
2、利用STYLE标签:将款式划定规矩写在<STYLE>...</STYLE>标签当中。
<STYLETYPE="text/CSS">
<!--
款式划定规矩表
-->
</STYLE>
比方:
<STYLETYPE="text/css">
<!--
BODY{
  color:BLUE;
  background:#FFFFCC;
  font-size:9pt}
TD,P{
  COLOR:GREEN;
  font-size:9pt}
-->
</STYLE>
一般是将全部的<STYLE>...</STYLE>布局写在网页的<HEAD></HEAD>部分当中。这类用法的长处就是在於整篇文件的一致性,只需是有声明的的元件即会套用该款式划定规矩。弱点就是在一般元件的天真度不敷。
3、利用LINK标签:将款式划定规矩写在.css的款式档案中,再以<LINK>标签引进。
假定我们把款式划定规矩存成一个example.css的档案,我们只需在网页中到场
<LINKREL=STYLESHEETTYPE="text/css"HREF="example.css">
便可套用该款式档案中所制订好的款式了。一般是将LINK标签写在网页的<HEAD></HEAD>部分当中。这类用法的长处就是在於能够把要套用不异款式划定规矩的数篇文件都指定到统一个款式档案便可。弱点也是在一般文件或元件的天真度不敷。
4、利用@import引进:跟LINK用法很像,但必 放在<STYLE>...</STYLE>中。
<STYLETYPE="text/css">
<!--
  @importurl(引进的款式表的位址、路径与档名);
-->
</STYLE>
比方:
<STYLETYPE="text/css">
<!--
  @importurl(http://yourweb/example.css);
-->
</STYLE>
要注重的是,行末的分号是相对不成少的!牢记牢记!
  很分明的,不论是LINK仍是@import的用法都大概能够间接套用别人现有的款式表。不外,基於网路的礼节,这类事别做的好,最少也应当知会对方一声,要先获得人家的批准才行!
  而四种使用办法各有其优弱点,您能够综合地利用,其实不会互相冲突。可是假如不异的性子属性赶上反复的声明的话,就要考量套用优先权的成绩了!一样平常来说,优先权的按次有以下的几点准绳:
网页计划者的款式设定>利用者的款式设定>扫瞄器的款式设定
STYLE属性的款式设定>STYLE标签款式设定>链结出去的款式设定
後面声明的款式设定>后面的款式设定
所谓『链结出去的款式设定』指的就是用下面提到过的LINK标签与@import引进这两种使用体例所链结出去的的款式设定。
  以上就是CSS最基础的声明与使用的办法先容,有了这些基础的熟悉与办法,您已能够入手下手创建您的款式表!除下面提到的基础的声明与使用的办法以外,另有别的的声明与使用的办法,将为您鄙人一章中再作先容。



支持浏览器的向后兼容,也就是无论未来的浏览器大战,胜利的是IE7或者是火狐,您的网站都能很好的兼容。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|仓酷云 鄂ICP备14007578号-2

GMT+8, 2024-5-21 13:21

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表