-
- 关于CSS的十件事
CSS 网站设计 网页设计 1.常规操作还是灵活匹配:假设你要样式化页面中一个<h1>header,可选择操作有:
*用CSS规则h1{...定义所有的<h1>标记
*在对象实际位置进行样式定义,举个例子:<b>位于标记<p>的内部,在定义的时候你应该这样p b{...
*针对某个特定的类型进行定义,为你想定义的标记<h1>添加class="myheader",然后使用CSS规则 .myheader{...
*仅仅定义个别<h1>header,你可以为标记<h1>添加id="myheader",然后使用CSS规则#myheader{...
当然你也可通过不同的方式混合使用上面的规则:
要定义所有位于类型为"magicform"的表单中的类型为"barleymash"的<h1>标记,你可以这样form.magicform h1.barleymash
2.CSS的关键是在你的页面中使用简洁的HTML代码,然后编写CSS"控制规则"来样式化页面中的对象.页面保持清晰有条不紊看上去非常棒.这样你的Html页面可以在移动设备和标准浏览器中运行.这就是CSS的要点.CSS中同时也能够利用控制规则进行操纵页面。要合理地实现css与html标记匹配起来,其实它们两个更像是同一种对话,所以两者一定要衔接好并且能够保持同步。
3.掌握专利技术JM3 Gasbag Model:一个CSS布局设计就好比一个装满对象的大袋子.每一个对象均能够对外施加压力(联想一下煤气泄露,如同你的布局设计)大多数情况下,压力表现出来(margins, padding,以及float都是跟"推"密切相关的属性)通过修改CSS规则,你判断压力,在浏览器中观察你的页面好比是摇晃一下袋子,会显现出压力集中在什么区域产生影响,这就是CSS-管理压力对象保持平衡的秘密.对付压力,一次性应用过多的属性,冲突就会导致你的对象到处拥挤,对象相互之间以及袋子会被扎出许多洞来.页面漏洞百出,实在是没劲.要产生居中的效果,设置margin-left:auto ,margin-right:auto;这样做是有效的,因为你平衡了分布在左右两侧的压力,于是元素就像放置在两块磁铁中间的铁球一样被完美保持在了中间位置。
4.获取目标:规则匹配一般来说需要花费很多的时间,不妨先使用color:red;这个属性,它既书写简便又利于观察. 一旦你看到HTML页面中的文本变为红色,说明规则匹配正确.这时你会知道你的规则可以在文档中正确的部分生效,然后,删除color:red;替换成原来你想实施的规则语句.
5.GasbagCorollary 1:JM3 Gasbag Model 只适用于使用默认的CSS"telative"定位模式.当然也可能适用于"absolute"的定位模式(通过给定精确的坐标定位每个模块的布局方式),但是千万不要轻易这样做,一旦文本或者图象的数量有所变动它会花费你很长时间来重新布局并且使你的页面看上去很糟糕.只有那些怪异的出版设计师愿意那样做。
6.规则A:Div是容器,<span>是文本,<div>是有高度,宽度,队列可以与之打交道。还有:一个<div> 的高度是指它其中内容的高度(文本、图像或者其他<div>).<sapn>标记用于文本中的分割,正因他们只在成一条直线的文本中有意义,所以被称为"inline"元素,其他的标记如:bold(b),italic(i),underline(u)等,他们被称为是< span>/元素。
7.规则B-Divs和Spans:CSS中的混合语言是主要是<div>和<span>,两者均没有默认的外观,所谓的 <div>以及<span>不过是一些容器和在文本中的线。它们其实也是比较简单的标记。
不要使用<div>来标记文本,也不要将<span>直接用于“袋子”,这样你的布局工作才会变得容易。
8.CSS主要分成三个级别:应用于较多数量的页面(通过使用扩展名为.css的文件)适用于单一页面(通过定义一个样式代码块),还有就是应用于页面内部明确的标记(通过在标记内部添加style"..."属性),当你完成一个页面布局设计,把所有的CSS代码转换为一个独立的css文件是一个不错的主意-你可以到处使用它。当你测试代码时,仅仅将此CSS文件内容复制到HTML页面内部的样式代码块中(这对你来说很容易做到)然后你就不必在两个文件之间来回切换.当样式代码定下来的时候再修改原CSS文件(我认为这段话作者的意思是:不断备份一个稳定的测试代码)。
9.其实不是每个人都需要太关注技巧的:许多CSS指南的书都一再强调“要使你的页面适应多浏览器环境,你应当学习很多“CSS技巧”。诸如此类都是废话。它对你来说毫无用处。其实学习css 也并不是一个非常痛苦的过程,语言是固定的,重要的是人。可以打开一些参考网站做参考。
10.代码书写其实很简单,但是能够把它写成简洁高效的代码却很不容易,即时是入行多年的人恐怕也会有困难。高效的代码不能使你的页面载入更快,但是它能够让你的编码工作更容易。 three tips:
*精简你的规则语句:将(font-family, font-size) (margin-left, margin-right)转换为单行规则margin:0px 10px 10px 10px;
*当你看到一个人的层叠样式表有许多像下面这样的行:
.redtext {font-family: Arial, Helvetica, sans-serif;color: red;}
.bluetext {font-family: Arial, Helvetica, sans-serif;color: blue;}
这就表示他们可能不知道这个技巧。
*使用“,”一次性将同一CSS样式规则应用到多种类型的HTML标记中: p, b, i {… 使用一行代码完成把样式应用到段落、粗体、 以及斜体文本的任务。
- 上一篇: 七点让您设计出与众不同的网站banner
- 下一篇: 巧用谷歌工具做营销——网站优化不再难
- 关于CSS的十件事