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

【Java Web】秒懂CSS样式!

目录

一、CSS的使用

二、CSS引用方式

三、CSS三大选择器

四、CSS浮动

五、CSS定位

六、CSS盒子模型


一、CSS的使用

css层叠样式表能够对网页中标签元素位置的排版进行像素级别的精确控制,支持几乎所有的字体和字号样式,拥有对网页对象和模型的样式编辑的能力,简单的说就是用来美化网页的。

二、CSS引用方式

  • 行内式:通过标签的style属性引用样式

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

        缺点:1.css样式代码的复用度低,不利于维护。2、css样式代码和html结构代码交织在一起,影响阅读、文件大小以及性能。

  • 内嵌式:通过在head双标签内使用style双标签定义本页面的公共样式,此种方式需要使用选择器来指定css样式作用在本文件的哪些标签元素上。

        缺点:内嵌式定义的样式只能被本网页文件中的标签元素使用,而不能被其它html网页文件中的标签元素使用,因此内嵌式的样式复用还不够很好。

  • 外部样式表:将css代码单独放到一个“.css"文件中,哪些html网页文件需要这些样式就在html网页文件的head标签中通过link单标签来引用。

        引用语法:<link href="被引用文件路径" rel="被引入的文件类型,要是css样式就填stylesheet" />

注意:用内嵌式或外部样式表的方式来引用css样式需要使用选择器来指定样式作用的标签元素有哪些。 

三、CSS三大选择器

选择器就是用来指定定义好的css样式对网页文件中哪些标签元素是生效的。

  • 元素选择器:根据标签名来指定css样式作用的标签元素有哪些。

                语法:标签名{}

缺点:某些同名的标签元素不想使用某些样式但无法设置,不同名的标签元素想使用css样式但无法实现。

           

  • id选择器:根据标签的id属性值来指定css样式作用的标签元素有哪些。

                语法:#id值{}

           

  • class选择器:根据标签元素的class属性值来确定css样式作用的标签元素有哪些。

一个标签元素的class属性可以有多个值即此标签享有多个css样式。

                语法:.class属性值{}

四、CSS浮动

css的浮动就是使元素脱离文档流,使其按照指定的方向(左或右)移动,直到它的外边缘碰到包含它的父边框或其它的浮动元素为止,总之就是它让出的位置空间会被其它的元素所侵占这就是浮动。

说明:

1、浮动后的元素所占用位置上的文字会被挤到其它地方去

2、通过浮动可以使不在同一行的块元素改变为在同一行上并且对其大小的设置不会失效。

例如:

五、CSS定位

通过css的position样式属性可以设置标签元素在页面中的位置即用来规划设计页面元素的布局。

position样式用来设置元素的位置属性

static: 元素原本在文档流中的位置,行内元素水平方向从左向右,块元素垂直方向从上往下,标签元素默认就是此属性值。

absolute: 绝对定位,根据页面来进行定位,会脱离文档流。

relative: 相对定位,相对该元素原本的位置来定位,不会脱离文档流。

fixed: 相对定位,相对浏览器页面窗口定位,会脱离文档流(如广告)。

注意:top、bottom、left、right样式必须在标签元素设置了position样式除static的值后才能生效即需要与position配合使用。

六、CSS盒子模型

所有的html元素都可以看做为是个盒子,标签元素里面可以包含其它的标签,一个盒子包括:外边距(margin)、边框(border)、内边距(padding)和盒子实际可以包含的内容(content)例如:div元素。在css中“盒子模型”这个术语是用来设计和布局页面时使用的。

@声明:“山月润无声”博主知识水平有限,以上文章如有不妥之处,欢迎广大IT爱好者指正,小弟定当虚心受教!

相关文章:

【Java Web】秒懂CSS样式!

目录 一、CSS的使用 二、CSS引用方式 三、CSS三大选择器 四、CSS浮动 五、CSS定位 六、CSS盒子模型 一、CSS的使用 css层叠样式表能够对网页中标签元素位置的排版进行像素级别的精确控制&#xff0c;支持几乎所有的字体和字号样式&#xff0c;拥有对网页对象和模型的样式…...

