编程笔记 html5cssjs 036 CSS概述

编程笔记 html5&css&js 036 CSS概述

  • 一、什么是 CSS?
  • 二、样式非常重要
  • 三、CSS 语法
  • 四、CSS 注释
  • 五、示例

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

一、什么是 CSS?

CSS 指层叠样式表 (Cascading Style Sheets)。
样式定义如何显示 HTML 元素。
样式通常存储在样式表中。
把样式添加到 HTML 4.0 中,是为了解决内容与表现分离的问题。
外部样式表可以极大提高工作效率。
外部样式表通常存储在 CSS 文件中。
多个样式定义可层叠为一个。

二、样式非常重要

HTML 标签原本被设计为用于定义文档内容,如下实例:

<h1>这是一个标题</h1>
<p>这是一个段落。</p>

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

三、CSS 语法

CSS 规则集(rule-set)由选择器和声明块组成:
CSS 选择器
选择器指向您需要设置样式的 HTML 元素。
声明块包含一条或多条用分号分隔的声明。
每条声明都包含一个 CSS 属性名称和一个值,以冒号分隔。
多条 CSS 声明用分号分隔,声明块用花括号括起来。
在此例中,所有

元素都将居中对齐,并带有红色文本颜色:

p {color: red;text-align: center;
}

例子解释
p 是 CSS 中的选择器(它指向要设置样式的 HTML 元素:

)。
color 是属性,red 是属性值
text-align 是属性,center 是属性值

四、CSS 注释

注释是用来解释你的代码,并且可以随意编辑它,浏览器会忽略它。
CSS注释以 /* 开始, 以 */ 结束, 实例如下:

/*这是个注释*/
p
{text-align:center;/*这是另一个注释*/color:black;font-family:arial;
}

五、示例

前面内容已经开始使用。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/626530.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

全局唯一ID实现方案——雪花算法

全局唯一ID实现方案——雪花算法 雪花算法原理 Snowflake&#xff0c;雪花算法是由Twitter开源的分布式ID生成算法&#xff0c;以划分命名空间的方式将 64-bit位分割成多个部分&#xff0c;每个部分代表不同的含义。而 Java中64bit的整数是Long类型&#xff0c;所以在 Java 中…

数据加密过程和数据加密的方法有哪些?

在信息日益发达的今天&#xff0c;数据安全已成为越来越受到关注的问题。数据加密技术作为保护信息安全的重要手段&#xff0c;对于维护个人隐私、企业机密以及国家安全具有重要意义。希望通过本文的学习&#xff0c;您能够对数据加密有一个全面的认识&#xff0c;并在实际应用…

基于Java的校车管理系统

源码跳转链接: 基于java的校车管理系统 基于Java的校车管理系统 摘要一、绪论1.1设计目的与意义1.2需求分析1.3用户、管理员用例图 二、系统总体设计2.1系统模块设计2.2数据库分析与设计2.2.1数据库概念结构设计2.2.2表结构设计2.2.3数据库连接池原理 2.3系统后台设计与分析2.…

DAY9--learning english

一、积累 1.compilation 2.mow lawn 3.vendor 4.transparent 5. perpetual 6. extinct 7. thirst 8.defy 9.resentment 10.ample 11.restore 12. firm 13. coincidence 14. spoil 15. astonish 16. blade 17.pierce 18. indigenous 19.perspective 20.vibrant 二、练习 1.spe…

关于枚举问题

一、abc算法 #include "cstdio" int main(){int a,b,c;//定义名字为a,b,c的三个整型变量for(a0;a<9;a){ // a的初始值是0&#xff0c;当a满足a<9的时候&#xff0c;可以执行循环体 //自增的意思for(b0;b<9;b){for(c0;c<9;c){//abcbcc532//abc--&g…

Wpf 使用 Prism 实战开发Day11

仓储&#xff08;Repository&#xff09;/工作单元&#xff08;Unit Of Work&#xff09;模式 仓储&#xff08;rep&#xff09;:仓储接口定义了对实体类访问数据库及操作的方法。它统一管理数据访问的逻辑&#xff0c;并与业务逻辑层进行解耦。 简单的理解就是对访问数据库的一…

【设计模式之美】重构(三)之解耦方法论:如何通过封装、抽象、模块化、中间层等解耦代码?

文章目录 一. “解耦”概述二. 如何给代码“解耦”&#xff1f;1. 封装与抽象2. 中间层2.1. 引入中间层能**简化模块或类之间的依赖关系**。2.2. 引入中间层可以起到过渡的作用&#xff0c;能够让开发和重构同步进行&#xff0c;不互相干扰。 3. 模块化4. 其他设计思想和原则4.…

SpringBoot+Vue2+Echarts实现图表的统计

SpringBootVue2Echarts实现图表的统计 一、需求 该功能是为了实现在对学生分班的人数统计下&#xff0c;所作出的相应调整。Echarts图表在实际项目中也有使用。 二、具体实现 1、数据库设计 班级表&#xff1a;classes 字段名类型长度小数点是否允许为空是否为主键说明ci…

opencv通过轮廓点生成闭合图像

