小白入门 CSS 语法规则

作者：我家自动化 | 2024-05-06 10:37:12

踩

小白入门 CSS 语法规则

文章导读：AI 辅助学习前端，包含入门、进阶、高级部分前端系列内容，当前是 CSS 的部分，瑶琴会持续更新，适合零基础的朋友，已有前端工作经验的可以不看，也可以当作基础知识回顾。

这篇文章给大家介绍 CSS（层叠样式表）的基本语法和规则，对于初学者来说，了解这些规则是有必要的。

1.选择器（Selectors）： CSS 规则通常以选择器开始，选择器用于指定 HTML 元素的样式。例如，要选择所有段落元素，可以使用段落选择器：


p {
  /* 样式规则在这里 */
}

2.声明块（Declaration Block）：在选择器之后，使用大括号 {} 包含一个或多个样式声明。每个声明以分号 ; 结束。


p {
  color: blue;
  font-size: 16px;
  margin: 10px;
}

在上面的示例中，设置了段落元素的文本颜色、字体大小和外边距。

3.属性（Properties）：在每个声明中，属性用于指定要更改的样式属性。例如，color 属性用于定义文本颜色，font-size 用于定义字体大小。

4.值（Values）：属性后面是一个冒号 :，后面紧跟着一个值，表示要为属性设置的具体样式。例如，color: blue; 中的 blue 是颜色属性的值。

5.注释（Comments）：你可以在 CSS 中添加注释，注释不会影响样式规则的应用。注释以 /* 开始，以 */ 结束。


/* 这是一个注释 */
p {
  color: red; /* 这也是一个注释 */
}

6.层叠性（Cascading）：如果多个样式规则应用于同一个元素，浏览器将使用层叠规则来决定哪些样式最终生效。通常，具有更高特权的选择器或具体性的规则将覆盖其他规则。

7.继承性（Inheritance）：某些样式属性会被子元素继承，这意味着如果你在父元素上设置了某个属性，子元素通常会继承该属性。例如，如果你在 <body> 元素上设置了字体属性，它将应用于整个页面。

8.CSS 规则的应用：CSS 样式规则可以通过以下方式应用到 HTML 元素上：

内联样式（Inline Styles）： 直接在 HTML 元素上使用 style 属性来定义样式。

内部样式表（Internal Stylesheets）： 在 HTML 文档的 <head> 部分使用 style> 元素来定义样式规则。

外部样式表（External Stylesheets）： 将样式规则保存在一个独立的 .css 文件中，并通过 link> 元素将其链接到 HTML 文档中。

9.后代选择器（Descendant Selectors）：你可以选择特定元素的后代元素。例如，选择所有段落元素的 <a> 链接可以使用 p a 选择器。


 p a {
  /* 样式规则在这里 */
}

这些是 CSS 的基本语法和规则。通过理解这些基本概念，可以从编写简单的样式规则开始，逐渐构建更复杂的样式，从而美化和布局网页。不断实践和尝试是学习 CSS 的关键。

希望今天的内容对初学前端的朋友有所帮助。也希望每一个初学者都能成为一个优秀的前端开发工程师，加油。

最后啰嗦一句，好记性不如烂笔头，希望大家在学习的过程中养成做笔记的习惯，形成自己的知识体系。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家自动化/article/detail/543782