仓酷云

标题: DIV教程之CSS挑选符详解 [打印本页]

作者: 山那边是海 时间: 2015-1-16 10:39
标题: DIV教程之CSS挑选符详解
首先你要知道，当你开始学习DIV+CSS的时候，你要把以前所有用DW画布局表格的思维方法忘的一干二净(如果你以前是用TABLE布局的话)，然而这项技术更适合刚接触网页制作的人。

1、范例选择符

甚么是范例选择符？指以网页中已有的标签范例作为称号的行动符。body是网页中的一个标签范例，div,p,span都是。
以下：

body{}
div{}
p{}
span{}

2、群组选择符

关于XHMTL工具，能够对一组同时举行了不异的款式指派。
利用逗号对选择符举行了分开，如许誊写的长处在于一样的款式只必要誊写一次便可，削减代码量，改良CSS代码布局。
利用时应当注重"逗号"是在半角形式下，并不是中文全角形式。
以下：

h1,h2,h6,p,span
{
font-size:12px;
color:#FF0000;
font-family:arial;
}

3、包括选择符
对某工具中的子工具举行款式指导定，如许选择体例就发扬了感化。
必要注重的是，仅对此工具的子工具标签无效，关于别的独自存在或位于此工具之外的子工具，不该用此款式设置。
如许做的长处在于，帮我们制止过量的id、class设置，间接对所需的元素举行界说。
以下：

h2span
{
color:red;
}
以下：
bodyh1spanstrong
{
font-weight:bold;
}

4、id选择符

依据DOM文档工具模子道理所呈现的选择符，关于一个XHTML文件，个中的每个标签都可使用一个id=""的情势举行一个称号指派，但必要注重，在一个XHTML文件中id是具有独一性而不成以反复的。
在divcss结构的网页中，能够针对分歧的用处举行定名，如头部为header、底部为footer。
XHTML以下：

<divid="content"></div>

CSS以下：

#content
{
font-size:14px;
line-height:120%;
}

5、class选择符

实在id是关于XHTML标签的扩大，而class是对SHTML多个标签的一种组合，class直译的意义是类或种别。
关于XHTML标签利用class=""举行称号指派。与id分歧，class能够反复利用，关于多个款式不异的元素，能够间接界说为一个class。
利用class的长处已不言自明，它对CSS代码重用性有优秀的表现，浩瀚的标签都可以利用一个款式来界说而不必要每个编写一个款式代码。
XHTML以下：

<pclass="he"></p>
<spanclass="he"></span>
<h5class="he"></h5>

CSS以下：

.he
{
margin:10px;
background-color:red;
}

6、标签指定式的选择符

假如想同时利用id和class，也想同时利用标签选择符，可使用以下的体例：

h1#content{}
/*暗示一切id为content的h1标签*/
h1.p1{}
/*暗示一切class为p1的h1标签*/

标签指定式选择符的精度介于标签选择符及id/class选择符之间，是经常使用的选择符之一。

7、组合选择符

关于下面的一切选择符而言，举行组合利用。以下：

h1.p1{}
/*暗示h1下的一切class为p1的标签*/
#contenth1{}
暗示id为content的标签下的一切h1标签
h1.p1,#contenth1{}
/*暗示h1下的一切class为p1的标签和id为content的标签下的一切h1标签*/
h1#contenth2{}
/*id为content的h1标签下的h2标签*/

CSS选择符长短常自在与天真的，能够依据页面的必要，利用各类选择符，只管布局化与优化CSS文件.

使用Div+css所费功夫与收入不成正比，利用table可以大大减少工作量。而上市公司的期望目标不同对Div+css的认同和投入要大一些。

作者: 冷月葬花魂 时间: 2015-1-18 07:44
Dreamweaver是集网页制作和管理网站于一身的所见即所得网页编辑器，在编辑时能同时看到源码和设计界面，非常方便新手学习制作网页。

作者: 分手快乐 时间: 2015-2-4 21:05
Adobe Dreamweaver CS5 软件使设计人员和开发人员能充满自信地构建基于标准的网站。由于同新的 Adobe CS Live 在线服务 Adobe BrowserLab 集成。

作者: 小魔女 时间: 2015-2-10 11:48
在Dreamweaver里可以很轻松的完成图文混排、插入图片、插入Flash、插入音频、插入视频。

作者: 兰色精灵 时间: 2015-3-1 13:10
滚动条)层属性--溢出(visible/hidden/scroll/auto)

作者: 莫相离 时间: 2015-3-10 19:45
还是在Dreamweaver所见即所得添加链接是，可以选中文字或图片然后按下shift键不放鼠标拖出箭头直接指向文件即可。这是比较简单的也是常用的方之一。

作者: 变相怪杰 时间: 2015-3-17 10:11
Adobe Dreamweaver(前称Macromedia Dreamweaver)是Adobe公司的著名网站开发工具。

作者: 飘飘悠悠 时间: 2015-3-24 07:58
在Dreamweaver里可以很轻松的完成图文混排、插入图片、插入Flash、插入音频、插入视频。

欢迎光临仓酷云 (http://www.ckuyun.com/)