CSS教程

http://www.mb5u.com/divcssjiaocheng/cssjiaocheng/

建站教程 / Div+Css教程 / CSS教程zh-cnhttp://www.mb5u.com/divcssjiaocheng/93558.html其实css中的长度单位一共有8个，分别是px，em，pt，ex，pc，in，mm，cm； px：像素（Pixel）,相对于设备的长度单位，像素是相对于显示器屏幕分辨率而言的。譬如，WONDOWS的用户所使用的分辨率一般是96像素/英寸。而MAC的用户所使用的分辨率一般是72像素/英寸。 em：相2012-07-19 22:06:43CSS教程http://www.mb5u.com/divcssjiaocheng/36138.html应用IE6所不支持的CSS的type选择器，可以精确的选择各种表单元素。简单，明了，可以分区出各个input控件形态。在前面Mb5u.com的文章中，我们向介绍了 CSS的expression判断表达式设置input样式 http://www.Mb5u.com/article.asp?id=1072 type选择器，IE6之2012-06-20 22:25:50CSS教程http://www.mb5u.com/divcssjiaocheng/36134.html怎样做CSS布局呢? CSS文件的链接方式 1、附加链接：外部CSS文件 2、导入CSS：常用应用多个CSS文件时，将多个CSS导入一个CSS文件中 CSS规则定义有三种 1、类比如“.RedText”、“.BlueText”和“.BigText”等等 2、标签针对原有HTML标签做的重新CSS定义 3、高2012-06-21 21:19:12CSS教程http://www.mb5u.com/divcssjiaocheng/36130.html在网页设计CSS中，经常用到字体，而字体大小的设置单位，常用的有2种：px、pt。这两个有什么区别呢？ px：pixel，像素，屏幕上显示的最小单位； pt：point，点，是印刷业一个标准的长度单位，1pt＝1/72英寸；在Windows里，默认的显示设置中，把文字定义为962012-06-18 20:29:46CSS教程http://www.mb5u.com/divcssjiaocheng/36125.htmlCSS3 仍遥遥无期，还是指日可待，这不是一个技术问题，而是人们什么时候可以彻底放弃那些不符合 W3C标准的旧浏览器的问题。CSS3 备受期待是肯定的，CSS Tricks 网站做了一次投票调查，票选备受期待的 CSS 功能，一共有7000人参与，结果如下。有趣的是结果的2012-05-18 13:47:54CSS教程http://www.mb5u.com/divcssjiaocheng/36121.htmlCSS的Display属性可能的值 none 此元素不会被显示。 block 此元素将显示为块级元素，此元素前后会带有换行符。 inline 默认。此元素会被显示为内联元素，元素前后没有换行符。 inline-block 行内块元素。（CSS2.1 新增的值） list-item 此元素会作为列表显示2012-06-08 14:22:40CSS教程http://www.mb5u.com/divcssjiaocheng/36120.html这是一位Mb5u.com网友的经验文章。DIVCSS网页布局的页面中左右抖动的解决方案。最近在设计网站时就老有这个问题,设计好会员中心,内容为margin:0 auto;居中时,打开网页的一瞬间网页会向左摆一下,进了另一个页面时,网页又会向右摆一下,然后又向左摆回来,如果2012-06-14 15:48:43CSS教程http://www.mb5u.com/divcssjiaocheng/36116.htmlCSS兼容性一直是大家头疼的问题，IE6、IE7和FF已经让大家够呛，在Mb5u.com以前的文章中，很多这方面的知识介绍。今天向大家介绍IE8的CSS hack。 IE8正式版发布以来,一直在找一种区别IE8正式版的方法.在百度搜索IE8 hack有19万多个结果,google搜索则有243万2012-06-18 20:30:06CSS教程http://www.mb5u.com/divcssjiaocheng/36112.html我以往的习惯 .demo{ float: left; margin-left: 20px; _display:inline; /*hacked for IE 6*/ } 以后hack分开写 .demo{ float: left; margin-left: 20px; } * .demo{ _display:inline; /*hacked for IE 6*/ } 养好习惯~2012-06-11 14:35:51CSS教程http://www.mb5u.com/divcssjiaocheng/36107.html当父容器设置了透明度的时候，子容器会继承父容器的性质，面对这个问题我们也不知道该说是bug还是说是大家对透明的理解方式问题。先不管css的标准认为怎样才是最合理的，当我们遇到不想要子容器也透明的时候如何去解决这样的问题。方法一：针对IE，在子容2012-06-15 15:51:55CSS教程http://www.mb5u.com/divcssjiaocheng/36104.html在Mb5u.com前面的文章中，我们提及“ 重写您的CSS文件使之更有条理、结构清晰 ”，这虽然是方法之一，但养成良好的编码习惯也一直是模板无忧所提倡的。今天的文章将就此内容，作些讨论。欢迎大家评论，也可以去W3Cbbs.com发贴交流。最后定义的 CSS 样式将会2012-06-21 21:19:39CSS教程http://www.mb5u.com/divcssjiaocheng/36098.html我们知道在网页中引用外部CSS有两种方式，即:@import与link,我们也经常听到有人说要使用link来引入CSS更好,但是你知道为什么吗? link 示例代码 [www.Mb5u.com] link就是把外部CSS与网页连接起来,具体形式 link href=/tz.php?url=www.Mb5u.com/styles.css t2012-06-18 20:30:07CSS教程http://www.mb5u.com/divcssjiaocheng/36095.html编程风格就如人的性格一般，不同程序员（设计师）的书写风格往往不尽相同，良好的风格更容易让其他人接受。Mb5u.com中的代码有时候就有着多种风格。就拿 WordPress 主题来说，我们或许更偏爱于使用代码风格良好、符合我们口味的主题文件。而对于那些凌乱不堪2012-06-18 20:30:08CSS教程http://www.mb5u.com/divcssjiaocheng/36090.htmlclip属性是一个比较有用的属性，但往往在实际应用中，并不多见，而Mb5u.com介绍的也很少。应用clip属性需要注意的两点：一、clip属性必须和定位属性postion一起使用才能生效。二、clip裁切的计算坐标都是以左上角即（0,0）点开始计算，如图三所示，这点不2012-06-08 14:22:40CSS教程http://www.mb5u.com/divcssjiaocheng/36084.html背景 background css 说明 background-image:url(图片的网址); 背景图 background: url( 图片的网址 ); 背景 background-color:#色码; 背景色彩 Exp: background-image:url(背景图案.jpg,gif,bmp); background-color:#FFFFFF; background-color : transp2012-06-20 22:25:52CSS教程http://www.mb5u.com/divcssjiaocheng/36081.html在站的案例中，大部分讲到了CSS无序列表的应用，而Mb5u.com更希望大家能熟悉各种不常用的知识，更加专业的面对工作中可能遇到的问题。以前我们面对这些有着顺序或是有数字注明排序的内容时大多是在数据前自行加上一个数值，或是由程序加上这个数值。而如果使2012-06-21 21:19:39CSS教程http://www.mb5u.com/divcssjiaocheng/36075.htmlCSS组合你不必重复有相同属性的多个选择符，你只要用英文逗号（,）隔开选择符就可以了。比如，你有如下的代码：示例代码 [www.Mb5u.com] h2 { color: red; } .w3cbbs { color: red; } .w3cbbs_Mb5u { color: red; } 则你可以这样写：示例代码 [www.Mb5u.2012-06-08 14:22:40CSS教程http://www.mb5u.com/divcssjiaocheng/36072.htmlCSS样式层叠顺序当使用了多个样式表，样式表需要争夺特定选择符的控制权。在这些情况下，总会有样式表的规则能获得控制权。以下的特性将决定互相对立的样式表的结果。正如以前所提及的，网页制作者和读者都有能力去指定样式表。当两者的规则发生冲突，网2012-06-11 14:35:53CSS教程http://www.mb5u.com/divcssjiaocheng/36069.html虽然Mb5u.com向大家介绍了很多CSS属性的相关知识，但有些非常冷门的属性还是有所欠缺。在B/S程序中，对打印页面的控制，CSS相对比较弱，例如：自动分页，就基本没啥实际用途。我们通常需要自己在需要的时候，强制浏览器分页，这时可以使用以下样式：示例2012-06-21 21:19:40CSS教程http://www.mb5u.com/divcssjiaocheng/36066.html在CSS网页布局中，不可避免的会涉及到CSS伪类的问题。到底该如何正确的定义CSS伪类呢？虽然Mb5u中有很多相关的介绍，但复习一下也无妨。大家看下面的代码就能明白。示例代码 [www.Mb5u.com] a.w3cbbs{text-decoration:none;} a.w3cbbs:link{color:#f90;} a.2012-06-21 21:19:40CSS教程http://www.mb5u.com/divcssjiaocheng/36063.html最近看到篇对CSS优先级有比较好的解释的blog，虽然Mb5u.com有相关的文章，但依然转载过来供大家学习参考。详解CSS优先级的读法，CSS优先级包含四个级别（文内选择符，ID选择符，Class选择符，元素选择符）以及各级别出现的次数。根据这四个级别出现的次数计2012-06-08 14:22:40CSS教程http://www.mb5u.com/divcssjiaocheng/36062.htmlFew people really know what CSS really is. That is why we need to discuss this in the following set of tutorials that we will hand out as fast as possible. We will cover basic, medium and advanced CSS in a set of CSS Tutorials that you will2012-06-15 15:51:56CSS教程http://www.mb5u.com/divcssjiaocheng/36058.html这是一篇针对CSS新手的文章，可能很多Mb5u.com的网友来说，已经非常熟悉，但对于很多新人来说，学习CSS的一个很大的困难，不是因为CSS难以理解，而是因为CSS中的英文单词太多。其实CSS的原理非常简单。举个例子来说，比如说我们要描述一个人，我们可以这样2012-06-08 14:22:40CSS教程http://www.mb5u.com/divcssjiaocheng/36054.html学习web标准，遵循Web标准进行开发和制作。一直以来Mb5u.com与大家讨论的很多是关于布局方面的问题，而页面中主要的内容呈现，是图片和文字，今天和大家讨论关于CSS网页布局中文字排版的相关问题。如何设定字体、颜色、大2012-06-18 20:25:48CSS教程http://www.mb5u.com/divcssjiaocheng/36049.html随着CSS网页布局应用的越来越广泛，Web标准逐渐普及，也创造了一个可乘之机。今天Mb5u.com和大家讨论，预防CSS样式被挂网页木马。他们发现，用来实现页面的CSS，也可以用来挂马。而比较讽刺的是，CSS挂马方式其实是从防范IFRAME挂马的CSS代码演变而来。网站2012-06-09 20:39:56CSS教程http://www.mb5u.com/divcssjiaocheng/36046.htmlWow, my little CSS screed seems to have really hit a nerve. In just six hours it has hit #6 on the Reddit front page (up to #5 now). I didn't even submit it to Reddit because it has been ages since I was able to get any traction over there!2012-06-13 13:15:27CSS教程http://www.mb5u.com/divcssjiaocheng/36040.html首先声明的我不是反对关于设计的网格化，我是反对重构的网格化。这里应该特指是YUI方式的类名绑定式的网格化。大家可以看看下面的一段代码：示例代码 [www.Mb5u.com] div id=yui-main div class=yui-b div class=yui-g div class=yui-u first/div d2012-06-14 15:48:44CSS教程http://www.mb5u.com/divcssjiaocheng/36037.htmlCSS BUG在Mb5u.com介绍过也很多，也一直困扰着大家，在CSS布局中会常遇到这样的问题。相信大家对于常见 CSS BUG 的处理已经相对比较熟悉，例如：IE6 Three Pixel Gap（3px bug）、IE5/6 Doubled Float-Margin Bug（双倍边距的bug）等等。但时常我们也会碰到2012-06-18 20:25:51CSS教程http://www.mb5u.com/divcssjiaocheng/36035.htmlCSS网页布局中往往会出现很多IE与FF不兼容问题，下面整理了一些常见的可能及其解决的办法！在Mb5u.com中，类似的知识也介绍过很多，例如： http://www.Mb5u.com/search.asp?SearchContent=hack 1、用!important解决IE和Mozilla的布局差别 !important是CSS1就2012-06-09 20:39:56CSS教程http://www.mb5u.com/divcssjiaocheng/36031.html不知道大家在做页面的时候会不会遇到样式定义不生效的问题，基本的表现就是怎么改样式都没显示或只有某些浏览器正常，这时通常需要做下面的几步：确认所修改的样式文件是否是当前页面的样式文件（多个环境的情况）确认文件中的路径是否正确（可能手误多写2012-06-14 15:48:45CSS教程http://www.mb5u.com/divcssjiaocheng/36029.html著名的Web设计网站最近组织了一次调查，请15名顶尖的 Web 设计师对 CSS 提出自己的期望，15名设计师包括 Jon Hicks, Wolfgang Bartelme, Mint 的 Shaun Inman 以及 Stuff and Nonsense 的 Andy Clarke。调查结果显示，最被期待的 CSS 功能是 CSS 圆角，其它2012-06-12 18:40:22CSS教程http://www.mb5u.com/divcssjiaocheng/36028.htmlWeb网站可用性的关键指标是速度，更确切地说，是页面能以多快的速度出现在访问者的浏览器窗口里。影响速度的因素有很多种，包括Web服务器的速度、访问者的Internet连接情况，以及浏览器必须下载的文件大2012-06-09 20:39:56CSS教程http://www.mb5u.com/divcssjiaocheng/36020.htmlCSS中的!important是一个非常重要的属性，有时候发挥着非常大的作用，Mb5u.com这方面的知识并不是非常多，我们看下面的文章，对它作比较感观的了解。前几天写一些CSS代码的时候又难为我了，因为那个该死的IE6对CSS的支持是如此的差劲，以前我还没注意过，因2012-06-11 14:35:57CSS教程http://www.mb5u.com/divcssjiaocheng/36018.html今天在W3CBBS.com有网友提出这样一个问题。 css中的 Q:unknown { content: '' } 是什么意思啊 q标签表示一个行引用. q标签是成对出现的,以q开始,以/q结束属性: Common -- 一般属性 cite -- 引用内容的URI q是quoted text的缩写关于unknown，一般理解为：未2012-06-09 20:39:55CSS教程http://www.mb5u.com/divcssjiaocheng/36009.html大多数技术都有自己约定俗成的标准。CSS也不例外。虽然并非网络上存在的所有CSS都很规范，但按照现有标准来使用CSS却还是不无裨益的。一般来说，开发人员应尽可能将内容与结构分离开来。这样做的好处在于： 1：增加站点的寿命不规范的样式表可能在当时觉得2012-06-18 20:25:49CSS教程http://www.mb5u.com/divcssjiaocheng/36006.html发现很多朋友对 CSS 的优先权不甚了解，规则很简单。需要说明的一点，如果你的样式管理需要深层判断 CSS 的优先权，更应反思自己的 CSS 代码，是否合理？是否优化？ CSS2.1 中规定了关于 CSS 规则 Specificity（特异性）的计算方式，用一个四位的数字串（注：2012-06-13 13:15:28CSS教程http://www.mb5u.com/divcssjiaocheng/36001.html在使用 CSS 实现表现的时候，会经常接触到 display:inline-block 这一属性，大都会对这一属性感觉很模糊。 display:inline-block 将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。但对于这个属性不是所2012-06-11 14:35:56CSS教程http://www.mb5u.com/divcssjiaocheng/35998.htmlCSS与JS紧密配合，为我们的页面增添了很多别致的效果。在Mb5u.com中也有相关的案例。为了达到某种特殊的效果我们需要用Javascript动态的去更改某一个标签的CSS属性。比如：鼠标经过一个图片时我们让图片加一个边框，代码可能是这样：JavaScript中style后面的2012-06-12 18:40:21CSS教程http://www.mb5u.com/divcssjiaocheng/35997.htmlCSS Reset是指重设浏览器的样式。在Mb5u.com以前的文章中，也介绍过相似的知识，但不够深入，今天我们看十个CSS Reset方法的例子，学习这种方法的应用。在各种浏览器中，都会对CSS的选择器默认一些数值，譬如当h1没有被设置数值时，显示一定大2012-06-14 15:48:46CSS教程http://www.mb5u.com/divcssjiaocheng/35993.html大家在Mb5u.com学习了很多关于CSS布局的知识与技巧，然而CSS样式兼容问题也不容小看，它引出的问题往往让大家一愁莫展，由于各浏览器对CSS的不同解释，造成本来IE7可正常显示，但到了firefox 、ie6等其它浏览器上，却出现错位、下沉等问题，只得在firefox 、2012-06-15 15:51:58CSS教程http://www.mb5u.com/divcssjiaocheng/35981.html本文为Mb5u.com转载，很多CSSer是从以前的网页制作中开始学习CSS网页布局的，或许还存在着一定的DW习惯。希望此文能帮助大家理解和纠正一些不好的习惯。由于“可视化”和操作简便，在DW中编写CSS的朋友很多，今天我们介绍一些在DW中编写CSS的“最佳习惯”，2012-06-18 20:25:48CSS教程http://www.mb5u.com/divcssjiaocheng/35979.html本文为转载，是一个网友在实际工作中遇到的问题，在此Mb5u转载过来，大家在遇到此类问题时，可以有一定经验。又是IE6，又是编码，说来说去都是这些问题。今天在做一个网页的时候发现 IE6 版本以下的浏览器不能把CSS正确地表现出来，CSS 好像没有产生任何作2012-06-12 18:40:23CSS教程http://www.mb5u.com/divcssjiaocheng/35965.htmlFloat（浮动）概念也许是CSS中最让人迷惑的一个概念吧。Float经常被错误理解，而且因为将上下文元素全部浮动导致的可读性、可用性问题备受责难。然而，这些问题的根源并不在于理论本身，而是开发人员以及浏览器对理论的解读造成的。如果你认真的去读一下浮2012-06-13 13:15:29CSS教程http://www.mb5u.com/divcssjiaocheng/35959.html看到淘宝网页中这样写使用的是import,而很多网站都是使用link，当然还有一些页面比较简单，流量很大的网站，是直接将CSS写在html代码中的？他们有什么区别？css用import还是link好?从经典论坛和另外一个网站大概了解了一下看到淘宝网页中大部分是这样写的2012-06-15 15:51:58CSS教程http://www.mb5u.com/divcssjiaocheng/35953.html当你准备全面进军web标准时，有时候你是不是被表格的弄得焦头烂额呢？比如，原来使用“非法”的nobr现在要用什么来代替呢？今天，就让我来一个终极解决方案。或许你已经Google到white-space： nowrap可以实现nobr，不错，但关键还有一个，那就是table-layou2012-06-13 13:15:30CSS教程http://www.mb5u.com/divcssjiaocheng/35154.html我以往的习惯 .demo{ float: left; margin-left: 20px; _display:inline; /*hacked for IE 6*/ } 以后hack分开写 .demo{ float: left; margin-left: 20px; } * .demo{ _display:inline; /*hacked for IE 6*/ } 养好习惯~2009-11-21 21:50:32CSS教程http://www.mb5u.com/divcssjiaocheng/35149.html关于css优化的文章Mb5u.com向大家曾经作为介绍，您还可以参考： CSS样式表文件的优化及其技巧 http://www.Mb5u.com/article.asp?id=78 如何优化你的CSS代码？ http://www.Mb5u.com/article.asp?id=308 Web页面优化减小页面对内存及CPU的占用 http://www.Mb52009-11-21 21:50:36CSS教程http://www.mb5u.com/divcssjiaocheng/35141.htmlCSS Naked Day，也称CSS裸奔节或CSS裸奔日，2009年4月9日是第四界css裸奔节。Mb5u.com作为学习类的站点，未参加这次裸奔节！ CSS裸奔节就是将这整站的css样式都去掉，这样所有的布局，颜色，背景什么的就都没有了(除非你使用table布局)，只剩下html实体显示2009-11-21 21:50:38CSS教程http://www.mb5u.com/divcssjiaocheng/35129.htmlclip属性是一个比较有用的属性，但往往在实际应用中，并不多见，而Mb5u.com介绍的也很少。应用clip属性需要注意的两点：一、clip属性必须和定位属性postion一起使用才能生效。二、clip裁切的计算坐标都是以左上角即（0,0）点开始计算，如图三所示，这点不2009-11-21 21:50:38CSS教程http://www.mb5u.com/divcssjiaocheng/35121.html背景 background css 说明 background-image:url(图片的网址); 背景图 background: url( 图片的网址 ); 背景 background-color:#色码; 背景色彩 Exp: background-image:url(背景图案.jpg,gif,bmp); background-color:#FFFFFF; background-color : transp2009-11-21 21:50:39CSS教程