css使用笔记

最近写一个前台页面,因为不用考虑太多兼容性问题,尝试了很多css3的东西,记录下。

1、渐变和边框阴影
最初的视觉稿,上面有很多地方颜色使用了渐变,为了不使用图片,用了很挫的方式来实现:从图片渐变开始、中间、结束部分,用gimp的吸管获取颜色,然后转换成css的渐变。不过因为渐变每个浏览器支持方式不太一样,有一些在线生成css的网站还是不错的,比如这个这个
边框阴影,也就是box-shadow属性。按照MDN的文档,值的组成是这样的:

box-shadow:  none | [inset? && [ <offset-x> <offset-y> <blur-radius>? <spread-radius>? <color>? ] ]

现在的浏览器支持的不错了,有些框外面加点阴影,效果会好点。

2、绑定事件
很多地方为了突出(其实大部分因为上头有人说要弄的炫一点),需要在鼠标移动过去之后,增加点效果。比如增加padding、改变颜色或者展示浮出层。css有一些dynamic pseudo-classes(不知道怎么翻译,从这里抄过来的),可以选择有指定状态的元素。比较常见的应该就是hover,在鼠标移入,但没有触发元素的时候(The :hover pseudo-class applies while the user designates an element with a pointing device, but does not necessarily activate it)。
比如,菜单中,如果鼠标移动到某个菜单项,但是还没有点击的时候,需要突出这个菜单项,可以这么做(这里菜单项是个简单的a元素):
[cce lang="css"]
ul#main-nav > li > ul > li > a {
display: block;
width: 100%;
text-decoration: none;
font-size: 13px;
color: black;
}

ul#main-nav > li > ul > li > a:hover {
color: #FE9900;
font-size: 14px;
}
[/cce]
这样,在鼠标移动到菜单项上,会使下面一个选择器生效,将当前的字体放大,颜色变色。

3、css选择器
上面那个例子,已经用了一些css选择器了,这里再记录下其他用到的选择器:

  • id选择器(#ID):页面上带了id属性的,精确而且方便
  • 类选择器(.class):元素class属性带的,用的应该也是最多的
  • 直接选择元素(tagname):直接使用元素名称,我一般习惯和class或者id共用,不太喜欢给全局某个元素加上很多样式,虽然统一,但是场景太多,有些地方不好控制。
  • 属性选择器([attr="xxx"]):这个用来兼容老的标签比较好,比如表格单元格要居中显示,原先可能会直接写成:
    [cce lang="html"]
    <td valign="middle"></td>
    [/cce]
    但是表格加了样式后,这些属性会失效(这个没去找原因),可以在样式表中这样写:
    [cce lang="css"]
    td[valign='middle'] {
    vertical-align: middle;
    }
    [/cce]
    这样就能给在标签中加了valign属性的元素,再加上vertical-align的样式属性了。
  • 伪选择器:前面用到了:hover这个伪类,其他类似的还有:focus等,能够用来标识元素的不同状态。另一类伪类选择器,可以从一堆元素中筛选需要的元素,对我最有用的就是:nth-child了。:nth-child(an+b)像一个函数,通过设置不同的a和b,计算出可以取的正整数:
    [cce lang="css"]
    tr:nth-child(2n+1) /* 表格中的奇数行,也可以用tr:nth-child(odd)表示 */
    tr:nth-child(2n+0) /* 偶数行,也可以用tr:nth-child(even)表示 */
    [/cce]
    另外还有一个很有用的伪选择器,是可以创建伪元素,这样就可以在需要的元素前后增加自己需要的东西(图标等)。
    [cce lang="css"]
    .btn-icon-add::before {
    content: url("icons/edit_add.png");
    }
    [/cce]
    这样能在加了btn-icon-add class的元素前面,增加一个元素,内容是url中的图片。这里遇到过一个问题,就是到底用一个冒号,还有两个冒号。在ff和chrome中,一个冒号和两个冒号都可以,但是ie8(其他ie没试过)只能识别一个冒号的。google了一下,有人说是两个冒号是css3定义的,为了区别css2中定义的其他伪选择器,但是可以用一个冒号,以保持向下兼容。
  • 组合选择器:用的最多的应该就是空格、>、+等,空格表示空格后面元素是前者的后裔,和>的区别是>表示直接子元素。加号表示临近的兄弟元素。不过目前没法选择父元素,这个比较恶心。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据