[对于初学者]仔细解释如何编写CSS(样式表)

“我想了解CSS的基础知识以及如何快速编写它。”
“您可以使用CSS做什么?”

对于开始进行Web制作的人来说,这样的声音很自然。 的CSS负责您与HTML一起学习的设计和放置功能,但是实际上有很多东西要学习。随着新功能陆续创建,很难跟上它们。此外,在CSS中,表达式留给设计者。网站设计师必须每天增加撤稿的次数,因为好的和坏的设计都与网站评估直接相关。

只是不要害怕。 的CSS的特征之一是学习需要花费很多时间,但是却不需要花费很多时间。在这里,我们将为您提供初学者CSS的基础知识。

的CSS可以做什么

首先,让我们看看如何使用CSS技能。

[安排]
在编码中,元素基本上从上到下排列。把它放在一边是CSS的工作。

[配色]
为元素着色也是CSS的工作。使用CSS不仅可以完成单色,而且可以完成渐变和阴影。

[元素之间的宽度和高度]

[剪切和可视化]

您可以在没有Photoshop的情况下裁剪图像。您还可以调整颜色。

【影响】

您还可以创建一种将鼠标放在顶部时引起移动的效果。
参考网址

[鼠标滑上之前]

[鼠标穿上之后]

实际上,没有CSS技能就无法创建网站或应用。 的HTML和CSS就像两个轮子,您需要逐步学习这两个轮子。

的HTML和CSS之间的关系

让我们简要地解释一下HTML和CSS之间的关系。对于确定页面结构的HTML角色,CSS根据确定的结构的页面布局进行设计。

基本上,在HTML中指定“类”或“ id”名称。这充当CSS中发布指令的“标签”。

当我显示它时,仅显示字符。

之后,CSS会给标签提供修饰指令。

的CSS的效果完成了该按钮。

参考:如何使用HTML和CSS创建按钮|如何使用按钮标签创建,提交,链接

的CSS所需的基本元素

有一些通常用于理解CSS的单词。共有三种类型:“选择器”,“属性”和“值”。请记住该词,因为它会在您搜索和查看参考资料时出现。此外,最后的“;”非常容易忘记,因此请注意不要忘记它。

特别地,特性的多样性是巨大的。我们不建议您先记住它后再使用它。您应该能够使用以下经常使用的属性,但除此之外,请根据您在生产经验中的需求逐步学习。

财产类型 描述
填充 在元素内部留出一个边距。可以分别指定上,下,左和右。
保证金 在元素外部留一个边距。可以分别指定上,下,左和右。
宽度 您可以指定元素的宽度。
高度 您可以指定元素的高度。
颜色 您可以指定文本颜色。
字体大小 您可以指定字体大小。
浮动 您可以将元素放在左侧和右侧。
位置 通过指定数值,可以将其垂直和水平排列。有必要通过相对或绝对设置起点。
显示 在将元素更改为块元素或嵌入式元素时,或在更改布置时使用。

参考:[CSS]掌握位置属性!如何使用相对/绝对/固定
参考:如何与CSS并排布置元素(解释如何使用float和display)

的CSS注释

在这里,我想谈谈CSS中的一些注释。通常在编辑器中留下注释,但是请注意,该方法对于HTML和CSS是不同的。

类型 注释掉 描述
的HTML !– 注释掉部分 — 的HTML注释掉的功能是“!– @@@ –」で囲まれます。
的CSS / *注释部分* / 的CSS注释功能包含在“ / * @@ * /”中。

参考:[HTML]如何写出注释!介绍便笺和方便使用

的CSS规范

现在,有三种指定CSS的方法。

①在头上写css。在这种情况下,请写信。

的CSS正在运行,并且颜色已更改。

(2)直接在标签中指定。

如下所示,直接在div标签中指定。标签中的“样式=“”@@”请为“ @@”指定CSS。

结果与①相同。 的CSS正在运行,并且颜色已更改。

③准备一个css文件并在那里指定。准备一个文件夹,至少准备“ @@@ .html”和“ @@@ .css”,如下所示。包含Normalize.css。没有CSS,HTML会反映每个浏览器的特征,并且在某些情况下字体大小和边距会略有不同。解决此问题的CSS称为“重置CSS”,此normalize.css旨在最大程度地减少浏览器之间的差异。即使您没有它也可以使用,但是输入时请参考参考URL。

参考网址:normalize.css

还有许多其他重置CSS。 ”为初学者制作自己的重置CSS的过程摘要也请参考。

顺便说一句,如果您在外部准备文件,则需要连接CSS和HTML。因此,将以下代码放在HTML头中。

<link rel="stylesheet" href="normalize.css">
<link rel="stylesheet" href="style.css">

的CSS和HTML现在已连接。在那里,您可以使用CSS进行设置。

当然,结果不会改变。

的CSS设置注意事项

读取优先级

以上三种模式在加载CSS时具有不同的优先级。负载最大的顺序如下。

①直接指定为HTML元素
②名称
③外部CSS文件

综上所述,①似乎是最好的,但有许多不便之处。见下文。

的CSS是一个外部文件!

