JavaWeb—CSS

news2025/7/19 11:29:18

目录

１、CSS 技术

１.１、CSS 技术介绍

１.２、CSS 语法规则：

１.３、CSS 和 HTML 的结合方式

１.３.１、第一种：

１.３.２、第二种：

１.３.３、第三种：

１.４、CSS选择器

１.４.１、标签名选择器

１.４.２、id选择器

１.４.３、class选择器（类选择器）

１.４.４、组合选择器

１.５、常用样式：

１、CSS 技术

１.１、CSS 技术介绍

CSS 是「层叠样式表单」。是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

１.２、CSS 语法规则：

 选择器：浏览器根据“选择器”决定受 CSS 样式影响的 HTML 元素（标签）。

属性 (property) 是你要改变的样式名，并且每个属性都有一个值。属性和值被冒号分开，并 由花括号包围，这样就组成了一个完整的样式声明（declaration），例如：p {color: blue}

多个声明：如果要定义不止一个声明，则需要用分号将每个声明分开。虽然最后一条声明的 最后可以不加分号(但尽量在每条声明的末尾都加上分号)

例如： p{

                color:red;

                font-size:30px;

                }

注：一般每行只描述一个属性 CSS 注释：/*注释内容*／

１．３CSS 和 HTML 的结合方式

１．３．１、第一种：

在标签的 style 属性上设置”key:value value;”，修改标签样式。

需求 1：分别定义两个 div、span 标签，分别修改每个 div 标签的样式为：边框 1个像素，实线，红色。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--需求 1：分别定义两个 div、span 标签，分别修改每个 div 标签的样式为：边框 1 个像素，实线，红色。-->
<div style="border: 1px solid red;">div 标签 1</div>
<div style="border: 1px solid red;">div 标签 2</div>
<span style="border: 1px solid red;">span 标签 1</span>
<span style="border: 1px solid red;">span 标签 2</span>
</body>
</html>

问题：这种方式的缺点？

1.如果标签多了。样式多了。代码量非常庞大。

2.可读性非常差。

3.Css 代码没什么复用性可方言

１．３．２、第二种：

在 head 标签中，使用 style 标签来定义各种自己需要的 css 样式。

格式如下： xxx {

                                Key : value value;

                        }

需求 1：分别定义两个 div、span 标签，分别修改每个 div 标签的样式为：边框 1 个像素，实线，红色

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--style 标签专门用来定义 css 样式代码-->
<style type="text/css">
/* 需求 1：分别定义两个 div、span 标签，分别修改每个 div 标签的样式为：边框 1 个像素，实线，红色。*/
div{
border: 1px solid red;
}
span{
border: 1px solid red;
}
</style>
</head>
<body>
<div>div 标签 1</div>
<div>div 标签 2</div>
<span>span 标签 1</span>
<span>span 标签 2</span>
</body>
</html>

问题：这种方式的缺点。

1.只能在同一页面内复用代码，不能在多个页面中复用 css 代码。

2.维护起来不方便，实际的项目中会有成千上万的页面，要到每个页面中去修改。工作量太大了。

１.３.３、第三种：

把 css 样式写成一个单独的 css 文件，再通过 link 标签引入即可复用。

使用 html 的<link rel="stylesheet" type="text/css" href="./styles.css" /> 标签 导入 css 样 式文件。

1、css 文件内容

div{
border: 1px solid yellow;
}
span{
border: 1px solid red;
}

html 文件代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--link 标签专门用来引入 css 样式代码-->
<link rel="stylesheet" type="text/css" href="1.css"/>
</head>
<body>
<div>div 标签 1</div>
<div>div 标签 2</div>
<span>span 标签 1</span>
<span>span 标签 2</span>
</body>
</html>

１.４、CSS选择器

１.４.１、标签名选择器

标签名选择器的格式是：

标签名{ 属性：值; }

标签名选择器，可以决定哪些标签被动的使用这个样式

