总结一些CSS技巧
2012-09-13 15:43
549 查看
1.@font-face
一种用其他服务器上的字体的好方法。很明显,如果你不能在托管服务器上找到你需要的字体,你可以在样式中使用这个方法来引入你需要的字体。
2..clearfix
如果你没法清除元素的浮动,这是清除浮动一种方法。你可以对任何HTML元素单独使用这种方法。
3.@media
@media可以设置你当前响应网站的媒介,它能帮助你根据用户的显示器调整网站的宽度。
4.transform:rotate(30deg);
结合这些转换属性和CSS转场效果来创造有意思的动态效果。
5.background-size
这条规则帮助你在网站中适应全屏幕背景。这不像之前的CSS版本必须写很笨重的代码。
6.input[type="text"]
这个input[type="text"]选择器和其他高级选择器把你从一般水平带到高级水平非常有帮助。使用属性选择器来控制输入元素的提交版本或为一个外链增加一个图标这样很不错吧?
7.margin:0auto;
很奇怪,没有任何特定的标准来使块级元素居中。这个方法可以使块级元素在父元素中居中。
8.a{outline:none;}
在浏览你的网站的时候,点一个链接一个巨大的虚线框就横跨整个网页这将严重影响用户的心情。这个“a{outline:none;}”声明将移除这个,但为了易用性别忘了给你的链接也加上:focus状态。
9.overflow:hidden
这是最好的清除还没加载到你CSS里面的元素浮动的方法。使用它使网站的响应速度更快。
10.color:rgba();
PNG图片因为它的透明性使它在网页设计中很流行并广泛使用,但是现在你可以使用下面这种方法同样实现透明。它使用红、绿、蓝三通道并设置其不透明度值来实现透明,像0.5对应%50的不透明度。
view
source
print?
在div前面加上*号,这样你能为IE定制特殊样式。
你能为块级元素或任何被div包裹的类或标签应用上面的样式。你需要设置水平和竖直偏移量、模糊半径和阴影填充色。你可以在这篇文章贴出的那张图片上看看这个例子。
定义你的首字放大很容易,用CSS的first-letter属性就可以自动选定的博客的首字母,这样你可以定制CSS来设计首字母的样式了,像更大字号、斜体等等。
用上面的CSS属性你可以翻转任何图片
使用透明属性,你可以让任何浏览器上的元素透明,这些属性可以在所有主流器上工作,甚至IE(PS:IE6略过?...)
这会在链接锚点后显示URL。你也可以用字体或其他样式定义它。
如果你的网页不能响应或者你想在用手机浏览时有特殊的样式,你可以为手机版定制CSS。
一种用其他服务器上的字体的好方法。很明显,如果你不能在托管服务器上找到你需要的字体,你可以在样式中使用这个方法来引入你需要的字体。
1 | @font-face { |
2 | font-family : Blackout; |
3 | src : url ( "assests/blackout.ttf" ) format ( "truetype" ); |
4 | } |
如果你没法清除元素的浮动,这是清除浮动一种方法。你可以对任何HTML元素单独使用这种方法。
1 | .clearfix:after { |
2 | content : "." ; |
3 | display : block ; |
4 | clear : both ; |
5 | visibility : hidden ; |
6 | line-height : 0 ; |
7 | height : 0 ; |
8 | } |
@media可以设置你当前响应网站的媒介,它能帮助你根据用户的显示器调整网站的宽度。
1 | @media screen and ( max-width : 960px ) { |
2 |
3 | } |
结合这些转换属性和CSS转场效果来创造有意思的动态效果。
1 | .title { |
2 | transform: rotate( 40 deg); |
3 | } |
这条规则帮助你在网站中适应全屏幕背景。这不像之前的CSS版本必须写很笨重的代码。
1 | body { |
2 | background : url (image.jpg) no-repeat ; |
3 | background- size : 100% ; |
4 | } |
这个input[type="text"]选择器和其他高级选择器把你从一般水平带到高级水平非常有帮助。使用属性选择器来控制输入元素的提交版本或为一个外链增加一个图标这样很不错吧?
1 | input[type= "text" ] { |
2 | width : 250px ; |
3 | } |
很奇怪,没有任何特定的标准来使块级元素居中。这个方法可以使块级元素在父元素中居中。
1 | #container { |
2 | margin : 0 auto ; |
3 | } |
在浏览你的网站的时候,点一个链接一个巨大的虚线框就横跨整个网页这将严重影响用户的心情。这个“a{outline:none;}”声明将移除这个,但为了易用性别忘了给你的链接也加上:focus状态。
1 | a { outline : none ;} |
这是最好的清除还没加载到你CSS里面的元素浮动的方法。使用它使网站的响应速度更快。
1 | .container { |
2 | overflow : hidden ; |
3 | } |
PNG图片因为它的透明性使它在网页设计中很流行并广泛使用,但是现在你可以使用下面这种方法同样实现透明。它使用红、绿、蓝三通道并设置其不透明度值来实现透明,像0.5对应%50的不透明度。
view
source
1 | .btn { |
2 | color : rgba( 0 , 0 , 0 , 0.5 ); |
3 | } |
11.IEHTMLHack
1 | div#content { width : 580px } |
2 | * width : 600px } |
12.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 | } |
13.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 | } |
14.用CSS翻转图像
1 | #content |
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 | } |
15.元素透明
1 | .element { |
2 | filter:alpha(opacity= 50 ); |
3 | -moz-opacity: 0.5 ; |
4 | -khtml-opacity: 0.5 ; |
5 | opacity: 0.5 ; |
6 | } |
16.使用CSS显示链接之后的URL
1 | a:after{ content : " (" attr (href) ") " ;} |
17.为手持设备定制特殊样式
1 | <link type= "text/css" rel= "stylesheet" href= "handheldstyle.css" media= "handheld" > |
相关文章推荐
- 个人总结的一些css实用技巧及必须得注意的事项
- CSS代码编写的一些性能优化技巧总结
- 总结一些CSS经典技巧
- 总结一些CSS实用技巧及必须注意的事项
- 在实际项目中总结的一些CSS的使用技巧和重要知识点。
- 总结的一些css实用技巧及必须得注意的事项:
- 近期学习javascript和jquery遇到一些问题的技巧知识总结
- 写出健壮Bash Shell脚本的一些技巧总结
- css星级效果总结 取别人另加入自己的一些东东
- jquery的一些技巧总结(转载)
- php一些错误处理的方法与技巧总结
- 一些CSS技巧
- 宏定义的一些使用技巧总结
- 再总结一些技巧
- 总结了一些常用的比较细节CSS和HTML代码的用法
- 【Java学习】eclipse,javaWeb项目的一些技巧,经验总结,持续更新
- CSS的一些问题总结
- 在DW中CSS编码需要注意和掌握的一些技巧
- 有关U-Boot调试的一些技巧总结
- 用python爬虫抓站的一些技巧总结 zz