学习编码时,我看不到很多情况(1)和(2)。如今,通常创建(3)的外部文件并在其中进行描述。这是一个管理问题。例如,在情况(1)中,文件往往非常长。在情况(2)中,您必须一一更改要更改的零件。如果要更改100个设置,则需要更改100,但是如果将它们放到一个外部文件中,则只需处理一次。因此,除非有充分的理由,否则请练习方法(3)。但是,有时无法读取外部文件。在这种情况下,您需要更改操作方式。

首先,指定“!Important”作为CSS文件的值。这将为您提供优先阅读说明。

.sample{
  颜色: red!important;
  保证金: 100px;
}

接下来,您要检查的点是您要读取的CSS文件开头的位置。头部中最低的CSS文件会优先显示。在下图中,“ style.css”优先加载。

如果这样不起作用,则必须直接将其加载到代码中。但这是不得已的方法。

以下文章详细介绍了CSS加载顺序。
参考:了解CSS优先级(以及如何使用!重要)

的CSS编写的基本形式

如何上课

如果在HTML中设置了“类”,则在CSS中用“。”表示。如下。

<div class="sample">これはサンプルです。</div>
.sample{
  颜色: red!important;
  保证金: 100px;
}

如何写ID

如果在HTML中设置了“ id”,则在CSS中用“#”表示。如下。

<div id="sample">これはサンプルです。</div>
#sample{
  颜色: red!important;
  保证金: 100px;
}

怎么写 {}

尽管这是一种写“ {}”的方式,但是可以自由描述显示本身。例如,以下是可以的。

#sample
{
  颜色: red!important;
  保证金: 100px;
}

但是,上述书写风格并不常见。以下是一般的书写方式。

#sample{
  颜色: red!important;
  保证金: 100px;
}

指定多个属性

实际上,类名是不同的,但是有时候您想获得相同的CSS效果。在这种情况下,如果为每个类指定CSS,则相同的CSS规范将重复多次。
那是工作的浪费。因此,用“,”(半角逗号)分隔它们,并一次指定它们,如下所示。

.sample_1,
.sample_2,
.sample_3,
.sample_4,
.sample_5{
  颜色: red!important;
  保证金: 100px;
}

如何使用CSS属性

填充

“填充”在元素内部创建边距,但是有几种设置方法。以下所有人都说相同的话。

内边距:10px(上/下/左/右); 这意味着上下左右保持10px的距离
填充:10px(top)10px(right)10px(bottom)10px(left); 这意味着要保持顶部10px,底部10px,左侧10px,右侧10px的距离。
填充:10px(top and bottom)10px(left and right); 这意味着上下保持10px的距离,左右保持10px的距离。

例如,如下设置填充。然后,顶部和底部的边距分别为50px,左侧和右侧为100px。

.sample{
 填充: 50px 100px;
}

保证金

“边距”在元素外部创建边距,但是有几种设置方法。与填充相同。

边距:10px(上/下/左/右); 这意味着上下左右保持10px的距离
边距:10px(顶部)10px(右侧)10px(底部)10px(左侧); 这意味着要保持顶部10px,底部10px,左侧10px,右侧10px的距离。
边距:10px(顶部和底部)10px(左侧和右侧); 这意味着上下保持10px的距离,左右保持10px的距离。
.sample{
 保证金: 50px 100px;
}

如果选中“验证”,则可以看到边距设置为上下50px,左右100px。

参考:[CSS]如何使用和播放填充和边距来指定边距

颜色

颜色用于更改字符的颜色。特别是,通常会设置一个以“#”开头的专用颜色代码。
色标

.sample{
 颜色: #FF6600;
}

文字的颜色改变。

边界

边界是设置“边框”的属性。指定如下。

特别地,第二值具有一些规格。

固体 单行显示
两行显示
虚线 波浪线显示
点缀 虚线显示

在CSS中指定如下。

.sample{
 填充: 20px 100px;
 保证金: 100px;
 边界: 1px 固体 #FF6600;
 颜色: #FF6600;
}

然后,将显示如下。

参考:[CSS]如何使用边框!边框名称和类型(可提供样品)

宽度

宽度属性用于设置宽度。指定如下。

.sample{
 填充: 20px 100px;
 保证金: 100px;
 边界: 1px 固体 #FF6600;
 颜色: #FF6600;
 宽度: 180px;
}

然后,将显示如下。

高度

高度是设置元素高度的属性。在上面的代码中增加高度。

.sample{
 填充: 20px 100px;
 background: #FF6600;
 边界: 1px 固体 #FF6600;
 颜色: #ffffff;
 宽度: 180px;
 高度: 100px;
}

指定高度。

概要

学习CSS应该在生产过程中逐渐增加其退出量。因此,更现实的是不尝试学习有关CSS的所有大量信息,保持基本属性可用,并随着时间的推移逐步学习困难的属性。但是,您需要了解基本属性的行为及其特征。

撰写本文的人

田中 陽介

我在越南开展业务,并且从事与人事相关的咨询业务。我离开日本已经八年了,我享受着日本不可能发生的事情。最近,我正在使用Ruby on Rails进行Web服务。