首页 > 其他分享 >CSS基础概念:什么是 CSS ? CSS 的组成

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

时间:2024-11-04 18:20:40浏览次数:5  
标签:网页 样式 概念 HTML 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 规则集示例:

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>
		h1{
			color: red;
		}
	</style>
</head>
<body>
	<h1>好好学习,天天向上</h1>
</body>
</html>

效果如下:

image.png


标签:网页,样式,概念,HTML,CSS,选择器,组成,属性
From: https://blog.csdn.net/m0_52827996/article/details/143473639

相关文章

  • JVM 由哪几部分组成?
    JVM的组成我们先笼统的总结一下类装载子系统运行时的数据区(内存)堆区(heap):new出来的对象都放到堆里栈区(stack):线程栈,线程私有,存放线程用到的局部变量,执行方法的时候,就会将用到的方法插入栈,一个方法对应于一个栈帧。方法区(methodarea):存储已被虚拟机加载的类信息、......
  • CSS:实现动态流光线条效果/动态流光线条颜色渐变效果
    需求分析需要实现类似下图中的动态流光线条效果:思路提到这种动态绘制矢量图形的需求,一般会想到使用canvas;由于笔者不太熟悉canvas动画也可以考虑用CSS来实现,这里先记录使用CSS实现此效果的尝试过程:①实现一条带有静态“流光”效果的边,参考CSS渐变背景;②实现静态线条的“流光......
  • CSS网页布局综合练习(涵盖大多CSS知识点)
    题目:将上面的转化为下面的基本骨架<!DOCTYPEhtml><htmllang="zh"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><......
  • Kafka笔记系列-概念相关
    消息队列的主要功能连接服务、消息路由、消息传递、数据持久化、日志记录消息队列基本分类1、点对点生产者发送消息到队列中,消费者从队列中取出并消费。消息在消费以后,队列中不再有存储,队列可以有多个消费者,但是一个消息只能被一个消费者消费2、发布订阅模式生产者发布消息......
  • HTML CSS JS游戏网页设计作业「响应式高端游戏资讯bootstrap网站」
    ......
  • 《web课程设计》用HTML CSS做一个简洁、漂亮的个人博客网站
    ......
  • 操作系统的概念与功能
    操作系统的概念与功能‍​​‍操作系统的定义操作系统(OperatingSystem,OS)是指控制和管理整个计算机系统的硬件和软件资源,并合理地组织调度计算机的工作和资源的分配;以提供给用户和其他软件方便的接口和环境;它是计算机系统中最基本的系统软件。‍操作系统的功能和目标......
  • 【K8s】专题十五(1):Kubernetes 网络之概念总览
    本文内容均来自个人笔记并重新梳理,如有错误欢迎指正!如果对您有帮助,烦请点赞、关注、转发、订阅专栏!专栏订阅入口| 精选文章 | Kubernetes |Docker|Linux |羊毛资源 | 工具推荐 |往期精彩文章【Docker】(全网首发)KylinV10下MySQL容器内存占用异常的解决......
  • CSS背景属性
    1、背景图作用:网页中,使用背景图实现装饰性的图片效果。属性名:background-image(bgi)属性值:url(背景图URL)注:背景图默认是平铺的效果!2、背景图平铺方式属性名:background-repeat(bgr)属性值:属性值效果no-repeat不平铺repeat平铺(默认效果)repeat-x水平方向平铺repeat-y垂直方向......
  • HTML和CSS 介绍
    HTML(HyperTextMarkupLanguage)定义HTML是一种用于创建网页的标准标记语言。它由一系列的元素组成,这些元素通过标签表示,用于描述网页的结构和内容。特点结构化:HTML使用标签来定义文档的结构,如 <head>, <body>, <h1>, <p> 等。标签可以嵌套,形成树状结构,便于组织......