Go微服务: 基于net/rpc/jsonrpc模块实现微服务跨语言调用

概述 Golang 提供 net/rpc/jsonrpc 库来实现rpc方法采用 json 方式进行数据编解码&#xff0c;支持跨语言调用 这里实现跨语言示例 1 &#xff09;go 服务端 package main import ( "log" "net" "net/rpc" "net/rpc/jsonrpc" )…...

Guitar Pro 8.1中文版永久许可证激活2024最新24位注册激活码生成器

Guitar Pro是一款非常受欢迎的音乐制作软件&#xff0c;它可以帮助用户创建和编辑各种音乐曲谱。从其诞生以来就送专门为了编写吉他谱而研发迭代的。 尽管这款产品可能已经成为全球最受欢迎的吉他打谱软件&#xff0c;在编写吉他六线谱和乐队总谱中始终处于行业领先地位&#…...

自然语言处理(NLP)练习题

问题&#xff1a;什么是自然语言处理&#xff08;NLP&#xff09;&#xff1f; 答案&#xff1a;自然语言处理&#xff08;NLP&#xff09;是一种人工智能技术&#xff0c;旨在让计算机理解和处理人类语言。NLP涉及语言学、计算机科学和人工智能等多个领域&#xff0c;旨在开发…...

P2386 放苹果

题目传送门 题目描述 把 m 个同样的苹果放在n 个同样的盘子里&#xff0c;允许有的盘子空着不放&#xff0c;问共有多少种不同的分法。&#xff08;5,1,15,1,1 和 1,1,51,1,5 是同一种方法&#xff09; 输入格式 第一行是测试数据的数目 t&#xff0c;以下每行均包括二个整…...

TI IWR6843ISK ROS驱动程序搭建

1、设备准备 1.1 硬件设备 1&#xff09;TI IWR 6843 ISK 1块 2&#xff09;Micro USB 数据线 1条 1.2 系统环境 1&#xff09;VMware Workstation 15 Player 虚拟机 2&#xff09;Ubuntu18.04 并安装有 ROS1 系统 如若没有安装 ROS 系统&#xff0c;可通过如下指令进行…...

【Godot4自学手册】第二十节增加游戏的打击感,镜头震颤、冻结帧和死亡特效

这节我主要学习增加游戏的打击感。我们通过镜头震颤、冻结帧、增加攻击点特效&#xff0c;增加死亡。开始了。 一、添加攻击点特效 增加攻击点特效就是&#xff0c;在攻击敌人时&#xff0c;会在敌人受击点显示一个受击动画。 1.添加动画。 第一步先做个受击点动画。切换到…...

[论文笔记] Open-Sora 1、sora复现方案概览

GitHub - hpcaitech/Open-Sora: Unofficial implementation of OpenAIs Sora Open-Sora已涵盖: 提供完整的Sora复现架构方案,包含从数据处理到训练推理全流程。 支持动态分辨率,训练时可直接训练任意分辨率的视频,无需进行缩放。 支持多种模型结构。由于Sora实际模型结构未…...

持续更新 | 与您分享 Flutter 2024 年路线图

作者 / Michael Thomsen Flutter 是一个拥有繁荣社区的开源项目&#xff0c;我们致力于确保我们的计划公开透明&#xff0c;并将毫无隐瞒地分享从问题到设计规范的所有内容。我们了解到许多开发者对 Flutter 的功能路线图很感兴趣。我们往往会在一年中不断更改并调整这些计划&a…...

Go语言数据结构(二)堆/优先队列

文章目录 1. container中定义的heap2. heap的使用示例3. 刷lc应用堆的示例 更多内容以及其他Go常用数据结构的实现在这里&#xff0c;感谢Star&#xff1a;https://github.com/acezsq/Data_Structure_Golang 1. container中定义的heap 在golang中的"container/heap"…...

NERF论文笔记(1/2)