需求 1：在所有 div 标签上修改字体颜色为蓝色，字体大小 30 个像素。边框为 1 像素黄色实线。 并且修改所有 span 标签的字体颜色为黄色，字体大小 20 个像素。边框为 5 像素蓝色虚线

示例代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS 选择器</title>
<style type="text/css">
div{
border: 1px solid yellow;
color: blue;
font-size: 30px;
}
span{
border: 5px dashed blue;
color: yellow;
font-size: 20px;
}
</style>
</head>
<body>
<!-- 需求 1：在所有 div 标签上修改字体颜色为蓝色，字体大小 30 个像素。边框为 1 像素黄色实线。
并且修改所有 span 标签的字体颜色为黄色，字体大小 20 个像素。边框为 5 像素蓝色虚线。
-->
<div>div 标签 1</div>
<div>div 标签 2</div>
<span>span 标签 1</span>
<span>span 标签 2</span>
</body>
</html>

１.４.２、id选择器

id 选择器的格式是：

#id 属性值{ 属性：值; }

id 选择器，可以让我们通过 id 属性选择性的去使用这个样式。

需求 1：分别定义两个 div 标签，

第一个 div 标签定义 id 为 id001 ，然后根据 id 属性定义 css 样式修改字体颜色为蓝色， 字体大小 30 个像素。边框为 1 像素黄色实线。

第二个 div 标签定义 id 为 id002 ，然后根据 id 属性定义 css 样式 修改的字体颜色为红色，字体大小 20 个像 素。边框为 5 像素蓝色点线

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ID 选择器</title>
<style type="text/css">
#id001{
color: blue;
font-size: 30px;
border: 1px yellow solid;
}
#id002{
color: red;
font-size: 20px;
border: 5px blue dotted ;
}
</style>
</head>
<body>
<!-- 需求 1：分别定义两个 div 标签，
第一个 div 标签定义 id 为 id001 ，然后根据 id 属性定义 css 样式修改字体颜色为蓝色，
字体大小 30 个像素。边框为 1 像素黄色实线。
第二个 div 标签定义 id 为 id002 ，然后根据 id 属性定义 css 样式 修改的字体颜色为红色，字体大小 20 个像素。
边框为 5 像素蓝色点线。
-->
<div id="id002">div 标签 1</div>
<div id="id001">div 标签 2</div>
</body>
</html>

１.４.３、class选择器（类选择器）

class 类型选择器的格式是：

.class 属性值{ 属性：值; }

class 类型选择器，可以通过class 属性有效的选择性地去使用这个样式。

需求 1：修改 class 属性值为 class01 的 span 或 div 标签，字体颜色为蓝色，字体大小 30 个像素。边框为 1 像素黄色实线。

需求 2：修改 class 属性值为 class02 的 div 标签，字体颜色为灰色，字体大小 26 个像素。边框为 1 像素红色实线

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>class 类型选择器</title>
<style type="text/css">
.class01{
color: blue;
font-size: 30px;
border: 1px solid yellow;
}
.class02{
color: grey;
font-size: 26px;
border: 1px solid red;
}
</style>
</head>
<body>
<!--需求 1：修改 class 属性值为 class01 的 span 或 div 标签，字体颜色为蓝色，字体大小 30 个像素。边框为 1 像素黄色实线。
需求 2：修改 class 属性值为 class02 的 div 标签，字体颜色为灰色，字体大小 26 个像素。边框为 1 像素红色实线。
-->
<div class="class02">div 标签 class01</div>
<div class="class02">div 标签</div>
<span class="class02">span 标签 class01</span>
<span>span 标签 2</span>
</body>
</html>

１.４.４、组合选择器

组合选择器的格式是：

选择器 1，选择器 2，选择器 n{ 属性：值; }

组合选择器可以让多个选择器共用同一个 css 样式代码

