10个简单提示，用于学习WordPress的CSS
学习CSS可能会压倒，特别是当您不知道从哪里开始以及搜索时搜索的术语.
由于CSS是一种造型语言，而不是像JavaScript或PHP这样的全面编程语言，它实际上是相当简单的学习，特别是如果您在腰带下有一些HTML知识(我认为您的目的是为了这个目的帖子).
在我们的博客调查中，您提到的一个压倒性数量让您想要了解您的游戏，并更熟悉CSS，这就是为什么我们最近发布了150多个学习CSS资源的列表，这应该帮助您开始使用，特别是与这篇文章串联.
今天，我会向您展示工作流程和提示，当我第一次在多年前开始时帮助我学习CSS.从提示开始，并将您的方式追溯到CSS掌握.
继续读取，或使用以下链接跳转:
- 基础建设
- 使用简单选择器和属性进行练习
- 记住框模型
- 通过执行
- 按宽度和高度排列内容
- 浮子和定位
- 高级CSS
- 用css
- 预处理器
- 框架
学习
复制一个站点
1.基本建设
第一件事首先:为了学习如何编写自己的CSS，您需要知道如何正确格式化它.实际上有两种正确的方法来做这一点，但其中一个有助于让你更加组织.
由于HTML是常见的第一语言人员学习他们想要使用WordPress网站时，它有助于通过首先以类似的方式写入HTML来学习CSS语法.
这是CSS所花款的基本结构:
当您想要在您的网站上的元素中实现多种风格时，它很简单，但是当您开始更熟悉CSS时，您需要为元素和一个符号才需要多种样式这就是这样一个像这样的结构可以变得凌乱，快速.
这就是为什么有一种更有效和有组织的方式来写出您的CSS:
现在，您可以开始挖掘此示例中使用的术语.这些术语中的每一个都是CSS的基本构建块:类，ID，选择器，属性和值.属性和值也构成了所谓的声明.
这是学习如何编写自己的CSS的一个很好的起点，并且一旦开始，您可能想知道您应该在WordPress文件中写下所有这些.
在WordPress安装中，您看到的任何文件在.css 中终止为CSS文件，正如您可能已经猜到的那样.您需要查找的主要文件是您的样式表，它标记为 Style.css .这是您的大多数或所有主题设计在颜色，字体，基本图像和可能的一些主题的布局方面举行的地方.
您还可能会注意到一个名为 Custom.css 的预先制作主题中的文件，这通常是他们希望您对主题进行任何更改.当您在此文件中进行更改时，它应该覆盖主题样式表中的现有样式.
如果您为主题添加插件，它们也可能在其文件夹中附带CSS文件，它们用于样式插件的外观和感觉.
2.使用简单选择器和属性
进行练习
下一步正在学习基本选择器和属性以及它们如何在主题中运行.例如，选择器，例如h1，h2和h3，用于段落文本的p，以及诸如font-family和background-color的属性.
有一种简单的方法来练习这些新技能，实际上看到了您所做的更改，而无需启动自己的WordPress博客.W3Schools有很多关于CSS的信息以及现场实例，您可以在其中更改代码和按下按钮，您可以立即查看所做的更改.
当您看到一个示例时，只需单击即将自己尝试按钮，窗口打开，您可以在其中测试一些基本CSS.
3.记住框模型
我是引用最常见的信息而不是将所有信息提交给内存的倡导者.也许是因为我发现我的记忆缺乏大部分时间，但我宁愿说它是因为在网上有这么多精彩的参考.
您可以轻松查找您在心跳中不知道的选择器和属性.所有所需的是对您最喜欢的搜索引擎进行简单的查询，例如Google或Bing以及您所需的所有信息，只需点击在那里.
熟悉盒式型号很重要.
熟悉框模型很重要.
这可能是生活中许多(或大多数)的东西的情况，但盒式模型不应该是其中之一.
本质上，它是您需要的CSS中的基本布局元素，以便有很多属性.盒子布局还包括许多您可以使用CSS风格的基本场所.
幸运的是，如果我能记住它，那么学习和诚实并不困难，你也不应该有问题.实质上，它包括内容区域，填充，边框和边距.
4.通过执行
来学习
一旦开始熟悉CSS，它是一个很好的想法，通过选择一个完全基本的设计和通过编辑其样式表来改变其风格的主题是一个很好的想法.
要了解更简单的变化有时候会影响一个主题，有时候也是如此.最终，尽可能多地练习您可以帮助您在视觉上看到您所做的更改，并将写入代码的操作连接到最终结果.
在较大的事情的事情方案中，一旦你能够连接点，你不仅可以快速编写CSS，但你也应该能够解决未来的问题，这成为网络设计和开发的关键任务.
以下是练习的一些优秀主题，您可以免费安装在WordPress网站上.并非所有这些都是主题如何必然看起来和功能的完美表示，但他们都是伟大的起点，了解如何用简单的CSS改变主题.
白色spektrum
白色spektrum主题是一个简单的主题，具有常见的布局，包括主内容区域，侧边栏，标题和页脚.
除了涉及字体和链接时的颜色溅，它是一个简单而简单的主题.
创始人
即使是上面的这些极简主义主题，你仍然可能会感到有点不知你尚不识别多少事情，那没关系.当您查看此帖子的每个部分时，它应该都开始稍微进入更多.
5.按宽度和高度安排内容
一旦安装了其中一个主题，您也可以通过输入不同的长度和内容区域和选择器宽度来开始更改布局.
是下一步的前兆，让您熟悉WordPress主题中的不同布局区域.
6.浮子和定位
这是CSS倾向于获得有点棘手的地方，因为您可以纯粹用CSS创建布局，特别是浮点和定位.问题是，这些属性并不设计用于创建整个布局，并在那里有一个草稿来更新CSS布局.
现在，这是一个常见的方式，许多人刚刚获得他们的布局.观察已经存在的主题是一个很好的想法，包括上面的列表，并了解它们如何与他们使用浮动和位置的不同.
7.高级CSS
在这一点上，你真的开始掌握CSS，但是要发现了很多东西:
- 伪类 -用于定义元素的特定状态，例如在鼠标悬停中，在与其他元素相关的特定位置中的图像中定位图像.
- 复杂选择器 -您可以使用更高级选择器更具更具体的造型.
- css3动画 -在鼠标越过图像和按钮时，创建淡入淡出，流行音频或其他转换.
- 与css3媒体查询的响应性 -你可以使用媒体查询的最简单方式之一是使用媒体查询.
- 变换 -控制所选内容区域的大小和形状.
- 在规则 -用于将字体和样式表导入您的主题.
- 渐变 -在不需要使用图像的情况下为您的主题添加梯度.
这些是许多元素，您可以真正开始看到您的主题设计真正呈现形状.这是开始测试您的技能的完美时间.
8.用CSS复制网站
伴随着腰带上的所有知识，您可能需要获得一个坚固的腰带，但更重要的是，您可以通过使用主题的基本外壳并从头开始添加自己的CSS样式的基本外壳来实践技能.
您可以做出最有用的事情之一，以提升您的学习是在现实世界应用中的知识.我建议寻找一个您喜欢的网站，然后将其复制它，您可以纯粹可以使用空白WordPress主题上的CSS.
当然，你可能无法获得完美的一切，并且可能只有很多元素，你将只能用CSS复制，但这是让您对CSS感到舒服的好方法.
这里是您可以使用的一些伟大和免费的初学者主题:
-
blableSlate
这是它的裸骨.这个主题中只有HTML5，因此您可以在不担心任何冲突的情况下添加CSS.尽管如此，它确实伴随着你所需的一切.
-
html5空白
html5空白是一个样板Wordpress主题，但不多.如果你从划痕开始你的CSS，那就太好了.
-
下划线
如果您有点冒险，并且想要尝试更高级的启动主题，则underscores是一个很好的选项，而不是因为它来的胆小的心灵有两种预装主题样品样式.它还包括一些先进的技术和编码，使其成为一个很好的学习工具.
还有github上的html5重置wordpress主题.它包括更高级的功能，但这最终使其成为有价值的启动主题.
9.预处理器
一旦你知道CSS的INS和OUT，那么了解预处理器，特别是SASS和更少的一个好主意.这两个都有助于组织您的CSS，因此可以更轻松地编写和更容易获得未来的编辑.
预处理器使您的CSS清洁且易于遵循，并且它很快成为Web开发人员中的重要技能.虽然有一个持续的辩论是最好的，但Sass往往是最常用的预处理器.
如果您想在WordPress的上下文中尝试在Sass的手中，请查看骨骼主题.它由HTML 5组成，因此您可以尝试使用已经包含的Sass内置位的内置位.
10.框架
在Web开发中，框架是创建动态网站的结构.最终，框架的目标是更快地制作网站而不会失去功能.
一旦您使用CSS，您可以使用框架加快主题开发.
最受欢迎的框架之一是Twitter Bootstrap.它创建要在框中响应，并使用SASS和少以及许多自定义CSS组件.
包装
与教学大纲进行学习，并与提示帮助您，CSS不应该过于压倒性地掌握.此外，您现在应该准备好尝试用手造合自己的WordPress主题.
对于学习CSS和WordPress的更多资源，请查看我们的一些其他帖子:Mega指南用于学习和引用WordPress的CSS:150多个资源，并从WordPress初学者到Pro:200多个职业促进资源.