NeRF:Representing Scene as Neural Radiance Fields for View Synthesis 笔记 摘要 实现了一个任意视角视图生成算法&#xff1a;输入稀疏的场景图像&#xff0c;通过优化连续的Volumetric场景函数实现&#xff1b;用全连接深度网络表达场景&#xff0c;输入是一个连续的5维…...

深入理解nginx一致性哈希负载均衡模块[上]

1. 引言 在现代的网络应用中&#xff0c;负载均衡是一个至关重要的组件。它能够分配流量到多个服务器上&#xff0c;实现高可用性和性能扩展。Nginx是一个广泛使用的高性能Web服务器和反向代理服务器&#xff0c;其负载均衡模块提供了多种算法来实现流量的分发。其中&#xff0…...

【Linux】Docker安装

卸载旧版Docker 新版docker无法覆盖旧版的&#xff0c;所以需要先卸载原来的旧版本 yum remove docker \docker-client \docker-client-latest \docker-common \docker-latest \docker-latest-logrotate \docker-logrotate \docker-selinux \docker-engine-selinux \docker-eng…...

动态SLAM论文阅读笔记

近期阅读了许多动态SLAM相关的论文&#xff0c;它们基本都是基于ORB-SLAM算法&#xff0c;下面简单记录一下它们的主要特点&#xff1a; 1.DynaSLAM 采用CNN网络进行分割多视图几何辅助的方式来判断动态点&#xff0c;并进行了背景修复工作。 2.Detect-SLAM 实时性问题&…...

数据挖掘:航空公司的客户价值分析

需求分析 理解并掌握聚类分析方法&#xff0c;掌握数据的标准化&#xff0c;掌握寻找最佳聚类数&#xff0c;掌握聚类的绘图&#xff0c;掌握聚类分析的应用场景。 系统实现 实验流程分析 借助航空公司数据&#xff0c;对客户进行分类对不同类别的客户进行特征分析&#xf…...

GIS之深度学习08:安装GPU环境下的pytorch

环境&#xff1a; cuda&#xff1a;12.1.1 cudnn&#xff1a;12.x pytorch&#xff1a;2.2.0 torchvision&#xff1a;0.17.0 Python&#xff1a;3.8 操作系统&#xff1a;win &#xff08;本文安装一半才发现pytorch与cuda未对应&#xff0c;重新安装了cuda后才开始的&a…...

防患未然,OceanBase巡检工具应用实践——《OceanBase诊断系列》之五

1. OceanBase为什么要做巡检功能 尽管OceanBase拥有很好的MySQL兼容性&#xff0c;但在长期的生产环境中&#xff0c;部署不符合标准规范、硬件支持异常&#xff0c;或配置项错误等问题&#xff0c;这些短期不会出现的问题&#xff0c;仍会对数据库集群构成潜在的巨大风险。为…...

数据结构从入门到精通——队列

队列 前言一、队列1.1队列的概念及结构1.2队列的实现1.3队列的实现1.4扩展 二、队列面试题三、队列的具体实现代码Queue.hQueue.ctest.c队列的初始化队列的销毁入队列出队列返回队头元素返回队尾元素检测队列是否为空检测元素个数 前言 队列是一种特殊的线性数据结构&#xff…...

深度学习相关概念及术语总结

目录 1.CNN2.RNN3.LSTM4.NLP5.CV6.正向传播7.反向传播8.sigmoid 函数9.ReLU函数10.假设函数11.损失函数12.代价函数 1.CNN CNN 是卷积神经网络&#xff08;Convolutional Neural Network&#xff09;的缩写。卷积神经网络是一种深度学习模型&#xff0c;专门用于处理具有网格状…...

uniapp发行H5获取当前页面query

阅读uni的文档大致可得通过 onLoad与 onShow()的形参都能获取页面传递的参数&#xff0c;例如在开发时鼠标移动到方法上可以看到此方法的简短介绍 实际这里说的是打开当前页面的参数&#xff0c;在小程序端的时候测试并无问题&#xff0c;但是发行到H5时首页加载会造成参数获取…...

Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility

Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility 1. 实验室环境1.1 实验室环境1.2 小测试 2. The Endor System2.1 部署应用2.2 检查现有策略 3. Cilium 策略实体3.1 创建 allow-all 网络策略3.2 在 Hubble CLI 中验证网络策略源3.3 …...

