随笔分类 -  22 CSS

上一页 1 2
em px 简单换算
摘要：大部分的网页设计者在CSS代码编写中总是先对整体定义字体尺寸，中文情况下一般为12px，而其实这样以来在通过IE顶部菜单中的“察看-文字大小”设置已无任何 作用。对字体感觉太小的浏览者而言无疑是种很不好的用户体验过程。其实这一切都可以避免，那就是使用em单位作为字体显示单位。一、首先说下em和px的区别：1. IE无法调整那些使用px作为单位的字体大小;2. Firefox能够调整px和em，但是96%以上的中国网民使用IE浏览器(或内核)。3.px像素(Pixel)。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。而em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的 阅读全文
posted @ 2014-01-27 13:54 心存善念 阅读(14823) 评论(0) 推荐(0)
CSS选择器的权重与优先规则
摘要：权重顺序“important > 内联 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 继承 > 通配符”。原文：http://www.nowamagic.net/csszone/css_SeletorPriorityRules.php我们在使用CSS对网页元素定义样式时经常会遇到这种情况：要对一般元素应用一般样式，然后在更特殊的元素上覆盖它们。那么我们怎么样来保证我们所新定义的元素样式能覆盖目标元素上原有的样式呢？在CSS中，会根据选择器的特殊性来决定所定义的样式规则的次序，具有更特殊选择器的规则优先于具有一般选择器的规则，如果两 阅读全文
posted @ 2013-09-26 11:52 心存善念 阅读(676) 评论(0) 推荐(0)
CSS规则的执行顺序（转）
摘要：你对CSS规则的执行顺序是否了解，这里和大家分享一下，若两条规则具有相同的权值、起源及特殊性，那在样式表中最后出现的规则优先。1、CSS规则之特殊性首先来看一下这个例子将会发生的情形： Meerkat Central H1和.grape都匹配上面的H1元素，那么到底应该使用哪一个呢？实践证明.grape是正确答案，把句子显示为蓝色。根据规范，一般的HTML元素选择符(H1,P等)具有特殊性：1、类选择符具有特殊性10，ID选择符具有特殊性100，值越大，权重就越大，越优先。2、CSS规则之继承在特殊性的框架下，被继承的值具有特殊性0，也就是说任何显式声明的规则将会覆盖其继承样式，即便这条... 阅读全文
posted @ 2013-09-26 11:06 心存善念 阅读(3745) 评论(0) 推荐(0)
Css 常用属性
摘要：1. overflow:hidden和zoom：1 verflow:hidden;的作用 1. 隐藏溢出 ；2.消除浮动 <style type="text/css"> #div1 { height:auto;border:solid 1px red;zoom:1;overflow:hidden;} 阅读全文
posted @ 2013-08-19 21:14 心存善念 阅读(361) 评论(0) 推荐(0)
Css 特殊或不常用属性
摘要：1. -webkit-font-smoothing: antialiased;CSS3中用于webkit引擎(如chrome)中设置字体的抗锯齿或者说光滑度的属性。有3个属性：none用于小像素的文本、subpixel-antialiased浏览器默认的、antialiased反锯齿。webkit内核私有属性，用于字体抗锯齿，使用后字体看起来会清晰舒服很多。 阅读全文
posted @ 2013-08-19 20:16 心存善念 阅读(300) 评论(0) 推荐(0)
Css 进度条
摘要：1.让人不得不爱的22个UI进度条设计 阅读全文
posted @ 2013-08-19 20:00 心存善念 阅读(297) 评论(0) 推荐(0)
Css 字体
摘要：1、text-indent设置抬头距离css缩进 即对，对应div设置css样式text-indent : 20px; 缩进了20px 2、letter-spacing 设置字符间距离 即对对应div设置css属性样式为letter-spacing:8px;，字间距为8px 3.行间距 在CSS中， 阅读全文
posted @ 2013-08-19 12:01 心存善念 阅读(421) 评论(0) 推荐(0)
css 学习资料
摘要：1. 70+优秀的前端工具http://www.w3cplus.com/source/front-end-developer-excellent-tool.html 阅读全文
posted @ 2013-04-10 09:36 心存善念 阅读(187) 评论(0) 推荐(0)
导入CSS的三种方式
摘要：导入CSS的三种方式：1.内部样式<style type="text/css"></style>2.外部样式<link rel="stylesheet" type="text/css" href="/test.css">3.内联样式<div style="color:red;"></div> 阅读全文
posted @ 2013-03-27 11:31 心存善念 阅读(244) 评论(0) 推荐(0)
JQ添加移除css样式
摘要：我们常常要使用Javascript来改变页面元素的样式。其中一种办法是改变页面元素的CSS类(Class)，这在传统的Javascript里，我们通常是通过处理HTML Dom的classname特性来实现的；而jQuery里提供三种方法来实现这个功能，虽然它们和传统方法的思想相通，但是却节省了许多代码。还是那句话 - “jQuery让JavaScript代码变得简洁！” 1. addClass() - 添加CSS类$("#target").addClass("newClass");//#target 指的是需要添加样式的元素的ID//newClass 阅读全文
posted @ 2013-03-04 19:39 心存善念 阅读(49885) 评论(0) 推荐(4)
多控件时，自适应布局(dl dd td )
摘要：现象：当改变浏览器宽度变小时，常常因为控件太多，导致改变布局，使得混乱不堪。代码：<script type="text/javascript"> $(document).ready(function () { $("#op_div").css("padding-top", $("#search_div").height() + 5); //div自动高度 });</script><div id="search_div" class="tt-attach&q 阅读全文
posted @ 2013-02-21 19:06 心存善念 阅读(1339) 评论(0) 推荐(0)
图片显示、PNG透明
摘要：css:margin:0pxauto; 自动居中display:block; 块显示，图片自动伸缩width:400px;height:400px; 透明示例： width: 325px; height: 378px; display: block; position: absolute; top: 0px; bottom: 0px; right: 0px; z-index: 100; margin: auto 0px auto 0px; opacity:0.9; -moz-opacity:0.9; -khtml-opa... 阅读全文
posted @ 2012-12-19 11:46 心存善念 阅读(401) 评论(0) 推荐(0)
表格边框
摘要：仿京东商城--我的订单html 记录时间 积分 积分类型 积分说明 2012-01-01 00：00：00 10 赠送 ... 阅读全文
posted @ 2012-12-19 11:43 心存善念 阅读(301) 评论(0) 推荐(0)

上一页 1 2