CSS 规则
CSS 的顶层样式表由两种规则组成的规则列表构成：
-
at-rule，也就是 at 规则
-
qualified rule，也就是普通规则
普通规则
普通规则由选择器和声明区块构成，声明区块又由属性和值构成
如果有一行 HTML 代码：
<a class="link" id="link">链接</a>
然后我们给这个 a 标签一个字体颜色的样式：
第一种写法：
a {
color: #fff;
}
第二种写法：
.link {
color: #fff;
}
第三种写法：
#link {
color: #fff;
}
这三种写法里的 「a」、「.a」、「#a」就是选择器（这只是三种常用的选择器），一对花括号表示这是一个声明区块，也就是在说「这个花括号里面的都是要一起用在前面这个选择器上的」，你可以在花括号里加别的属性和对应值，只要你放在这个花括号里了，那么这个属性和值就会应用到这个选择器上。
「color」就是属性，「#fff」是值，还有很多属性比如「font-size」、「display」等，它们都有各自对应的值，多使用多练习就会熟悉了
英文好的可以去 w3.org，不好的用 w3school，这里就不给出具体网址了，学会用搜索引擎自己找到答案是做开发的基本技能。
at 规则
目前只要知道这种 at 规则就可以了：
-
@media 平时说的响应式就可以靠它
-
@keyframes 这是用来做动画效果的，可以定义动画关键帧
-
@import 引入别的 CSS 文件
@media
@media screen and (max-width: 300px) {
body {
background-color:#fff;
}
}
上面的代码表示在屏幕宽度不超过 300px 的时候，body 元素的背景色为白色
@keyframes
@keyframes .a {
from {
left: 0;
top: 0;
}
to {
left: 100px;
top: 100px;
}
}
@import
@import "mystyle.css";
作业
如果你完成了 HTML 那一篇的作业，那 HTML 的使用肯定没什么问题了，那么现在我建议你去仿写一个小米官网，HTML + CSS，可能你乍一看觉得不知道怎么下手，你就把整个页面分成几块，每次完成一小块，等写完了你自然而然就会知道这种页面应该怎么处理了。
如果你怕写错迟迟不敢下手这是正常的，没关系，直面害怕和错误就好了，管他三七二十一动手就是写，不管写出来是什么样子，先写出来。
这里我估计新手可能需要一周时间。
然后如果你写完这个页面还对前端抱有兴趣，建议你去仿写微软官网，他是一个响应式的页面，如果仿写出来了，你对响应式也会有个大概的了解，接下来就可以进入 JS 的学习了。
写的过程中有难以解决的问题都可以问我。
网友评论