视频字幕质量评估的大规模细粒度基准

大家读完觉得有帮助记得关注和点赞&#xff01;&#xff01;&#xff01; 摘要 视频字幕在文本到视频生成任务中起着至关重要的作用&#xff0c;因为它们的质量直接影响所生成视频的语义连贯性和视觉保真度。尽管大型视觉-语言模型&#xff08;VLMs&#xff09;在字幕生成方面…...

unix/linux,sudo,其发展历程详细时间线、由来、历史背景

sudo 的诞生和演化,本身就是一部 Unix/Linux 系统管理哲学变迁的微缩史。来,让我们拨开时间的迷雾,一同探寻 sudo 那波澜壮阔(也颇为实用主义)的发展历程。 历史背景:su的时代与困境 ( 20 世纪 70 年代 - 80 年代初) 在 sudo 出现之前,Unix 系统管理员和需要特权操作的…...

零基础设计模式——行为型模式 - 责任链模式

第四部分&#xff1a;行为型模式 - 责任链模式 (Chain of Responsibility Pattern) 欢迎来到行为型模式的学习&#xff01;行为型模式关注对象之间的职责分配、算法封装和对象间的交互。我们将学习的第一个行为型模式是责任链模式。 核心思想&#xff1a;使多个对象都有机会处…...

稳定币的深度剖析与展望

一、引言 在当今数字化浪潮席卷全球的时代&#xff0c;加密货币作为一种新兴的金融现象&#xff0c;正以前所未有的速度改变着我们对传统货币和金融体系的认知。然而&#xff0c;加密货币市场的高度波动性却成为了其广泛应用和普及的一大障碍。在这样的背景下&#xff0c;稳定…...

Python 包管理器 uv 介绍

Python 包管理器 uv 全面介绍 uv 是由 Astral&#xff08;热门工具 Ruff 的开发者&#xff09;推出的下一代高性能 Python 包管理器和构建工具&#xff0c;用 Rust 编写。它旨在解决传统工具&#xff08;如 pip、virtualenv、pip-tools&#xff09;的性能瓶颈&#xff0c;同时…...

Mysql8 忘记密码重置,以及问题解决

1.使用免密登录 找到配置MySQL文件&#xff0c;我的文件路径是/etc/mysql/my.cnf&#xff0c;有的人的是/etc/mysql/mysql.cnf 在里最后加入 skip-grant-tables重启MySQL服务 service mysql restartShutting down MySQL… SUCCESS! Starting MySQL… SUCCESS! 重启成功 2.登…...

论文阅读笔记——Muffin: Testing Deep Learning Libraries via Neural Architecture Fuzzing

Muffin 论文 现有方法 CRADLE 和 LEMON&#xff0c;依赖模型推理阶段输出进行差分测试&#xff0c;但在训练阶段是不可行的&#xff0c;因为训练阶段直到最后才有固定输出&#xff0c;中间过程是不断变化的。API 库覆盖低&#xff0c;因为各个 API 都是在各种具体场景下使用。…...

DBLP数据库是什么?

DBLP&#xff08;Digital Bibliography & Library Project&#xff09;Computer Science Bibliography是全球著名的计算机科学出版物的开放书目数据库。DBLP所收录的期刊和会议论文质量较高&#xff0c;数据库文献更新速度很快&#xff0c;很好地反映了国际计算机科学学术研…...

jdbc查询mysql数据库时,出现id顺序错误的情况

我在repository中的查询语句如下所示&#xff0c;即传入一个List<intager>的数据&#xff0c;返回这些id的问题列表。但是由于数据库查询时ID列表的顺序与预期不一致&#xff0c;会导致返回的id是从小到大排列的&#xff0c;但我不希望这样。 Query("SELECT NEW com…...