afait.com

搜索表单

CSS选择器的优先级-如何判断CSS选择器的权重

使用CSS对网页元素定义样式时经常会遇到这种情况:要对一般元素应用一般样式,然后在更特殊的元素上覆盖它们。那么我们怎么样来保证我们所新定义的元素样式能覆盖目标元素上原有的样式呢?

在CSS中,会根据选择器的特殊性来决定所定义的样式规则的次序,具有更特殊选择器的规则优先于具有一般选择器的规则,如果两个规则的特殊性相同,那么后定义的规则优先。

那么,又怎么来计算选择器的特殊性呢?

判断方法一:根据下面给出的一张很有意思的大鱼吃小鱼的图片,可以很直观的看出CSS的优先级顺序

 
判断方法二:优先级加权的方法,请看下面这幅图

我们把特殊性分为4个等级,每个等级代表一类选择器,每个等级的值为其所代表的选择器的个数乘以这一等级的权值,最后把所有等级的值相加得出选择器的特殊值。

4个等级的定义如下:

  1. 第一等:代表内联样式,如: style=””,权值为1000。
  2. 第二等:代表ID选择器,如:#content,权值为100。
  3. 第三等:代表类,伪类和属性选择器,如.content,权值为10。
  4. 第四等:代表类型选择器和伪元素选择器,如div p,权值为1。

例如上图为例,其中#NAV为二等选择器,.ACTIVE为三等选择器,UL、LI和A为四等选择器。则整个选择器表达式的特殊性的值为1*100+1*10+3*1=113

下面是一些计算示例:

注意:通用选择器(*),子选择器(>)和相邻同胞选择器(+)并不在这四个等级中,所以他们的权值都为0。

因此,CSS样式的特殊性并不是根据选择器表达式的长短来决定的,有时候一个ID选择器可以秒杀一切!

理解选择器的特殊性很重要,特别是在修复bug的时候,因为你需要了解哪些规则优先及其原因。

如果你遇到了似乎没有起作用的CSS规则,很可能是出现了特殊性冲突。请在你的选择器中添加他的一个父元素的ID,从而提高它的特殊性。如果这能解决问题,就说明样式表中其他地方很可能有更特殊的规则,它覆盖了你的规则。如果是这种情况,你可能需要检查代码,解决特殊性冲突,让代码尽可能简洁。

 
 

Category:

Taxonomy Menu模块——drupal中将分类加入菜单的方法

本篇是介绍可以让分类中的术语表与菜单建立对应关系的模块,这个对于大多数人来说,非常好用。

涉及的模块有:

Taxonomy Menu
Nice Menus

第一步:下载并安装以上两个模块并激活。

第二步:到admin/structure/menu/add(Administration » Structure » Menus » Add)[已汉化的同学请自行对照,下同,不再另行说明 ]添加一个新菜单,比如创建一个用于侧边的导航取名为“sider-nav”
然后到admin/structure/taxonomy,选择要显示为菜单的taxonomy ,如我先前建立的词汇表(vocabulary)“归档”,点击 “edit vocabulary”,发现描述下面已经有了“Taxonomy menu”选项, Menu location 处选择我们刚才新建的菜单:sider-nav。这个选择意味着我们要把“归档“与菜单“sider-nav”建立映射关系。可以勾选“Select to rebuild the menu on submit.”重建菜单[此处会重建所有的菜单]。
再到 admin/structure/block ,可以看到已经有了我们刚才新建的菜单 :“sider-nav”

这里我们并不直接把“sider-nav”区块放在某个Region . 因为如果菜单是分级的,直接显示在某个 Region 的话,以无序列表的方式显示出来,不美观。
因此,为了让它显示得漂亮点,我们用到Nice Menus模块。 

第三步:到 admin/config/user-interface/nice_menus 配置Nice Menus模块. 勾选“Use JavaScript”,这样会启用superFish JQ插件。Advanced: Superfish options 可以配置JQ动画的细节。
Mouse delay : 延迟时间,毫秒,鼠标离开菜单后多少毫秒隐藏菜单。这里我设置为 400 .
Animation speed : 动画速度,这个就不用解释了吧。这里我选择Normal .
配置好,接下来我们到 admin/structure/block ,
找到 Nice menu 1 (Nice menu) ,点击 configure 配置,Menu Parent选择与“sider-nav”对应 ,其他按需填写即可。
Region settings 这里,是选择 Nice menu 1 这个菜单的放置位置,选择一个合适的位置即可。

