CSS基础概念:什么是 CSS ? CSS 的组成

news/2024/11/8 15:52:22 标签: css, 前端

image.png

什么是 CSS?

CSS(层叠样式表,Cascading Style Sheets)是一种用于控制网页外观的样式表语言。通过定义样式规则,CSS 可以指定 HTML 页面中各个元素的显示方式,包括颜色、布局、字体、间距等。

与 HTML 专注于内容结构不同,CSS 的主要作用是美化和布局 HTML 页面,使网页在视觉上更具吸引力和一致性,帮助开发者定义 HTML 元素的颜色、字体、间距、位置、大小等视觉属性,使页面符合预期的设计效果。

CSS 通过选择器为特定 HTML 元素定义样式,开发者可以将 CSS 规则与 HTML 内容分离,便于网页内容和样式的独立管理。

可以说,CSS 是网页的“美化工具”,通过与 HTML 和 JavaScript 组合使用,CSS 使得网页不仅具有清晰的结构,还能呈现出丰富多样的视觉效果和动态交互体验。

在这里插入图片描述

CSS(层叠样式表)诞生于上世纪90年代,由Håkon Wium Lie提出。他在1994年首次提出了CSS的概念,并与万维网联盟(W3C)合作,将其发展成为正式标准。W3C在1996年发布了CSS1的正式规范,随后,CSS经历了多个版本的演进,成为现代网页设计中不可或缺的技术。


其初衷是解决HTML页面样式无法与内容分离的问题,这一分离对于提升网页设计的灵活性和可维护性至关重要。随着CSS的发展,它逐渐成为现代网页设计的基石之一。


通过层叠性、继承性和优先级等核心特性,CSS不仅提供了强大的样式控制能力,还允许开发者在不同层级上灵活地管理和应用样式,从而实现一致的视觉表现和高效的页面布局。CSS的出现推动了网页设计的创新,成为构建美观、响应式用户界面的关键技术。

CSS的组成

CSS 由 选择器声明块属性组成:

  1. 选择器(Selector):选择器用于选定要应用样式的 HTML 元素。比如,可以选择特定的标签(如 <p> 表示段落)、类(以 . 开头,如 .header )、ID(以 # 开头,如 #main-content )等。选择器决定了 CSS 样式应用到哪些元素上。

  2. 声明块:用大括号包围,包含一个或多个声明。每个声明由属性名和属性值组成,二者之间用冒号分隔,以分号结束。

  3. 属性(Property):属性用于定义 HTML 元素的样式特征,如 color 表示颜色,font-size 表示字体大小,margin 表示外边距等。每个属性都具有特定的功能,开发者可以根据需要设置不同的样式属性。

  4. 值(Value):值用于指定属性的具体样式设置。比如,color: red; 中的 red 就是值,它定义了颜色属性的具体样式。属性和值通常用冒号(:)分隔,整个样式规则以分号(;)结束。

在这里插入图片描述

css">选择器 {
    属性名: 属性值;
    属性名: 属性值;
}

以下是一个简单的 CSS 规则集示例:

css">h1 {
    color: red; /* 设置字体颜色为蓝色 */
}

选择器 h1 选中了所有的一级标题,规则集中的声明将其字体颜色设置为红色。CSS 规则集的使用,使得网页的视觉效果得以灵活控制,极大地增强了网页设计的表现力。

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport"
		  content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>CSS 简介</title>
	<style>css">
		h1{
			color: red;
		}
	</style>
</head>
<body>
	<h1>好好学习,天天向上</h1>
</body>
</html>

效果如下:

image.png



http://www.niftyadmin.cn/n/5744099.html

相关文章

前端三件套-css

一、元素选择器 元素选择器&#xff1a;利用标签名称。p,h1-h6...... 行内样式&#xff08;内联样式&#xff09;&#xff1a;例如<p style"color:red;font-size:50px"> id选择器&#xff1a;针对某一个特定的标签来使用。以#定义。 class&#xff08;类&a…

基于Dpabi和spm12的脑脊液(csf)分割和提取笔记

一、前言 脑脊液&#xff08;csf&#xff09;一直被认为与新陈代谢有重要关联&#xff0c;其为许多神经科学研究提供重要价值&#xff0c;从fMRI图像中提取脑脊液信号可用于多种神经系统疾病的诊断。特别是自2019年Science上那篇著名的csf-BOLD文章发表后&#xff0c;大家都试图…

javascript实现国密sm4算法(支持微信小程序)

概述&#xff1a; 本人前端需要实现sm4计算的功能&#xff0c;最好是能做到分多次计算。 本文所写的代码在现有sm4的C代码&#xff0c;反复测试对比计算过程参数&#xff0c;成功改造成sm4的javascript代码&#xff0c;并成功验证好分多次计算sm4数据 测试平台&#xff1a; …

倍福工控机维修伺服驱动控制器模块维修C1300

BECKHOFF倍福C1300总线通讯模块&#xff0c;使用C1220接口卡&#xff0c;可将255个分布式Lightbus输入和输出模块连接到标准PC。光纤在PC和外部设备之间以2.5M的速度传输数据&#xff0c;并且互无干扰。 接口卡有自己的微处理器(80C166)和一个4k字节的双端口存储器到PC总线&am…

ClickHouse创建账号和连接测试

在之前搭建ClickHouse的时候&#xff0c;把账户相关的去掉了&#xff0c;所以登录和连接的时候是不需要账号密码的&#xff0c;但是实际项目中&#xff0c;肯定是需要根据需要创建账号。 一&#xff0c;创建账号 1&#xff0c;进入到 /etc/clickhouse-server&#xff0c; 编辑…

若依入门案例

若依&#xff08;RuoYi&#xff09;框架是一个基于Java的开源企业级快速开发框架&#xff0c;主要用于构建信息管理系统。它结合了多种前端和后端技术&#xff0c;提供了高效的开发工具&#xff0c;并具备以下主要功能&#xff1a; 一、后端功能 技术选型&#xff1a;若依后端…

【深度学习】多分类任务评估指标sklearn和torchmetrics对比

【深度学习】多分类任务评估指标sklearn和torchmetrics对比 说明sklearn代码torchmetrics代码两个MultiClassReport类的对比分析1. 代码结构与实现方式2. 数据处理与内存使用3. 性能与效率 二分类任务评估指标1. 准确率&#xff08;Accuracy&#xff09;2. 精确率&#xff08;P…

(三)最小梯度平滑预处理下的K-Means的道路分割实验(附资源)

一、实验目的 1、实验目标 使用C均值算法或者相应的改进算法&#xff0c;对数据进行聚类分析&#xff0c;并思考如何自动确定道路区域对应的是聚类后形成的若干类别中的哪个类别。 尝试对初值、对代表点的选取以及分类方法进行改变&#xff0c;对改变前后结果的变化进…