需求 1：修改 class="class01" 的 div 标签 和 id="id01" 所有的 span 标签，字体颜色为蓝色，字体大小 20 个像素。 边框为 1 像素黄色实线

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>class 类型选择器</title>
<style type="text/css">
.class01 , #id01{
color: blue;
font-size: 20px;
border: 1px yellow solid;
}
</style>
</head>
<body>
<!-- 需求 1：修改 class="class01" 的 div 标签 和 id="id01" 所有的 span 标签，
字体颜色为蓝色，字体大小 20 个像素。边框为 1 像素黄色实线。
-->
<div id="id01">div 标签 class01</div> <br />
<span >span 标签</span> <br />
<div>div 标签</div> <br />
<div>div 标签 id01</div> <br />
</body>
</html>

１.５、常用样式：

1、字体颜色

color：red；

颜色可以写颜色名如：black, blue, red, green 等

颜色也可以写 rgb 值和十六进制表示值：如 rgb(255,0,0)，#00F6DE，如果写十六进制值必 须加#

2、宽度

width:19px;

宽度可以写像素值：19px；

也可以写百分比值：20%；

3、高度

height:20px;

高度可以写像素值：19px；

也可以写百分比值：20%；

4、背景颜色

background-color:#0F2D4C

4、字体样式：

color：#FF0000；字体颜色红色

font-size：20px; 字体大小

5、红色 1 像素实线边框

border：1px solid red;

7、DIV 居中

margin-left: auto;

margin-right: auto;

8、文本居中：

text-align: center;

9、超连接去下划线

text-decoration: none;

10、表格细线

table {

border: 1px solid black; /*设置边框*/

border-collapse: collapse; /*将边框合并*/

}

td,th {

border: 1px solid black; /*设置边框*/

}

11、列表去除修饰

