2.css简介

ops/2025/3/4 8:56:08/

什么是css
CSS (Cascading Style Sheets,层叠样式表),是一种用来为结构化文档(如 HTML 文档或 XML 应用)添加样式(字体、间距和颜色等)的计算机语言,CSS 文件扩展名为 .css
通过使用 CSS 我们可以大大提升网页开发的工作效率!
在我们的 CSS 教程中,您会学到如何使用 CSS 同时控制多重网页的样式和布局。

样式表定义如何显示 HTML 元素,就像 HTML 中的字体标签和颜色属性所起的作用那样。样式通常保存在外部的 .css 文件中。我们只需要编辑一个简单的 CSS 文档就可以改变所有页面的布局和外观。

CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明:
在这里插入图片描述
选择器通常是您需要改变样式的 HTML 元素。
每条声明由一个属性和一个值组成。
属性(property)是您希望设置的样式属性(style attribute)。每个属性有一个值。属性和值被冒号分开。

实例
/*这是个注释*/
p
{/*这是另一个注释*/color:red;text-align:center;
}

id 和 class 选择器
如果你要在HTML元素中设置CSS样式,你需要在元素中设置"id" 和 "class"选择器。

id 选择器
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 “#” 来定义。
以下的样式规则应用于元素属性 id=“para1”:

#para1
{text-align:center;color:red;
}

ID属性不要以数字开头,数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。

class 选择器
class 选择器用于描述一组元素的样式,class 选择器有别于id选择器,class可以在多个元素中使用。
class 选择器在 HTML 中以 class 属性表示, 在 CSS 中,类选择器以一个点 . 号显示:
在以下的例子中,所有拥有 center 类的 HTML 元素均为居中。

.center {text-align:center;}

类名的第一个字符不能使用数字!它无法在 Mozilla 或 Firefox 中起作用。

外部样式表
当样式需要应用于很多页面时,外部样式表将是理想的选择。在使用外部样式表的情况下,你可以通过改变一个文件来改变整个站点的外观。每个页面使用 标签链接到样式表。 标签在(文档的)头部:

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

http://www.ppmy.cn/ops/163000.html

相关文章

DNS 详细过程 与 ICMP

&#x1f308; 个人主页&#xff1a;Zfox_ &#x1f525; 系列专栏&#xff1a;Linux 目录 一&#xff1a;&#x1f525; DNS (Domain Name System) 快速了解&#x1f98b; DNS 背景&#x1f98b; 域名简介&#x1f98b; 真实地址查询 —— DNS&#x1f380; 域名的层级关系&am…

蓝耘元生代|调用Deepseek API提升数据集多样性:数据增强实践

文章目录 一、什么是Deepseek&#xff1f;二、数据增强的必要性三、 注册并登录蓝耘智算平台准备数据集调用Deepseek API 四、数据增强实战五、总结 在机器学习和深度学习领域&#xff0c;数据增强是一项非常重要的技术&#xff0c;尤其是在数据集较小的情况下。通过数据增强&a…

利用DeepSeek-Kimi打通Excel与PPT的链条,自动生成数据分析报告

通过DeepSeek在Excel生成结构化的数据分析报告&#xff0c;再借助Kimi的PPT助手将报告自动转换为专业的PPT演示文稿&#xff0c;从而实现从数据到展示的一站式解决方案。 案例数据 1.一键生成数据分析报告 在下载并安装“Excel矩阵”后&#xff0c;我们启用DeepSeek的右侧对话…

《论云原生架构及其应用》审题技巧 - 系统架构设计师

论云原生架构及其应用论文写作框架 一、考点概述 “论云原生架构及其应用”这一论题&#xff0c;主要考察了考生对云原生技术及其架构原则的深入理解与实践应用。论题的核心在于云原生架构的概念、设计原则及其在软件开发项目中的具体应用。首先&#xff0c;考生需对云原生架…

从零搭建微服务项目Pro(第1-2章——Quartz实现定时任务模块优化)

前言&#xff1a; 在企业项目中&#xff0c;往往有定时任务发布的需求&#xff0c;比如每天晚9点将今日数据备份一次&#xff0c;或每月一号将上月的销售数据邮件发送给对应的工作人员。显然这些操作不可能是人工到时间点调用一次接口&#xff0c;需要编写专门的模块完成任务的…

使用 Java 更新 Word 文档中的图表数据-超详细

使用 Java 更新 Word 文档中的图表数据 在日常的工作中&#xff0c;尤其是在数据分析和报告自动化的场景中&#xff0c;可能会遇到需要定期更新 Word 文档中的图表数据的需求。比如&#xff0c;生成数据报告时&#xff0c;我们需要在图表中更新一些动态的数据值。今天&#xf…

PHP函数与类:面向对象编程实践指南

PHP函数与类&#xff1a;面向对象编程实践指南 PHP的面向对象编程&#xff08;OOP&#xff09;能力使其成为构建可维护、可扩展Web应用的重要工具。本文从函数封装到类设计&#xff0c;系统讲解PHP面向对象编程的核心概念与实践技巧。 一、函数&#xff1a;代码复用的基本单元…

Unity小功能实现:鼠标点击移动物体

1、功能描述 当玩家点击鼠标时&#xff0c;场景中的物体会移动到鼠标点击的位置。这个功能可以用于控制角色移动、放置物体等场景。 2、实现步骤 创建Unity项目&#xff1a;首先&#xff0c;打开Unity并创建一个新的3D项目。 添加3D物体&#xff1a;在场景中创建一个3D物体&am…