css学习笔记（1）

最新推荐文章于 2024-09-23 15:32:37 发布

weixin_34092370

最新推荐文章于 2024-09-23 15:32:37 发布

阅读量49

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/leomYili/p/4761642.html

为什么要重新学css，理由有很多，css这个小婊砸，接触至今已有三年，但真的说熟练恐怕不见得。特此，为了我的目标，开始重新整理css的知识，我希望，每一篇笔记都能有个例子，从而来巩固我的知识。

在学习之初，额，先介绍咱刚刚会玩的Less，对于像我这种记忆力超级差的人，有一份好一点的css文档简直是做梦啊，最近的项目要做一个主页，七个子页，最关键的是子页的细节还不大相同，不是结构，而是字体啦，间距啦，颜色啦，设计给的原型说是要色彩鲜明一点，准确的说，和以前不一样呗，无语勒，特此学习Less，网上生成http://www.lesscss.net/#online-less-compilers，当然，我用sublime 有插件直接生成哦

变量

（1）

@link-success:#00CC33

#a:link{@link-success};——less

#a:link{#00CC33};——css

由于变量只能定义一次，其本质就是“常量”。对于我而言，如果一个color定义三次以上，但分别是不同的层次，是可以用{class class}

但是看的蛋疼，想想要是要改其中一个，我要么重写个class来覆盖，要么修改原来的？（我彪哦，webapp font一天改好多次，要死）对于我而言，使用Less定义一下新的变量了，再在Less里放进去，关键层级清楚；

（2）

@nav: nav; 

.@{nav}{
     font-weight: bold; line-height: 40px; margin: 0 auto;
    }——less

注意写法，那我现在新增个bottom nav，就so easy了

bottom.@{nav}
    { font-weight: bold; line-height: 40px; margin: 0 auto;
    }——less

（3）@var: @a;@a: 100%;

.lazy-eval-scope { width: @var; @a: 9%;}——less

重复引用了呗，但这个不一定有直接写的快，得想好层级关系，对于一般的页面，我倒是觉得上述俩基本够用，特别是跨浏览器的webkit，moz，写死人，我从来都不勤快，但爱折腾，用less省去大部分ctrl+c的工作，更关键，不是模块化么，听上去就不low。

混合

（1）将其他class,id直接塞进去

.border-small{border:1px solid #00CC33}

.topnav{width:80%,.border-small};——less

.topnav{width:80%,border:1px solid #00CC33};——css

我倒是很喜欢混合，但最好将其与调用层分割，另外，加个注释呗，老忘。

（2）使用css的选择器写法

#outer > .inner;

#outer > .inner();

#outer.inner; 

#outer.inner();其实一个意思，对于

#outer {

  .inner {
    color: red;
  }
}
.c {
  #outer > .inner;
}

而言，但如果是这样

#outer {
  .inner() {
    color: red;
  }
}
.c {
  #outer > .inner;
}

就会发现只生成了

.c {
  color: red; 
}

so，如果想隐藏，如果不想要其class出现，但还有用，在class名后加（）。混合里还有important需要注意，可以通过直接赋值来完成操作

.foo (@bg: #f5f5f5, @color: #900) { background: @bg; color: @color; } .unimportant { .foo(1); } .important { .foo(2) !important; }

嵌套

#header { color: black; .navigation { font-size: 12px; } .logo { width: 300px; } }

#header {

  color: black;

}

#header .navigation {

  font-size: 12px;

}

#header .logo {

  width: 300px;

}