??xml version="1.0" encoding="utf-8" standalone="yes"?>
链接
:link 用来l没有被讉Kq的链接讑֮样式
:visited 用来讑֮已经讉Kq的链接的样?br /> :hover 动态伪c设定鼠标停留处元素的样?br /> :active 动态伪cȝ来寻找被Ȁzȝ元素
׃伪类之间的特D性是相同的,所以设定伪cL式时需要注意顺序?br /> 合理的顺序是Qa:link,a:visited,a:hover,a:active CؓLoVe:HAte.
其中:link,:visited是A标签专用的,?hover,:active{不限于A元素Q也可以在其他某些元素上?
让链接看h酷酷?br /> <ps:q个其实没有多少技术的东西在里面,关键是创?gt;
大家可以看看q里的例子: CZ下蝲
为链接添加有意义的修?/strong>
1.标识d|站的链?br /> Ҏ1Q给相应的链接加上一个适当的图标来标识链接的类型:比如该链接是否链接到|站外的地址Q是否是一个email地址Q是否启动一个imh甚至于标识下载文件的cd{等?br /> 改进ҎQ每个链接都加的话太ȝQ维护v来也不方ѝ可以采用属性选择器来帮助我们完成q样的工作?br /> 比如惌P
a[href^= "mailto"]{
background:url(email.png) no-repeat right top;
padding-right:10px;
}
但是IE6里面是不支持属性选择器的Q只能变通一下:可以采用javascript+Dom的方式来完成。可以在q个地方查看Q?a >http://simonwillison.net/2003/Mar/25/getElementsBySelector/
里面提到的SimonWillison写的getElementBySelectorҎ?br /> 大家可以看看q里的例子: CZ下蝲
把链接做的像按钮
思\Q将链接的可响应事g的响应区域扩大到整个背景区域Q这Lhq个链接象是个按钮?br /> 实现Q其实很单只需要设|A标签的displayQblock可以了。这L话A会一改自q行内元素的性质Q{换成一个块元素。这样就辑ֈ目的了?br /> 问题QIE5.x如果不设|元素的widthQheight的话Q即时设|了displayQblock也是没有用的Q所有要昄的设|widthQheight的倹{?br /> 大家可以看看q里的例子: CZ下蝲
囑փ{
Ҏ1Q简单翻转:利用颜色的反差来形成{效果?br /> Ҏ2Q具有图像的{ ׃多图片翻转在W一ơ蝲入的时候回出现囑փ短暂延迟的,造成闪烁效果?br /> 改进Ҏ2QPixyҎQ替换图片时昄囄不同部位?br /> 利用q样技术的一U应用:标识那些链接已经被访问过了,q个看v来还Z性的?br /> 大家可以看看q里的例子: CZ下蝲
UCSS工具提示
其实是把预先设|好的提CZ息隐藏了Q在适当是时机显C在适当的位|?br /> q是看例子来的实在?a href="http://m.tkk7.com/Files/ponzmd/CssLink.rar">CZ下蝲
1.背景定位主要通过background-position属性来讄.属性说明如下:
Syntax HTML { background-position : sPosition } Possible Values sPosition String that specifies or receives one or two of the following values. length Floating-point number, followed by an absolute units designator (cm, mm, in, pt, pc, or px) or a relative units designator (em or ex). For more information about the supported length units, see CSS Length Units Reference. |
2.需要注意的是background-postion通过length来设|的话,坐标原点在图像的左上角?br>而通过percent来设|的话,其实是将囄上相应百分比的点与父cd素上相应癑ֈ比位|的炚w合得到的l果?br>所以当讄?0%时会出现居中昄的现象?
3.要避免出现length和percent方式混合讄的情况,q将使浏览器抓狂Q不知道能干出点什么来?
具体CZ可以参考,q里?CZ下蝲
圆角?/strong>
1.固定宽度圆角?br>思\Q基本上通过两个裁剪好的圆角囄(剙一个,底部一?分别讄为相应块元素的背景?br>限制:a.圆角框的宽度有圆角图片的大小所限制.
b.内层块与外层快之间不能存在间隔。即外层块不能设|paddingQ内层块不能讄margin ?border?br>c.圆角囄的背景颜色是预先讄好的Q修Ҏ样式旉要替换图片?br>具体实现Q?br>方式a:重复背景颜色
方式b:重复背景囄
具体CZ可以参考,q里?CZ下蝲
2.不固定宽度圆角框:滑动门技?lt;sliding doors technique>
思\Q基本上与上面的思\一_不过圆角囄被进一步的l分。将上面的图片拆分成了左上,右上Q左下,右下四个囄Q?br>q样的话用来定位囄的块元素也要相应的增加。简单来?个图片需?层块元素来定位?br>限制:a.圆角框的宽度有圆角图片的大小所限制.但是q里的限制出C一点点变化
卛_角框的宽度可以在于左上+右上宽度的和的范围内变动Q圆角框的高度可以在于左上+左下高度的和的范围内变动?br>b.定义背景囄的Q意两层之间不能存在间隔。即外层块不能设|paddingQ内层块不能讄margin ?border?br>c.圆角囄的背景颜色是预先讄好的Q修Ҏ样式旉要替换图片?br>d.q有个限制就是ؓ了实现滑动门技术,Zؓ的添加了多层无实际语义的块元素,q是的代码的可维护性变差了?br>具体CZ可以参考,q里?CZ下蝲
3.如果在扩展一下:图片拆分成9个图片,卛_上,上中Q右上,左中Q中部,右中Q左下,下中Q右?Q图片井字Ş拆分Q?br>q样可以利用囄的重复来实现宽度和高度自q圆角框了?br>限制Q基本上同上面一P宽度高度的限制不存在了?br>但是Z定位q些背景囄所d的多个无语义块元素不是h人都能接受的Q或者说是很难有人接受的?br>如何实现大小自由的圆角框呢?
http://www.456bereastreet.com/archive/200505/transparent_custom_corners_and_borders/
具体CZ可以参考,q里?CZ下蝲
山顶角框(mountaintop corner)
思\:圆角框的实现思\和上是一LQ区别在于上面的实现中角囄的背景是定的,而山角框中利用利用位图蒙版来替代角囄Q将实际上位图蒙版中角图像的位置留留成透明的,q样的的该蒙版的透明部分的颜色将昄为所在块的背景颜Ԍq样实C角图片颜色可以通过讄背景颜色来更改的目的?具体CZ可以参考,q里?CZ下蝲
阴媄
1.单阴?br>思\Q基本上是背景图片放|到囄的下面,通过适当的位UL在某个角落上面显C出背景囄Q从而达到显C阴q效果?br>实现方式Q可以通过对背景图片margin赋予负值来偏移背景囄,q种做法形成的阴q为简单阴影;另一U做法就是通过图片与背景囄的相对位|来相对定位来达到Ş成阴q效果Q这U做法称为ClagnutҎ?br>限制Q图片的长宽应该要小于阴影图片的长宽q样形成的阴qh会比较完_当然如果背景囄做过Ҏ的处理的话那另当别Z?
2.模糊阴媄
思\Q上面Ş成的阴媄被指边缘~Zq渡Q所以才有了模糊阴媄的方法的出现。主要思\是利用一个具有alpha透明度的PNG来盖住阴影图象的边缘?br>实现方式Qؓ了实现这个PNG囄的覆盖,自然需要添加另外一个块元素用来定位q个囄?br>具体实现可以看这里?lt;Z兼容IE的各个版本,可是费了脑筋?gt;
注意在实现模p阴影时利用了alpha透明度的PNG囄Q对于这个IE的支持可不好Q好在又不少Ҏ可以解决Q?br>1.利用qo器:filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(scr='shadow.png',sizingMethod='crop');
2.利用条g注释来屏蔽可能造成的不良媄响:
<!--[if gte ie 5.500]>
<link rel="stylesheet" type="text/css" href="ie55.css" />
<![endif]-->
3.z葱皮阴?br>思\Qؓ了I补阴p~缺乏过渡的情况Q采用类g山顶角的实现。创Z国阴影尾部Gif,用它们覆盖在主阴影图像的末尾上?br>实现方式Qؓ了定位这两个背景囄Q需要给定义两个钩子。即定义两国无语意的块元素来攄q两个gif?br>具体实现看这里?br>限制Q添加了多个无语意块元素Q破坏了样式表的可维护性?
具体CZ可以参考,q里?CZ下蝲
囄替代
所谓的囄替代是利用背景囄替换文档中的文本Q不是去除文本,而是利用CSS隐藏文本?br>实现方式Q?br>1.FIR(Fahrner Image Replacement):文本形成的块隐藏h
2.PharkQ文本偏U?br>3.Gilder/LevinQ利用图片定位到文本上面文本遮蔽v来?br>4.IFR(Innman Flash Replacement)与sIFR(可~Inman Flash Replacement)
要实现sIFR可以利用sifr脚本来处理,具体可以看这?http://www.mikeindustries.com/sifr
具体CZ可以参考,q里?CZ下蝲
看两个例子就明白了?br><省去一些显而易见的代码Q表义ؓ?>
W一个例子:
body{color:red;}
<body>
D落1
<p>D落2</p>
</body>
q里面段?Q段?字体颜色全部是红?昄pl承了body的color样式?/p>W二个例子:
body{color:red;}
p{color:green;}
<body>
D落1
<p>D落2</p>
</body>
q里D落1是红Ԍ而段?是绿艌Ӏ这里面是通过判断样式的特D性来讑֮的样式?/p>判断样式Ҏ性的ҎQ可以参考这里?br>通过上面的例子,得到一个通俗的理解。承和java里面Ҏl承cMQ子元素l承父元素;而层叠可以看?br>java里面的方法重载,子元素和父元素定义了同一个样式,具体用那个通过选择器特D性的高低和位|来?br>定?/p>
注意Q虽然我用方法重载来cdcss中的层叠Q但是两者的判断依据是不一L。ƈ非子元素定义的样式就
一定会被用?br>看这个例子:
p{color:green;}
body{color:red;}
<body>
D落1
<p>D落2</p>
</body>
l果是段?Q段?全是U色?nbsp;
css中的框模?/strong>
标准框模型:标准框模型通过内容区域Q填?padding)Q边?border)Q空白边(margin)l成?br>在标准css中,元素的width和height指定的时内容区域的宽度和高度?br>padding指定的是内容区域到边?border)的距R通常而言的背?background)指的是内容区域和填充所
l成的这个区域。空白边(margin)通常用来讄元素之间的间隔?
IE的框模型Q这里的IE的狂模型指定的是IE5QIE6版本中怪异模式中指定的框模型。区别在于IE框模型中
Width和height指定的是内容区域Q填充+Ҏl成的宽度和高度。这里就形成了有个问题,而解册个问
题的办法是不要l元素添加具有指定宽度的填充Q而尝试填充或I白Ҏ加到元素的父元素或子元素?br>具体的可以看我写的示例?
注意一般而言Q元素的填充Q边框,I白Ҏ可以选择是否存在的,一般默认其gؓ0。但是有些情况下?br>素可能会被用户代理样式表讄它们。所以,可以通过*{ margin:0;padding:0;}来统一讑֮?
I白边叠?/strong>
是当有I白辚wCL时候,I白边之间会发生一U叠加。叠加的l果会是I白边中值相对较大的保留
下来Q而这U叠加可以发散在M两个盔R的空白边之间Q无个空白边属于那个元素Q是否包含,是否
是同一个元素的?
块元?block)和行内元?inline 内联元素)
块元素:指那些默认情况下会换行显C的元素?br>行内元素Q那些默认的情况下显C方式类g文本的元素。默认情况下是同行显C,直到M内容的宽度大
于父元素的宽度时才换行显C?br>其实q有一部分叫做Q可变元?q些元素到底属于块元素还是行内元素需要具体环境决定?br>q里有一好的介l文章可以参考:
《元素block element和内联元素inline element》地址如下Q?br>http://hi.baidu.com/mazhifang/blog/item/42977ed0c662588ea1ec9c77.html
相应的元素决定了l成框的cdQ而元素的display属性可以改变生成框的类型?br>通过讄displayQblockQ可以将一个行内元素表现的像块U元素一栗?br>而设|displayQnoneQ则表示该元素根本不是框Q这栯个元素就不在占有文档中的I间?
CSS的定位机?/strong>
普通流(position:static)Q就是块U框从上C一个接一个的排列Q框之间的垂直距ȝ框的垂直I白边计出?
相对定位(position:relative)Q块U框相对于它在普通流中所处的位置q行相对的偏UR?br>注:在用相对定位时Q无论元素是否移动,它仍然占着原来的空间。因此,Ud元素有可能会覆盖其他?br>元素).2个方面:块框Q行?包裹行内?
l对定位(position:absolute)Q相对定位实际上被看作普通流定位模型的一部分,因ؓ元素的位|相对于它在?br>通中的位|?与之相反,l对 定位使元素的位置与文档流无关,因此不占据空?普通文档流中其他元素的布局?br>像绝对定位的元素不存?时一?相对定位实际上被看作普通流定位模型的一部分,因ؓ元素的位|相对于它在
普通中的位|?与之??l对定位使元素的位置与文档流无关,因此不占据空?普通文档流中其他元素的布局
像l对定位的元素不存在时一?
我ȝ的:如何定l对定位的原始祖? 父元?被定?p及远
固定定位Q?position:fixed)
它是l对定位的一个子cd.差异在于固定元素的包含块是视?q我们能够创徏L出现在窗口中相同?|的动元素.但是,q种定位方式各种览器的支持各有不同.变通的Ҏ是通过javascript来控Ӟ当然也可以是用css?
动Q?position:float)
动模型可以左右Ud,直到它的外边~碰到包含框或另一个Q动框的边~?因ؓ动框不在文档的普通流?
所以文档普通流中的块框表现得就像Q动框不存在一?关于CZ可以看这里:CSS定位机制CZ
清除动的几U方?/strong>
1.父框也Q动;
2.理由clear来做元素清除==>3.扩展Q利用伪cafter来清除Q?br>4.利用Javascript来动态清除Q?br>5.利用overflow属性设|auto或hidden来清除Q?
更全面的看下面的Q?br>《CSS规范 闭合动元素介绍?br>http://web.rdxx.com/CSS/2007/9/1322433557845.shtml
关于动的深入认?nbsp;
Q-Q-Q-Q-Q-Q-Q?/strong>推荐序阅读
1CSS动原理
http://blog.csdn.net/fishsoul/archive/2007/09/20/1792776.aspx
2.CSS Float Theory: Things You Should Know
http://www.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/ QENQ?br>http://hi.baidu.com/yan5201314/blog/item/9f5bbd0ecac641e536d122f5.html QCNQ?br>3.IE6下Q动bug详解
http://hi.baidu.com/xzkcz/blog/item/d25b580fadaac4296059f30a.html
普通流,行框相关
1.width属性是个相当与MaxWidth,而显C的实际width由内容实际占用的宽度军_.
2.行内属性的margin,padding,border的top,bottom属性不能媄响行框的高度,影响行框高度需要用line-height属?
3.块框里面的文本行会Ş成无名框.q里的无名框可能是行框也可能是块?其实文档中的所有元素都会最l包含在一个框里面.截图Q?/p>
相对定位
1.相对定位相对的是该元素在普通流中的位置.
2.相对定位的坐标定在该元素的左上角.截图Q?
l对定位
1.应用l对定位的元素不再是普通流的一部分.也就不再占用普通流中的位置.
2.l对定位是相对的目标,需要满三个条?该元素的父元?该父元素已经被定位过,
从最q的父元素找起只要页面或Html.截图Q?
固定定位
1.固定定位被认为是l对定位的一U?特别的是它相对的对象L览器的可视H口.
截图Q?/p>
动
1.动的元素会q普通流?不在占据普通流中的位置.但是它们动的范围由它的最q的父元素控?不管父元素是如何定位?
2.动其实比较?但是具体的表现受服务器媄响较?
?有意思的现象:
无论如何讄动?lt;img>?lt;p>的位|?当减浏览器H口C定程度的时?L<p>会被换到下一?不解??截图Q?/p>
具体代码׃贴了Q有兴趣的可以在q里下蝲Q?a href="http://m.tkk7.com/Files/ponzmd/CssPostion.rar">CssPostion.rar
Css验证
常用的验证工h:
w3c css valiator: http://validator.w3c.org
bookmarklet:www.andybudd.com/bookmarklets
Firefox plugin: Web Developers Extension
IE plugin:http://tinyurl.com/7mnyh
DOCTYPE切换
览器模?Ҏ览器模式的不同,会媄响浏览器寚w面显C方式的表现,最有名的例子是IE中的框模?
通常览器模式分?U?标准模式(standards mode),怪异模式(quirks mode),几乎标准模式(almost standards mode)
览器通过面中DOCTYPE声明是否存在以及DOCTYPE中用的DTDcd来确定具体的览器模?
详细的区分可以看q个:http://meyerweb.com/eric/dom/dtype/dtype-grid.html
截图如下Q?/p>
CSS中的选择?seletor)
基本的选择?元素选择?后代选择?兌选择?,class选择?c选择?,ID选择?伪类
高选择?子选择?盔R选择?属性选择?br>CZ看这里:CSS选择器示?/a>
向网中引入样式
方式1Q?br><link href="/css/basic.css" rel="stylesheet" type="text/css" />
方式2Q?br><style type="text/css">
<!--
@import url("/css/advanced.css");
-->
</style>
CSS中样式用的优先U判断?
看这里,以前的一BlogQ?a href="http://m.tkk7.com/ponzmd/archive/2007/12/17/168370.html">到底谁说了算QCSS样式表用优先判断
保持CSS样式表可l护性的一个原?/strong> 在复杂的CSS样式表里面,Ҏ样式覆盖通用样式的情况会大量出现Q?甚至于出现更Ҏ的样式覆盖特D样式的情况Q这时元素可以从多个地方获取样式Q这可能使得样式表失?控制。这时个好的是保持通用样式q可能的通用Q特D样式进可能的特D,q而做C需要覆盖特D样式。如果出C得不多次覆盖通用样式Q那么从一般规则中删除需要覆盖的声明Qƈ昄的应用于需要它的每一个元素。这样可以保持CSS样式表的可维护性? 在CSS中的注释
1.css?*开? */l束来添加注?q种叫做C|格注释.
2.适当加入l构性注?利用注释来划分代码块,方便q速查扄应代?br>3.通过"意外Ҏ?gotcha)"来实现自我提C?如TODO(以后需要修?修复或复?,KLUDGE(不完善的权宜之计 ),BUG(代码或浏览器遇到的问?,TRICKY(相对复杂的代码说?{?br>4.发布时可理由代码~辑工具或者css优化器来删除注释.
5.发布Ӟ压羃CSS文g大小: apache服务器可用gzip方式,而非apache,可用http://tinyurl.com/8w9rp上面介绍的方?
到底谁说了算Q?br> CSS样式使用优先U判?/p>
2007q??7日写的,现在转到q里来?
修正前,再次谢谢hax的指炏V最正确的说法:http://www.w3.org/TR/CSS21/cascade.html#specificity 参见q里的相兛_容,一下只是我个hh的理解方式,只解军_规情况下的绝大部分问题。不是预期用的样式Q如何判断那个样式会最lv作用呢?到底谁说了算Q可以依据下面几个原则:
CSS样式定义多了Q常常出现显C效果与预期不一致的情况。其中很大一部分原因在于起作用的样式?
1。多个选择器可能会选择同一个元素,?个规则,从上C重要性降低:
Qimportant的用h?br> Qimportant的作者样?br> 作者样?br> 用户样式
览器定义的样式
2。CSS样式的特D性权重——谁有分量,谁说了算?br>CSS规范Z同类型的选择器定义了Ҏ性权重,Ҏ性权重越高,样式会被优先应用?br>权重讑֮如下Q?br>html选择器,权重?Q?br>c选择器,权重?0Q?br>id选择器,权重?00Q?br>q里q有一U情况:在html标签中直接用style属性,q里的style属性的权重?000Q?br>卛_下情况:
#x34y {color:red}
<. p id=x34y > 优先选择style=""讑֮的样式?br>其他cd的,大家看看例子明白了?br>例子Q?br>h1{color:blue} 权重?
p em{color:yellow} 权重?
.warning{color:red} 权重?0
p.note em.dark{color:grag} 权重?2
#main{color:black} 权重?00 q里q有一U情况:
权重一h如何处理Q权重一h另说了。看看下面的明白了?
3。CSS样式的层叠原则——谁Lq,谁说了算?br>当权重一hQ会采用“层叠原则?后定义的会被应用?br>如:p{color:yellow}
p{color:red}
作用到这?nbsp; <. p >我的什么颜色呢Q?lt; /p>
l果会是red的?
4。CSS样式的特D标记——谁有特权,谁说了算?br>如果有h看不眼Q非得要自己说了,那可以搞点特权,如下卛_
p {color:blue !important;}
加上!important;可将自己权重设ؓ最高?br>如果你要问两?important;讑֮的样式,那个样式说了,我说你ؓ什么不自己试试看看呢!
好了Q谁说了的问题到q里了?/p>
Html代码Q?/strong>
<html> <head> <style type="text/css"> <!-- @import url("CssSelector.css"); --> </style> </head> <body> <h2>CSS选择器演C?span class="kwrd"></h2> <hr> 说明QCSS的基本选择器有元素选择器,后代选择?兌选择?QClass选择器,ID选择器,伪类Q?span class="kwrd"><br> 高选择器有子选择器,盔R选择器以及属性选择器?span class="kwrd"><br> 在实际用中Q通常通过各种选择器的l合使用来精控制文档样式?span class="kwrd"><br> 注意Q对于不同浏览器对于CSS选择器种cL持各有区别,一般来说基本选择器是支持的? <hr> <div class="headContent"> <ul> <li id="firstItem"> <a href="#" > 阅读 </a> </li> <li> <a href="#" rel="me"> 发现 </a> </li> <li> <a href="#" rel="you me it"> 评论 </a> </li> <li> <a href="#" rel="me"> 组 </a> </li> <li> <a href="#"> 译消? </a> </li> <li> <a href="#"> 译 </a> </li> <li> <a href="#"> 自己 </a> </li> <li id="endItem"> <a href="#"> 帮助 </a> </li> </ul> </div> </body>
CSS代码Q?/strong>
/*元素选择?/ body{color:#000000;font-size:13px} /*后代选择?/ body h2{ color:red; font-size:32px; } /*c选择?/ .headContent{ layout-flow: horizontal; PADDING: 6px 0px 0px 1px; MARGIN: 4px 0px 3px 5px; } /*l合选择器:c选择器与后代选择器的l合使用*/ .headContent ul{ font-size:16px; list-style-type:none; } .headContent li{ float:left; margin:0px 0px 4px 4px; padding:10px; background-color:#c5c5c5; } /*伪类*/ a{ TEXT-DECORATION: none; } a:link{ color:blue; } a:visited{ color:green; font-size:85%; } a:hover{ background-color:yellow; TEXT-DECORATION: underline; } /*ID选择?/ #endItem{ font-size:20px; font-weight:bold; } #firstItem{ font-size:24px: background-color:write; } /*子选择?/ #endItem>a{ cursor : help; } /*盔R选择?/ h2+hr{ border-style :dotted; } /*属性选择?扑ֱ性rel{于me的a元素*/ a[rel="me"]{ cursor : wait; } /*属性选择?扑ֱ性rel包含it的a元素*/ a[rel~="it"]{ cursor :crosshair; }
CZ代码下蝲Q?a href="http://m.tkk7.com/Files/ponzmd/%E7%B2%BE%E9%80%9ACSS.rar">CssSelertor.rar