专业WordPress设计与开发电子书
WordPress主题制作教程电子书
WordPress 3.0 多站点模式设置
WordPress 宝典 (英文版)

现在位置 >首页 > 所有关于CSS的文章

webdesign category
发表于:2010年06月30日  分类:Web前端  来源:转载  2 条评论  378人喜欢这篇文章 
10个非常棒的HTML5、CSS和Javascript特效展
虽然我并没有真正的去学习和了解HTML5的功能,但是它已经很火了,现在我甚至无法避免。为此需要一段时间来熟习和了解它。这其中我认为苹果公司所起的作用非常大。苹果的iPad刺激接受了HTML5 兴起。虽然我还没有iPad,因为我认为我不需要它。回到HTML5, HTML5改变了游戏,网络的发展,这太令人兴奋了。收集了10个的html5、CSS和javascript效果展示,一起来看看html5的魅力吧! Blob Cute little round shape character. It uses HTML5 canvas plus javascript to create such cool animation and interactivity. Bubble Generate colorful bubbles using HTML5 and of cou...
阅读全文
webdesign category
发表于:2010年06月01日  分类:Web前端  来源:转载  2 条评论  393人喜欢这篇文章 
CSS阴影详解
设计师常常使用一些独特的字体效果和页面效果,阴影是其中一个,它可以让页面中的文字和元素具有立体的效果,从而被突出出来。比如对于文字阴影,传 统的方法可能需要将文字切出来,直接使用图片,如果考虑SEO和网站性能,还可能会使用CSS Sprites等技术将图片整合: h2{ background:url(sprites.png) no-repeat 0 0; font-size:0; text-indent:-9999em;...} h2#title1{background-position:0 -30px;} h2#title2{background-position:0 -60px;} .... 这是很棘手的事情,拼合图片会花掉你的大量时间,而且为了实现更好视觉效果,你可能还要使用高质量的32位png图片,...
阅读全文
webdesign category
发表于:2010年05月01日  分类:Web前端    1条评论  563人喜欢这篇文章 
30个CSS导航技术
We’ve seen innovative ways in which designers and developers have used CSS to innovate upon its shortcomings. Here, you’ll find some of the best ways to use CSS for your website navigation. You’ll find a variety of techniques that truly showcase the capabilities of CSS. In this article, you will find a collection of excellent navigation techniques that use the CSS to provide users with an impressive interface. 1. The Menu menu This another great CSS menu Stu Nicholls that’s unique – hovering over a menu ite...
阅读全文
utility-software category
发表于:2010年05月01日  分类:实用软件  来源:转载  3 条评论  669人喜欢这篇文章 
10款顶级CSS编辑器
CSS编辑器是只专注CSS生成的编辑器. 虽然你可以通过全功能的IDE或源代码编辑器也能攒出css.但CSS编辑器提供的专业功能和特性能帮助你把CSS写的更好,更快. 在这篇文章里,你将看到一些在市场最流行的CSS编辑器. Stylizer Stylizer 是一个可视化的CSS代码编辑器。他提供网页实时预览功能,也提供根据鼠标点击定位目标元素.这些都使得编辑更容易。 Stylizer仅适用于Windows和Mac OS。 Style Master Style Master是一个跨平台的CSS开发程序,提供了一套强大的功能.例如自动完成,支持动态代码编辑和动态生成的网页 (如PHP,NET和Ruby on Rails),和CSS元素分层显示。...
阅读全文
webdesign category
发表于:2010年04月22日  分类:Web前端  来源:转载  添加评论  367人喜欢这篇文章 
4种网页添加CSS样式表的方法
一、使用STYLE属性: 将STYLE属性直接加在个别的元件标签里。 <元件(标签) STYLE=”性质(属性)1: 设定值1; 性质(属性)2: 设定值2; …} 例如: <TD STYLE="COLOR:BLUE; font-size:9pt; font-family:"标楷体"; line-height:150%> 这种用法的优点 是可灵巧应用样式於各标签中,但是缺点则是没有整篇文件的『统一性』。 二、使用STYLE标签: 将样式规则写在<STYLE>…</STYLE>标签之中。 <STYLE TYPE="text/CSS"> <!-- 样式规则表 --> </STYLE> 例如: <STYLE TYPE="text/css"> <!-- BODY { color: BL...
阅读全文
webdesign category
发表于:2010年04月22日  分类:Web前端  来源:转载  添加评论  463人喜欢这篇文章 
利用CSS Sprites技术 实现网页圆角
初步介绍 当然,我知道现在有成千上万个关于 用CSS处理圆角 的教程,但不管怎么说,我仍然想把这篇文章展示给您。也希望您会发现这篇文章会非常有用。需要重点指出的是,这篇教程彻底地应用高级CSS技术,但是,我 会尽力使初学者看起来简单。CSS3 在这里还没有得到完全的应用,所以,知道现在,我会保持W3C验证的有效。 看一下演示 下载 css sprites + 圆角 您还可以参考一下文章: 43个PSD转XHTML, CSS创建布局及导航辅导教程,解析事件背后的每一个步骤 我们将怎样来处理? 我处理圆角的版本是由内置的绝对定位的四个div组成,每个div都有唯一的圆角图片作CSS Sprit...
阅读全文
webdesign category
发表于:2009年04月25日  分类:Web前端    1条评论  2,373人喜欢这篇文章 
CSS浮雕效果
一直在作仿Apple风格的主题,但是Apple有一个文字效果一直不能模仿出来,那就是浮雕效果如图,采用CSS样式制作浮雕效果文字网上搜索了很久,一直没有一个完美的答案,今天从国外网站看到一个利用CSS样式作出浮雕效果的文章,效果非常好,兼容各主流浏览器,不过要应用到WordPress主题上还得具体实践下。 ◆点击这里查看具体效果 原文(英文):http://www.howtocreate.co.uk/textshadow.html
阅读全文
webdesign category
发表于:2009年04月25日  分类:Web前端    1条评论  3,058人喜欢这篇文章 
25个CSS高级进阶教程
如果你对 CSS 的掌握已经到了一定的贯通程度,那么你手中的 CSS 将会为你做很多高级的功能,甚至有时候 CSS 可以帮助解决之前靠 JS 才能解决的问题, 要知道,在 Web 开发过程中, 减少一段 JS 可是对 Web 的运行有足够大的减压作用的。25个 CSS 高级教程,让你更了解 CSS。 1. 纯 CSS 字体渐变和背景渐变 CSS Gradients using pure CSS Background gradients and CSS CSS Gradient Text Effect Pure CSS Text Gradient 2. Z-Index 图像重叠 Understading Z-Index CSS Z-index 3. CSS 边框创意 Create a Scalable Star using using CSS border Border Slants 4. 超...
阅读全文
webdesign category
发表于:2009年04月25日  分类:Web前端    1条评论  2,174人喜欢这篇文章 
常用CSS样式属性
★CSS文字属性: color : #999999; /*文字颜色*/ font-family : 宋体,sans-serif; /*文字字体*/ font-size : 9pt; /*文字大小*/ font-style:itelic; /*文字斜体*/ font-variant:small-caps; /*小字体*/ letter-spacing : 1pt; /*字间距离*/ line-height : 200%; /*设置行高*/ font-weight:bold; /*文字粗体*/ vertical-align:sub; /*下标字*/ vertical-align:super; /*上标字*/ text-decoration:line-through; /*加删除线*/ text-decoration:overline; /*加顶线*/ text-decoration:underline; /*加下划线*/ text-decoration:none; /*删除链接下划线*/ text-transform :...
阅读全文