JavaWeb——CSS的使用

CSS 层叠样式表(英文全称:(cascading stle sheets)能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力,简单来说,CSS用来美化页面

一、CSS的引入方式:

1.行内式:通过元素开始标签的style属性引入

语法:style = "样式名:样式值; 样式名:样式值;......"

缺点:

代码复用度低,不利于维护

CSS样式和HTML结构代码交织在一起,影响阅读和文件大小,同时影响性能

<inputtype="button"value="按钮"style="display: block;width: 60px;height: 40px;background-color:rgb(148,235,108);color: white;border: 3px solid green;font-size:22px;font-family:'隶书';line-height: 30px;border-radius:5px;
"/>

2.内嵌式:通过head标签中的style标签定义本页面的公共样式。需要使用选择器确定样式作用的元素。可以提高代码的复用度

<head><style>input{display: block;width: 60px;height: 40px;background-color:rgb(148,235,108);color: white;border: 3px solid green;font-size:22px;font-family:'隶书';line-height: 30px;border-radius:5px;}</style>
</head>

3.外部样式表:将css代码单独放入到一个.css文件中,这时哪个html文件需要使用这些代码就在head标签中通过link标签引入即可。

input{display: block;width: 60px;height: 40px;background-color:rgb(148,235,108);color: white;border: 3px solid green;font-size:22px;font-family:'隶书';line-height: 30px;border-radius:5px;}
<head><link href = "btn.css" ref = "stylesheet">
</head>

二、CSS选择器:

1.元素选择器:

(1)根据标签名确定样式的作用范围

(2)语法为:元素名{具体的样式内容}

(3)样式只能作用到同名标签上,其他标签不可用

(4)相同的标签未必需要相同的样式,会造成样式的作用范围太大

<head><style>input{display: block;width: 60px;height: 40px;background-color:rgb(148,235,108);color: white;border: 3px solid green;font-size:22px;font-family:'隶书';line-height: 30px;border-radius:5px;}</style>
</head>

2.id选择器:

(1)根据元素id属性的值确定样式的作用范围

(2)语法为:#id值{具体的样式内容}

(3)id属性的值在页面上具有唯一性,所有id选择器也只能影响一个元素的样式

(4)因为id属性值不够灵活,所以使用该选择器的情况较少

<head><meta charset="UTF-8"><style>#btn1{display: block;width:80px;height: 40px;background-color:rgb(140,235,100);color: white;border:3px solid green;font-size:22px;font-family:'隶书';line-height:30px;border-radius:5px;}</style>
</head>
<body><input id="btn1" type="button" value="按钮1"/><input id="btn2" type="button" value="按钮2"/><input id="btn3" type="button" value="按钮3"/>
</body>

3.class选择器:

(1)根据元素的class属性值确定样式的作用元素

(2)元素的的class属性值可以重复,而且一个元素的class属性可以有多个值

(3)语法:.class属性值{}

<head><meta charset="UTF-8"><style>.shapeClass{display: block;width:88px;height: 40px;border-radius:5px;}.colorClass{background-color:rgb(140,230,108);color:white;border:3px solid green;}.fontClass{font-size:22px;font-family:'隶书';line-height:30px;}</style>
</head>
<body><input id="btn1" class="shapeClass colorClass fontClass" type="button" value="按钮1"/>
</body>

三、CSS浮动:

CSS的Float(浮动)使元素脱离文档流,按照指定的方向(左或右发生移动),直到它的外边缘碰到包含框或另一个浮动框的边框为止。浮动设计的初衷为了解决文字环绕图片问题,浮动后一定不会将文字挡住,这是设计初衷。文档流是是文档中可显示对象在排列时所占用的位置/空间,而脱离文档流就是在页面中不占位置了。

通过设置块元素的float属性,可以使其保存块元素的特征的同时能够进行浮动,float属性的可取值为left,right以及none。

描述
left元素向左浮动
right元素向右浮动
none默认值,元素不浮动,并会显示在其文本中出现的位置

四、CSS定位:

position属性指定了元素的定位类型,这个属性定义建立元素布局所用的定位机制。任何元素都可以定位,不过绝对或固定元素会生成一个块级框,而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。元素可以使用的顶部,底部,左侧和右侧属性定位。然而这些属性无法工作,除非是先设定position属性。他们也有不同的工作方式,这取决于定位方法。

描述
absolute

生成绝对定位的元素,相对于static定位以外的第一个父元素进行定位。

定位后元素会让出原来的位置,其他元素可以占用

元素的位置通过"left”,"top","right”以及"bottom"属性进行规定。

fixed

生成绝对定位的元素,相对于浏览器窗口进行定位。不会随着页面的上下移动而移动。

元素定位后会让出原来的位置,其他元素可以占用

元素的位置通过"left”,"top","right”以及"bottom"属性进行规定

relative

生成相对定位的元素,相对于其原本位置进行定位。

定位后保留原先的占位,其他元素不会移动到该位置
"left:20"会向元素的 LEFT 位置添加 20 像素,

static

默认值,没有定位,元素出现在正常的流中。

元素出现在该出现的位置。块级元素垂直排列,行内元素水平排列

(忽略"left”,"top","right”以及"bottom"或者z-index声明)

五、CSS盒子模型

所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距(margin),边框(border),填充(padding)和实际内容(content)。

(1)Margin(外边距):清除边框外的区域,外边距是透明的;

(2)Boarder(边框):围绕在内边距和内容外的边框;

(3)Padding(内边距):清除内容周围的区域,内边距是透明的;

(4)Content(内容):盒子的内容,显示文本和图像;

<head><meta charset="UTF-8"><style>.outerDiv {width: 800px;height: 300px;border: 1px solid green;background-color: rgb(230, 224, 224);margin: 0px auto;}.innerDiv{width: 100px;height: 100px;border: 1px solid blue;float: left;/* margin-top: 10px;margin-right: 20px;margin-bottom: 30px;margin-left: 40px; */margin: 10px 20px 30px 40px;}.d1{background-color: greenyellow;/* padding-top: 10px;padding-right: 20px;padding-bottom: 30px;padding-left: 40px; */padding: 10px 20px 30px 40px;}.d2{background-color: rgb(79, 230, 124);}.d3{background-color: rgb(26, 165, 208);}</style>
</head><body><div class="outerDiv"><div class="innerDiv d1">框1</div><div class="innerDiv d2">框2</div><div class="innerDiv d3">框3</div></div>
</body>

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

未授权访问漏洞系列

环境 1.此漏洞需要靶场vulhub&#xff0c;可自行前往gethub下载 2.需要虚拟机或云服务器等linux系统&#xff0c;并在此系统安装docker和docker-compose提供环境支持 3.运行docker-compose指令为docker-compose up -d即可运行当前目录下的文件 Redis未授权访问漏洞 一、进…

用于相位解包的卷积和空间四向 LSTM 联合网络

原文&#xff1a;A Joint Convolutional and Spatial Quad-Directional LSTM Network for Phase Unwrapping 作者&#xff1a;Malsha V. Perera 和 Ashwin De Silva 摘要&#xff1a; 相位展开是一个经典的病态问题&#xff0c;其目标是从包裹相位中恢复真实的相位。本文&…

RAG前沿技术/解决方案梳理

RAG前沿技术/解决方案梳理 BenchmarkRetrievalAdaptive-RAGDR-RAGRichRAGGenRT Critique/ReasoningSelf-RAGCorrective RAGSpeculative RAGPlanRAGSelf-ReasoningReSP MemorySelfmemHippoRAG Query RewriteRaFe SummaryRefiner 个人理解 对当前RAG的学术研究&#xff08;或者好…

SAP 接口PO(PI,XI)在ECC端日志记录及显示

在接口的处理中通常会需要记录日志&#xff0c;而如果是与PO(PI,XI)做的接口的话&#xff0c;可以使用事务码SXI_MONITOR – XI&#xff1a;消息监控&#xff0c;来查询日志&#xff0c;但对于一些有加密&#xff0c;或者在业务接口功能上想直接查询报文日志时&#xff0c;会在…

使用 MinIO、Langchain 和 Ray Data 构建分布式嵌入式子系统

嵌入子系统是实现检索增强生成所需的四个子系统之一。它将您的自定义语料库转换为可以搜索语义含义的向量数据库。其他子系统是用于创建自定义语料库的数据管道&#xff0c;用于查询向量数据库以向用户查询添加更多上下文的检索器&#xff0c;最后是托管大型语言模型 &#xff…

ES6中的Promise、async、await,超详细讲解!

Promise是es6引入的异步编程新解决方案&#xff0c;Promise实例和原型上有reject、resolve、all、then、catch、finally等多个方法&#xff0c;语法上promise就是一个构造函数&#xff0c;用来封装异步操作并可以获取其成功或失败的结果&#xff0c;本篇文章主要介绍了ES6中的P…

(免费领源码)java#SSM#MYSQL私家车位共享APP 51842-计算机毕业设计项目选题推荐

目 录 摘要 1 绪论 1.1 课题的研究背景 1.2研究内容与研究目标 1.3ssm框架 1.4论文结构与章节安排 2 2 私家车位共享APP系统分析 2.1 可行性分析 2.2 系统流程分析 2.2.1 数据增加流程 2.2.2 数据修改流程 2.2.3数据删除流程 2.3 系统功能分析 2.3.1功能性分析 2…

原型图绘制技巧

针对于 Axure RP绘图软件。 1、拉辅助线 目的&#xff0c;确定画布大小尺寸从上面和左面的刻度尺上&#xff0c;点击鼠标&#xff0c;拖动&#xff0c;就可以拉出一条线。 2、画布底模设为组件 右键转换为母版&#xff0c;方便后续其他页面使用 3、按钮 按钮字体不要太大&am…

【嵌入式】STM3212864点阵屏使用SimpleGUI单色屏接口库——(2)精简字库

一 开源库简介与移植 最近一个项目需要用12864屏幕呈现一组较为复杂的菜单界面&#xff0c;本着不重复造轮子的原则找到了SimpleGUI开源库。 开源地址&#xff1a;SimpleGUI: 一个面向单色显示屏的开源GUI接口库。 SimpleGUI是一款针对单色显示屏设计的接口库。相比于传统的GUI…

SpringBoot集成阿里百炼大模型(初始demo) 原子的学习日记Day01

文章目录 概要下一章SpringBoot集成阿里百炼大模型&#xff08;多轮对话&#xff09; 原子的学习日记Day02 整体架构流程技术名词解释集成步骤1&#xff0c;选择大模型以及获取自己的api-key&#xff08;前面还有一步开通服务就没有展示啦&#xff01;&#xff09;2&#xff0c…

CSS学习 02 利用鼠标悬停制造按钮边框的渐变方向变化

效果 页面背景为深灰色&#xff0c;使用Karla字体。容器内的按钮居中显示&#xff0c;按钮有一个彩色渐变的边框。按钮的背景为黑色&#xff0c;文字为浅灰色。当鼠标悬停在按钮边框上时&#xff0c;边框的渐变方向变化&#xff0c;按钮文字变为白色&#xff0c;并且按钮内边距…

简单猜谜小程序开发

了解小程序的结构 项目根目录 包含小程序的配置文件和其他资源。 页面目录 每个页面都有独立的目录&#xff0c;通常包含 .json、.wxml、.wxss、.js 文件&#xff1a; .json&#xff1a;页面配置文件&#xff0c;用于配置页面的窗口表现等。 .wxml&#xff1a;页面的布局文件…

JS等待所有方法执行完成在执行下一个方法,promise All

在工作中会遇到这样一个场景&#xff0c;前端需要拿到不同接口返回的结果在执行某个逻辑&#xff0c;当使用链式那样的方式去请求&#xff0c;等一个接口响应完在请求下一个接口&#xff0c;这种方法就会导致请求时间特别长。这个时候就可以使用promise all&#xff0c;同时请求…

Python酷库之旅-第三方库Pandas(067)

目录 一、用法精讲 266、pandas.Series.dt.second属性 266-1、语法 266-2、参数 266-3、功能 266-4、返回值 266-5、说明 266-6、用法 266-6-1、数据准备 266-6-2、代码示例 266-6-3、结果输出 267、pandas.Series.dt.microsecond属性 267-1、语法 267-2、参数 …

IDEA如何去掉编辑框右侧的竖线

打开 IntelliJ Idea 软件 依次找到 File—>Settings—>Editor—>General—>Appearance 去掉勾选 Show hard wrap and visual guides (configured in Code Style options)

PHP海报在线制作系统小程序源码

创意无限&#xff0c;设计零门槛&#xff01; &#x1f3a8; 一键解锁设计大师潜能 你还在为找不到合适的设计师制作海报而烦恼吗&#xff1f;告别繁琐沟通&#xff0c;拥抱“海报在线制作系统”&#xff01;这个神奇的平台&#xff0c;让你无需任何设计基础&#xff0c;也能…

后台弱口令部署war包 漏洞复现

1.搭建好环境打开页面---点击右方的manager app 默认账号密码为tomcat 2.登录完成后滑到下面点击浏览 3.将你生成的jsp木马压缩为zip格式并将后缀名改为war 4.提交此war压缩包然后在目录中点击 5.点击完后在后面加lkj.jsp&#xff0c;访问成功证明注入成功 5.打开哥斯拉连接…

js获取近30天近60天时间区间

1.从今天往前推30天 handleSetTime(value) {//value传入自定义时间 30/60/90//因为这里要加上今天时间,所以开始时间-1const value1 value - 1const date new Date()const startTimestamp date.getTime() - value1 * (24 * 60 * 60 * 1000 * 1)const sDate new Date(startTi…

Unity实现屏幕黑边--游戏画面和UI异形屏处理(安全区渲染)

在手机上&#xff0c;如果想以黑边形式显示游戏画面&#xff0c;比如显示区域避开异形屏、水滴屏那一行。有很多种思路&#xff0c;最后觉得下面这种方法比较简单合适&#xff0c;下面分享一下。 方法&#xff1a;需要分别处理&#xff0c;游戏画面黑边、UI黑边&#xff1a; …

帮助网站提升用户参与度的5个WordPress插件

仅靠编写精彩的内容、设计精美的图像和创建简化的客户旅程不足以提高网站参与度。您需要让用户在首次访问后继续与您的网站互动并成为回访者&#xff0c;才能真正吸引您所追求的兴趣。 幸运的是&#xff0c;对于 WordPress 用户来说&#xff0c;有数百种工具可用于提高用户参与…