当前位置: 首页 > news >正文

编程笔记 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;
}

五、示例

前面内容已经开始使用。

相关文章:

编程笔记 html5cssjs 036 CSS概述

编程笔记 html5&css&js 036 CSS概述 一、什么是 CSS?二、样式非常重要三、CSS 语法四、CSS 注释五、示例 CSS (Cascading Style Sheets&#xff0c;层叠样式表&#xff09;&#xff0c;是一种用来为结构化文档&#xff08;如 HTML 文档或 XML 应用&#xff09;添加样式…...

Vue入门七(Vuex的使用|Vue-router|LocalStorage与SessionStorage和cookie的使用)

文章目录 一、Vuex1&#xff09;理解vuex2&#xff09;优点3&#xff09;何时使用&#xff1f;4&#xff09;使用步骤① 安装vuex② 注册vuex③ 引用vuex④ 创建仓库Store五个模块介绍 5&#xff09;基本使用 二、Vue-router三、LocalStorage与SessionStorage、cookie的使用 一…...

多级缓存架构(三)OpenResty Lua缓存

文章目录 一、nginx服务二、OpenResty服务1. 服务块定义2. 配置修改3. Lua程序编写4. 总结 三、运行四、测试五、高可用集群1. openresty2. tomcat 通过本文章&#xff0c;可以完成多级缓存架构中的Lua缓存。 一、nginx服务 在docker/docker-compose.yml中添加nginx服务块。…...

写点东西《Docker入门(上)》

写点东西《Docker入门&#xff08;上&#xff09;》 环境变量 Docker 镜像 Docker CMD 与 ENTRYPOINT 有什么区别 Docker 中的网络&#xff1a; Docker 存储&#xff1a; Docker 是一个工具&#xff0c;允许开发人员将他们的应用程序及其所有依赖项打包到一个容器中。然后&…...

chatgpt实用技巧之二反问式提示

大家好&#xff0c;今天跟大家讲实用gpt的小技巧二、反问式提示 有时候不知道怎么给 GPT 提示词&#xff0c;这时候&#xff0c;就可以反问 GPT 如何更好地给提示词。如图片所示 更详细内容可以看下这篇&#xff1a; 按照 GPT 给出的&#xff1a;故事设定角色故事发展主题结局…...

【数据结构和算法】奇偶链表

其他系列文章导航 Java基础合集数据结构与算法合集 设计模式合集 多线程合集 分布式合集 ES合集 文章目录 其他系列文章导航 文章目录 前言 一、题目描述 二、题解 2.1 方法一&#xff1a;分离节点后合并 三、代码 3.1 方法一&#xff1a;分离节点后合并 四、复杂度分…...

MVC框架

文章目录 JSP 和 ServletMVC 的演进1. JSP Model 12. JSP Model 23. MVC 的一般化4. MVC 的变体 总结 JSP 和 Servlet 如果你有使用 Java 作为主要语言开发网站的经历&#xff0c;那么你一定听过别人谈论 JSP 和 Servlet。其中&#xff0c;Servlet 指的是服务端的一种 Java 写…...

学习笔记之——3D Gaussian Splatting及其在SLAM与自动驾驶上的应用调研

之前博客介绍了NeRF-SLAM&#xff0c;其中对于3D Gaussian Splatting没有太深入介绍。本博文对3D Gaussian Splatting相关的一些工作做调研。 学习笔记之——NeRF SLAM&#xff08;基于神经辐射场的SLAM&#xff09;-CSDN博客文章浏览阅读967次&#xff0c;点赞22次&#xff0…...

Github Copilot 的使用方法和快捷键

Github Copilot是一个基于人工智能技术的代码自动补全工具&#xff0c;它可以为开发者提供实时的代码建议和自动生成代码片段。本文将详细介绍如何安装、设置和使用Github Copilot&#xff0c;并提供一些常用的快捷键来提高开发效率。 1. 安装和设置 1.1 下载并安装VS Code …...

开源iMES工厂管家 - 详细安装部署指南(图解)- 全网独稿

目录 一、服务器环境: 二、部署构成总览: 三、下载 node-v16.17.1-win-x64:Index of /download/release/v16.17.1/ 四、绿色安装 node-v16.17.1-win-x64 五、配置环境变量 六、检查 node-v16.17.1-win-x64 是否成功 七、执行命令组,安装组库与各种依赖 vue3环境配置…...

Codeforces Round 919 (Div. 2)

Problem - A - Codeforces n个约束条件 a x 求出满足n个约束条件的整数的个数 大于等于x&#xff0c;取最大的 小于等于x&#xff0c;取最小的 然后不等于x的&#xff0c;记录在区间范围内的个数&#xff0c;减去这些 #include<bits/stdc.h> #define endl \n #define …...

面向经验丰富的开发人员的最佳 Linux 发行版

在深入研究最佳 Linux 发行版之前&#xff0c;让我们回顾一下历史。到 2021 年&#xff0c;Linux 操作系统已经有 30 年的历史了&#xff0c;从作为开发者 Linus Torvalds 的个人项目开始&#xff0c;它已经走过了很长一段路。最初发布时&#xff0c;其源代码被分发给用户&…...

Rust-借用检查

Rust语言的核心特点是&#xff1a;在没有放弃对内存的直接控制力的情况下&#xff0c;实现了内存安全。 所谓对内存的直接控制能力&#xff0c;前文已经有所展示&#xff1a;可以自行决定内存布局&#xff0c;包括在栈上分配内存&#xff0c;还是在堆上分配内存&#xff1b;支…...

xcode安装及运行源码

抖音教学视频 目录 1、xcode 介绍 2、xcode 下载 3、xocde 运行ios源码 4、快捷键 1、xcode 介绍 Xcode 是运行在操作系统Mac OS X上的集成开发工具&#xff08;IDE&#xff09;&#xff0c;由Apple Inc开发。Xcode是开发 macOS 和 iOS 应用程序的最快捷的方式。Xcode 具有…...

x-cmd pkg | czg - git commit 智能生成工具

目录 简介首次用户功能特点竞品和相关作品进一步探索 简介 czg 源于 commitizen/cz-cli 交互插件中 cz-git 的延伸项目&#xff0c;重新使用 TypeScript 编写的零依赖独立的 Node.js 命令行工具。旨在使用交互友好的方式&#xff0c;辅助用户生成规范的 git commit message 约…...

Go的并发练习题目

经典并发题目 现在有4个协程&#xff0c;分别对应编号为1,2,3,4,每秒钟就有一个协程打印自己的编号&#xff0c;要求编写一个程序&#xff0c;让输出的编号总是按照1,2,3,4,1,2,3,4这样的规律一直打印下去 type Token struct { }func newWorker(id int, ch chan Token, nextC…...

Python 网络编程之粘包问题

【一】粘包问题介绍 【1】粘包和半包 粘包&#xff1a; 定义&#xff1a; 粘包指的是发送方发送的若干个小数据包被接收方一次性接收&#xff0c;形成一个大的数据包。原因&#xff1a; 通常是因为网络底层对数据传输的优化&#xff0c;将多个小数据包组合成一个大的数据块一次…...

旧衣回收小程序搭建:降低企业成本,提高回收效率!

在人们环保意识提升下&#xff0c;旧衣回收行业受到了大众的关注&#xff0c;同时旧衣回收具有门槛低、利润大的优势。在我国&#xff0c;回收行业不仅帮助普通人就业获利&#xff0c;还对环保做出了较大贡献。因此&#xff0c;旧衣回收行业成为了当下的热门商业模式&#xff0…...

Jmeter后置处理器——JSON提取器

目录 1、简介 2、使用步骤 1&#xff09;添加线程组 2&#xff09;添加http请求 3&#xff09; 添加JSON提取器 1、简介 JSON是一种简单的数据交换格式&#xff0c;允许互联网应用程序快速传输数据。JSON提取器可以从JSON格式响应数据中提取数据、简化从JSON原始数据中提取特定…...

[SWPUCTF 2022 新生赛]奇妙的MD5

[SWPUCTF 2022 新生赛]奇妙的MD5 wp 题目页面&#xff1a; 提示&#xff1a;可曾听过ctf 中一个奇妙的字符串。 奇妙的字符串 奇妙的字符串&#xff0c;又跟 MD5 有关&#xff0c;我只知道两个&#xff1a; 一个是 MD5 加密后弱比较等于自身&#xff0c;这个字符串是 0e215…...

STM32F4基本定时器使用和原理详解

STM32F4基本定时器使用和原理详解 前言如何确定定时器挂载在哪条时钟线上配置及使用方法参数配置PrescalerCounter ModeCounter Periodauto-reload preloadTrigger Event Selection 中断配置生成的代码及使用方法初始化代码基本定时器触发DCA或者ADC的代码讲解中断代码定时启动…...

C++八股 —— 单例模式

文章目录 1. 基本概念2. 设计要点3. 实现方式4. 详解懒汉模式 1. 基本概念 线程安全&#xff08;Thread Safety&#xff09; 线程安全是指在多线程环境下&#xff0c;某个函数、类或代码片段能够被多个线程同时调用时&#xff0c;仍能保证数据的一致性和逻辑的正确性&#xf…...

2023赣州旅游投资集团

单选题 1.“不登高山&#xff0c;不知天之高也&#xff1b;不临深溪&#xff0c;不知地之厚也。”这句话说明_____。 A、人的意识具有创造性 B、人的认识是独立于实践之外的 C、实践在认识过程中具有决定作用 D、人的一切知识都是从直接经验中获得的 参考答案: C 本题解…...

IP如何挑?2025年海外专线IP如何购买?

你花了时间和预算买了IP&#xff0c;结果IP质量不佳&#xff0c;项目效率低下不说&#xff0c;还可能带来莫名的网络问题&#xff0c;是不是太闹心了&#xff1f;尤其是在面对海外专线IP时&#xff0c;到底怎么才能买到适合自己的呢&#xff1f;所以&#xff0c;挑IP绝对是个技…...

【Redis】笔记|第8节|大厂高并发缓存架构实战与优化

缓存架构 代码结构 代码详情 功能点&#xff1a; 多级缓存&#xff0c;先查本地缓存&#xff0c;再查Redis&#xff0c;最后才查数据库热点数据重建逻辑使用分布式锁&#xff0c;二次查询更新缓存采用读写锁提升性能采用Redis的发布订阅机制通知所有实例更新本地缓存适用读多…...

CTF show 数学不及格

拿到题目先查一下壳&#xff0c;看一下信息 发现是一个ELF文件&#xff0c;64位的 ​ 用IDA Pro 64 打开这个文件 ​ 然后点击F5进行伪代码转换 可以看到有五个if判断&#xff0c;第一个argc ! 5这个判断并没有起太大作用&#xff0c;主要是下面四个if判断 ​ 根据题目…...

高抗扰度汽车光耦合器的特性

晶台光电推出的125℃光耦合器系列产品&#xff08;包括KL357NU、KL3H7U和KL817U&#xff09;&#xff0c;专为高温环境下的汽车应用设计&#xff0c;具备以下核心优势和技术特点&#xff1a; 一、技术特性分析 高温稳定性 采用先进的LED技术和优化的IC设计&#xff0c;确保在…...

工厂方法模式和抽象工厂方法模式的battle

1.案例直接上手 在这个案例里面&#xff0c;我们会实现这个普通的工厂方法&#xff0c;并且对比这个普通工厂方法和我们直接创建对象的差别在哪里&#xff0c;为什么需要一个工厂&#xff1a; 下面的这个是我们的这个案例里面涉及到的接口和对应的实现类&#xff1a; 两个发…...

HTML中各种标签的作用

一、HTML文件主要标签结构及说明 1. <&#xff01;DOCTYPE html> 作用&#xff1a;声明文档类型&#xff0c;告知浏览器这是 HTML5 文档。 必须&#xff1a;是。 2. <html lang“zh”>. </html> 作用&#xff1a;包裹整个网页内容&#xff0c;lang"z…...

基于小程序老人监护管理系统源码数据库文档

摘 要 近年来&#xff0c;随着我国人口老龄化问题日益严重&#xff0c;独居和居住养老机构的的老年人数量越来越多。而随着老年人数量的逐步增长&#xff0c;随之而来的是日益突出的老年人问题&#xff0c;尤其是老年人的健康问题&#xff0c;尤其是老年人产生健康问题后&…...