第四步:如果默认的CSS在所用的主题显得不美观,可以手动指定Nice Menu的CSS样式,admin/appearance/settings/ ,在 Path to custom Nice menus CSS file输入框中输入CSS文件的位置,如sites/all/themes/example/mymenu.css,完成。

Category:

position定位教程

当人们刚接触布局的时候都比较倾向于使用定位的方式。因为定位的概念看起来好像比较容易掌握。表面上你确切地指定了一个块元素所处的位置那么它就会坐落于那里。可是定位比你刚看到的时候要稍微复杂一点。对于定位来说,有一些东西会绊倒新手,所以在它成为你的惯用技巧前你需要掌握它们。

一旦你更深入地了解了它是怎么运作的,你就能够做出一些更棒的事情来。

CSS盒模型和定位的类型

为了搞清楚定位首先你得了解CSS盒模型。在上一句中的链接是我写在InstantShift 中的一篇关于盒模型的文章。我在那篇文章做了详细的讲解并会在这篇文章中做一个快速的总结。

 
 

在CSS中,每一个元素都由一个矩形盒子所包含。每一个盒子都会具有一个内容区,内容区被一个内边距所包裹,内边距外是盒子的边框,并且在边框之外会有一个外边距用于与其他盒子分隔开来。这些你可以从下面这张图片看到。

定位模式规定了一个盒子在总体的布局上应该处于什么位置以及对周围的盒子会有什么影响。定位模式包括了常规文档流,浮动,和几种类型的 position 定位的元素。

CSS position 属性可以取5种值:

  • position: absolute
  • position: relative
  • position: fixed
  • position: static
  • position: inherit

我会在下面对前三个值进行详细的阐述并简单地讲解一下最后两个值。

static 是 position 默认的属性值。任何应用了 position:static 的元素都处于常规文档流中。它处于什么位置以及它如何影响周边的元素都是由盒模型所决定的。

一个 static 定位的元素会忽略所有 top,right,bottom,left 以及 z-index 属性所声明的值。为了让你的元素能使用任何的这些属性,你需要先为它的 position 属性应用这三个值的其中之一: absolute,relative,fixed

position 值为 inherit 的元素和其他所有属性的继承值一样,元素只是简单地应用了与父元素一样的 position 值。

绝对定位(Absolute Positioning)

绝对定位的元素会完全地从常规文档流中脱离。对于包围它的元素而言,它会将该绝对定位元素视为不存在。就好像 display 属性被设为 none 一样。如果你想要保持它所占有的位置而不被其他元素所填充,那么你需要使用其他的定位方式。

你可以通过 top, right, bottom, 和 left 四个属性来设置绝对定位元素的位置。但你通常只会设置它们其中的两个,top 或者 bottom,以及 left 或者 right。默认地它们的值都为 auto。

弄明白绝对定位的关键是知道它的起点在哪里。如果 top 被设置为20px那么你要知道这20px是从哪里开始计算的。

一个绝对定位的元素的起点位置是相对于它的第一个 position 值不为 static 的父元素而言的。如果在它的父元素链上没有满足条件的父元素,那么绝对定位元素则会相对于文档窗口来进行定位。哈!

关于“相对”这个概念你或许有点迷惑,尤其是还有一个叫相对定位的东西,这是我们还没有讲到的。

当你在一个元素的样式上设置 position:absolute 意味着需要考虑父元素,并且如果父元素的 position 值不为 static ,那么绝对定位元素的起点为父元素的左上角位置。

如果父元素没有应用除了 static 以外的 position 定位,那么它会检查父元素的父元素是否有应用非 static 定位。如果该元素应用了定位,那么它的左上角便会成为绝对元素的起点位置。如果没有则会继续向上遍历DOM直到找到一个定位元素或者寻找失败以到达最外层的浏览器窗口。

相对定位(Relative Positioning)

相对定位的元素也是根据 top, right, bottom, 和 left 四个属性来决定自己的位置的。但只是相对于它们原来所处于的位置进行移动。在某种意义上来说,为元素设置相对定位和为元素添加 margin 有点相似,但也有一个重要的区别。区别就是在围绕在相对定位元素附近的元素会忽略相对定位元素的移动。

