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

CSS的基础

news 2025/12/17 14:40:43

  • 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

React hook之useRef

React useRef 详解 useRef 是 React 提供的一个 Hook&#xff0c;用于在函数组件中创建可变的引用对象。它在 React 开发中有多种重要用途&#xff0c;下面我将全面详细地介绍它的特性和用法。 基本概念 1. 创建 ref const refContainer useRef(initialValue);initialValu…...

编程新知 2025/6/11 15:21:26

多种风格导航菜单 HTML 实现（附源码）

下面我将为您展示 6 种不同风格的导航菜单实现&#xff0c;每种都包含完整 HTML、CSS 和 JavaScript 代码。 1. 简约水平导航栏 <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta name"viewport&qu…...

编程新知 2025/12/17 14:12:41

什么？连接服务器也能可视化显示界面？：基于X11 Forwarding + CentOS + MobaXterm实战指南

文章目录 什么是X11？环境准备实战步骤1️⃣ 服务器端配置（CentOS）2️⃣ 客户端配置（MobaXterm）3️⃣ 验证X11 Forwarding4️⃣ 运行自定义GUI程序(Python示例)5️⃣ 成功效果![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/55aefaea8a9f477e86d065227851fe3d.pn…...

编程新知 2025/10/2 17:12:14

基于Java Swing的电子通讯录设计与实现：附系统托盘功能代码详解

JAVASQL电子通讯录带系统托盘 一、系统概述 本电子通讯录系统采用Java Swing开发桌面应用&#xff0c;结合SQLite数据库实现联系人管理功能&#xff0c;并集成系统托盘功能提升用户体验。系统支持联系人的增删改查、分组管理、搜索过滤等功能&#xff0c;同时可以最小化到系统…...

编程新知 2025/10/4 20:58:43

Git常用命令完全指南：从入门到精通

Git常用命令完全指南&#xff1a;从入门到精通 一、基础配置命令 1. 用户信息配置 # 设置全局用户名 git config --global user.name "你的名字"# 设置全局邮箱 git config --global user.email "你的邮箱example.com"# 查看所有配置 git config --list…...

编程新知 2025/10/3 0:40:01

go 里面的指针

指针 在 Go 中&#xff0c;指针&#xff08;pointer&#xff09;是一个变量的内存地址&#xff0c;就像 C 语言那样&#xff1a; a : 10 p : &a // p 是一个指向 a 的指针 fmt.Println(*p) // 输出 10&#xff0c;通过指针解引用• &a 表示获取变量 a 的地址 p 表示…...

编程新知 2025/8/18 12:09:07

SpringAI实战：ChatModel智能对话全解

一、引言&#xff1a;Spring AI 与 Chat Model 的核心价值 &#x1f680; 在 Java 生态中集成大模型能力&#xff0c;Spring AI 提供了高效的解决方案 &#x1f916;。其中 Chat Model 作为核心交互组件&#xff0c;通过标准化接口简化了与大语言模型&#xff08;LLM&#xff0…...

编程新知 2025/9/27 0:41:04

【UE5 C++】通过文件对话框获取选择文件的路径

目录 效果 步骤 源码 效果 步骤 1. 在“xxx.Build.cs”中添加需要使用的模块 &#xff0c;这里主要使用“DesktopPlatform”模块 2. 添加后闭UE编辑器&#xff0c;右键点击 .uproject 文件&#xff0c;选择 "Generate Visual Studio project files"&#xff0c;重…...

编程新知 2025/12/12 10:04:55

恶补电源：1.电桥

一、元器件的选择 搜索并选择电桥&#xff0c;再multisim中选择FWB&#xff0c;就有各种型号的电桥: 电桥是用来干嘛的呢&#xff1f; 它是一个由四个二极管搭成的“桥梁”形状的电路&#xff0c;用来把交流电&#xff08;AC&#xff09;变成直流电&#xff08;DC&#xff09;。…...

编程新知 2025/12/16 9:28:16

在Spring Boot中集成RabbitMQ的完整指南

前言 在现代微服务架构中&#xff0c;消息队列&#xff08;Message Queue&#xff09;是实现异步通信、解耦系统组件的重要工具。RabbitMQ 是一个流行的消息中间件&#xff0c;支持多种消息协议&#xff0c;具有高可靠性和可扩展性。 本博客将详细介绍如何在 Spring Boot 项目…...

编程新知 2025/7/27 20:49:33