10个非常不错的CSS技巧
- - CSDN博客Web前端推荐文章在这里，巧妙的运用CSS的技巧，可以让你不用修改HTML就能得到很好的博客或者模板外观. 我收集了一些非常有用的CSS技巧让我们设计博客时更炫更酷. 设计模版和博客主题时，我经常“不断推敲和尝试CSS（Hit and Trial CSS ），我只看哪种配色方案和哪种CSS属性的结合能使页面的元素更完美.
10个非常不错的CSS技巧
标签：
css
技巧
| 发表时间：2013-05-01 07:43 | 作者：tigerdsh
出处：http://blog.csdn.net
在这里，巧妙的运用CSS的技巧，可以让你不用修改HTML就能得到很好的博客或者模板外观。我收集了一些非常有用的CSS技巧让我们设计博客时更炫更酷。
设计模版和博客主题时，我经常“不断推敲和尝试CSS（Hit and Trial CSS ），我只看哪种配色方案和哪种CSS属性的结合能使页面的元素更完美。对了。之所以说是“不断推敲和尝试CSS”是因为在得到了满意的效果之前我会去尝试想尽一切方法。使用这些不同的CSS属性中，我用的最多的是列出来的这些。
从我开始写博客，我就接触了CSS，我爱设计也爱CSS。博客让我学了PHP，CSS甚至HTML。这里我收集了10个很不错的CSS技巧，你可以用在你的博客或个人网站上。它可以帮你很好地整理你的博客元素并让他们看起来蛮酷的。下面开始我们的内容，希望你会喜欢它。
1、简单的方法调整博客图片大小
1 |
.content img { |
2 |
height : auto ; |
3 |
width : 500px ; |
4 |
} |
这是最简单高效的重新调整你博客图片尺寸的方法。它把内容里面的所有图片的宽度设为500像素，高度根据宽度自适应。我现在就是用这个方法重新定义了这个博客内容里面的图片大小。
2、IE HTML Hack
1 |
div#content { width: 580px } |
2 |
* html body div#content { width: 600px } |
在div前面加上*号，这样你能为IE定制特殊样式。
3、CSS阴影
1 |
.shadow { |
2 |
-moz-box-shadow: 3px 3px 5px
6px #ccc ; |
3 |
-webkit-box-shadow: 3px 3px 5px
6px #ccc ; |
4 |
box-shadow: 3px 3px 5px
6px #ccc ; |
5 |
} |
你能为块级元素或任何被div包裹的类或标签应用上面的样式。你需要设置水平和竖直偏移量、模糊半径和阴影填充色。你可以在这篇文章贴出的那张图片上看看这个例子。
4、CSS首字放大
1 |
p:first-letter { |
2 |
display: block ; |
3 |
float: left ; |
4 |
margin: 5px 5px 0 0 ; |
5 |
color: red ; |
6 |
font-size: 1.4em ; |
7 |
background: #ddd ; |
8 |
font-family: Helvetica ; |
9 |
} |
定义你的首字放大很容易，用CSS的first-letter属性就可以自动选定的博客的首字母，这样你可以定制CSS来设计首字母的样式了，像更大字号、斜体等等。
5、用CSS翻转图像
1 |
#content img { |
2 |
-moz-transform: scaleX( -1 ); |
3 |
-o-transform: scaleX( -1 ); |
4 |
-webkit-transform: scaleX( -1 ); |
5 |
transform: scaleX( -1 ); |
6 |
filter: FlipH; |
7 |
-ms-filter: "FlipH" ; |
8 |
} |
用上面的CSS属性你可以翻转任何图片
6、移除被点链接的点框
1 |
a { outline: none } |
或者
1 |
a { outline: 0 } |
你一定注意到了，当你在一些博客里点击链接时，你会看到在这个链接上有点状的边框。你可以通过上面一小段的CSS移掉这些边框。
7、在CSS中使用特殊字体
你可以使用CSS来加载特殊字体，你要做的就是把这个TTF格式的字体上传到服务器上，然后使用字体规则在CSS上导入它。
8、元素透明
1 |
.element { |
2 |
filter:alpha(opacity= 50 ); |
3 |
-moz-opacity: 0.5 ; |
4 |
-khtml-opacity: 0.5 ; |
5 |
opacity: 0.5 ; |
6 |
} |
使用透明属性，你可以让任何浏览器上的元素透明,这些属性可以在所有主流器上工作，甚至IE（PS：IE6略过？...）
9、使用CSS显示链接之后的URL
1 |
a:after{ content : " ("
attr (href) ") " ;} |
这会在链接锚点后显示URL。你也可以用字体或其他样式定义它。
10、为手持设备定制特殊样式
1 |
<link type= "text/css" rel= "stylesheet"
href= "handheldstyle.css" media= "handheld" > |
如果你的博客不能响应或者你想在用手机浏览时有特殊的样式，你可以为你博客的手机版定制CSS。
作者：tigerdsh 发表于2013-5-1 7:43:22 原文链接
阅读：160 评论：4 查看评论
相关 [css 技巧] 推荐：
CSS技巧荟萃：了解CSS页面布局和加载流程
- - 前端观察如果你开发web相关应用或者网站的话，肯定知道CSS对于页面布局的重要性. 在本篇CSS技巧中我们将介绍页面加载的流程来帮助你更好的实现页面布局. 在我们开始正式的介绍页面流程前，我们需要简单了解几种不同类型的html元素，以及它们的缺省显示方式. 这里我们主要重点介绍两个类型的元素：. 如果大家关心html5的话，你应该知道在HTML5中也包含了几个新的元素，例如，section，article等等，但是仍旧遵循这里我们介绍的显示类型.
响应式设计的5个CSS实用技巧
- - Web App Trend正如我在教程 响应式Web设计三步走当中所讲的，响应式的Web设计其实并不难，但是要让元素在布局切换时能够平滑过渡就比较考验技巧了. 现在我分享在编码时常用的五个CSS技巧并举例说明. 这些技巧都是使用简单的CSS属性，如min-width、max-width、overflow 和相对属性值，但是这些属性在响应式设计中发挥着很大的作用.
[讀書筆記] CSS 基礎技巧懶人包
- - Blog.XDite.net前幾天 Code School 的 CSS Cross Country 課程釋出了. 這一集是我相當期待的一集，整理和澄清了非常多「非常基礎但如果觀念不好」就會搞得一塌糊塗的 CSS 知識. 看完把筆記整理在這裡，不過相較於原網站，我寫的算是非常簡陋的版本. 我相當強烈推薦大家購買回去和練習，相信會對自己的 CSS 掌握能力有高度的提升.
【转载】最新的Javascript和CSS应用技巧荟萃
- - HTML5研究小组随着前端技术的发展， javascript和 css在网站和web应用中展现出强大的统治力，特别是随着HTML5和CSS3的标准的成熟，我们可以使用javascript和css开发出你想都没有想到过的特效和动画，在今天的这篇文章中，我们将介绍一组相关CSS和javascript的强大教程和插件，希望大家喜欢.
网页设计师必备的10个CSS技巧
- - 博客 - 伯乐在线CSS是网页设计师的基础，对CSS的了解能使他们能够设计出更加美观别致的网页. 使用CSS技巧来巧妙地处理CSS是非常令设计师着迷的事情. 在CSS的深海世界里有很多有意思的东西，你只需要找到最适合你的就好. 当然我们不可能一下子就记住所有CSS的规则和语法，但为了以后的发展我们还是应该记住那些非常有用的CSS技巧.
打印样式CSS的技巧和要点
- - Web前端 - ITeye博客不经过任何处理而直接打印网站上的页面会得到一个不理想的效果. 我们WEB开发人员可以简单的采用几个要点来使之达到较为合适的效果：. 使用响应式布局设置打印的效果. 打印背景图片和颜色，在合适的时候. 添加显示的网址或页面链接，以供参考. 使用css filter 提高打印的图形效果. 针对打印的样式，而不是屏幕显示样式.
前端工程師必看: 十大 CSS 技巧
- - 小惡魔 - 電腦技術 - 工作筆記 - AppleBOY底下內容來自於原網站，在加上筆者的一些補充. 用 firebug 或 console 來除錯. 在 Firefox 還沒有推出 Developer Tools 時，大家一定是用 Firebug 來除錯，2006 年 Firebug 第一版 release 出來，讓 web 開發者可以更快速的瞭解網站除錯，也可以透過 Firebug 來瞭解網站的 performance.
你需要知道的三个CSS技巧
- - 外刊IT评论各种浏览器之间的竞争的白热化意味着越来越多的人现在开始使用那些支持最新、最先进的W3C Web标准的设备，以一种更具交互性的方式来访问互联网. 这意味着我们终于能够利用更强大更灵活的 CSS来创造更简洁，更好维护的浏览器前端代码. 现在让我们来看一看一些也许你还不知道的让人兴奋的CSS 功能. 在CSS中用attr()显示HTML属性值.
用于响应式设计的9个CSS技巧
- - CSDN博客Web前端推荐文章现在越来越多的网站文本链接已取消下划线，而这已成为一种 WEB设计趋势，尤其是在做响应式网站时. 下面提供一段简单的CSS代码，可以轻松取消文本链接下划线：. tjkdesign.com给大家，里面提供了许多CSS技巧，帮助你在页面中嵌入响应式视频（ . 3.Rollover文本链接. 越来越多的人喜欢在手机上浏览网页，这使得Rollover链接变得越来越流行.