‘CSS之美’ 的存档; 分类

利用CSS突出显示不同类型的链接

最近在看《精通CSS-高级Web标准解决方案》,发现有些笔记是必须记下的,以备不时之需~

我们在浏览网站的过程中,不会刻意地去观察要点击的链接是指向本站点上的另一个页面,还是指向另一个站点。或许我们都有过这样的经历:单击一个链接,期望浏览器转到当前站点上的另一个页面,但是不经意间却点击的这个链接却指向了其他站点。

当然,为了避免这么做也有有效的解决方法,例如采取在新窗口中打开链接。今天要说的是另外种解决方法。比如说,我们能够让外部链接看上去和本站的链接不太一样,为此,我们可以在外部链接旁边加上一个小图标,让他与众不同~

实现这种效果最容易的方法只要在所有的外部链接上加上一个类,然后将图标作为背景图像应用。这个方法可以实现我们想要的效果,但是如果页面多了,那将变得非常繁琐。(因为我们必须要有足够的耐心去在每个外部链接上添加类)。除此之外,我们可以利用属性选择器让CSS判断链接是否是外部链接。

点击我先看Demo

经过测试,可以发现除了IE6以外的其他主流浏览器都可以完美支持。下面来分析下网页源码。 阅读全文

CSS样式指南:提高CSS的可读性

     当完成一项前端的工作之后,许多人都会忘记该项目的结构与细节。然而代码并不是马上就能完全定型,在余下的时间里还有不断的维护工作,而这些工作也许不会是你自己完成。所以,结构优良的代码能很大程度上优化它的可维护性。下面列出五种提高CSS文件可维护性的方法,也就是一种较好的CSS样式指南。

1.分解你的样式

对于小项目,在写代码之前,按页面结构或页面内容将代码分为几块并给予注释。例如,可以分别将 全局样式、布局、字体样式、表单、评论和其他分为几个不同的块来继续工作。

而对于较大的工程,这样显然不会有什么效果。此时,就需要将样式分解到几个不同的样式表文件。下面的master stylesheet 就是这一方法的例子,它的工作主要是导入其他样式文件。使用这一方法不仅能优化样式结构,而且有利于减少一些不必要的服务器请求。而分解文件的方法就有许多种,master stylesheet 使用了最常见的一种。 阅读全文

利用CSS等比例缩小图片

图片等比缩放不必需要后台代码的控制,前台CSS技术完全可以几句CSS代码来完成。

把一副大图片按比例缩小到某个尺寸,对于现代浏览器,直接使用max-width和max-height两条CSS属性即可。

    对于IE 6.0及以下版本,以上两条CSS属性均不会被理会。之前处理这种事情,我们往往会借助Javascript,然后为图片加上onload事件。例如:

    这固然能解决问题,但是对以后页面的升级会带来麻烦——随着浏览器对CSS支持的完善,我们迟早会把图片上的onload事件统统去除。该是Expression的Show Time了,既然IE支持通过Expression在CSS中放置一些脚本,而这段脚本又只是提供给IE 6.0及以下版本使用,那么把它写到Expression中再合适不过。 阅读全文

页面标签元素的合理使用有利于SEO优化

        搜索引擎是通过分析网页源代码来分析页面文本信息的逻辑性,所以在编写网页代码的时候一定要尽可能使用合适的标签来体现文本表达的层次感,也即是让搜索引擎“看懂”哪些文本信息要重于其他部分。

  1、标题标签

  在Html代码中,标题的标签一共6个,它们的具体代码表现形式分别是:“<h1>标题1</h1>”、“<h2>标题2</h2>”、“<h3>标题3</h3>”、“<h4>标题4</h4>”、“<h5>标题5</h5>”和“<h6>标题6</h6>”,其中标题1的逻辑权重最大,其他的标题重要性随着h后的数字增大而减小。在搜索引擎的文本分析中,标题的信息权重要比文章正文的大,所以我们尤其要注意内容标题的规划和书写。

  一篇文章中可能会出现很多标题,诸如正文大标题、副标题、段落标题等。我们应该根据标题的逻辑重要性分配合适的标题标签,正文大标题应该是<h1>,副标题可是是<h2>,而段落标题则可分配<h3>,其他的就可以以此类推了。我们不建议所有的标题都采用<h1>标签,这样不能向搜索引擎阐述哪些标题应该比其他的标题更加重要,因而显得标题没有层次逻辑性。 阅读全文

使用css控制DIV透明度

CSS样式的filter(滤镜效果)对HTML的一些标记设置滤镜效果。
黑白照片 filter: gray;
X光照片 filter: Xray;
风动模糊 filter: blur(add=true,direction=45,strength=30);
正弦波纹 filter: Wave(Add=0, Freq=60, LightStrength=1, Phase=0, Strength=3);
半透明效果 filter: Alpha(Opacity=50); 阅读全文