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

CSS的基础

news 2026/2/7 18:15:10

  • CSS美化HTML，布局网页

  • CSS最大的价值：由HTML专注去做结构呈现，样式给CSS，结构（HTML)与样式（CSS）相分离

  • CSS主要由选择器以及一条或多条声明

  • 在<head></head>中实现CSS在<body></body>实现HTLM

  • 语法格式：选择器{做什么}

  • <head>
<style>p {color: red;//冒号是小写的，分号是大写的font-size: 12px;//冒号是小写的，分号是大写的.字体的大小}
<style>
</head>
<body><p>有点意思</p>
</body>

  • 空格规范

  • 属性值前面，冒号后面，保留一个空格

  • 选择器和大括号中间保留空格

  • 选择器分为基础选择器和复合选择器

  • 基础选择器分成标签选择器，优点是能快速为页面中同类型的标签统一设置样式

  • 类选择器可以单独选一个或几个标签

<style>
.red{color: red;//color: #ccooff;变成16进制的颜色双击可任意选取颜色
}
</style>
<body><p class="red">是看得见</p><p>是看得见</p><p>是看得见</p>
</body>

  • 可以理解为这个标签起了一个名字，来表示

  • 长名称或词组可以使用中横线来为选择器命名

  • 不能使用纯数字、中文等命名，尽量使用英文字母来表示

  • 多类名的使用方式

 <style>.red{color: red;}.green{font-size: 100px;}</style><body><p class="red green">是看得见</p>//可以同时使用red和green两个类。注意两个类中间要空格分开<p>是看得见</p><p>是看得见</p></body>

  • 使用多类名可以将宽长放一个类，颜色放一个类

  • id选择器样式#定义，结构id调用，只能调用一次，有标签使用了，别的标签不能使用

  • #pink{color: red;
}
​
<div id="pink"></div>

  • 同配符选择器

  • *{color: red;
}
<body></body>里面的所有的内容自动变成红色

  • CSS的字体系列

  • font-family属性定义文本的字体系列

  • <head>
