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

Java Web(三）--CSS

news 2026/3/31 9:51:18

介绍

为什么需要：

  • 在没有 CSS 之前，想要修改 HTML 元素的样式需要为每个 HTML 元素单独定义样式属性，费心费力；
  • CSS 可以让  html  元素(内容) + 样式(CSS)分离，提高web 开发的工作效率(针对前端开发)，从而更好的控制页面。

CSS是什么：

  • CSS  指的是层叠样式表* (Cascading Style Sheets)；
  •  在head标签内，出现<style type="text/css"></style>，表示要写css内容。
  • css的注释是 /* */ 
  • CSS 教程

注意：在调试css时，可以通过修改颜色，或者大小来看；

<head><meta charset="UTF-8"><title>css 快速入门</title><style type="text/css">div {width: 200px;height: 100px;background-color: red;}</style></head>

说明：

  • div{} 表示对HTML中的div<>元素进行样式的指定， 当运行页面时，div<>元素就会被 div{} 渲染、修饰；
  •  width: 200px(属性)：表示对div样式的具体指定, 可以有多个； 如果有多个，使用; 分开即可。
  • 最后属性可以没有; 但是建议写上。

语法

CSS 语法可以分为两部分： 

说明：一般每行只描述一个属性；

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>CSS选择器</title><!--说明：元素选择器会修饰所有的对应的元素--><!--元素选择器--><style type="text/css">h1 {color: beige;}p {color: blue;}</style><!--id选择器--><style type="text/css">#hsp1 {color: gold;}#css2 {color: green;}</style><!--组合选择器--><style type="text/css">/*组合选择器的基本语法:选择器 1，选择器 2，选择器 n{ 属性：值; }*/.class01, #id01 {width: 300px;height: 100px;border: 2px solid red;}</style><!--class选择器--><style type="text/css">.css1 {color: red;}.css2 {color: sandybrown;}</style></head>
<body>
<h1>Java教育01</h1>
<p>hello, world~</p><h1 id="hsp1">Java教育02</h1>
<p id="css2">hello, world~</p><div class="class01">Java教育03</div>
<p id="id01">hello, world~</p><div class="css1">Java教育05</div>
<p class="css2">hello, world~</p>
</body>
</html>

常用样式

边框border

<style type="text/css">div {width: 50%; height: 100px;border: 1px dashed blue;}
/style>

 说明：宽度/高度:        像素值： 100px；         也可以是百分比值： 50%；

背景颜色

   <style>div {width: 200px;height: 100px;background-color: #ff7d44;}</style>

字体样式

    <style type="text/css">div {color: #ff7d44;}</style>

    1. font-size: 指定大小， 可以按照像素大小

    2. font-weight : 指定是否粗体

    3. font-family : 指定类型

        指定字体颜色的3种方式

  •             1. 英文（red）
  •             2. 16 进制 #ff7d44    [使用最多]
  •             3. 三原色 rgb(1,1,1)

div居中：

  •     margin-left : auto      表示左居中
  •     margin-right : auto    表示右居中

文本居中：     text-align: center；

超链接去下划线：    text-decoration: none;

表格细线

  •     设置边框: border: 1px solid black
  •     将边框合并: border-collapse: collapse;
  •     指定宽度： width
  •     设置边框：给td, th 指定即可border: 1px solid black;

        1.table, tr, td  表示组合选择器

        2.table  和tr  还有td ,都用统一的样式指定,  可以提高复用性

列表去修饰：    list-style: none;

<head><meta charset="UTF-8"><title>表格细线</title><style type="text/css">/*设置边框 : border: 1px solid black将边框合并: border-collapse: collapse;指定宽度： width设置边框： 给 td, th 指定即可 border: 1px solid black;1. table, tr, td 表示组合选择器2. 就是table 和 tr 还有 td ,都用统一的样式指定, 可以提高复用性*/table, tr, td {width: 300px;border: 1px solid black;border-collapse: collapse;}</style>
</head>
    <style type="text/css">ul {/*说明:list-style:none表示去掉默认的修饰*/list-style: none;}</style>

使用

方式一

在标签的 style 属性上设置 CSS 样式；

弊端

  •     标签多了。样式多了，代码量庞大
  •     可读性差
  •     CSS 代码没有复用性
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>在标签的 style 属性上设置CSS样式</title>
</head><body><div style="width: 300px;height: 100px;background-color: red">hello, 北京</div>
<br/><div style="width: 300px;height: 100px;background-color: red">hello, 上海</div>
<br/><div style="width: 300px;height: 100px;background-color: red">hello, 天津</div>
<br/></body></html>

方式二

在 head 标签中， 使用 style 标签来定义需要的 CSS 样式；

弊端

  •     只能在同一页面内复用代码维护不方便，
  •     实际项目中会有很多页面，需要到对应页面去修改。工作量大
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>在 head 标签中，使用 style 标签来定义需要的 CSS 样式</title><style type="text/css">div {width: 300px;height: 100px;background-color: beige;}span {border: 1px solid red;}</style>
</head>
<body>
<div>hello, 北京</div>
<br/>
<div>hello, 上海</div>
<br/>
<span>hello, span</span>
</body>
</html>

方式三--推荐方式

把 CSS 样式写成单独的 CSS 文件， 再通过 link 标签引入；

语法：    <link rel="stylesheet" type="text/css" href="./css/my.css" />

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>引入外部的css文件</title><link rel="stylesheet" href="./css/my.css" />
</head><body>
<div>hello, 北京~</div>
<br/>
<div>hello, 上海</div>
<br/>
<span>hello, span</span>
</body></html>//my.css文件
div {width: 200px;height: 100px;background-color: red;
}
span {border: 2px dashed blue;
}

说明：

href 表示要引入的css文件的位置，可以是web的完整路径；

type="text/css" 可以有，也可以不写；

rel：relation 关联，它描述了当前页面与href所指定文档的关系；

  •         即指明你链进来的对象是个什么东西
  •         只有 rel 属性的 "stylesheet" 值得到了所有浏览器的支持。其他值只得到了部分地支持；

各个属性值

  •     Alternate -- 定义交替出现的链接 /文档的替代版本（比如打印页、翻译或镜像）
  •     Stylesheet -- 定义一个外部加载的样式表 ， 关联的是一个样式表(stylesheet)文档；       它表示这个link在文档初始化时将被使用
  •     Start -- 通知搜索引擎,文档的开始 
  •     Next -- 记录文档的下一页.(浏览器可以提前加载此页) 
  •     Prev -- 记录文档的上一页.(定义浏览器的后退键) 
  •     contents    文档的目录。
  •     index    文档的索引。
  •     glossary    在文档中使用的词汇的术语表（解释）。
  •     copyright    包含版权信息的文档。
  •     chapter    文档的章。
  •     section    文档的节。
  •     subsection    文档的小节。
  •     appendix    文档的附录。
  •     help    帮助文档。
  •     bookmark    相关文档。

相关文章：

Java Web(三）--CSS

介绍 为什么需要&#xff1a; 在没有 CSS 之前&#xff0c;想要修改 HTML 元素的样式需要为每个 HTML 元素单独定义样式属性&#xff0c;费心费力&#xff1b;CSS 可以让 html 元素(内容) 样式(CSS)分离&#xff0c;提高web 开发的工作效率(针对前端开发)&#xff0c;从而…...

编程日记 2024/1/24 21:05:52

天津大数据培训班推荐，数据分析过程的常见错误

大数据”是近年来IT行业的热词&#xff0c;目前已经广泛应用在各个行业。大数据&#xff0c;又称海量信息&#xff0c;特点是数据量大、种类多、实时性强、数据蕴藏的价值大。大数据是对大量、动态、能持续的数据&#xff0c;通过运用分析、挖掘和整理&#xff0c;实现数据信息…...

编程日记 2024/1/24 21:01:49

【笔记】Helm-3 主题-17 弃用的Kubernetes API

弃用的Kubernetes API Kubernetes是一个API驱动系统&#xff0c;且API会随着时间的推移而变化&#xff0c;以反映对问题理解的不断推移。这是系统及API的普遍做法。API推移的一个重要部分是良好的弃用策略和通知用户更改API是如何实现的。换句话说&#xff0c;您的API使用者需要…...

编程日记 2024/1/24 20:59:47

麒麟系统—— openKylin 安装 java

麒麟系统—— openKylin 安装 java JDK 一、准备工作1. 确保麒麟系统 openKylin 已经安装完毕。2. 了解 java JDK 的版本信息&#xff0c;以便下载合适的安装包。 二、安装 java JDK3. 将下载好的 java JDK 安装包解压到指定目录。4. 配置环境5. 验证安装结果 本文将分享如何在…...

编程日记 2024/1/24 20:58:46

HTML学习笔记——07：其他嵌入技术

除了将图像、视频和音频嵌入到网页上&#xff0c;还能让你在网页中嵌入各种内容类型的元素&#xff1a;<iframe>, <embed> 和 <object> 元素。 <iframe>用于嵌入其他网页&#xff0c;另外两个元素则允许你嵌入 PDF&#xff0c;SVG&#xff0c;甚至 Fl…...

编程日记 2024/1/24 20:56:45

【UE】在控件蓝图中通过时间轴控制材质参数变化

效果 步骤 1. 新建一个控件蓝图和一个材质 2. 打开材质&#xff0c;设置材质域为用户界面&#xff0c;混合模式设置为“半透明” 在材质图表中添加两个参数来控制材质的颜色和不透明度 3. 对材质创建材质实例 4. 打开控件蓝图&#xff0c;在画布面板中添加一个图像控件 将刚…...

编程日记 2024/1/24 20:55:44

linux C语言socket函数send

在Linux中&#xff0c;使用C语言进行网络编程时&#xff0c;send函数是用于发送数据到已连接的套接字的重要函数之一。它通常用于TCP连接&#xff0c;但也可以用于UDP&#xff08;尽管对于UDP&#xff0c;通常更推荐使用sendto&#xff0c;因为它允许你指定目标地址和端口&…...

编程日记 2024/1/24 20:54:43

Django(八)

1. 管理员操作 1.1 添加 from django.shortcuts import render, redirectfrom app01 import models from app01.utils.pagination import Paginationfrom django import forms from django.core.exceptions import ValidationError from app01.utils.bootstrap import BootStr…...

编程日记 2024/1/24 20:53:42

上海计算机学会12月月赛 丙组题解

上海计算机学会 12 月月赛 丙组题解涉及知识点&#xff1a;数学、字符串、模拟、裴蜀定理、宽度优先搜索、动态规划 比赛链接&#xff1a;https://iai.sh.cn/contest/58 第一题&#xff1a;T1数砖数 标签&#xff1a;数学题意&#xff1a;给定一种 2 2 2x 2 2 2的瓷砖&#…...

编程日记 2024/1/24 20:51:40

nextjs中beforePopState使用

在某些情况下&#xff0c;希望监听popstate并在路由器对其进行操作之前执行某些操作。可以使用beforePopState。 在Next.js中&#xff0c;beforePopState是一个可选的生命周期函数&#xff0c;用于在浏览器的历史记录发生更改之前执行一些操作。具体来说&#xff0c;beforePopS…...

编程日记 2024/1/24 20:49:38

【并发编程】活锁

&#x1f4dd;个人主页&#xff1a;五敷有你 &#x1f525;系列专栏&#xff1a;并发编程 ⛺️稳重求进&#xff0c;晒太阳 活锁 定义&#xff1a;活锁出现在两个线程互相改变对象的结束条件&#xff0c;最后谁也无法结束 代码示例 public class TestLiveLock {stati…...

编程日记 2024/1/24 20:48:37

CSMM和CMMI之间有什么区别？

CSMM&#xff08;软件能力成熟度评估&#xff09;和CMMI&#xff08;能力成熟度模型集成&#xff09;都是软件行业中用于评估和提高企业软件开发过程成熟度的模型。它们之间的主要区别在于起源、定位、适应范围和具体内容。 1. 起源与定位&#xff1a; - CMMI是由美国卡耐基…...

编程日记 2024/1/24 20:47:36

企业面临的典型网络安全风险及其防范策略

网络安全威胁是一种技术风险&#xff0c;会削弱企业网络的防御能力&#xff0c;危及专有数据、关键应用程序和整个IT基础设施。由于企业面临着广泛的威胁&#xff0c;因此通过监控和缓解最关键的威胁和漏洞。网络安全问题有七大类&#xff0c;包括多种威胁&#xff0c;以及团队…...

编程日记 2024/1/24 20:44:32

JavaScript进阶：WebAPIs重点知识整理1

目录 1 DOM修改元素内容 2 DOM修改元素常见属性 3 修改元素样式属性 3.1 通过style修改元素样式 3.2 通过类名className修改元素样式 3.3 通过classList修改元素样式 4 操作表单元素属性 5 自定义属性 6 定时器 7 事件监听 7.1 点击事件 click 7.2 鼠mouseenter和移…...

编程日记 2024/1/24 20:43:30

【Nginx】使用自生成证书配置nginx代理https

使用Nginx代理HTTPS请求并使用自签名证书&#xff0c;可以按照以下步骤进行配置&#xff1a; 生成自签名证书&#xff1a; 打开终端或命令提示符&#xff0c;并导航到Nginx配置文件所在的目录。运行以下命令生成自签名证书和私钥&#xff1a; openssl req -x509 -nodes -days 3…...

编程日记 2024/1/24 20:41:29

【Linux】文件周边001之系统文件IO

&#x1f440;樊梓慕&#xff1a;个人主页 &#x1f3a5;个人专栏&#xff1a;《C语言》《数据结构》《蓝桥杯试题》《LeetCode刷题笔记》《实训项目》《C》《Linux》《算法》 &#x1f31d;每一个不曾起舞的日子&#xff0c;都是对生命的辜负 目录 前言 1.C语言文件IO 1.1…...

编程日记 2024/1/24 20:38:26

防火墙接口配置实验

1、搭建拓扑 2、给云端添加网络&#xff0c;来实现真机与虚拟机的连接 3、 给防火墙g0/0/0口配置IP&#xff0c;由于我云端绑定的是192.168.100.10&#xff0c;所以这里IP配置为192.168.100.1/24,使用命令开启防火墙远程连接的服务&#xff0c;之后便可通过web远程登陆防火墙 …...

编程日记 2024/1/24 20:37:25

《WebKit 技术内幕》学习之五（4）： HTML解释器和DOM 模型

4 影子&#xff08;Shadow&#xff09;DOM 影子 DOM 是一个新东西&#xff0c;主要解决了一个文档中可能需要大量交互的多个 DOM 树建立和维护各自的功能边界的问题。 4.1 什么是影子 DOM 当开发这样一个用户界面的控件——这个控件可能由一些 HTML 的标签元素…...

编程日记 2024/1/24 20:36:24

SpringBoot+Vue充电桩管理系统 附带详细运行指导视频

文章目录 一、项目演示二、项目介绍三、运行截图四、主要代码1. 分页获取预约数据代码2.保存预约信息代码3.修改订单状态代码 一、项目演示 项目演示地址&#xff1a; 视频地址 二、项目介绍 项目描述&#xff1a;这是一个基于SpringBootVue框架开发的充电桩管理系统。首先&…...

编程日记 2024/1/24 20:35:23

【数据结构】二叉树算法讲解（定义+算法原理+源码）

博主介绍&#xff1a;✌全网粉丝喜爱、前后端领域优质创作者、本质互联网精神、坚持优质作品共享、掘金/腾讯云/阿里云等平台优质作者、擅长前后端项目开发和毕业项目实战✌有需要可以联系作者我哦&#xff01; &#x1f345;附上相关C语言版源码讲解&#x1f345; &#x1f44…...

编程日记 2024/1/24 20:34:22

进程间通信（IPC）：原理、场景与选型

在操作系统的世界里&#xff0c;进程是程序运行的基本单元&#xff0c;每个进程都拥有独立的内存空间和资源&#xff0c;彼此之间相互隔离&#xff0c;无法直接访问对方的数据。这种隔离机制保证了系统的稳定性&#xff0c;避免进程间相互干扰&#xff0c;但也带来了一个问题&a…...

编程新知 2026/3/31 8:49:49

迪文串口屏C51开发避坑指南：从ModBus ASCII模式到音乐播放实战

迪文串口屏C51开发实战&#xff1a;从ModBus ASCII到音乐播放的深度解析 迪文串口屏在工业控制领域占据重要地位&#xff0c;其C51开发环境为开发者提供了高度灵活的定制能力。本文将聚焦三个典型开发场景&#xff1a;ModBus ASCII模式移植、C51变量定义导致的定时问题以及音乐…...

编程新知 2026/3/31 8:23:38

SeqGPT-560M智能邮件分类系统实战

SeqGPT-560M智能邮件分类系统实战 1. 引言&#xff1a;邮件管理的痛点与解决方案 每天打开邮箱&#xff0c;看到堆积如山的未读邮件&#xff0c;是不是感觉头大&#xff1f;工作邮件、会议通知、促销信息、垃圾邮件全都混在一起&#xff0c;找重要邮件就像大海捞针。手动分类…...

编程新知 2026/3/31 7:31:19

数字孪生通信层开发：C#实现OPC UA到Unity3D的实时数据映射（2026年工业级实战指南）

引言&#xff1a;通信层不是“锦上添花”&#xff0c;而是“数字孪生的血脉” 在2026年的工业数字孪生战场上&#xff0c;OPC UA到Unity3D的数据映射延迟是决定孪生体“活”与“死”的关键。IDC 2026年工业物联网报告显示&#xff1a;76%的数字孪生项目因通信层延迟>100ms失…...

编程新知 2026/3/31 7:07:00

别再只会下载安装包了！手把手教你从源码编译最新版kkFileView（附避坑指南）

从源码构建kkFileView&#xff1a;解锁定制化文件预览的完整指南 在当今数字化办公环境中&#xff0c;文件预览功能已成为各类系统的标配需求。虽然官方提供的预编译安装包能够快速部署&#xff0c;但对于追求最新特性、需要深度定制或有私有化部署需求的技术团队而言&#xff…...

编程新知 2026/3/31 5:42:25

FUTURE POLICE语音模型重装系统后快速恢复部署指南

FUTURE POLICE语音模型重装系统后快速恢复部署指南 重装系统这事儿&#xff0c;对开发者来说&#xff0c;有时候就跟电脑的“大扫除”一样&#xff0c;图个干净利落。但扫除完&#xff0c;看着空空如也的桌面和命令行&#xff0c;要重新把那些吃饭的家伙——比如你正在跑的FUT…...

编程新知 2026/3/31 5:16:09

保姆级避坑指南：在Windows上用VirtualBox 6.0.24跑Ubuntu，从开机报错到完美显示的完整流程

从开机报错到完美显示&#xff1a;VirtualBox 6.0.24运行Ubuntu全流程实战手册 当你第一次在Windows上用VirtualBox启动Ubuntu虚拟机时&#xff0c;那个刺眼的报错提示可能会让你措手不及。别担心&#xff0c;这几乎是每个虚拟化新手都会经历的"成人礼"。本文将带你完…...

编程新知 2026/3/31 4:35:16

C语言结构体内存对齐原理与实践

1. 结构体内存布局基础在C语言中&#xff0c;结构体&#xff08;struct&#xff09;是一种将不同类型的数据组合成一个整体的复合数据类型。理解结构体在内存中的实际存储方式&#xff0c;对于编写高效、可移植的代码至关重要。让我们从一个简单的例子开始&#xff1a;struct S…...

编程新知 2026/3/31 4:35:15

WooCommerce 高级报告与统计 – 订单、产品与客户报告 WordPress插件SQL注入[ CVE-2026-24993 ]

基本信息 项目详情漏洞编号CVE-2026-24993插件名称Advanced Reporting & Statistics for WooCommerce受影响版本< 4.1.3补丁版本4.1.4CVSS 3.17.5&#xff08;高危&#xff09;漏洞类型SQL注入&#xff08;SQL Injection&#xff09;利用难度低&#xff08;无需认证&am…...

编程新知 2026/3/31 3:46:46

突破平台限制：基于Go+Qt5的喜马拉雅音频下载解决方案

突破平台限制&#xff1a;基于GoQt5的喜马拉雅音频下载解决方案 【免费下载链接】xmly-downloader-qt5 喜马拉雅FM专辑下载器. 支持VIP与付费专辑. 使用GoQt5编写(Not Qt Binding). 项目地址: https://gitcode.com/gh_mirrors/xm/xmly-downloader-qt5 喜马拉雅FM作为国内…...

编程新知 2026/3/31 2:21:29