CSS基础语法

CSS 基础语法

CSS(层叠样式表)是一种用来描述 HTML 或 XML 文件中元素如何显示的样式语言。它主要通过选择器、属性与属性值来定义样式规则。

选择器与声明
  • 选择器(Selector) :选择器用于指定想要应用样式的 HTML 元素。选择器可以是单个元素(如 p 表示段落)、类选择器(如 .className 表示某个类的所有元素)、ID 选择器(如 #idName 表示某个唯一元素)等。

  • 声明(Declaration) :每个 CSS 声明由一个属性(Property)和一个属性值(Value)组成,中间用冒号分隔。一个声明表示对某个属性的具体设置,比如 color: red; 表示将文本颜色设置为红色。

  • 声明块(Declaration Block) :一组声明用 {} 包围,称为声明块。一个选择器可以对应多个声明块。

示例:

css 复制代码
p {
    color: blue;
    font-size: 14px;
}

在这个例子中,p 是选择器,color: blue;font-size: 14px; 是声明块。

属性与属性值
  • 属性(Property) :属性定义了 HTML 元素的样式类型,如颜色、字体大小、背景颜色等。例如,color 是用于设置文本颜色的属性。

  • 属性值(Value) :属性值是对属性的具体描述,通常是一个数值、颜色值、百分比等。例如,bluecolor 属性的一个值。

常见的属性与属性值:

  • color: red; 设置文本颜色为红色。
  • font-size: 16px; 设置字体大小为 16 像素。
  • background-color: #ffffff; 设置背景颜色为白色。
注释的使用

在 CSS 中,注释用于添加开发者的说明或备注,注释内容不会被浏览器解析,纯粹为了增强代码的可读性和可维护性。

  • 注释的语法 :CSS 注释以 /* 开始,以 */ 结束,注释内容放在这对符号之间。

示例:

css 复制代码
/* 这是一条注释 */
p {
    color: blue; /* 设置文本颜色为蓝色 */
}

注释可以放在任何位置,用来解释代码的作用或标注重要信息。

相关推荐
Maimai1080826 分钟前
React 多步骤表单工程化落地:从 Zod Schema、React Hook Form 到 Zustand 持久化
前端·javascript·react.js·前端框架·状态模式
程序员码歌27 分钟前
我是怎么部署开源 AI 编程助手 OpenCode,并在两个真实场景使用起来的
前端·人工智能·后端
Maimai1080829 分钟前
React Query + Zustand 正确结合方式:不要把接口数据复制进 Store
前端·javascript·react.js·前端框架·web3·状态模式
天才熊猫君31 分钟前
层叠上下文 z-index 的简单理解
前端
i220818 Faiz Ul32 分钟前
智慧养老平台|基于SprinBoot+vue的智慧养老平台系统(源码+数据库+文档)
java·前端·数据库·vue.js·spring boot·毕设·智慧养老平台
AI砖家32 分钟前
每日一个skill:web-artifacts-builder,构建复杂 Claude.ai HTML Artifact 的生产力工具包
java·前端·人工智能·python
icc_tips35 分钟前
Flutter runAppAsync() 详解:干净的异步应用启动
前端·flutter
转转技术团队36 分钟前
AI新名词比我头发掉得还快
前端
Lkstar37 分钟前
Pinia 进阶:Setup Store、插件系统与状态持久化,一篇全搞懂
前端·vue.js
yzin37 分钟前
cjs 和 esm 的差异总结&最佳实践
前端·javascript