css学习笔记(1)

时间:2022-04-19 11:34:16

为什么要重新学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;

}

import

这个对于我来说就很好用了,我可以把一些常用的常量都封装在一个Less文件里,用的时候只需在新的Less文件里引入就好。

当然,这只是我对于css文档的一种管理方式,用来治我的间歇失忆症,最近也在重读css,也有不少收获,我想的是,通过重新学习,来开始制作我自己工作的组件。fighting!