我们可以把它看做是一张图片的重像从真实的图片的位置开始进行了一点移动。它原始图片所占据的位置仍然保留,但我们已经没法再看到它,只能看到它的重像。这样就让元素之间可以进行位置的重叠,因为相对定位元素能够移动到其他元素所占据的空间中。

相对定位元素离开了正常文档流,但仍然影响着围绕着它的元素。那些元素表现地就好像这个相对定位元素仍然在正常文档流当中。

我们无需再追问这个相对的位置是在哪里。因为这个相对位置很显然是正常的文档流。相对定位有点儿像为元素添加了 margin ,对相邻元素来说却像是什么都没发生过。但实际上并没有增加任何的 margin 。

固定定位(Fixed Positioning)

固定定位的行为类似于绝对定位,但也有一些不同的地方。

首先,固定定位总是相对于浏览器窗口来进行定位的,并且通过哪些属性的 top, right, bottom, 和 left 属性来决定其位置。它抛弃了它的父元素,它就是定位中表现地有点儿反叛。。

第二个不同点是其在名字上是继承的。固定定位的元素是固定的。它们并不随着页面的滚动而移动。你可以告诉元素它所处的位置并永远不再移动。噢~好像还挺乖巧的。

在某种意义上说固定定位元素有点儿类似固定的背景图片,只不过它的外层容器块总是浏览器窗口罢了。如果你在 body 中设置一个背景图片那么它与一个固定定位的元素的行为时非常像的,只不过在位置上的精度会略少一些。

背景图片也不能改变其在第三个维度的大小,也因而带来了 z-index 属性。

打破了平面的 Z-Index

这个页面是一个二维平面。它具有宽度和高度。我们活在一个用 z-index 作为其深度的三维的世界当中。这个额外的维度能够穿越一个平面。

由上图可知,高的 z-index 位于低的 z-index 的上面并朝页面的上方运动。相反地,一个低的 z-index 在高的 z-index 的下面并朝页面下方运动。

没有的 z-index 的话,定位元素会有点儿麻烦。因为 z-index 能让一个定位元素位于另一个元素的上方或者下方,这或许能让你做出点创造性的东西。所有的元素的默认的 z-index 值都为0,并且我们可以对 z-index 使用负值。

z-index 实际上比我在这里描述的要更加地复杂,但细节写在了另一篇文章里。现在只需要记住这个额外维度的基本概念以及它的堆叠顺序,另外还要记住只有定位元素才能应用 z-index属性。

定位的问题

对于定位元素来说由几个比较常见的问题,都值得我们好好了解。

1.你不能在同一个属性当中应用定位属性和浮动。因为对使用什么样的定位方案来说两者的指令时相冲突的。如果你把两个属性都添加到一个相同的元素上,那么就期望在CSS中较后的那个属性时你想要使用的吧

2.Margin 不会在绝对元素上折叠。假设你具有一个 margin-bottom 为20px的段落。在段落后面是一个具有30px的 margin-top 的图片。那么段落和图片之间的空间不会是50px(20px+30px)而是30px(30px > 20px)。这就是所谓的 margin-collapse,两个 margin 会合并(折叠)成一个 margin。

绝对定位元素不会像那样进行 margin 的折叠。这会使它们跟预期的不一样。

3.IE在 Z-index 上有一些BUG。在IE 6中 select 元素总是处于堆叠层级的最上方而不管它的 z-index 和其他元素的 z-index 是多少。

IE 6和IE 7在堆叠层级上又有另外一个问题。IE 6由最外层的定位元素的层级来决定哪一组的元素处于层级的最上面,而不是每一个单独的元素自身的层级决定。

<div style="z-index: "> <p style="z-index: 1"></p></div><img style="z-index: " />

对上面这段结构,你会预料段落元素处于堆叠层级的最上方。因为它具有最大的 z-index 值。但在IE 6和IE 7中,图片为处于段落的上方。因为 img 具有比 div 更加高的 z-index 层级。因此它会位于所有 div 的子元素的上方。

总结

一个元素上所设置的位置属性会根据其中的一种CSS定位模式来运作。你可以为定位元素设置 absolute, relative, fixed, static (默认), 和 inherit 中的其中一个值。

定位模式和CSS定位元素,定义了一个盒子在布局中应该处于什么位置以及围绕它的元素会受到定位元素带来的影响。

