摘要：此时你只需要在问题出现时，去问谷歌。附一个我目前遇到所有用过的属性，在的梳理后，如果你能手写出谷歌首页，那么你一定会了解它们的用法。
问题
有时候会觉得自己在写 css 时没有什么章法，因为 css 的属性很多，又有一些继承不继承的关系，还有一些相互影响的属性需要注意。总之就是觉得写 css 好费劲，不如写编程语言的逻辑清晰明了。
干货手写 css 很重要
对于简单页面，嵌套式的 sass 和 bootstrap 没必要用
（ 但 sass 中的颜色变量还是很好用的，可以在 .scss 文件里写 css + 颜色变量）
css 的原理是很简单（单字、展示、大小、定位、对齐、样式，初学者应注意这个顺序；这个顺序来自 CSScomb）
在写页面写出效果后，用 CSScomb 回顾并理清思路
可能会碰到的常用 css 属性列表（至少用它们可写出一个正常的（或被改造的）谷歌首页）
分析 sass ?有的人会建议使用 less 或 sass 来代替样式表文件，或者把一个 css 文件分成几部分，然后用一个 @_xx 来引入。新手注意：对于小站点、小页面的需求来说，是几乎不需要引入任何 css 预编译器特性的。
我所理解的 sass 和 compass 等对于 「css 样式表设计」 的辅助工具、高阶工具，是为了帮助人们解决一些重复性的工作，也就是说能腾出一些处理重复工作的时间去干别的。
也就是说，如果一个人不能手写一个布局（比如手写谷歌首页和百度首页），是因为它对于要实现的效果不理解，对于要实现的效果无法用 css 来表现，这是样式表基础知识的不牢固造成的。
这时用 sass 是没用的。这些高阶工具能帮你解决什么问题呢？它能缩短你手写 css 的时间，但不能替你写 css。
也就是说，sass 编译出来的 css，你，应该是可以手写出来的。如果达不到这个要求，说明你页面写得不熟。
bootstrap ?如果你是一个新手，一定会有很多人像你推荐 bootstrap 因为它能够免去很多麻烦。比如 它的 grid 12 网格布局。
呃 ... 怎么说呢，我觉得对于纯 css 的学习，要比对于 bootstrap 等前端框架的学习，要有趣。
css 是一个很 showy 的东西，你可以叫它 UI，也可以叫它 Web Design，因为它是给 html 上样式的。它的语句本身是松散的（相对于编程语言的逻辑），但它有因为松散而毫无章法吗？
No，Never，否则请向我解释一下那些看起来很漂亮的网页是怎么在 bootstrap 出现之前实现出来的。
而往往越松散的东西，它的原理就会越基本 ———— 而在这松散的架构和基本的原理之上，发挥出的想象力才是最大的。
真正的想象力是一种很迷人的东西。如果你用 bootstrap 完成了页面的全部设计，那么你的想象力很可能就是 bootstrap 的 grid 。可能在不知不觉中错过了设计的精髓 ———— 简单、松散、想象力无尽。
而实际上，初学者：css 的原理是很简单（单字、展示、大小、定位、对齐、样式，注意这个顺序），既包括了在一张网页上画画所需要的一切，又没有冗余的东西。在手写 css 时，在微调样式表的过程中，你体会到一种微妙的和谐和内在的、小而美的逻辑。
掌握了 css 原理之后，你会比使用 bootstrap 更觉得心应手。
看教程？如果你已经下定决心，抛弃 sass 和 bootstrap，拥抱 css ，那么可能有人会给你推荐 很多书，比如。但是这些书上的资料太多了，并且倾向于覆盖方方面面。 you know, css looks complex, but using css is easy
解答这时，应当在练习写页面的过程中，搜索各种解决办法，顺带温习样式表的基础知识。有些知识，书上的讲解好；有些知识，网上的文章就够拿来解决问题了。
css 属于后者，所以去写页面吧。如果你真的去手写页面了，那么你迈出了正确的一步。
幸运的话，你会遇到如下路障，来帮你巩固 基础知识（也就是说，如果你没思索过这些问题，你很可能就是在基础知识学习的路上走偏了），从页面 grid 控制开始，块级元素固定定位，相邻，浮动，居中，沉底布局，响应式，块级元素布局。
而现在的你，完全不用思考这些，你唯一要思考的是：如何把这一块块的东西摆在一张网页上，以及如何调整它的位置。
基础知识w3school 就好了，把 这个页面 里的所有链接看一遍，然后就可开始写 html 和 css 了。简单的说就是，之后可能会有人向你推荐什么特棒的教程，但你不用看（实际上你可能会觉得教程太简单而看不下去）。此时你只需要在问题出现时，去问谷歌。
编辑器推荐 st2，安装 Emmet 插件，想必你们都知道了。
在我练习写 css 页面的时候，唯一觉得有帮助的工具就是 CSScomb，你可以写一段 css，在完成效果之后（注意，在完成页面效果之前，别用，而是在搜索问题解决办法的过程中，学习 css 基本知识）用它梳理一下，看看结果是什么。
如果你尝试了，你会发现是 css 语句的顺序调整了。是的，这就是写 css 的 workflow ，也是你应该思考如何布局一个页面的线索。
附一个我目前遇到所有用过的 css 属性，在 CSScomb 的梳理后，如果你能手写出谷歌首页，那么你一定会了解它们的用法。
.m-1
{
font-size: 4px;
line-height: 5em;
position: relative;
top: 2em;
bottom: 1em;
left: 2em;
right: -0.2em;
display: inline;
display: none;
display: flex;
visibility: hidden;
float: left;
clear: both;
width: 15em;
min-width: 960px;
max-width: 1024px;
height: 5em;
height: 100%;
min-height: 100%;
margin-top: 3em;
margin-right: auto;
margin-left: auto;
margin-bottom: -4em;
padding-top: 4em;
padding-bottom: 2em;
list-style: none;
list-style: none;
text-align: center;
color: red;
border: solid 1px #000;
background: blue;
justify-content: center;
}
当然，上述 css 属性，只用到一部分就够了。并且它们是散布在整个 css 文件中的。
你很可能只写出这些东西来就能够完成部分页面了。
.g-1
{
line-height: 4em;
height: 4em;
text-align: center;
}
.g-1 .m-1
{
float: left;
width: 8em;
background: red;
}
.g-1 .m-2
{
margin-left: 8em;
background: blue;
}
.g-1 .m-2 .clearme
{
clear: both;
}
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/110946.html
摘要：属性排序插件配置参数大全图片介绍如下所示点击进去更详细空行产生的原因以及解决方法原因由于官方文档将属相按照单字定位展示大小样式进行排序所以会产生空行，表示其实一类。 CSScomb 是一个超级爽的前端css属性排序工具，用来规则css, make your code more beautiful sublime插件CSScomb介绍 官方网站只有一句如插件作用的介绍 Make...
摘要：国内各大公司都已经投入使用，在一些常见的网站，如淘宝腾讯小米等移动站点，随处可见其踪影。变革之腾讯手机淘宝的设计与实现前端乱炖适配总结样式重置上文已提及，这里推荐阅读同学写的专题文章。 前言 CSS代码难维护众所皆知。 为一个元素设置样式的方式可以通过定义的class、定义的id、元素的标签名、元素的属性等选择器以及这些选择器的组合来实现； 作用于某个元素上的样式又可能来自单个样式规...
摘要：国内各大公司都已经投入使用，在一些常见的网站，如淘宝腾讯小米等移动站点，随处可见其踪影。变革之腾讯手机淘宝的设计与实现前端乱炖适配总结样式重置上文已提及，这里推荐阅读同学写的专题文章。 前言 CSS代码难维护众所皆知。 为一个元素设置样式的方式可以通过定义的class、定义的id、元素的标签名、元素的属性等选择器以及这些选择器的组合来实现； 作用于某个元素上的样式又可能来自单个样式规...
摘要：一个叫的人用纯重绘并模拟了种不同的移动设备包括可以给你的网站添加不相关的独立组件的一个库。每一个组件都是针对移动设备定制的，并且它有很多你在传统的框架中看不到的功能。如果你用开发移动优先的网站，并想要网站正常运行在低版本的上，可以考虑。 众所周知，CSS是非常棒的，它使网站看起来很漂亮，可以为网站添加动画，并让呈现和内容分离。去了解CSS的一切是非常难做到的，它只会变得更加困难,因为我...
摘要：更改文件名之后，在文件中写入的代码。控制增加前缀的版本根据页面中的标签及标签中的选择器属性，来精简样式。 项目地址 既然重新学习了 Gulp，那索性就再把以前用 Gulp 写的东西拿出来，重新写一遍。这次写的时候要把要点记录下来，不然以后忘了就没法回忆了。 因为 Gulp 现在使用没有以前那么多了，所以就不写复杂的应用了。这次写一个简单的 Demo 处理工具，只是为了把 PSD 转成 ...
阅读 3339·2023-04-26 03:05
阅读 1460·2019-08-30 13:09
阅读 1910·2019-08-30 13:05
阅读 887·2019-08-29 12:42
阅读 1385·2019-08-28 18:18
阅读 3448·2019-08-28 18:09
阅读 514·2019-08-28 18:00
阅读 1713·2019-08-26 12:10
