应该知道的25个非常有用的CSS技巧
在我们的前端CSS编码当中,经常要设置特殊的字体效果,边框圆角等等,还要考虑兼
容性的问题, CSS网页布局,说难,其实很简单。说它容易,往往有很多问题困扰着新
手,在中介绍了非常多的技巧,这些小技巧与知识能事半功倍的给大家以帮助,经验丰
富的CSS程序员通常都知道这一点,但初学者不要错过了!重要的CSS规则
这里有25个非常有用的CSS技巧,将帮助你解决让你棘手的CSS代码问题。你可以直接
使用到你现在的项目当中
1。更改文本突出显示颜色(Change Text Highlight Color)
您可能不知道!使用CSS,你可以控制颜色测试,至少对符合标准的浏览器,如Safari
或Firefox。
::selection{ /* Safari and Opera */
background:#c3effd;
color:#000;
}
::-moz-selection{ /* Firefox */
background:#c3effd;
color:#000;
}
2。防止Firefox的滚动条跳转(Prevent Firefox Scrollbar Jump)
火狐通常隐藏垂直滚动条的内容如果尺寸小于可见的窗口,但解决这个问题,您可以使
用这个简单的CSS技巧。
html{ overflow-y:scroll; }
3。打印分页符(Print Page Breaks)
虽然大多数的互联网用户更愿意在网上阅读的内容,但一些用户可能想打印文章。使用
CSS,你可以控制内容的分页符,把这个类加入到任何你想下页打印的标签。
.page-break{ page-break-before:always; }
4. Using !important
经验丰富的CSS程序员通常都知道这一点,但初学者不要错过了!重要的CSS规则。通
过加入!你的CSS规则很重要,你可以增加它的优先级比其他后续规则。例如,下面的
代码,背景颜色是蓝色的,而不是由于红!
.page { background-color:blue !important; background-color:red;}
5。替换文字与图片(Replace Text With Image)
这是一个很好的SEO技巧,让你看到一个不错的花哨的图像,而不是简单枯燥的文字,
但搜索引擎将只能看到文字。
.header{
text-indent:-9999px;
background:url('someimage.jpg') no-repeat;
height: 100px; /*dimensions equal to image size*/
width:500px;
}
6。跨浏览器的最低高度(让IE支持min-height)
Internet Explorer不理解min-height属性,但这里的CSS技巧来完成,在IE浏览器。
#container{
height:auto !important;/*all browsers except ie6 will respect the !important flag*/
min-height:500px;
height:500px;/*Should have the same value as the min height above*/
}
7。在新窗口中突出显示要打开的链接(Highlight links that open in a new
window)
CSS代码高亮显示链接,在新窗口中打开链接会弹出一个新的选项卡或窗口
a[target="_blank"]:before,
a[target="new"]:before {
margin:0 5px 0 0;
padding:1px;
outline:1px solid #333;
color:#333;
background:#ff9;
font:12px "Zapf Dingbats";
content: "\279C";
}
8。风格有序li列表(Style Your Ordered List)
样式的数字的有序列表,每个列表项的内容以不同的方式比。
ol {
font: italic 1em Georgia, Times, serif;
color: #999999;
}
ol p {
font: normal .8em Arial, Helvetica, sans-serif;
color: #000000;
}
9。使用CSS的首字下沉(Drop Caps Using CSS)
首字下沉,使用CSS,
你可以创建一个下沉效果,如在报纸或杂志的使用:第一个字母伪元素
p:first-letter{
display:block;
margin:5px 0 0 5px;
float:left;
color:#FF3366;
font-size:3.0em;
font-family:Georgia;
}
10。跨浏览器的不透明度(Cross Browser Opacity)
虽然CSS3标准包括Opacity属性,但不是每个浏览器都支持它跨浏览器的透明度,这里
的CSS技巧
transparent_class {
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}
11。line-height的垂直居中(Vertical centering with line-height)
如果您使用的是固定高度容器和垂直居中的文本,使用line-height属性,完美地做到这
一点。
line-height:30px;
12 固定宽度且居中(Center Fixed Width layout)
如果您使用固定宽度的布局,你应该中心的布局,
body{
width:1000px;
margin:0 auto;
}
13。在IE浏览器消除垂直textarea的滚动条(Remove vertical textarea
scrollbar in IE)
IE浏览器中添加一个垂直滚动条的textarea的输入领域,无论在它的内容的高度。您可
以用这个简单的CSS技巧来解决这个问题。
textarea{
overflow:auto;
}
14。删除活动的链接边界(Remove active link borders)
有些浏览器如Firefox和IE浏览器中添加一个虚线轮廓边界,用户点击链接。这是一个有
用的辅助功能,让用户知道其中的链接,他点击或焦点。但有时你需要摆脱这种,在这
里你需要使用的CSS。
a:active, a:focus{ outline:none; }
15。在IE防止元素消失(Prevent Elements from disappearing in IE)
有时IE浏览器的行为在一种特殊的方式,使一些元素消失,从而出现当您尝试进行选
择。这是由于一些float元素的IE问题。这可以加入的位置是:相对固定的元素消失。
16。属性特定的图标(Attribute-Specific Icons)
CSS属性选择器是非常强大的,给你很多选择来控制样式不同的元素,例如你可以添加
一个图标的基础上的href属性的一个标签,让用户知道是否链接点,图像,PDF,DOC
文件等。
a[href$='.doc'] {
padding:0 20px 0 0;
background:transparent url(/graphics/icons/doc.gif) no-repeat center right;
}
17。CSS指针光标(CSS Pointer Cursors)
最近这一趋势已经赶上了。所有的用户界面元素的用户,可以点击网页上的光标类似的
超级链接。这里是CSS技巧,
input[type=submit],label,select,.pointer { cursor:pointer; }
18。首字大写(Capitalize Text)
这招是特别有用的一篇文章的标题显示在网页上的所有大写字母开头的单词。
text-transform: capitalize;
19。小型大写字母文本(Small Caps Text)
这是一个较少使用,但有用的CSS属性。它利用了所有的字母文字,但每个字的第一个
字母,字母的大小是小于的第一个字母。
font-variant:small-caps;
20。突出显示的文本输入字段(Highlight Text Input Fields)
这个CSS技巧让你突出当前处于焦点的输入字段。在IE中不兼容
input[type=text]:focus, input[type=password]:focus{
border:2px solid #000;
}
21。删除图像边框(Remove Image Border)
图片超链接通常会得到一个丑陋的蓝色边框,使您的图像超链接看起来可怕。下面代码
就可去掉
a img{ border:none; }
22。表单中使用标签(Tableless Forms Using labels)
<form method="post" action="#"><label for="username">Username</label>
<input type="text" name="username" id="username"> <label for="password">Username</label>
<input type="password" name="pass" id="password"> <input type="submit" value="Submit"></form>
p label{
width:100px;
float:left;
margin-right:10px;
text-align:right;
}
23。设置一致的基本字体大小(Set a Consistent Base Font Size)
body{ font-size:62.5%; }
24。突出首字母缩写和缩写标签(Highlight Acronym and Abbr Tags)
简称和缩写标签提供有用的信息给用户,浏览器和搜索引擎的首字母缩写词和缩略语,
但最重要的Firefox的浏览器,。这里的CSS技巧,突出简称和缩写标签在您的网页。
acronym, abbr{
border-bottom:1px dotted #333;
cursor:help;
}
25。CSS重置
这一块CSS代码重置适合所有的浏览器以防止你的CSS代码不一致导致的兼容性问题
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}
应该知道的25个非常有用的CSS技巧的更多相关文章
- 你应该知道的25个非常有用的CSS技巧
在我们的前端CSS编码当中,经常要设置特殊的字体效果,边框圆角等等,还要考虑兼容性的问题, CSS网页布局,说难,其实很简单. 说它容易,往往有很多问题困扰着新手,在中介绍了非常多的技巧,这些小技巧与 ...
- 你应该知道的25道Javascript面试题
题目来自 25 Essential JavaScript Interview Questions.闲来无事,正好切一下. 一 What is a potential pitfall with usin ...
- 你有必要知道的 25 个 JavaScript 面试题
1.使用 typeof bar === "object" 推断 bar 是不是一个对象有神马潜在的弊端?怎样避免这样的弊端? 使用 typeof 的弊端是显而易见的(这样的弊端同使 ...
- 一些对新手有用的css技巧
一.表单部分 1.禁止textarea文本域的缩放 resize:none; 2.去除初始化textarea下拉条 overflow:auto; 3.如何让表单中的选项按钮,点击文字也能选中? < ...
- 20个很有用的CSS技巧
导语:下面这几个CSS技巧你可能不知道,1.彩色照片变黑白,2.所有元素垂直居中,3.禁用鼠标,4.模糊文字,小编学完能量满满的,觉得对CSS又充满了爱,你也来看看. 1. 黑白图像 这段代码会让你的 ...
- Css学习总结(1)——20个很有用的CSS技巧
1. 黑白图像 这段代码会让你的彩色照片显示为黑白照片,是不是很酷? img.desaturate { filter: grayscale(100%); -webkit-filter: graysca ...
- [技术翻译]您应该知道的13个有用的JavaScript数组技巧
本次预计翻译三篇文章如下: 01.[译]9个可以让你在2020年成为前端专家的项目 02.[译]预加载响应式图像,从Chrome 73开始实现 03.[译]您应该知道的13个有用的JavaScript ...
- 每个极客都应该知道的Linux技巧
每个极客都应该知道的Linux技巧 2014/03/07 | 分类: IT技术 | 0 条评论 | 标签: LINUX 分享到:18 本文由 伯乐在线 - 欣仔 翻译自 TuxRadar Linux. ...
- 嵌入式程序员应知道的0x10个C语言Tips
[1].[代码] [C/C++]代码 跳至 [1] ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 ...
随机推荐
- java基础学习总结四(控制语句<顺序、选择、循环>、方法)
一:结构控制语句 结构控制语句分为3种,顺序语句.选择语句.循环语句. 1:顺序语句 就是自上而下的执行程序,默认执行顺序. 2:选择语句 if结构语句:如果满足条件,则执行该语句. if...els ...
- WCF编程系列(三)地址与绑定
WCF编程系列(三)地址与绑定 地址 地址指定了接收消息的位置,WCF中地址以统一资源标识符(URI)的形式指定.URI由通讯协议和位置路径两部分组成,如示例一中的: http://loc ...
- C# ACM poj1008
玛雅历 public static void Acm1008(int day, string mon, int year) { ; switch (mon) { case "pop" ...
- jquery动态插入行
这是一个利用jquery动态插入输入内容的代码. html代码: <div title="分表2" class="ui-edit" style=" ...
- Css颜色定义的方法汇总color属性设置方式
颜色的定义方式用rgb()里面带上十进制的数字来定义. color:rgb(211,123,135); 用预定义的颜色名称. color:red; rgba()最后一个参数是不透明度. color:r ...
- C++ 泛型编程/模板 泛函编程/Lambda/λ演算
1.泛型编程(C++模板) 其中,Ada, Delpha, Java, C#, Swift 称之为 泛型/generics; ML, Scala和 Haskell 称之为 参数多态/parametri ...
- 学习C++ Primer 的个人理解(二)
本身就一定基础的读者我想变量常量这些概念应该已经不是问题了.但是本章还是有几个重点,需要特别留意一下的: 1.初始化和赋值是不同的操作 2.任何非0值都是true 3.使用新标准列表初始化,在有丢失精 ...
- InstallShield Custom Dialog
InstallShield 2008 Screen Layout is designed as below. Use toolbox to edit screen layout. 1> Set ...
- Windows server2008/2012 安装oracle 11 创建实例HANG住在百分之2
Windows server2008/2012 安装oracle 11.2.0.1的时候,可能会在创建数据库实例的时候卡在百分之2的地方. 这个时候可以 1.点击开始菜单,在“搜索程序和文件”中输入“ ...
- 鸟哥笔记:linux系统日志文件介绍
简单的说日志文件就是记录系统活动信息的几个文件,例如:何时.何地(来源ip).何人(什么服务名称).做了什么操作.换句话说就是:记录系统在什么时候由哪个进程做了什么样的行为时,发生了什么事件等. 日志 ...