demy-ouyang / blog Goto Github PK

View Code? Open in Web Editor NEW

1.0 1.0 0.0 10 KB

blog's People

Contributors

Stargazers

Watchers

blog's Issues

less and sass

less

LESSCSS是一种动态样式语言，属于CSS预处理语言的一种，它使用类似CSS的语法，为CSS的赋予了动态语言的特性，如变量、继承、运算、函数等，更方便CSS的编写和维护。
LESSCSS可以在多种语言、环境中使用，包括浏览器端、桌面客户端、服务端。

LESS中文官网http://www.1024i.com/demo/less/
Less中文网http://lesscss.cn
Bootstraphttp://www.bootcss.com/p/lesscss/
慕课网Busy教程http://www.imooc.com/learn/102，http://www.imooc.com/learn/61
githubhttps://github.com/less/less.js

sass

Sass 是对 CSS 的扩展，让 CSS 语言更强大、优雅。它允许你使用变量、嵌套规则、 mixins、导入等众多功能，并且完全兼容 CSS 语法。 Sass 有助于保持大型样式表结构良好，同时也让你能够快速开始小型项目，特别是在搭配 Compass 样式库一同使用时。

w3cplushttp://www.w3cplus.com/sassguide/
大漠老师慕课网教程http://www.imooc.com/learn/311，http://www.imooc.com/learn/436
慕课网Materliu教程http://www.imooc.com/learn/364
SASS中文网http://www.sasschina.com
SASS中文文档http://sass.bootcss.com

compass

Sass是一种"CSS预处理器"，可以让CSS的开发变得简单和可维护。但是，只有搭配Compass，它才能显出真正的威力。
简单说，Compass是Sass的工具库（toolkit）。
Sass本身只是一个编译器，Compass在它的基础上，封装了一系列有用的模块和模板，补充Sass的功能。它们之间的关系，有点像Javascript和jQuery、Ruby和Rails的关系。

Compass官网http://compass-style.org
慕课网Materliu教程http://www.imooc.com/learn/371
阮一峰博客http://www.ruanyifeng.com/blog/2012/11/compass.html
图灵社区http://www.ituring.com.cn/tupubarticle/713

less和sass

less和sass作为目前国内比较流行的css预编译器，前端圈子讨论热度很高。两者对比来说，各有优缺点：

less配置较sass更简单，比较好上手；
据说BAT等知名互联网企业的前端团队使用less的频率比sass更高；
sass已经出现了compass这样成熟的框架，而less并没有；
功能方面sass比less更强大；
sass教程和讨论热度比less更多和更高；
等等

还有类似的css预处理器stylus也出现了，但总体推广度使用率比less和sass低很多。

CSS|CSS选择器的权重与优先规则

优先级顺序

选择器优先级：外联式样式>嵌入式样式>内联式样式

外联式样式（属于外部样式表）
在html页面中 <head></head>使用<link rel="stylesheet" type="text/css" href="demo.css"/>
嵌入式样式（属于内部样式表）
在html页面中 <head></head>使用<style type="text/css">...</style>包含样式，格式和demo.css一样，同理选择器列表顺序相同。
内联式样式（属于内部样式表）
样式直接在页面结构中的元素体现，例如
```
<a style="color:pink"></a>
```

选择器权重（越往后越高）：

1、通用选择器（*）

 *{margin:0;padding:0;color:#000;}

2、元素（标签）选择器

p{display:block;color:green;}

3、类（class）选择器

.bar{color:#ddd;}

4、伪类

div p:last-child{color:blue;}

5、 ID选择器

#bar1{color:red;}

橘个栗子

html结构如下

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="css/demo.css"/>
</head>
<body>
<div class="barbox">
    000 <!--黑色-->
    <p>111</p> <!--绿色-->
    <p class="bar">222</p><!--灰色-->
    <p class="bar" id="bar1">333</p><!--红色-->
    <p class="bar" style="color: pink;">333</p><!--粉色-->
    <p class="bar">4444</p><!--灰色-->
    <p class="bar"  id="bar2" style="color: pink;">555</p><!--粉色-->
    <p>666</p><!--蓝色-->
</div>
</body>
</html>

CSS|特殊!important

特殊!important

!important是CSS1就定义的语法，作用是提高指定样式规则的应用优先权。
在CSS中，通过对某一样式声明!important ，可以更改默认的CSS样式优先级规则，使该条样式属性声明具有最高优先级，也就是相当于写在最下面。

橘个栗子 `A-Apple，B=banana，C-cherry樱桃，D-date枣not-durian榴莲`

如下HTML结构

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>好多好吃的</title>
    <link rel="stylesheet" type="text/css" href="css/demo.css"/>
    <style></style>
</head>
<body>
<div class="barbox">
    <p>111</p>
</div>
</body>
</html>

Apple

demo.css
```
.barbox p{color:blue;}
```
Banana

head中的<style></style>

.barbox p{color: pink;}

Cherry

html结构中

<p style="color:red;">111</p>

Date
特殊！important

.barbox p{color: green !important;}

结果：优先级别是A<B<C<D，最终p字体是绿色。（结果适用于浏览器ie6-10或者Firefox和Chrome）

特殊IE6

虽然IE6支持!imporant,但是也有bug，书写方式很关键。

书写方式一：

.barbox p{
color: green !important;
color:purple;
}

IE6不识别!imporant，结果字体会是紫色；

书写方式二：

.barbox p{
color: green !important;
}
.barbox p{
color:purple;
}

这样书写IE6才能识别，字体颜色显示为绿色。

clearfix清除浮动

清除浮动

.clear

早期清除浮动使用比较多的是.clear方法，具体是在html中需要清除浮动的结构前面或者后面增加一个div.clear或br.clear。代码如下：

<div class="clear"></div>
<!--`div.clear`和`br.clear`取其一-->   
<br class="clear"/>

这种方法改变了html结构，相当于增加了空标签造成页面代码冗余。

.clearfix

clearfix清除浮动的写法很多。

CSS写法

/*方法一*/
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
.clearfix{*+height:1%;}
/*方法二*/
.clearfix{overflow:auto;_height:1%}
/*方法三*/
   .clearfix{
        *zoom:1;
    }
    .clearfix:before,.clearfix:after{
        display: block;line-height:0;content:'';
    }
    .clearfix:before{
        clear:both;
    }

LESS写法

.clearfix{
&:before,&:after{
    content: " ";
    display: table;
  }
  &:after{
    clear:both;
  }
}
div{
.clearfix();
}
}

SASS写法

%clearfix{
  &:before,&:after{
    content: " ";
    display: table;
  }
  &:after{
    clear:both;
  }
}
.clearfix{
@extend %clearfix;
}
div{
@extend %clearfix;
}/*需要清除浮动的div*/