z-index 属性只能被应用与定位元素上。它为页面增加了第三个维度并设置了元素的层级上的顺序。

定位属性看起来好像很好理解,但它的运作与它在表面所看到的有点儿不一样。你可能会觉得的是相对定位更加类似绝对定位。当在做布局设计的时候你通常会想使用浮动并在指定的元素上应用定位来打破布局。

 

 

 

Category:

drupal的内核升级步骤

翻译自官方的drupal内核升级方法: 

1、数据库备份(如何备份自行google) 

2、下载最新版本的drupal,解压 

3、设置网站到维护模式 

4、除了/sites/文件夹和其他你自已定义的文件和文件夹,drupal根目录下的文件和文件夹都删除。 

5、上传之前解压的文件夹到drupal根目录(除了/sites/文件夹) 

6、如果发布的更新中包含setting.php的修改,那么就编辑覆盖老的setting.php的相关条目 (如 数据库名称、 用户和密码) 

7、如果你修改过.htaccess和 robots.txt,请备份覆盖

8、管理员帐号登录,运行update.php(yoursite/update.php) 

9、根据步骤安装更新 

10、关闭维护模式  升级完成~~~

Category:

为知博客插件无法用于drupal7的解决方法

今天尝试用wiz客户端撰写文章,同步发布到drupal的时候出错(blogapi已设置完成),总是提示“You do not have permission to create this type of post.”经过多番折腾之后,发现wiz的博客发布插件无法判断drupal中的blogapi所需要的type字段,后来在drupal中硬加上$postdata['type'] = "article";强制上传博文到文章节点类型中。

Category:

counter模块出现的notice及php中提示Undefined index的解决方法

今天在drupal7.24中测试添加了一个counter模块,用来做一个简单的访问统计,结果装好后出现了一个notice:Undefined index(server_addr)。

解决思路:

变量server_addr一般代表的是当前脚本所在服务器的IP地址,这个notice是PHP的常规提示,一般情况下,php允许未经定义的变量直接调用,但是如果没有调整提示的等级,这样的情况就会出现,而那个所以解决这个问题有两个方法:

1、直接在变量符号$前加上@符号,来抑制当前语句的报错信息(这个方法非常好用,可以用于无权限修改服务器配置的情况)

2、修改php.ini中的 error配置下错误显示方式:将error_reporting = E_ALL 修改为error_reporting = E_ALL & ~E_NOTICE修改后重启下apache。

Category:

drupal7在IIS6上的简洁链接配置

刚搭建好环境,测试简洁链接弄了好久,基本上“drupal7.24在IIS6上的简洁链接配置”的设置分以下几步:

1、下载安装ISAPI_Rewrite3,至于版本应该可以自行选择,总之我下载的是ISAPI_Rewrite3_0104.msi,安装过程NEXT一直就行,注意路径选择那一步,要记下所安装的目录,下面配置IIS需要用到

2、配置IIS,右键点击在IIS中的网站名字—>属性->ISAPI筛选器—>添加—>筛选器名称:ISAPI_Rewrite3—>可执行文件:找到刚才安装的目录中的ISAPI_Rewrite.dll文件,确定即可

3、重启IIS并点击全局的那个“网站”右键,删除里面的ISAPI_Rewrite3这一筛选器,这样是为了不让后面的重写规则影响到服务器上的其他网站,后重启IIS

4、开始菜单-所有程序-Helicon-ISAPI_Rewrite3-ISAPI_Rewrite Manager打开,点击edit加入如下规则后点击保存,应用:

# Helicon ISAPI_Rewrite configuration file
# Version 3.1.0.104 <Directory /var/www/example.com>
RewriteEngine on # 下面这个地方要注意,你的网站如果不是在根目录下面,就必须写成“RewriteBase /mysite”这样的格式
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php?q=$1 [L,QSA]
</directory>

注意:这个时候不要在程序配置中选择你所要配置的网站如drupal724,然后选择编辑那个网站的.htaccess文件,那样无效(我就卡在这测试了好久才发现),应该是在根目录也就是全局中编辑。

5、编辑drual网站目录下sites/default/settings.php文件,在文件结尾追加一行“$conf['clean_url'];”,后重启IIS

6、进入drupal7管理员后台设置中的简洁链接处,勾选启用即可。