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

Java Web(三）--CSS

news 文章来源：https://blog.csdn.net/hahaha2221/article/details/135777868 2025/5/3 4:49:53

介绍

为什么需要：

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

Vue3基础：挂载事例方法.mount()是什么？根组件模板又是什么？

.mount() <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Vue 3 演示</title> </head>…...

编程日记 2024/1/24 20:31:18

Unity 面试篇|（七）Unity渲染与Shader篇 【全面总结 | 持续更新】

目录 1.问一个Terrain&#xff0c;分别贴3张&#xff0c;4张&#xff0c;5张地表贴图&#xff0c;渲染速度有什么区别&#xff1f;为什么&#xff1f;2.什么是LightMap&#xff1f;3.MipMap是什么&#xff0c;作用&#xff1f;4.请问alpha test在何时使用&#xff1f;能达到什么…...

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

记录一些多维数组的方法

文章目录 前言一、获取多维数组的数据二、多维数组自带的方法总结 前言 验证过程中&#xff0c;我们经常会用到多维数组存储数据&#xff0c;本文主要记录一下&#xff0c;如何去获取我们需要的数据&#xff0c;以及多维数组自带的一些方法。 一、获取多维数组的数据 获取多维…...

编程日记 2024/1/24 20:28:11

Linux：gcc的相关知识

目录 gcc的翻译&#xff08;编译&#xff09;过程&#xff1a; 预处理&#xff1a; 条件编译&#xff1a; 编译&#xff1a; 汇编&链接&#xff1a; 什么是链接&#xff1f; 安装静态库&#xff1a; 静态库的使用&#xff1a; 动态静态的对比&#xff1a; 优缺对比…...

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

Linux的奇妙冒险———vim的用法和本地配置

vim的用法和本地配置 一.vim的组成和功能。1.什么是vim2.vim的多种模式 二.文本编辑&#xff08;普通模式&#xff09;的快捷使用1.快速复制&#xff0c;粘贴&#xff0c;剪切。2.撤销&#xff0c;返回上一步操作3.光标的控制4.文本快捷变换5.批量化操作和注释 三.底行模式四.v…...

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

微信小程序底部按钮适配iPhoneX以上，显示遮挡问题

只需要在给底部按钮加个样式 /* 底部导航栏容器 */ .button-box {/* 使用 safe-area-inset-bottom 属性适配 iPhone X 及以上型号设备 */padding-bottom: constant(safe-area-inset-bottom);padding-bottom: env(safe-area-inset-bottom);/* 其他样式属性 */ }iPhone6/7/8效果 …...

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

Qt容器QMap（映射）

插入数据 QMap<QString,QString> infoMap; //第一个是key 第二个是valueinfoMap.insert("王祖蓝","163cm");infoMap.insert("Anglebaby","168cm");infoMap["易烊千玺"] "173cm(成长中)";infoMap["姚…...

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

AI时代的创新工具：如何利用AI生成独具个性的XMind思维导图？

哈喽&#xff0c;大家好&#xff0c;我是木头左&#xff0c;物联网搬砖工一名&#xff0c;致力于为大家淘出更多好用的AI工具&#xff01; 背景 随着互联网的发展&#xff0c;越来越多的人开始使用Markdown来编写文档。Markdown是一种轻量级的标记语言&#xff0c;它允许人们使…...

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

【每日一题】最长交替子数组

文章目录 Tag题目来源解题思路方法一&#xff1a;双层循环方法二&#xff1a;单层循环 写在最后 Tag 【双层循环】【单层循环】【数组】【2024-01-23】 题目来源 2765. 最长交替子数组 解题思路 两个方法&#xff0c;一个是双层循环&#xff0c;一个是单层循环。 方法一&am…...

编程日记 2024/1/24 20:16:39

gin数据解析和绑定

1. Json 数据解析和绑定 客户端传参&#xff0c;后端接收并解析到结构体 package mainimport ("github.com/gin-gonic/gin""net/http" )// 定义接收数据的结构体 type Login struct {// binding:"required"修饰的字段&#xff0c;若接收为空值…...

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