CSS实例:CSS的10个方法和技巧

2016-02-19 23:42 4 1 收藏

下面是个超简单的CSS实例:CSS的10个方法和技巧教程,图老师小编精心挑选推荐,大家行行好,多给几个赞吧,小编吐血跪求~

【 tulaoshi.com - Web开发 】

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

CSS用于定义网站的UI和将内容从外观中分离。

CSS在几乎所有网站中被广泛应用。让我们花点时间来看看我们编写的样式是否基于比较好的标准。

下面的这些技巧将对CSS初学者在开发中有所帮助,对CSS高手或许也将有某些提高。


索引

这个定义可以帮助你和其他人更多的理解这个网站。这个索引只是一个格式化的文本段落,和CSS注释一样。

给该CSS的作者以一些著作权声明 定义网站的布局[卷数,固定宽度或全屏] 跟踪版本[对多个编辑者和特别更新很有用]


锚点

锚点在CSS中就像书签。锚点让你很方便的浏览你的CSS而不会盲目和混乱,会让一切变得有规律。

锚点在CSS的索引中定义。CSS没有原生的锚点系统,所以我在文档中采用一种比较简单的技术来定义锚点。

这个主意是用一套特定的字符来定义注释。要找到一个锚点,你可以通过复制和查找(搜索)索引中定义的锚点,然后就可以很正确的定位到相关的内容。


多类症

是一个术语,用来描述在HTML中过度使用class定义的现象。

CSS中最美的地方之一就是上下文选择器,让我们使用这个吧:


命名规范

给你的元素声明一个恰当和简洁的名字是一个关键。这真的能够 避免混乱 并能让你更好更快的理解CSS。
事实上这涉及到代码的语义化和可读性,好的命名规则可以让自己和团队的工作更加轻松。


简写

CSS中的缩写是指,定义与单个样式拥有相同属性的一系列样式.
CSS简写可使开发工作变得更加容易,并让你的CSS保持简洁、更小而且更易用。这里是一些示例:

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)
Sprites

合并所有的背景图片到一个单个图片里面,并通过background-position属性来使用这个图片,这就是我们所谓的CSS Sprites的全部。
CSS Sprites可以减少HTTP请求的数量,节省带宽并加快页面加载。同时,可以避免图片闪烁[例如,如果系统或网速比较慢的时候,当鼠标放到一个按钮时加载另外一个图片就可能引起闪烁/中断]。
最好和最著名的使用CSS Sprites技术的例子就是Apple公司官方网站的菜单系统。

图片

来源:http://www.tulaoshi.com/n/20160219/1630461.html

延伸阅读
标签: Web开发
css浮动 结论,非浮动元素可以为后面的浮动元素定位, 但是 浮动元素无法再为其后的非浮动元素定位。 No-float A + Float B + No-float C c和b 会按照A的边界进行定位, !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" HTMLHEADTITLECSS TEST/TITLE st...
标签: Web开发
Source Code to Run html head style type="text/css" !-- body {  margin: 0;  padding: 0;  font-size:12px; } #layout{  background-color: #FFFFFF;  border: 0;  width: 400px;  margin: 0 auto; } .list{  margin: 0px 10px 20px;  text-align: left; } .list ul{  list-style-ty...
标签: Web开发
为了让网页更美观、协调,有的时候需要用到左右等到布局,传统的等高布局是用 javascript 实现的,现在来看看 silence 发明的真正的 CSS 实现的等高布局,其方法主要是采用隐藏容器溢出、正内补丁和负外补丁结合的方法实现的。 下面来看看实际的例子(三列等高),以下面的 XHTML 代码为例: div id="wrap" div id="left&qu...
标签: Web开发
许多网页设计师都喜欢,将两个或者多个容器等高的并排放置,并在里面展示每个容器的内容,就象经典表格布局中的单元格控制几个栏目的位置,也喜欢容器的内容居中或顶部对齐显示。 但是你又不喜欢用table来实现他,那怎么办呢?实现的方法很多,有根据视觉错觉实现的,有用JS控制使高度相等的,还有采用容器溢出部分隐藏和列的负底边...
标签: Web开发
1. 检查HTML元素是否有拼写错误、是否忘记结束标记 即使是老手也经常会弄错div的嵌套关系。可以用dreamweaver的验证功能检查一下有无错误。 2. 检查CSS是否正确 检查一下有无拼写错误、是否忘记结尾的 } 等。可以利用CleanCSS来检查 CSS的拼写错误。CleanCSS本是为CSS减肥的工具,但也能检查出拼写错误。 3. 确定错误...