封面

(转)tailwindcss介绍

这篇文章我会介绍TailwindCSS的一些基础概念和用法,以及用它可以做什么。我们还将尝试使用TailwindCSS制作一些组件,以在我们在其他框架(例如Bootstrap,Bulma等)上使用预先设计的组件时感受到不同。

在学习TailwindCSS之前,我们将讨论CSS的基础知识,以便我们了解CSS的概念和术语。如果您已经对CSS有很好的理解,则可以跳过CSS部分。

先学习CSS

在进一步了解TailwindCSS之前,我将邀请您返回学习CSS。目的是能够理解CSS本身的术语和概念。

通过重新研究CSS,我们将对基本CSS有了很好的了解。这样我们就可以轻松学习CSS框架。

CSS

CSS(级联样式表)是一种提供以标记(例如HTML)编写的样式文档的语言。 CSS还向浏览器指示HTML的显示方式。简而言之,CSS允许您设置字体类型,字体大小,背景色以及设置Web文档中包含的其他元素的样式。

例如,您具有如下的HTML代码,

<p> Hi, my name is Muhamad Nauval Azhar </p>

上面的代码可在HTML中创建段落。当然,您应该完整地编写它,从doctype到</ html>。

CSS控制段落的样式,第一个示例我们将文本颜色更改为红色。然后代码如下:

p { 
color: red;
}

上面的代码是CSS中的样式规则,用于设置在Web文档中使用tag

的HTML元素中文本的颜色。

请记住,上面的CSS代码不会只更改一个段落,而是将标记

上的整个文本颜色更改为红色。

只是文字的颜色?

CSS不仅可以调整文本的颜色,而且CSS可以做很多事情。您可以更改字体,背景颜色,设置背景图像,创建网格系统,创建菜单以及其他与Web界面相关的内容。

我们不会在这里完整讨论基本CSS

我们将不再完整讨论CSS的基础知识。因为,我假设您已经了解CSS中的概念和术语,例如选择器,CSS规则,CSS声明,属性,值,供应商前缀和其他内容。但是,作为开头和提醒,我将仅简要讨论刚才提到的CSS的基本概念。即使您不太了解CSS,您也

可以读完这篇文章,但是,这种风险通常会导致愚蠢的问题,邀请人们在公开讨论中欺负您。当然,您不想,对吗?

编写CSS

编写CSS代码并将其插入HTML中,有几种方法。基本上有3种方法可以提及,包括:内部样式,外部样式和内联样式。

1.内部风格

使用HTML中的tags

文章目录
  1. 1. 先学习CSS
  2. 2. 编写CSS


twitter分享


如果想及时收到回复,可在 订阅中心Participating中勾选Email

Fork me on GitHub