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

CSS的基础

news 2025/9/15 16:08:44

  • 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

MPNet：旋转机械轻量化故障诊断模型详解python代码复现

目录 一、问题背景与挑战 二、MPNet核心架构 2.1 多分支特征融合模块（MBFM） 2.2 残差注意力金字塔模块（RAPM） 2.2.1 空间金字塔注意力（SPA） 2.2.2 金字塔残差块（PRBlock） 2.3 分类器设计 三、关键技术突破 3.1 多尺度特征融合 3.2 轻量化设计策略 3.3 抗噪声…...

编程新知 2025/9/14 11:44:27

【Oracle APEX开发小技巧12】

有如下需求&#xff1a; 有一个问题反馈页面&#xff0c;要实现在apex页面展示能直观看到反馈时间超过7天未处理的数据&#xff0c;方便管理员及时处理反馈。 我的方法&#xff1a;直接将逻辑写在SQL中&#xff0c;这样可以直接在页面展示 完整代码&#xff1a; SELECTSF.FE…...

编程新知 2025/9/13 15:30:49

遍历 Map 类型集合的方法汇总

1 方法一 先用方法 keySet() 获取集合中的所有键。再通过 gey(key) 方法用对应键获取值 import java.util.HashMap; import java.util.Set;public class Test {public static void main(String[] args) {HashMap hashMap new HashMap();hashMap.put("语文",99);has…...

编程新知 2025/9/8 22:31:18

2025 后端自学UNIAPP【项目实战：旅游项目】6、我的收藏页面

代码框架视图 1、先添加一个获取收藏景点的列表请求 【在文件my_api.js文件中添加】 // 引入公共的请求封装 import http from ./my_http.js// 登录接口&#xff08;适配服务端返回 Token&#xff09; export const login async (code, avatar) > {const res await http…...

编程新知 2025/9/3 23:20:22

从零实现STL哈希容器：unordered_map/unordered_set封装详解

本篇文章是对C学习的STL哈希容器自主实现部分的学习分享 希望也能为你带来些帮助~ 那咱们废话不多说&#xff0c;直接开始吧&#xff01; 一、源码结构分析 1. SGISTL30实现剖析 // hash_set核心结构 template <class Value, class HashFcn, ...> class hash_set {ty…...

编程新知 2025/8/25 21:03:32

【论文阅读28】-CNN-BiLSTM-Attention-（2024）

本文把滑坡位移序列拆开、筛优质因子&#xff0c;再用 CNN-BiLSTM-Attention 来动态预测每个子序列&#xff0c;最后重构出总位移&#xff0c;预测效果超越传统模型。 文章目录 1 引言2 方法2.1 位移时间序列加性模型2.2 变分模态分解 (VMD) 具体步骤2.3.1 样本熵&#xff08;S…...

编程新知 2025/9/3 10:06:35

Spring数据访问模块设计

前面我们已经完成了IoC和web模块的设计&#xff0c;聪明的码友立马就知道了&#xff0c;该到数据访问模块了&#xff0c;要不就这俩玩个6啊&#xff0c;查库势在必行&#xff0c;至此&#xff0c;它来了。 一、核心设计理念 1、痛点在哪 应用离不开数据&#xff08;数据库、No…...

编程新知 2025/9/13 0:08:56

USB Over IP专用硬件的5个特点

USB over IP技术通过将USB协议数据封装在标准TCP/IP网络数据包中&#xff0c;从根本上改变了USB连接。这允许客户端通过局域网或广域网远程访问和控制物理连接到服务器的USB设备&#xff08;如专用硬件设备&#xff09;&#xff0c;从而消除了直接物理连接的需要。USB over IP的…...

编程新知 2025/9/13 17:42:33

R语言速释制剂QBD解决方案之三

本文是《Quality by Design for ANDAs: An Example for Immediate-Release Dosage Forms》第一个处方的R语言解决方案。 第一个处方研究评估原料药粒径分布、MCC/Lactose比例、崩解剂用量对制剂CQAs的影响。 第二处方研究用于理解颗粒外加硬脂酸镁和滑石粉对片剂质量和可生产…...

编程新知 2025/9/2 17:53:12

GruntJS-前端自动化任务运行器从入门到实战

Grunt 完全指南&#xff1a;从入门到实战 一、Grunt 是什么&#xff1f; Grunt是一个基于 Node.js 的前端自动化任务运行器&#xff0c;主要用于自动化执行项目开发中重复性高的任务&#xff0c;例如文件压缩、代码编译、语法检查、单元测试、文件合并等。通过配置简洁的任务…...

编程新知 2025/9/6 5:46:56