CSS教程之CSS使用基本教程(2) 使用体例

只看该作者 · 发表于 2015-1-16 00:17:59

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

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

x

学习这篇入门教程之前，请确定你已经具有了一定的HTML基础。
<P>Ｃ　Ｓ　Ｓ　的　声　明　方　式
　　这章节将入手下手为您先容ＣＳＳ的使用。固然一入手下手要先容的是怎样往创建个款式表（StyleSheets），包含了声明的体例和使用在网页上的办法，最後还会为您概述一下ＣＳＳ的一些特征。大要来讲，ＣＳＳ的声明有三种体例：
1、基础声明：最典范的ＣＳＳ声明体例。
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%}
如许子的声明体例其实不会相互冲突，由于所声明的性子是分歧的。假如不当心对一样一本性质作了反复的声明，则只要後来声明的设定值才会产生感化。
　　要附带提一下的是，在您的声明中，只需您的格局准确就会被承受，而不管是巨细写、空缺或换行都不会对显现的了局有影响的，您可依本人习气来编写。

Ｃ　Ｓ　Ｓ　的　应　用　方　法
　　接上去要为您先容的是将所创建的款式表使用在网页上的四种基础办法。
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">

</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">

</STYLE>
比方：
<STYLETYPE="text/css">

</STYLE>
要注重的是，行末的分号是相对不成少的！牢记牢记！
　　很分明的，不论是LINK仍是@import的用法都大概能够间接套用别人现有的款式表。不外，基於网路的礼节，这类事别做的好，最少也应当知会对方一声，要先获得人家的批准才行！
　　而四种使用办法各有其优弱点，您能够综合地利用，其实不会互相冲突。可是假如不异的性子属性赶上反复的声明的话，就要考量套用优先权的成绩了！一样平常来说，优先权的按次有以下的几点准绳：
网页计划者的款式设定＞利用者的款式设定＞扫瞄器的款式设定
STYLE属性的款式设定＞STYLE标签款式设定＞链结出去的款式设定
後面声明的款式设定＞后面的款式设定
所谓『链结出去的款式设定』指的就是用下面提到过的LINK标签与@import引进这两种使用体例所链结出去的的款式设定。
　　以上就是ＣＳＳ最基础的声明与使用的办法先容，有了这些基础的熟悉与办法，您已能够入手下手创建您的款式表！除下面提到的基础的声明与使用的办法以外，另有别的的声明与使用的办法，将为您鄙人一章中再作先容。

支持浏览器的向后兼容，也就是无论未来的浏览器大战，胜利的是IE7或者是火狐，您的网站都能很好的兼容。

只看该作者 · 发表于 2015-3-13 06:10:39

俗话说：兴趣是最好的老师。做每一件事都离不开兴趣的驱动。兴趣是自学技术需要迈出的第一步。在学习的过程中，我们难免会遇到各种各样的问题。

只看该作者 · 发表于 2015-3-13 06:10:38

使用所见即所得的接口，亦有HTML编辑的功能。它现在有Mac和Windows系统的版本。原本由Macromedia公司所开发。

只看该作者 · 发表于 2015-3-6 17:39:42

是当我和赵丽芬崔明艳老师进行交流后，很快就了解了还不太清楚的内容和并不了解的知识（像布局表格、绘制布局单元格等）。

只看该作者 · 发表于 2015-2-20 11:52:47

学Dreamweaver技术的过程其实是一个增加信心的过程。

只看该作者 · 发表于 2015-2-7 03:18:46

在Dreamweaver里可以很轻松的完成图文混排、插入图片、插入Flash、插入音频、插入视频。

只看该作者 · 发表于 2015-2-1 08:50:21

Dreamweaver是集网页制作和管理网站于一身的所见即所得网页编辑器，在编辑时能同时看到源码和设计界面，非常方便新手学习制作网页。

只看该作者 · 发表于 2015-1-24 10:21:57

Dreamweaver是集网页制作和管理网站于一身的所见即所得网页编辑器，在编辑时能同时看到源码和设计界面，非常方便新手学习制作网页。

只看该作者 · 发表于 2015-1-18 06:00:51

dreamweaver8中文版下载(dw)对专业网页图像设计的FIREWORKS，三者被MACROMEDIA公司称为DREAMTEAM(梦之队)。

		自动登录	找回密码
密码			立即注册

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

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

相关帖子