前言 有时候需要将某一些点生成闭合的二值图像。记录一下。 // 轮廓点个数 int nrCurvePoints curContour.nr; // 轮廓点 DIM2DL* curvePoints curContour.pts;std::vector<cv::Point> points; // 轮廓点集合 for (int cntPoint 0; cntPoint < nrCurvePoints; cn…

[晓丽紫]每日论文分享(有中文摘要,源码或项目地址)--大模型,扩散模型...

专属领域论文订阅 关注{晓理紫|小李子}&#xff0c;每日更新论文&#xff0c;如感兴趣&#xff0c;请转发给有需要的同学&#xff0c;谢谢支持 分类: 大语言模型LLM视觉模型VLM扩散模型视觉导航具身智能&#xff0c;机器人强化学习开放词汇&#xff0c;检测分割 [晓丽紫]每日论…

基于YOLOv7的学生课堂行为检测,引入BRA注意力和多种IoU改进提升检测能力

&#x1f4a1;&#x1f4a1;&#x1f4a1;本文摘要&#xff1a;介绍了学生课堂行为检测&#xff0c;并使用YOLOv7进行训练模型&#xff0c;以及引入BRA注意力和多种IoU改进来提升检测能力 目录 1.SCB介绍 ​编辑 2.如何提高YOLOv7课堂行为检测能力 2.1 训练基于YOLOv7模型的…

C++ 有需求 需要对数字向下取整 int和 double 混淆 已解决

在项目使用中。 原本以为 直接 ceil(13/ 2) 3 但是实际是错误的。 需要 是 ceil(5.0 / 2) double 才能向上取整。结果有大佬 直接使用两种办法 能解决问题。 由于传入的参数和返回的参数都是double&#xff0c;所以需要手动转化 #include <bits/stdc.h> using name…

HANA:传参,游标(Cursor)应用,FOR循环,解决存储表内存溢出的问题

作者 idan lian 如需转载备注出处 1.应用场景 最近项目上用HANA开发的比较多&#xff0c;之前我是bw用的比较多&#xff0c;就不会有这种问题。我们这个项目很多都是开发的计算视图&#xff0c;但最近做acdoca的逻辑时&#xff0c;计算视图在生产环境执行的时候报错&#xf…

flink 1.18 sql gateway /sql gateway jdbc

一 sql gateway 注意 之所以直接启动gateway 能知道yarn session 主要还是隐藏的配置文件&#xff0c;但是配置文件可以被覆盖&#xff0c;多个session 保留最新的applicationid 1 安装flink &#xff08;略&#xff09; 2 启动sql-gatway(sql-gateway 通过官网介绍只能运行…

2022年JavaB组 试题 C: 字符统计

/*试题 C: 字符统计 * 时间限制: 1.0s 内存限制: 512.0MB 本题总分&#xff1a;10 分 * 【问题描述】 * 给定一个只包含大写字母的字符串 S&#xff0c;请你输出其中出现次数最多的字母。 * 如果有多个字母均出现了最多次&#xff0c;按字母表顺序依次输出所有这些字母。 * 【输…

YOLOv8改进 | 检测头篇 | 利用DBB重参数化模块魔改检测头实现暴力涨点 (支持检测、分割、关键点检测)

一、本文介绍 本文给大家带来的改进机制是二次创新的机制,二次创新是我们发表论文中关键的一环,本文给大家带来的二次创新机制是通过DiverseBranchBlock(DBB)模块来改进我们的检测头形成一个新的检测头Detect_DBB,其中DBB是一种重参数化模块,其训练时采用复杂结构,推理时…

#AIGC##LLM##RAG# RAG:专补LLMs短板_减少LLM幻觉并多模态/RAG 技术最新进展

RAG技术&#xff0c;即检索增强生成&#xff0c;标志着自然语言处理领域的重大进展。通过整合先前知识&#xff0c;它提升了大型语言模型的性能&#xff0c;广泛应用于多模态领域和垂直行业。本文深入探讨了RAG技术的演进历程、技术发展、LLMs问题及其解决方案&#xff0c;为读…

MySQL 8.0中引入的选项和变量(二)

以下是在MySQL 8.0中新增的系统变量、状态变量和服务选项&#xff1a; • Mysqlx_bytes_sent_compressed_payload: 发送的已压缩消息数据量&#xff0c;指的是在压缩之后的大小。在MySQL 8.0.19中引入。 • Mysqlx_bytes_sent_uncompressed_frame: 发送的未压缩消息数据量&…

前端笔试题(二)

1.常见的盒子水平垂直居中的方法有哪些 使用定位 使用margin&#xff1a;auto; display:flex; justify-content:center; align-items:center; 使用transform: translate(-50%,-50%); 2.简述下深浅拷贝的原理和常用的方法 浅拷贝 对于基本类型数据来说&#xff0c;拷贝的…

【RT-DETR有效改进】ShapeIoU、InnerShapeIoU关注边界框本身的IoU(包含二次创新)

前言 大家好&#xff0c;我是Snu77&#xff0c;这里是RT-DETR有效涨点专栏。 本专栏的内容为根据ultralytics版本的RT-DETR进行改进&#xff0c;内容持续更新&#xff0c;每周更新文章数量3-10篇。 专栏以ResNet18、ResNet50为基础修改版本&#xff0c;同时修改内容也支持Re…