记得上个月Dejan Cancarevic才为我们介绍了一篇CSS好文“10 best CSS hacks”,想不到他又为我们贡献了一篇力作:Most used CSS tricks,感谢DC。本文章延用了上篇文章的风格,另外还为每个tips添加了效果图,让大家有了更直观的感觉。tips列表如下:
1. Rounded corners without images
<div id=”container”>
<b class=”rtop”>
<b class=”r1″></b> <b class=”r2″></b> <b class=”r3″></b> <b class=”r4″></b>
</b>
<!–content goes here –>
<b class=”rbottom”>
<b class=”r4″></b> <b class=”r3″></b> <b class=”r2″></b> <b class=”r1″></b>
</b>
</div>
.rtop, .rbottom{display:block}
.rtop *, .rbottom *{display: block; height: 1px; overflow: hidden}
.r1{margin: 0 5px}
.r2{margin: 0 3px}
.r3{margin: 0 2px}
.r4{margin: 0 1px; height: 2px}
2. Style your order list
<ol>
<li>
<p>This is line one</p>
</li>
<li>
<p>Here is line two</p>
</li>
<li>
<p>And last line</p>
</li>
</ol>
ol {
font: italic 1em Georgia, Times, serif;
color: #999999;
}
ol p {
font: normal .8em Arial, Helvetica, sans-serif;
color: #000000;
}
3. Tableless forms
<form>
<label for=”name”>Name</label>
<input id=”name” name=”name”><br>
<label for=”address”>Address</label>
<input id=”address” name=”address”><br>
<label for=”city”>City</label>
<input id=”city” name=”city”><br>
</form>
label,input {
display: block;
width: 150px;
float: left;
margin-bottom: 10px;
}
label {
text-align: right;
width: 75px;
padding-right: 20px;
}
br {
clear: left;
}
4. Double blockquote
blockquote:first-letter {
background: url(images/open-quote.gif) no-repeat left top;
padding-left: 18px;
font: italic 1.4em Georgia, “Times New Roman”, Times, serif;
}
5. Gradient text effect
<h1><span></span>CSS Gradient Text</h1>
h1 {
font: bold 330%/100% “Lucida Grande”;
position: relative;
color: #464646;
}
h1 span {
background: url(gradient.png) repeat-x;
position: absolute;
display: block;
width: 100%;
height: 31px;
}
<!–[if lt IE 7]>
<style>
h1 span {
background: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’gradient.png’, sizingMethod=’scale’);
}
</style>
<![endif]–>
6. Vertical centering with line-height
div{
height:100px;
}
div *{
margin:0;
}
div p{
line-height:100px;
}
<p>Content here</p>
7. Rounded corners with images
<div class=”roundcont”>
<div class=”roundtop”>
<img src=”tl.gif” alt=”"
width=”15″ height=”15″ class=”corner”
style=”display: none” />
</div>
CONTENT
<div class=”roundbottom”>
<img src=”bl.gif” alt=”"
width=”15″ height=”15″ class=”corner”
style=”display: none” />
</div>
</div>
.roundcont {
width: 250px;
background-color: #f90;
color: #fff;
}
.roundcont p {
margin: 0 10px;
}
.roundtop {
background: url(tr.gif) no-repeat top right;
}
.roundbottom {
background: url(br.gif) no-repeat top right;
}
img.corner {
width: 15px;
height: 15px;
border: none;
display: block !important;
}
8. Multiple class name
<img src=”image.gif” class=”class1 class2″ alt=”" />
.class1 { border:2px solid #666; }
.class2 {
padding:2px;
background:#ff0;
}
9. Center horizontally
<div id=”contatiner”></div>
#container {
margin:0px auto;
}
10. CSS Drop Caps
<p class=”introduction”> This paragraph has the class “introduction”. If your browser supports the pseudo-class “first-letter”, the first letter will be a drop-cap. </p>
p.introduction:first-letter {
font-size : 300%;
font-weight : bold;
float : left;
width : 1em;
}
11. Prevent line breaks in links, oversized content to brake
a{
white-space:nowrap;
}
#main{
overflow:hidden;
}
12. Show firefox scrollbar, remove textarea scrollbar in IE
html{
overflow:-moz-scrollbars-vertical;
}
textarea{
overflow:auto;
}
分享到:
相关推荐
在深入探讨这25个高级CSS技巧之前,我们先来理解一下CSS本身及其在现代网页设计中的重要性。CSS,即层叠样式表(Cascading Style Sheets),是一种用来描述HTML或XML文档如何呈现的样式语言。随着互联网的发展,CSS...
以下是一些CSS技巧: 1. **选择器优先级**:理解ID选择器、类选择器、元素选择器的权重,以及如何使用!important来强制应用样式。 2. **CSS预处理器**:如Sass、Less等,它们引入变量、嵌套规则、混合等功能,使...
1. **CSS经典技巧20条总结**:这个文档可能包含了20个经过实战检验的CSS技巧,包括选择器的高效使用、浮动和定位的解决策略、动画和过渡的应用等。 2. **CSS实用教程**:可能涵盖了基础到进阶的CSS知识,如盒模型...
本压缩包“css技巧.rar”包含了关于CSS的技巧和资源,旨在帮助网页设计师和开发者提升他们的技能水平。 《css技巧.doc》可能是详细介绍了各种CSS技巧的文档,它可能涵盖了以下内容: 1. **选择器的高效利用**:...
本篇将深入探讨CSS的常用技巧,帮助你提升网页设计的专业度。 1. **选择器的高效使用** - 类选择器(`.class`):通过类名来选择元素,适用于多个元素共享同一样式的情况。 - ID选择器(`#id`):用于唯一标识一...
### CSS常用优化技巧详解 #### 一、使用CSS缩写 使用CSS缩写不仅可以帮助减少CSS文件的大小,还能让代码更容易阅读。虽然具体的CSS缩写规则不在本文详细阐述范围内,但简要介绍一些常见的CSS缩写方法是有益的。 1...
本文将详细介绍一些常用的CSS Hack技巧,以及它们在不同浏览器中的应用。 首先,我们需要明确一点:`!important` 不应被视为一种hack手段。它主要用于提高样式的优先级,而不是用于浏览器兼容性处理。在某些情况下...
本文收集整理了IE7,6与Fireofx的CSS兼容性处理技巧,供大家参考。 CSS兼容常用技巧
【CSS 设置技巧(单位和值与样式设置技巧)】 在CSS中,设置合适的单位和值是创建美观且响应式布局的关键。以下将详细介绍颜色值、长度单位以及样式设置技巧。 一、颜色值 1. 英文命令颜色:最基础的颜色设置方式,...
以下是一些关键的CSS技巧: 1. **使用CSS缩写**:通过使用缩写,如`margin: 0 auto;`代替`margin-top: 0; margin-bottom: 0; margin-left: auto; margin-right: auto;`,可以减少代码量,提高文件加载速度,并使...
### div+css技巧详解 #### 一、div+css主流开发与前台页面布局设计 div+css是目前网页设计中最常用的布局方式之一,它能够帮助前端开发者构建出响应式、可维护性强且易于修改的网站界面。div作为HTML中的一个容器...
### 常用的CSS属性详解与应用技巧 在网页设计与开发中,CSS(层叠样式表)扮演着至关重要的角色,它负责控制页面的布局、颜色、字体...通过实践和探索,你可以发现更多高级和创新的CSS技巧,使你的网页设计更加出色。
**《CSS的超级技巧.txt》**可能包含了CSS的一些高级技巧和最佳实践。例如,如何利用CSS预处理器(如Sass和Less)提高工作效率,使用CSS变量实现模块化设计,或者利用CSS Grid和Flexbox创建灵活的响应式布局。此外,...
收集的一些CSS小技巧,希望能帮助到你,如果你感觉有用,也请你收藏与分享给你的小伙伴们。
这些是最基础也是最常用的选择器。 - **复合选择器**:通过组合基本选择器可以创建更复杂的选择器,比如后代选择器(`div p`)、子选择器(`div > p`)等。 - **伪类和伪元素选择器**:用于选取带有特定状态的元素...
本资源包"常用的css模板css"提供了多种CSS模板和布局,方便开发者快速构建网页结构。 1. **CSS模板**:CSS模板是预设的样式代码集合,通常包含一套完整的颜色方案、字体样式、布局结构等。这些模板可以快速应用到...
介绍DIV和CSS的使用方法和常用技巧。DIV+CSS页面布局基础知识,适用于技术与平台中心无css基础研发人员
### CSS样式表常用小技巧详解 #### 一、选择器优先级与兼容性问题 - **选择器优先级**:在CSS中,不同种类的选择器有不同的优先级。ID选择器的优先级高于类选择器(class),而类选择器又高于标签选择器。例如,在...
以上是一些常用的CSS技巧,它们可以帮助你更好地控制网页布局和样式,提高代码的可维护性和效率。在实际开发中,还可以结合使用媒体查询、Flexbox或Grid布局来实现响应式设计,以及利用CSS预处理器(如Sass、Less)...