你应该知道的25个非常有用的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 newwindow)

  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)

  Username

  

  Username

  

  

  

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技巧,布布扣,bubuko.com

时间: 2024-10-14 01:03:45

你应该知道的25个非常有用的CSS技巧的相关文章

你有必要知道的 25 个 JavaScript 面试题

1.使用 typeof bar === "object" 判断 bar 是不是一个对象有神马潜在的弊端?如何避免这种弊端? 使用 typeof 的弊端是显而易见的(这种弊端同使用 instanceof): let obj = {}; let arr = []; console.log(typeof obj === 'object'); //true console.log(typeof arr === 'object'); //true console.log(typeof null

设计师的日常--你要知道的25个UI/UX设计网站

如果你像我一样,总是花很多时间试图找到一个最好的模式,最好用的工具和最漂亮的颜色.当然,每位设计师的需求不同,所谓"完美"的标准也不一样.但是如果能有一份资源包含几乎所有你需要的设计资源,那再好不过了. 朋友,别担心,这个问题我们很快就能解决啦.答案就在这篇文章里. 配色灵感 还在为配色苦恼?找不到色彩灵感? 试试下面这些网站. 1. Flat UI Color Picker – Flat Design必不可少,颜色自动分类 2. ColourLovers – 色彩社区,不仅可以配色,

一些对新手有用的css技巧

一.表单部分 1.禁止textarea文本域的缩放 resize:none; 2.去除初始化textarea下拉条 overflow:auto; 3.如何让表单中的选项按钮,点击文字也能选中? <lable><input type="radio" name="sex" value="女" checked="checked"/>女</lable> 4.如何让文本垂直对齐文本输入框 input{

20个很有用的CSS技巧

导语:下面这几个CSS技巧你可能不知道,1.彩色照片变黑白,2.所有元素垂直居中,3.禁用鼠标,4.模糊文字,小编学完能量满满的,觉得对CSS又充满了爱,你也来看看. 1. 黑白图像 这段代码会让你的彩色照片显示为黑白照片,是不是很酷? img.desaturate { filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%

【转】嵌入式程序员应该知道的16个问题

全面解析<嵌入式程序员应该知道的16个问题> ----Sailor_forever分析整理,[email protected] http://blog.csdn.net/sailor_8318/archive/2008/03/25/2215041.aspx 1.预处理器(Preprocessor) 2.如何定义宏 3.预处理器标识#error的目的是什么? 4.死循环(Infinite loops) 5.数据声明(Data declarations) 6.关键字static的作用是什么? 7.

你需要知道的CSS3 动画技术

译自:你需要知道的CSS3 动画技术 译自:What You Need To Know About Behavioral CSS 请尊重版权,转载须注明本站链接! 译序:本文译自Smashingmagazine,但是原文讲述的内容有些浅,也不是很完整,前端观察在翻译的前提下,增加了更多的更系统的内容.如有不足之处,欢迎指正补充. 随着网络的发展,浏览器具有更强的渲染更高级代码的能力,我们正逐步实现跨越所有平台和浏览器的目标.我们不但可以要花费更少的时间来确保我们的盒模型在IE6中看起来正常,而且

嵌入式程序员应知道的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 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77

使用Office 365前,企业必须要知道的10件事

目前的市场上充斥着很多关于微软Office 365的炒作,相信厂商.客户或者企业的都有自己不同的考虑.Office 365是微软云版本的Office,用户可以通过互联网创建一个帐户,付款.下载应用安装,然后使用,这一过程中不需要使用光盘.如果企业用户认为使用Office 365对于公司来说是正确的一步的话,那么管理者就有必要先了解以下由桌面解决方案顾问Sales Harkins所提出的10件事. 1.什么是云? 云是一个行业术语,指异地文件托管服务.当使用Office 365文件的时候,用户使用

软件测试人员应该知道的

软件测试人员应该居安思危 每当经济不好,公司业绩不好的时候,公司都可能进行裁员. 首先裁的就是测试人员. 因为测试人员的技术水平相对来说比较低,容易被替代,招起来也比较容易.,公司往往先拿测试人员开刀.身为测试人员,虽然我们平常的工作大部分都比较安逸. 但是千万不能温水煮青蛙. 应该自强不息, 要像开发人员一样, 不断学习,提高自己的编程水平.这样就算被裁也能很快找到新的工作. 测试人员应该比开发人员更熟悉业务需求 测试人员的水平主要体现在测试用例的设计上. 要设计出全面,覆盖广的测试用例,需要