小白入门 CSS 语法规则

devtools/2024/11/14 14:55:13/

文章导读: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 的关键。

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

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


http://www.ppmy.cn/devtools/34232.html

相关文章

mac监听 linux服务器可视化(Grafana+Promethus+Node_exporter)

Grafana和promethus(普罗米修斯)的安装和使用 监控系统的Prometheus类似于一个注册中心&#xff0c;我们可以只需要配置一个Prometheus,而在其他服务器&#xff0c;只需要安装node_exporter,它们的数据流转就是通过exporter采集数据信息&#xff0c;然后告诉prometheus它的位置…

redis保存数据的结构-redisobject结构体

在redis中&#xff0c;所有键值对的保存&#xff0c;都是机遇redisboject的一个结构体&#xff0c;如下 typedef struct redisObject {unsigned type:4; unsigned encoding:4; unsigned lru:LRU_BITS; int refcount; void *ptr; …

VS Code 保存+格式化代码

在 VSCode 中&#xff0c;使用 Ctrl S 快捷键直接保存并格式化代码&#xff1a; 打开 VSCode 的设置界面&#xff1a;File -> Preferences -> Settings在设置界面搜索框中输入“format on save”&#xff0c;勾选“Editor: Format On Save”选项&#xff0c;表示在保存…

【Redis】10大数据类型之Hash类型

文章目录 1.Hash类型2.常用命令3.示例hset和hgethgetallhlenhkeys和hvalshexistshdelhincrby和hincrbyfloathsetnx 1.Hash类型 Redis中的Hash类型是一种高效的数据结构&#xff0c;用于存储键值对的集合。这种类型特别适用于表示对象&#xff0c;因为它允许你将对象的多个属性…

开发日记-npm下载镜像超时,切换镜像源方式

使用npm下载组件和初始化等操作的时候可能会遇到下面的问题&#xff1a; npm ERR! Exit handler never called! npm ERR! This is an error with npm itself. Please report this error at: npm ERR! <https://github.com/npm/cli/issues> npm ERR! A complete log of t…

Linux内核--设备驱动(六)媒体驱动框架整理一--音频

目录 一、引言 二、ALSA ------>2.1、alsa声卡设备 ------>2.2、内部实现 ------------>2.2.1、usb通讯配置 ------------>2.2.2、midi设备创建 ------------>2.2.3、创建pcm设备 ------------>2.2.4、创建 control 设备 ------------>2.2.5、声…

Python基础详解一

一&#xff0c;print打印 print("hello word") print(hello word) 双引号和单引号都可以 二&#xff0c;数据类型 Python中常用的有6种值的类型 输出类型信息 print(type(11)) print(type("22")) print(type(22.2)) <class int> <class str&…

如何利用单声道音频进行说话人距离估计

音频中的距离估算在各种应用中扮演着关键角色&#xff0c;例如声学场景分析、声源定位和房间建模。大多数研究主要集中在采用分类方法&#xff0c;将距离离散化为不同的类别&#xff0c;这样虽然可以让模型训练更平滑&#xff0c;提高精度&#xff0c;但限制了获得的声源位置的…