从 CSS 开始
从 CSS 开始
了解如何让您的网页充满活力。
**什么是 CSS?
** 通过它的翻译,它是级联样式表;换句话说,您可以设置 html 标签的样式。
例如,CSS 允许您编辑关于标签的太多内容;更改文本颜色、查看容器的背景、制作旋转加载器等。
为了这篇文章轻松,我建议阅读我的文章 html 文章以及我在谈论标签和属性时的意思。
这是一个关于 html 原则的简单文本,在这个小教程中很重要。
所以,让我们继续解释,从一个 html 代码示例开始:
<div class="container">
<h1>来自 html 标记的 Hello World</h1>
</div>
这是一个简单的 HTML div,里面有一个段落,我们可以看到 div 有一个名为的类属性 容器
.
如果我们记得,一个类是一种标识符,还有很多类似的 ID
,或标签的名称。
使用 CSS,我们可以通过这些标识符来标记标签,一旦我们获得所需的标签,我们就可以开始样式化了。
但是,我们该怎么做呢?
首先我们需要一个特殊的文件 .css
扩大:
然后我们准备写一些 CSS 代码。
现在有很多方法可以调用 HTML 选择器,最流行的是通过类名,我的意思是,带有类属性的标签。
这是调用标签的最常见方式,但我会向您展示其他方式。
- 带类的元素 →
.myClassName
- 带有 ID 的元素 →
#myTagId
- 选择 HTML 文档中的所有元素 →
*
- 按名称查找元素
这些是最常见的 CSS 选择器,但我会让你了解的还有很多 ** 有用的页面** .
现在,让我们编写一些代码
一旦我们知道如何获取 html 元素,让我们学习一些样式属性。
下图是样式主体的简单结构:
。容器 { }
括号里面什么都没有, **但是这个结构意味着什么?
** 好吧,这是当前开始编写的方式,使用选择器,然后在括号内添加我们需要的各种样式属性。
。容器 {
背景颜色:木瓜鞭;
}
容易,不是吗?
我们的 HTML 元素有太多的属性,一旦我们知道其中的一些,我们就能创造出太多的设计。
你应该知道的一件重要的事情 是每次添加新属性时,都必须使用 ;
因为它告诉浏览器属性主体的结束位置。
就是这样。
现在,让我们使用更多元素作为示例:
。容器 {
背景颜色:木瓜鞭;
边框半径:8px;
边框:1px 纯棕色;
} . 容器 h1 {
颜色:棕色;
}
通过这段代码,我们得到以下样式:
在这种情况下,我们正在链接两个属性 .container p {}
有了这个,我们告诉 CSS 找到所有 h1
容器内的元素并将文本颜色设置为棕色。
有很多方法可以使用选择器类型来链接元素,
我们可以连接两个类,或者一个包含两个或更多类的元素 h1
或者 p
或您想到的任何标签。
现在,是时候练习了
在下一个 CodePen 你可以玩 CSS 和 HTML
要编辑,您需要将左侧拖动到右侧
结论
如您所见,CSS 很容易学习,我们只需要练习和学习属性即可。
但这只是一个入门教程,以便参与一些主题。还有更高级的知识。
例如: 响应式 , 什么 层叠样式表 手段和一个 很多属性 .
允许在我的社交媒体上向我发送反馈:
- Facebook
- Instagram
- 领英
感谢阅读
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明