我们应该如何高效的学习CSS

最新推荐文章于 2025-01-30 00:09:58 发布

快敲小张

最新推荐文章于 2025-01-30 00:09:58 发布

阅读量449

点赞数

分类专栏： css坑

本文链接：https://blog.csdn.net/weixin_41603196/article/details/105874818

版权

css坑专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本片文章是对看过的视频进行总结
1.样式调整
2.布局调整
3.形状、特效的拆解与合并
4.页面组件设计原则
5.CSS模块化学习

主要内容是：划分模块，对css进行归结，有利于我们学习CSS如鱼得水

对CSS宏观的认知

想要学好css就需要对所有css具有宏观的认知，能很好的把相应的css进行归结。我们可以通过下列几个项对css进行归结

	>1.样式调整
	>2.布局调整
	>3.形状、特效的拆解与合并
	>4.页面组件设计原则
	>5.CSS模块化学习

1.样式的调整

例如元素的宽高、颜色、字体间距、背景颜色等等都是样式的调整。

2.布局调整

1.css的难点就是对整体进行布局，对布局进行规划、合理的利用Flex布局和Grid布局实现。
2.css中浮动、定位也属于对页面的布局，
3.响应式布局主要通过media。

3.形状、特效的拆解

不规则的图像都是通过简单的图像合并后生成、所以我们需要学会对复杂的图像进行拆解。

4.页面组件设计原则

高效实用css，把通用的样式设计成组件。在写代码之间先分析一遍设计稿，把通用的组件和大体相同的样式，通过class做成一个独立的整体。比如说很多按钮的颜色虽然不一样，但是他们的文字，大小，间距都是一样的。这时候可以把这些一样的东西设计成一个独立的class。使用的时候直接在button上加上就好了。

举个另外的例子，如果你发现大多数情况下都在写重复的css代码，那么这些代码很可能用于多个组件，那么本着不编写重复代码的精神，把他单独抽离出来，作为工具class使用，入下代码：

<-- 没有抽离前 -->
<div class="container">
	<div></div>
	<div></div>
	<div></div>
</div>

<div class="container2">
	<div></div>
	<div></div>
	<div></div>
</div>

.container {
	display:flex;
	....
}

.container {
	display:flex;
	flex-direction:column;
	...
}

<-- 抽离后 -->
<div class="flex">
	<div></div>
	<div></div>
	<div></div>
</div>

<div class="flex column">
	<div></div>
	<div></div>
	<div></div>
</div>

.flex {
	display:flex;
}

.column {
	flex-direction:column;
}