<style>p{font-size: '微软雅黑';font-weight: bold;//给字体加粗font-weight: 700;//开发的时候写数字。700等于加粗font-weight；400;//400等于不加粗等于normal开发写数字}p{font-family: 'Micorsoft YaHai', Arial,Helvetica;}
</style>
</head>
<body><p class="red">是看得见</p><p>是看得见</p><p>是看得见</p>
</body>

  • px是像素的意思

  • 字体之间必须使用英文状态下的逗号隔开

  • 空格隔开的多个的单词组成的字体，加引号

  • 使用系统默认的字体

  • 可以直接给body直接输入字体

  • 如果是标题的话，就算是在body{ font-size=12px；}标题部分也要自己在重新定义

  • <head>
<style>em {font-style: normal;}
<style>
</head>
<body><em>有点意思</em>
</body>

  • 上述的代码可以复合起来，顺序是

  • font：斜体 粗细 字体大小 字体样式

  • 注意不能颠倒顺序

  • 复合字体可以没有斜体和粗细但不能没有字体大小和字体样式

  • CSS提供了背景颜色半透明的效果

  • background: rgba(0,0, 0, 0.3);//0.3也可以将.3

  • r代表红，g代表绿色，b代表蓝色，a代表alpha透明度

  • 盒子背景半透明，不会影响盒子里面内容的

相关文章：

CSS的基础

CSS美化HTML&#xff0c;布局网页 CSS最大的价值&#xff1a;由HTML专注去做结构呈现&#xff0c;样式给CSS&#xff0c;结构&#xff08;HTML)与样式&#xff08;CSS&#xff09;相分离 CSS主要由选择器以及一条或多条声明 在<head></head>中实现CSS在<body…...

编程日记 2023/10/2 13:26:39

mathtype如何嵌入到word中？详细mathtype安装步骤教程

mathtype是一款功能特别强大的数学方式编辑软件&#xff0c;为用户提供各种强大的数学公式符号帮助用户进行计算&#xff0c;并且速度很快。有小伙伴知道mathtype如何嵌入到word中吗&#xff0c;这里小编就给大家详细介绍一下mathtype嵌入到word中的方法&#xff0c;有需要的小…...

编程日记 2023/10/2 13:23:36

云安全之访问控制的常见攻击及防御

访问控制攻击概述 访问控制漏洞即应用程序允许攻击者执行或者访问某种攻击者不具备相应权限的功能或资源。 常见的访问控制可以分为垂直访问控制、水平访问控制及多阶段访问控制 (上下文相关访问控制)&#xff0c;与其相应的访问控制漏洞为也垂直越权漏洞(普通用户可以访问或…...

编程日记 2023/10/2 13:22:35

Java编程技巧：跨域

目录 1、跨域概念2、后端CORS&#xff08;跨域资源共享&#xff09;配置原理3、既然请求跨域了&#xff0c;那么请求到底发出去没有&#xff1f;4、通过后端CORS&#xff08;跨域资源共享&#xff09;配置解决跨域问题代码4.1、SpringBoot&#xff08;FilterRegistrationBean&a…...

编程日记 2023/10/2 13:19:32

react create-react-app 配置less

环境信息&#xff1a; create-react-app:v5 react:18.2.0 node:18.16.0 如果你不必须使用 less 建议直接使用scss。 因为less配置会遇到很多问题。 配置less过程&#xff1a; 如果你只需要 sass的话&#xff0c;就可以直接使用sass。因为默认配置了scss。 npm、yarn、cnpm、…...

编程日记 2023/10/2 13:18:31

树的表示——孩子兄弟表示法

从图中可以看出&#xff0c;树的每个结点&#xff0c;都有不确定的指向他们的孩子的节点&#xff0c;如果我们定义这样一个结构体来便是数的结构的话&#xff1a; struct TreeNode { int val; struct TreeNodep1; struct TreeNodep1; … }; 是不能够表示一棵树的&#xff0c;因…...

编程日记 2023/10/2 13:16:30

Windows11安装MySQL8.1

安装过程中遇到任何问题均可以参考(这个博客只是单纯升级个版本和简化流程) Windows安装MySQL8教程-CSDN博客 到官网下载mysql8数据库软件 MySQL :: Download MySQL Community Server 下载完后,解压到你需要安装的文件夹 其中的配置文件内容了如下 [mysqld]# 设置3306端口po…...

编程日记 2023/10/2 13:13:27

Linux编程——经典链表list_head

1. 关于list_head struct list_head是Linux内核定义的双向链表&#xff0c;包含一个指向前驱节点和后继节点的指针的结构体。其定义如下&#xff1a; struct list_head {struct list_head *next, *prev; //双向链表&#xff0c;指向节点的指针 };1.1 链表的定义和初始化 有两…...

编程日记 2023/10/2 13:12:25

基于51单片机NEC协议红外遥控发送接收仿真设计( proteus仿真+程序+原理图+报告+讲解视频）

基于51单片机NEC协议红外遥控发送接收仿真设计 讲解视频1.主要功能&#xff1a;2.仿真3. 程序代码4. 原理图5. 设计报告6. 设计资料内容清单&&下载链接 基于51单片机NEC协议红外遥控发送接收仿真设计 51单片机红外发送接收仿真设计( proteus仿真程序原理图报告讲解视频…...

编程日记 2023/10/2 13:11:24

Jmeter分布式压力测试

目录 1、场景 2、原理 3、注意事项 4、slave配置 5、master配置 6、脚本执行 1、场景 在做性能测试时&#xff0c;单台机器进行压测可能达不到预期结果。主要原因是单台机器压到一定程度会出现瓶颈。也有可能单机网卡跟不上造成结果偏差较大。 例如4C8G的window server机…...

编程日记 2023/10/2 13:10:23

Rust :mod.rs和lib.rs中use的作用

一、mod.rs和lib.rs mod.rs往往是把同一目录下的n个rs文件综合在一起的有效方式&#xff1b; lib.rs是一个库或子库层次综合在一起的有效方式&#xff1b; 下面举个实例来说明。生成一个rusttoc本地库&#xff08;由cargo new rusttoc --lib所生成&#xff09;&#xff0c;目录…...

编程日记 2023/10/2 13:09:22

ISP图像信号处理——平场校正介绍以及C++实现

参考文章1&#xff1a;http://t.csdn.cn/h8TBy 参考文章2&#xff1a;http://t.csdn.cn/6nmsT 参考网址3&#xff1a;opencv平场定标 - CSDN文库 平场校正一般先用FPN(Fixed Pattern Noise)固定图像噪声校正,即暗场校正&#xff1b;再用PRNU(Photo Response Non Uniformity)…...

编程日记 2023/10/2 13:06:20

【深入了解Java String类】

目录 String类 常用方法 字符串的不可变性 String的内存分析 StringBuilder类 解释可变和不可变字符串 常用方法 面试题&#xff1a;String&#xff0c;StringBuilder&#xff0c;StringBuffer之间的区别和联系 String类的OJ练习 String类 【1】直接使用&#xff0c…...

编程日记 2023/10/2 13:04:18

基于SpringBoot的知识管理系统

目录 前言 一、技术栈 二、系统功能介绍 用户管理 文章分类 资料分类 文章信息 论坛交流 资料下载 三、核心代码 1、登录模块 2、文件上传模块 3、代码封装 前言 随着信息互联网信息的飞速发展&#xff0c;无纸化作业变成了一种趋势&#xff0c;针对这个问题开发一个…...

编程日记 2023/10/2 13:03:17

Pytorch基础：Tensor的reshape方法

在Pytorch中&#xff0c;reshape是Tensor的一个重要方法&#xff0c;它与Numpy中的reshape类似&#xff0c;用于返回一个改变了形状但数据和数据顺序和原来一致的新Tensor对象。注意&#xff1a;此时返回的数据对象并不一定是新的&#xff0c;这取决于应用此方法的Tensor是否是…...

编程日记 2023/10/2 13:02:16

【数据库——MySQL】（13）过程式对象程序设计——存储函数、错误处理以及事务管理

目录 1. 存储函数2. 存储函数的应用3. 错误处理4. 抛出异常5. 事务处理6. 事务隔离级7. 应用实例参考书籍 1. 存储函数 要 创建 存储函数&#xff0c;需要用到 CREATE 语句&#xff1a; CREATE FUNCTION 存储函数名([参数名 类型, ...])RETURNS 类型[存储函数体]注意&#xff1…...

编程日记 2023/10/2 13:01:15

Spring Boot的魔法：构建高性能Java应用

文章目录 Spring Boot&#xff1a;简化Java开发Spring Boot的性能优势1. 内嵌服务器2. 自动配置3. 起步依赖4. 缓存和优化5. 异步处理 实际示例&#xff1a;构建高性能的RESTful API总结 &#x1f389;欢迎来到架构设计专栏~Spring Boot的魔法&#xff1a;构建高性能Java应用 ☆…...

编程日记 2023/10/2 12:56:12

如何做好测试？（七）兼容性测试 (Compatibility Testing, CT)

1. 兼容性测试介绍 兼容性测试 (Compatibility Testing, CT)是一种软件测试方法&#xff0c;旨在验证应用程序在不同操作系统、浏览器、设备和网络环境下的正确运行和一致性。对于网上购物系统来说&#xff0c;兼容性测试非常重要&#xff0c;因为用户可能使用各种不同的设备和…...

编程日记 2023/10/2 12:55:10

经典循环神经网络(一)RNN及其在歌词数据集上的应用

经典循环神经网络(一)RNN及其在歌词数据集上的应用 1 RNN概述 在深度学习兴起之前&#xff0c;NLP领域一直是统计模型的天下&#xff0c;例如词对齐算法GIZA&#xff0c;统计机器翻译开源框架MOSES等等。在语言模型方向&#xff0c;n-gram是当时最为流行的语言模型方法。n-gr…...

编程日记 2023/10/2 12:54:09

docker+mysql+flask+redis+vue3+uwsgi+docker部署

首先拉取mysql的镜像&#xff0c;这里用的mysql5.7.6 docker pull mysql:5.7.6 镜像拉取完成后启动&#xff1a; docker run --name my-mysql -d -p 3306:3306 -v /usr/local/my-mysql/conf:/etc/mysql/conf.d -v /usr/local/my-mysql/data:/var/lib/mysql -e MYSQL_ROOT_PA…...

编程日记 2023/10/2 12:49:04

云计算——弹性云计算器（ECS）

弹性云服务器&#xff1a;ECS 概述 云计算重构了ICT系统&#xff0c;云计算平台厂商推出使得厂家能够主要关注应用管理而非平台管理的云平台&#xff0c;包含如下主要概念。 ECS&#xff08;Elastic Cloud Server&#xff09;&#xff1a;即弹性云服务器&#xff0c;是云计算…...

编程新知 2025/8/16 21:50:27

shell脚本--常见案例

1、自动备份文件或目录 2、批量重命名文件 3、查找并删除指定名称的文件&#xff1a; 4、批量删除文件 5、查找并替换文件内容 6、批量创建文件 7、创建文件夹并移动文件 8、在文件夹中查找文件...

编程新知 2026/1/21 19:11:31

【SpringBoot】100、SpringBoot中使用自定义注解+AOP实现参数自动解密

在实际项目中，用户注册、登录、修改密码等操作，都涉及到参数传输安全问题。所以我们需要在前端对账户、密码等敏感信息加密传输，在后端接收到数据后能自动解密。 1、引入依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId...

编程新知 2025/11/28 6:00:25

iPhone密码忘记了办？iPhoneUnlocker，iPhone解锁工具Aiseesoft iPhone Unlocker 高级注册版​分享

平时用 iPhone 的时候&#xff0c;难免会碰到解锁的麻烦事。比如密码忘了、人脸识别 / 指纹识别突然不灵&#xff0c;或者买了二手 iPhone 却被原来的 iCloud 账号锁住&#xff0c;这时候就需要靠谱的解锁工具来帮忙了。Aiseesoft iPhone Unlocker 就是专门解决这些问题的软件&…...

编程新知 2026/1/29 10:22:28

React Native在HarmonyOS 5.0阅读类应用开发中的实践

一、技术选型背景 随着HarmonyOS 5.0对Web兼容层的增强&#xff0c;React Native作为跨平台框架可通过重新编译ArkTS组件实现85%以上的代码复用率。阅读类应用具有UI复杂度低、数据流清晰的特点。 二、核心实现方案 1. 环境配置 &#xff08;1&#xff09;使用React Native…...

编程新知 2025/8/19 2:57:37

DeepSeek 技术赋能无人农场协同作业：用 AI 重构农田管理 “神经网”

目录 一、引言二、DeepSeek 技术大揭秘2.1 核心架构解析2.2 关键技术剖析 三、智能农业无人农场协同作业现状3.1 发展现状概述3.2 协同作业模式介绍 四、DeepSeek 的 “农场奇妙游”4.1 数据处理与分析4.2 作物生长监测与预测4.3 病虫害防治4.4 农机协同作业调度 五、实际案例大…...

编程新知 2025/9/24 13:35:36

Reasoning over Uncertain Text by Generative Large Language Models

https://ojs.aaai.org/index.php/AAAI/article/view/34674/36829https://ojs.aaai.org/index.php/AAAI/article/view/34674/36829 1. 概述 文本中的不确定性在许多语境中传达，从日常对话到特定领域的文档（例如医学文档）（Heritage 2013；Landmark、Gulbrandsen 和 Svenevei…...

编程新知 2026/2/6 17:58:07

【Nginx】使用 Nginx+Lua 实现基于 IP 的访问频率限制

使用 NginxLua 实现基于 IP 的访问频率限制 在高并发场景下&#xff0c;限制某个 IP 的访问频率是非常重要的&#xff0c;可以有效防止恶意攻击或错误配置导致的服务宕机。以下是一个详细的实现方案&#xff0c;使用 Nginx 和 Lua 脚本结合 Redis 来实现基于 IP 的访问频率限制…...

编程新知 2025/10/22 6:06:44

区块链技术概述

区块链技术是一种去中心化、分布式账本技术&#xff0c;通过密码学、共识机制和智能合约等核心组件&#xff0c;实现数据不可篡改、透明可追溯的系统。 一、核心技术 1. 去中心化 特点&#xff1a;数据存储在网络中的多个节点&#xff08;计算机&#xff09;&#xff0c;而非…...

编程新知 2025/10/25 7:41:33

智能职业发展系统：AI驱动的职业规划平台技术解析

智能职业发展系统&#xff1a;AI驱动的职业规划平台技术解析 引言&#xff1a;数字时代的职业革命 在当今瞬息万变的就业市场中&#xff0c;传统的职业规划方法已无法满足个人和企业的需求。据统计&#xff0c;全球每年有超过2亿人面临职业转型困境&#xff0c;而企业也因此遭…...

编程新知 2025/9/26 10:15:18