ul { list-style: none; }

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>06-css 常用样式.html</title>
<style type="text/css">
div{
color: red;
border: 1px yellow solid;
width: 300px;
height: 300px;
background-color: green;
font-size: 30px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
table{
border: 1px red solid;
border-collapse: collapse;
}
td{
border: 1px red solid;
}
a{
text-decoration: none;
}
ul{
list-style: none;
}
</style>
</head>
<body>
<ul>
<li>11111111111</li>
<li>11111111111</li>
<li>11111111111</li>
<li>11111111111</li>
<li>11111111111</li>
</ul>
<table>
<tr>
<td>1.1</td>
<td>1.2</td>
</tr>
</table>
<a href="http://www.baidu.com">百度</a>
<div>我是 div 标签</div>
</body>
</html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/395786.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Iterator 迭代器

Iterator 迭代器

迭代器 为了兼顾 各个子类的特性 实现无差别可以 访问数据 举个例子 遍历数组和遍历链表 两者代码的写法不一样 为了实现 使用相同的代码 对不同的数据容器进行遍历 就出现了 迭代器 for语句的执行和 interator的实现息息相关 目的 访问各个类型 集合 的数据&#xff…
阅读更多...
Spring源码解析-Spring 循环依赖

Spring源码解析-Spring 循环依赖

Spring源码解析简图&#xff1a; Spring 如何解决循环依赖&#xff0c;⽹上的资料很多&#xff0c;但是感觉写得好的极少&#xff0c;特别是源码解读⽅⾯&#xff0c;我就⾃⼰单独出⼀ 篇&#xff0c;这篇⽂章绝对肝&#xff01; 文章目录&#xff1a; 一. 基础知识 1.1 什么…
阅读更多...
记录--elementui源码学习之仿写一个el-button

记录--elementui源码学习之仿写一个el-button

这里给大家分享我在网上总结出来的一些知识&#xff0c;希望对大家有所帮助 本篇文章记录仿写一个el-button组件细节&#xff0c;从而有助于大家更好理解饿了么ui对应组件具体工作细节。本文是elementui源码学习仿写系列的又一篇文章&#xff0c;后续空闲了会不断更新并仿写其他…
阅读更多...
Unity iOS 无服务器做一个排行榜 GameCenter

Unity iOS 无服务器做一个排行榜 GameCenter

排行榜需求解决方案一(嗯目前只有一)UnityEngine.SocialPlatformsiOS GameCenterAppStoreConnect配置Unity 调用(如果使用GameCenter系统的面板&#xff0c;看到这里就可以了&#xff09;坑(需要获取数据做自定义面板的看这里)iOS代码Unity 代码吐槽需求 需求&#xff1a;接入…
阅读更多...
某某游戏加密坐标分析

某某游戏加密坐标分析

这个游戏里面坐标有很多种存放方式。 例如明文存放的DOUBLE&#xff0c;加密的各种类型。 我们不知道哪一个对于我们是有用的,哪一些只是辅助UI或则掉到LUA虚拟机坑里的数据。 那就根据作用大小来决定,一一尝试吧。 最好去找修改之后有效果的地址&#xff0c;当然只是本地&…
阅读更多...
记一次影视cms黑盒CSRF-RCE

记一次影视cms黑盒CSRF-RCE

俗话说得好&#xff0c;思路才是最重要&#xff0c;本文章主要提供思路&#xff0c;各位师傅在挖掘漏洞的时候说不定也能碰到类似的点1.思路&#xff1a;当我们在找可以构建csrf的时候&#xff0c;多找找可以提交上传图片的&#xff0c;部分是可以自由构建url如图&#xff1a;漏…
阅读更多...
Python数据分析案例20——我国家庭资产影响因素分析

Python数据分析案例20——我国家庭资产影响因素分析

本次案例较为简单&#xff0c;符合人文社科、经济学管理学等专业本科生适用。 本文的数据来源于中国家庭金融调查&#xff08;China Household Finance Survey&#xff0c;CHFS&#xff09;是西南财经大学中国家庭金融调查与研究中心&#xff08;下称中心&#xff09;在全国范围…
阅读更多...
后端快速上手Vue+axios

后端快速上手Vue+axios

文章目录前言vue基础1.el:挂载点2.data:数据对象vue常见指令vue生命周期axiosvueaxios前言 面向后端人员&#xff0c;旨在快速熟悉Vue框架&#xff0c;更详细的以后再总结 &#xff08;1&#xff09;Vue的特性&#xff1a; JavaScript框架简化Dom操作响应式数据驱动 &#…
阅读更多...
JWT详细介绍使用

JWT详细介绍使用

一、JWT介绍 JWT是JSON Web Token的缩写&#xff0c;即JSON Web令牌&#xff0c;是一种自包含令牌。 是为了在网络应用环境间传递声明而执行的一种基于JSON的开放标准。 JWT的声明一般被用来在身份提供者和服务提供者间传递被认证的用户身份信息&#xff0c;以便于从资源服务…
阅读更多...
【经验分享】电路板上电就挂？新手工程师该怎么检查PCB？

【经验分享】电路板上电就挂？新手工程师该怎么检查PCB？

小伙伴们有没有经历过辛辛苦苦&#xff0c;加班加点设计的PCB&#xff0c;终于搞定下单制板。接下来焦急并且忐忑地等待PCB板到货&#xff0c;焊接&#xff0c;验证&#xff0c;一上电&#xff0c;结果直接挂了... 连忙赶紧排查&#xff0c;找问题。最终发现&#xff0c;是打过…
阅读更多...
学习笔记：基于SpringBoot的牛客网社区项目实现（二）之Spring MVC入门

学习笔记：基于SpringBoot的牛客网社区项目实现（二）之Spring MVC入门

1.1 函数的返回值为空&#xff0c;因为可以使用response对象向浏览器返回数据。声明了request对象和response对象&#xff0c;dispatcherservlet自动将这两个对象传入 RequestMapping("/http")public void http(HttpServletRequest request, HttpServletResponse re…
阅读更多...
ReentranLock（可重入锁）

ReentranLock（可重入锁）

一、ReentranLock ReentranLock属于JUC并发工具包下的类&#xff0c;相当于 synchronized具备如下特点 ● 可中断 ● 可以设置超时时间 ● 可以设置为公平锁&#xff08;防止线程出现饥饿的情况&#xff09; ● 支持多个条件变量 与 synchronized一样&#xff0c;都支持可重…
阅读更多...
浅析 SplitChunksPlugin 及代码分割的意义

浅析 SplitChunksPlugin 及代码分割的意义

本文作者为 360 奇舞团前端开发工程师起因有同事分享webpack的代码分割&#xff0c;其中提到了SplitChunksPlugin&#xff0c;对于文档上的描述大家有着不一样的理解&#xff0c;所以打算探究一下。Q&#xff1a;什么是 SplitChunksPlugin&#xff1f;SplitChunksPlugin 是用来…
阅读更多...
Python所有方向的入门和进阶路线，20年老师傅告诉你方法

Python所有方向的入门和进阶路线，20年老师傅告诉你方法

干了20多年程序员&#xff0c;对于Python研究一直没停过&#xff0c;这几天把我自己对Python的认知和经验&#xff0c;再结合很多招聘网站上的技术要求&#xff0c;整理出了Python所有方向的学习路线图&#xff0c;基本上各个方向应该学什么&#xff0c;都在上面了&#xff0c;…
阅读更多...
macOS 13.3 Beta 3 （22E5236f）发布

macOS 13.3 Beta 3 （22E5236f）发布

系统介绍3 月 8 日消息&#xff0c;苹果今日向 Mac 电脑用户推送了 macOS 13.3 开发者预览版 Beta 3 更新&#xff08;内部版本号&#xff1a;22E5236f&#xff09;&#xff0c;本次更新距离上次发布隔了 7 天。macOS Ventura 带来了台前调度、连续互通相机、FaceTime 通话接力…
阅读更多...
文件预览kkFileView安装及使用

文件预览kkFileView安装及使用

1 前言网页端一般会遇到各种文件&#xff0c;比如&#xff1a;txt、doc、docx、pdf、xml、xls、xlsx、ppt、pptx、zip、png、jpg等等。有时候我们不想要把文件下载下来&#xff0c;而是想在线打开文件预览 &#xff0c;这个时候如果每一种格式都需要我们去写代码造轮子去实现预…
阅读更多...
k8s pod调度总结

k8s pod调度总结

在Kubernetes平台上&#xff0c;我们很少会直接创建一个Pod&#xff0c;在大多数情况下会通过控制器完成对一组Pod副本的创建、调度 及全生命周期的自动控制任务&#xff0c;如&#xff1a;RC、Deployment、DaemonSet、Job 等。本文主要举例常见的Pod调度。1全自动调度功能&…
阅读更多...
第二章：基础语法

第二章：基础语法

第二章&#xff1a;基础语法 2.1&#xff1a;关键字和保留字 关键字 定义&#xff1a;被Java语言赋予了特殊含义&#xff0c;用做专门用途的字符串(单词) 特点&#xff1a;关键字中所有字母都为小写 分类&#xff1a; 用于定义数据类型的关键字 class、interface、enum、byt…
阅读更多...
算法设计与分析——递归与分治策略——全排列Perm函数

算法设计与分析——递归与分治策略——全排列Perm函数

删除线格式 [toc] 问题描述 现给出m个不同的数字&#xff0c;在n个位置上&#xff0c;对齐进行全排列。使用编程实现数学中全排列输出最终计算结果并将所有的排列打印出来。 思路分析 常规的递归方式进行解决即可&#xff0c;递归的终点是根据题目要求进行实现。共有两个参…
阅读更多...
第一次运行vue遇到的问题

第一次运行vue遇到的问题

1.vue无法识别https://blog.csdn.net/weixin_61634408/article/details/1265897982.yarn serve问题https://blog.csdn.net/fangxuan1509/article/details/104711690/3.关闭控制台报错检查&#xff08;每次vue-rounter必须用&#xff09;vue.config,js,的module.exports 中添加l…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023