CSS样式选择符优先级(权重)问题

CSS优先级的四大原则:

原则一: 继承不如指定

如果某样式是继承来的永远不如具体指定的优先级高。
例子1:
CODE:
<style type=”text/css”>
<!–
*{font-size:20px}
.class3{ font-size: 12px; }
–>
</style>
<span class=”class3″>我是多大字号?</span>

运行结果:.class3{ font-size: 12px; }

例子2:

CODE: <style type=”text/css”><br

阅读全文

CSS实现图片垂直居中

使用纯CSS实现未知尺寸的图片在200px的正方形容器中水平和垂直居中。

.box { /*非IE的主流浏览器识别的垂直居中的方法*/ display: table-cell; vertical-align:middle; /*设置水平居中*/ text-align:center; /* 针对IE的Hack */ *display: block; *font-size: 175px;/*约为高度的0.873,200*0.873 约为175*/ *font-family:Arial;/*防止非utf-8引起的hack失效问题,如gbk编码*/ width:200px; height:200px; border: 1px solid #eee; } .box img { /*设置图片垂直居中*/ vertical-align:middle; max-height: 146px; max-width: 216px;

}

px和em

今天来818 css font里的属性。

px和em都是长度单位,区别是,px的值是固定的,指定是多少就是多少,计算比较容易。em得值不是固定的,并且em会继承父级元素的字体大小。

px绝对值:

  • 将文本设置为指定的大小
  • 不允许用户在所有浏览器中改变文本大小(不利于可用性)
  • 绝对大小在确定了输出的物理尺寸时很有用

em相对大小:

  • 相对于周围的元素来设置大小
  • 允许用户在浏览器改变文本大小

任意浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em。

阅读全文

20个优秀的前端框架

1
前端开发并不难,但是要想做得优雅、健壮并不容易,使用一个好的前端框架能够帮你很多忙。本文列举了20个优秀的前端框架,供选择使用。

1. Twitter BootStrap (Apache v2.0;响应式)

时髦、直观并且强大的前端框架,让Web开发变得更加容易。

2. Foundation (MIT;响应式)

最先进的响应式前端框架。

3. 960gs(GPL&MIT;响应式)

960gs提供了一个简单的网格系统,适合快速开发。

 

4. Skeleton(MIT;响应式)

阅读全文

css绘图,实现一些特殊形状

6

还是和前面的tips一样,多用after和before,能省俩标签!俩!比如这一堆的形状

代码:

<!DOCTYPE HTML> <html> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ /> <meta name=”keywords” content=”前端开发,CSS,HTML,XHTML,JS” /> <meta name=”description” content=”专注前端技术博客”

阅读全文

windows端的less编译工具

5

WinLess
WinLess is a Windows GUI LESS compiler. WinLess is a must-have for the webdeveloper who uses Windows.

WinLess

Usage

When you add a folder to WinLess (either via ‘Add folder’ or by dropping it on the folder pane), WinLess will start watching the LESS files in it.
WinLess will automatically recompile a less file when it is changed.

If you have a folder called ‘less’ and a folder called ‘css’ on the same level, add the parent folder. WinLess will then automatically use the css

阅读全文

用LESS管理你的CSS,高效、可维护

如果你的项目中需要写的css特别多,那么你可以尝试一下使用less去管理你的css。

less是一种动态样式语言,既能跑在浏览器中也能跑在服务端(与node)。
less的官网:http://lesscss.org/

下面介绍下less特性:
1、你可以在最前面定义好你的全局样式,下面可以重用

?
// LESS
@color: #4D926F;
#header {
  color: @color;
}
h2 {
  color: @color;
}
?
/* Compiled CSS */
#header {
  color: #4D926F;
}
h2 {
  color: #4D926F;
}

阅读全文