当前位置: 首页 > 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时首页加载会造成参数获取…...

凸优化避坑指南:为什么你的梯度下降总不收敛?

凸优化避坑指南&#xff1a;为什么你的梯度下降总不收敛&#xff1f; 在深度学习的实践中&#xff0c;许多初学者都会遇到一个令人困惑的现象&#xff1a;明明按照教科书实现了梯度下降算法&#xff0c;模型参数却始终无法稳定收敛。你可能已经检查了学习率、批量大小甚至激活函…...

小心数据被‘卷’没!玩转24C02页写时必须搞懂的地址翻转与边界检查

小心数据被‘卷’没&#xff01;玩转24C02页写时必须搞懂的地址翻转与边界检查 在嵌入式开发中&#xff0c;I2C EEPROM存储器的使用频率极高&#xff0c;而24C02作为经典型号&#xff0c;其页写功能既能提升效率又暗藏风险。许多开发者都曾遭遇过这样的噩梦&#xff1a;明明写入…...

Spring Boot WebFlux 响应式性能测试

Spring Boot WebFlux响应式性能测试&#xff1a;解锁高并发潜力 在当今高并发、低延迟的应用场景中&#xff0c;传统的同步阻塞式架构逐渐暴露出性能瓶颈。Spring Boot WebFlux作为响应式编程的典范&#xff0c;通过非阻塞I/O和事件驱动模型&#xff0c;为开发者提供了更高效的…...

APK Installer完整指南:在Windows上轻松安装Android应用

APK Installer完整指南&#xff1a;在Windows上轻松安装Android应用 【免费下载链接】APK-Installer An Android Application Installer for Windows 项目地址: https://gitcode.com/GitHub_Trending/ap/APK-Installer 想在Windows电脑上直接运行Android应用吗&#xff…...

抖音批量下载工具终极指南:3分钟快速上手,轻松获取无水印内容

抖音批量下载工具终极指南&#xff1a;3分钟快速上手&#xff0c;轻松获取无水印内容 【免费下载链接】douyin-downloader A practical Douyin downloader for both single-item and profile batch downloads, with progress display, retries, SQLite deduplication, and brow…...

从《亦爱亦恨话纽约》看城市数据可视化:用Python+Folium绘制纽约的‘能量’与‘摩擦’地图

数据视角下的都市脉搏&#xff1a;用Python绘制纽约的活力与冲突地图 纽约的街道永远在讲述着两种截然不同的故事——玻璃幕墙反射的金融区阳光与地铁通道里斑驳的涂鸦&#xff0c;米其林餐厅的银质餐具与街头餐车的纸咖啡杯&#xff0c;中央公园晨跑者的心率监测与布朗克斯区急…...

3分钟解锁QQ音乐加密文件:让音乐真正属于你的自由之旅

3分钟解锁QQ音乐加密文件&#xff1a;让音乐真正属于你的自由之旅 【免费下载链接】QMCDecode QQ音乐QMC格式转换为普通格式(qmcflac转flac&#xff0c;qmc0,qmc3转mp3, mflac,mflac0等转flac)&#xff0c;仅支持macOS&#xff0c;可自动识别到QQ音乐下载目录&#xff0c;默认转…...

如何用mootdx高效解决通达信财务数据批量处理难题

如何用mootdx高效解决通达信财务数据批量处理难题 【免费下载链接】mootdx 通达信数据读取的一个简便使用封装 项目地址: https://gitcode.com/GitHub_Trending/mo/mootdx 在量化投资和金融数据分析领域&#xff0c;通达信财务数据是宝贵的资源&#xff0c;但原始数据处…...

解锁RK3588潜力:从4K到8K的HDMI配置实战解析

1. 为什么RK3588默认不支持8K输出&#xff1f; 很多开发者拿到RK3588开发板时&#xff0c;会发现默认配置下HDMI最高只能输出4K分辨率。这其实是一个设计上的权衡结果。RK3588芯片本身具备8K视频解码和显示能力&#xff0c;但在Android 12 SDK中&#xff0c;为了兼顾多个显示接…...

Go语言怎么嵌入静态文件_Go语言embed嵌入文件教程【秒懂】

Go 1.16 用 embed 包可将文件编译进二进制&#xff0c;但需满足路径为相对包根的字面量、包与变量声明正确三重约束&#xff1b;embed.FS 要求路径不可拼接、不可跨模块、不支持 ./ 前缀&#xff1b;读取需用 fs.ErrNotExist 判断缺失&#xff1b;HTTP 服务中可直接用 http.Fil…...