一、学习资源
- Google: 关键词 MDN
- CSS Tricks
- Google: 阮一峰 css
- 张鑫旭的 240 多篇 CSS 博客
- Codrops 炫酷 CSS 效果
- CSS揭秘
- CSS 2.1 中文 spec
-
Magic of CSS 免费在线书
最权威的书其实是文档。(css spec)
如果你想快速上手，就先写小 demo 再学理论。
如果你想一鸣惊人，就仔细看 CSS 规范文档。
从 2011 年开始 CSS 被分为多个模块单独升级，统称为 CSS 3。这些模块有：
- CSS 选择器 level 3
- CSS 媒体查询 level 3
- CSS Color level 3
- 更多请 搜索 CSS spec
在此之后不会继续升级成 CSS 4，各个模块都是单独进化的了
css的周边工具(先不学，等到朴素的css学好了，才学这个以进化)
LESS CSS # 一种简化、功能更多的 CSS 语言 中文官网 英文官网
SASS #一种简化、功能更多的 CSS 语言（请自行搜索中英文官网）
PostCSS #一种 CSS 处理程序
二、引入css
0、在没有css时候：
<body bgcolor="grey">
<h1><center><font color=“red”>居中加红</font></center></h1>
1、然后有了内联样式，把样式写在标签上，一切属性用style来达成
<body style="background-color:grey">
<h1 style="text-align:center;color:red>
2、但是这样一个个加在标签上面又多又乱不好看呀，于是引入了style标签方法，一口气可以把所有h1定义成我们要的模样：
<style>
body{background-color:grey;}
h1{text-align:center;color:red}
</style>
3、但是如果2中标签定义太多，style部分太长，我们又嫌弃不能直接看到页面内容是什么，看半天会长什么样子，所以把style摘出来，单独放在a.css文件中
4、在3的基础上，在a.css里面引入b.css
@inport url（./b.css）;
加在css第一行，其他和3一样
三、细节写
所有标签除了div和span都有默认样式，这个时候默认样式不好看，加上margin：0；padding：0
怎么把一个列表浮起来呢
<li style=“float：left；”>有丑圆点浮着，在ul标签加上style=“List-style：none”；
又发现下面块块的东西莫名其妙跑到我的列表了，一般浮动伴随着bug，在浮动元素的父标签上（这里是ul）加上class="clearfix"
.clearfix::after{
content: '';
display: block;
clear: both;
}
优化代码表达，比如合并同类项
改正字体
改字体格式的时候可能没有变化，因为我们的浏览器不自带这种字体，可以从network的font选项中查看，我们可以用一个最接近的字体，可以在word里面试一试
改正字间距
细节优化，比如这里把鼠标停在菜单上会有红色下划线，
改正线的长度，先要测量线的长度，用开发者工具来force element state，强制对象为hover，会保持这个红线状态；
li没把它儿子a包起来，是个bug，给a标签加上一个display：block就可以了
在中线对齐logo和右边的菜单栏
把上右下左的padding设置好
image.png
一、先把导航条从竖着变成横着，
二、把这个横条条的字体信息(从最靠近字体的标签a下手)、字间距和背景等细节设置好
三、旁边的logo一起肩并肩
四、悬停鼠标有下划线(记得为悬停状态考虑，所以a标签时候就要留好位置给悬停状态用，即在a中就加上透明的线)
五、对logo下手啦，先改字体，相同点用它们的的父亲来，因为不同又各自加了span，字体大小，粗细，颜色，字间距
六、logo和nav都居中对齐
先各自元素居中，就是元素的bordertop和bottom一样
在补上各自整体的paddingtop和bottom（不一定一样），使logo加好了和nav一样而且看起来好看即可；最后整个topnavbar四个方向的padding补好
网友评论