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

Java Web(三）--CSS

news 2026/2/7 23:05:55

介绍

为什么需要：

  • 在没有 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

Qt/C++开发监控GB28181系统/取流协议/同时支持udp/tcp被动/tcp主动

一、前言说明 在2011版本的gb28181协议中&#xff0c;拉取视频流只要求udp方式&#xff0c;从2016开始要求新增支持tcp被动和tcp主动两种方式&#xff0c;udp理论上会丢包的&#xff0c;所以实际使用过程可能会出现画面花屏的情况&#xff0c;而tcp肯定不丢包&#xff0c;起码…...

编程新知 2026/2/5 4:23:49

23-Oracle 23 ai 区块链表（Blockchain Table）

小伙伴有没有在金融强合规的领域中遇见&#xff0c;必须要保持数据不可变&#xff0c;管理员都无法修改和留痕的要求。比如医疗的电子病历中&#xff0c;影像检查检验结果不可篡改行的&#xff0c;药品追溯过程中数据只可插入无法删除的特性需求&#xff1b;登录日志、修改日志…...

编程新知 2026/1/27 3:40:30

基于uniapp+WebSocket实现聊天对话、消息监听、消息推送、聊天室等功能，多端兼容

基于 ​UniApp + WebSocket​实现多端兼容的实时通讯系统，涵盖WebSocket连接建立、消息收发机制、多端兼容性配置、消息实时监听等功能，适配​微信小程序、H5、Android、iOS等终端 目录 技术选型分析WebSocket协议优势UniApp跨平台特性WebSocket 基础实现连接管理消息收发连接…...

编程新知 2026/1/22 16:15:42

《用户共鸣指数（E）驱动品牌大模型种草：如何抢占大模型搜索结果情感高地》

在注意力分散、内容高度同质化的时代&#xff0c;情感连接已成为品牌破圈的关键通道。我们在服务大量品牌客户的过程中发现&#xff0c;消费者对内容的“有感”程度&#xff0c;正日益成为影响品牌传播效率与转化率的核心变量。在生成式AI驱动的内容生成与推荐环境中&#xff0…...

编程新知 2026/2/2 1:48:09

屋顶变身“发电站” ，中天合创屋面分布式光伏发电项目顺利并网！

5月28日&#xff0c;中天合创屋面分布式光伏发电项目顺利并网发电&#xff0c;该项目位于内蒙古自治区鄂尔多斯市乌审旗&#xff0c;项目利用中天合创聚乙烯、聚丙烯仓库屋面作为场地建设光伏电站&#xff0c;总装机容量为9.96MWp。 项目投运后&#xff0c;每年可节约标煤3670…...

编程新知 2026/1/30 2:45:51

spring：实例工厂方法获取bean

spring处理使用静态工厂方法获取bean实例&#xff0c;也可以通过实例工厂方法获取bean实例。 实例工厂方法步骤如下&#xff1a; 定义实例工厂类&#xff08;Java代码&#xff09;&#xff0c;定义实例工厂&#xff08;xml&#xff09;&#xff0c;定义调用实例工厂&#xff…...

编程新知 2025/11/25 22:46:30

全志A40i android7.1 调试信息打印串口由uart0改为uart3

一&#xff0c;概述 1. 目的 将调试信息打印串口由uart0改为uart3。 2. 版本信息 Uboot版本&#xff1a;2014.07&#xff1b; Kernel版本&#xff1a;Linux-3.10&#xff1b; 二&#xff0c;Uboot 1. sys_config.fex改动 使能uart3(TX:PH00 RX:PH01)&#xff0c;并让boo…...

编程新知 2026/2/5 6:28:09

uniapp 小程序 学习（一）

利用Hbuilder 创建项目 运行到内置浏览器看效果 下载微信小程序 安装到Hbuilder 下载地址 &#xff1a;开发者工具默认安装 设置服务端口号 在Hbuilder中设置微信小程序 配置 找到运行设置&#xff0c;将微信开发者工具放入到Hbuilder中&#xff0c; 打开后出现 如下 bug 解…...

编程新知 2026/2/5 4:29:00

篇章二 论坛系统——系统设计

目录 2.系统设计 2.1 技术选型 2.2 设计数据库结构 2.2.1 数据库实体 1. 数据库设计 1.1 数据库名: forum db 1.2 表的设计 1.3 编写SQL 2.系统设计 2.1 技术选型 2.2 设计数据库结构 2.2.1 数据库实体 通过需求分析获得概念类并结合业务实现过程中的技术需要&#x…...

编程新知 2026/2/5 5:58:30

【若依】框架项目部署笔记

参考【SpringBoot】【Vue】项目部署_no main manifest attribute, in springboot-0.0.1-sn-CSDN博客 多一个redis安装 准备工作&#xff1a; 压缩包下载&#xff1a;http://download.redis.io/releases 1. 上传压缩包&#xff0c;并进入压缩包所在目录&#xff0c;解压到目标…...

编程新知 2026/2/4 19:11:52