Java前端基础——CSS
一、CSS介绍
1.1 什么是CSS
CSS(Cascading Style Sheet),层叠样式表,用于控制页面的样式.
CSS 能够对网页中元素位置的排版进行像素级精确控制, 实现美化页面的效果. 能够做到页面的样式和结构分离.
1.2 基本语法规范
选择器 + {⼀条/N条声明}
• 选择器决定针对谁修改 (找谁) • 声明决定修改啥. (干啥)
• 声明的属性是键值对. 使用 ; 区分键值对, 使用 : 区分键和值.
<style>p {/* 设置字体颜⾊ */ color: red;/* 设置字体⼤⼩ */ font-size: 30px;}
</style>
<p>hello</p>
例如:
注意:
1.CSS一般写到style标签中(其他方式后面介绍);
2.style标签一般放到head标签中;
1.3 CSS引入方式
CSS有三种引入方式:
1.行内样式:将style标签作为属性写到起始标签内。
2.内部样式:
将style标签写到HTML语句中。
3.外部样式:
将CSS语句写到.css文件中。
三种引入方式对比:
1. 行内样式会出现大量的代码冗余, 不方便后期的维护,所以不常用
2. 内部样式, 只适合于写简单样式. 只针对某个标签生效. 缺点是不能写太复杂的样式.
3. 外部样式,html和css实现了完全的分离, 企业开发常用方式.
1.4 CSS书写规范
样式大小写
统一使用小写字母。
空格规范
1.冒号后面带空格。
2.选择器和 } 之间带空格。
二、CSS选择器
CSS 选择器的主要功能就是选中页面指定的标签元素. 选中了元素, 才可以设置元素的属性.
CSS的选择器主要有标签选择器、class选择器、id选择器、复合选择器、通配符选择器。
2.1 标签选择器
即将HTML中的标签作为选择器的选择器,如:
/* 选择所有的a标签, 设置颜⾊为红⾊ */
a {color: red;
}
/* 选择所有的div标签, 设置颜⾊为绿⾊ */
div {color: green;
}
示例:
2.2 ID选择器
!!!标签选择器改变的是整个页面中所有标签为该标签的属性,而ID选择器改变的只是页面中标签id为目标id的属性,往往改变的是单个标签的属性(id不重复的情况下)。
/* 选择id为submit的元素, 设置颜⾊为红⾊ */
#submit {color: red;
}
!!!注意:使用ID选择器要再id前加 # 以区分id与标签的区别。
示例:
2.3 类选择器
即通过标签中的class属性来改变标签的属性的选择器。
用来改变几个类属性相同的标签的属性。
/* 选择class为font32的元素, 设置字体⼤⼩为32px */
.font32 {font-size: 32px;
}
!!!注意:通过再class名前加“ . “来区分它为类选择器。
示例:
2.4 通配符选择器
/* 设置⻚⾯所有元素, 颜⾊为红⾊*/
* {color: red;
}
示例:
2.4 复合选择器
类型一:
/*只设置 ul标签下的 li标签下的 a标签, 颜⾊为红⾊*/
ul li a {color: blue;
}
ul li a 之间以空格隔开,表示将ul标签下的li标签下的a标签的颜色改为blue,它们之间是父子关系。
类型二:
ul , ol {color:red;
}
ol li 之间以逗号隔开,表示将所有的ul ol标签都改为红色,它们之间是兄弟关系。
三、常用CSS
<div class="div1">我是一个div</div>
3.1 color
color:设置字体颜色
.text1{color: red;
}
结果如下:
其中,颜色有以下三种表达方式:
1.英文单词:如red、green等
2.rgb代码的颜色:如rgb(255,0,0)(即用三原色表示)
3.十六进制表示:如#ff00ff(即将三原色的值用十六进制表示出来)
3.2 font-size
font-size用于设置字体大小
.div1 {font-size: 50px;}
结果如下:
3.3 border(边框)
边框是⼀个复合属性, 可以同时设置多个样式, 不分前后顺序, 浏览器会根据设置的值自动判断 。
.text1{border: 1px solid purple;
}
结果如下:
边框分为上下左右(top、buttom、left、right)四个部分,我们也可以单独对边框的某部分进行设置,如:
上面border的属性分别为边框粗细、样式还有颜色。也可以根据下表分开设置:
也就是说,上面的代码相当于:
.text1 {/* border: 1px purple solid; */border-width: 1px;border-style: solid;border-color: purple;
}
这三个属性可以通过1~4个值来指定(以border-width为例):
<1>当指定一个值时:同时设置4条边的宽度;
<2>当指定二个值时:第一个值设置顶部和底部,第二个值设置左侧和右侧;
<3>当指定三个值时:第一个值设置顶部,第二个值设置左侧和右侧,第三个值设置底部;
<4> 当指定四个值时:按照顶不,右侧,底部,左侧(顺时针)设置;
其它两个属性类似。
3.4 width和height
width: 设置宽度
height: 设置高度
注意:只有块级元素才可以设置宽高!!!(即独占一行的元素,如h1~h6等),比如改变span标签的高度和宽度是不会生效的。
如果一定要设置行内标签的宽高呢?我们可以通过使用display属性修改元素的显示模式。
• display: block 改成块级元素 [常用]
• display: inline 改成行内元素 [很少用]
3.5 padding(内边距)和 margin(外边距)
padding: 内边距, 设置内容和边框之间的距离.
内容默认是顶着边框放置的. 用 padding 来控制这个距离
.text1 {padding: 20px;
}
margin:外边距,设置元素与元素之间的距离。
.text1 {margin: 20px;
}
注意:和border一样,padding和margin也是⼀个复合样式, 可以对四个方向分开设置
• padding-top
• padding-bottom
• padding-left
• padding-right
• margin-top
• margin-bottom
• margin-left
• margin-right
示例:
!!!内边距和外边距是相对的。
相关文章:

Java前端基础——CSS
一、CSS介绍 1.1 什么是CSS CSS(Cascading Style Sheet),层叠样式表,用于控制页面的样式. CSS 能够对网页中元素位置的排版进行像素级精确控制, 实现美化页面的效果. 能够做到页面的样式和结构分离. 1.2 基本语法规范 选择器 {⼀条/N条声明} • 选择器决定针…...

Photino:通过.NET Core构建跨平台桌面应用程序,.net国产系统
一、Photino.NET简介: 最近发现了一个不错的框架 Photino.Net 一份代码运行,三个平台 windows max linux ,其中windows10,windows11,ubuntu 18.04,ubuntu 20.04 已测试均可以。mac 因为没有相关电脑没有测试。 github:https://github.com/t…...

个人全栈开发微信小程序上线了(记日记)
个人开发的全栈项目,《每日记鸭》微信小程序上线了! 主要是技术栈:uniapp,koa2,mongodb,langchian; 感兴趣的小伙伴可以来捧捧场!...

Linux移植IMX6ULL记录 一:编译源码并支持能顺利进入linux
目录 前言 一、不修改文件进行编译 二、修改设备树文件进行编译 前言 我用的开发板是100_ask_imx6ull_pro,其自带的linux内核版本linux-4.9.88,然后从linux官网下载过来的linux-4.9.88版本的arch/arm/configs/defconfig和dts设备树文件并没有对imx6ull…...
idea正则表达式-正则替换示例-2024.11笔记
注意idea中反向引用的格式是【$1】换行符是【\n】 需要在如下的代码中往接口的方法中添加一行注解,注解需要用到以后注解的中文备注 原文 Autowired private WomanService womanService; /** * 自定义分页 */ PostMapping("/page/{current}/{…...
Github 2024-11-20C开源项目日报 Top9
根据Github Trendings的统计,今日(2024-11-20统计)共有9个项目上榜。根据开发语言中项目的数量,汇总情况如下: 开发语言项目数量C项目9Assembly项目1raylib: 用于视频游戏编程的简单易用图形库 创建周期:3821 天开发语言:C协议类型:zlib LicenseStar数量:18556 个Fork数…...
安卓CameraX的使用
如果要在安卓应用中操作相机,有三个库可以选: Camera(已废弃):Camera是安卓最早的包,目前已废弃,在Android 5.0(API 级别 21)的设备上操作相机可以选择该包,…...

unity3d——基础篇小项目(开始界面)
示例代码: using System.Collections; using System.Collections.Generic; using UnityEngine;public class BeginPanel : BasePanel<BeginPanel> {public UIButton btnBegin;public UIButton btnRank;public UIButton btnSetting;public UIButton btnQuit; …...

【YOLOv8】安卓端部署-1-项目介绍
【YOLOv8】安卓端部署-1-项目介绍 1 什么是YOLOv81.1 YOLOv8 的主要特性1.2 YOLOv8分割模型1.2.1 YOLACT实例分割算法之计算掩码1.2.1.1 YOLACT 的掩码原型与最终的掩码的关系1.2.1.2 插值时的目标检测中提取的物体特征1.2.1.3 coefficients(系数)作用1.…...

安卓手机root+magisk安装证书+抓取https请求
先讲一下有这篇文章的背景吧,在使用安卓手机fiddler抓包时,即使信任了证书,并且手机也安装了证书,但是还是无法捕获https请求的问题,最开始不知道原因,后来慢慢了解到现在有的app为了防止抓包,把…...
11.20 深度学习-pytorch包和属性的基础语法
import torch import numpy as np def sci_close(): # 关闭pytorch 数据打印出来时科学计数法 torch.set_printoptions(sci_modeFalse) pass return 0 def create_tensor(): # 创建张量 t1torch.tensor(5) # 一阶张量 阶数看你传入的矩阵是多少阶的 这个是标量 不是一阶 一阶…...
SpringMVC域对象共享数据
目录 一.向 request 域对象共享数据 1.1使用ServletAPI向request域对象共享数据 1.2使用ModelAndView向request域对象共享数据 1.3使用Model向request域对象共享数据 1.4使用map向request域对象共享数据 1.5使用ModelMap向request域对象共享数据 二.Model、ModelMap、Ma…...

每日论文23-24ESSERC 6.4-16.1Ghz混合并联-串联谐振器
《A 6.4-to-16.1GHz Hybrid Parallel-Series Resonator Mode-Switching Oscillator with 206.6dBc/Hz FoMT at 1MHz Offset in 40nm CMOS》 24ESSERC 首先这篇文章有个地方我其实没太明白,它在title和行文的时候都写的是“ hybrid parallel-series resonator mode-…...

【软考】系统架构设计师-信息安全技术基础
信息安全核心知识点 信息安全5要素:机密性、完整性、可用性、可控性、审查性 信息安全范围:设备安全、数据安全、内容安全、行为安全 网络安全 网络安全的隐患体现在:物理安全性、软件安全漏洞、不兼容使用安全漏洞、选择合适的安全哲理 …...

kali搭建pikachu靶场
前言: 总所周知搭个网站需要有apachemysqlphp,Apache是一个开源的Web服务器软件, MySQL是一种关系型数据库管理系统(数据库),PHP是一种在服务器上执行的脚本语言 文章内容来自:【黑帽编程与攻…...
注解用于从 HTTP 请求中提取数据
在 Spring 框架中,PathVariable、RequestParam 和 RequestBody 等注解用于从 HTTP 请求中提取数据。具体来说: PathVariable:用于从 URL 路径中提取变量值。例如,在路径 /users/{id} 中,{id} 是一个路径变量。Request…...

(Linux)搭建静态网站——基于http/https协议的静态网站
简单了解nginx配置文件 1.下载并开启nginx服务 下载 [rootlocalhost ~]# dnf install nginx -y开启 [rootlocalhost ~]# systemctl restart nginx 1.(1)搭建静态网站——基于http协议的静态网站 实验1:搭建一个web服务器,访问该服务器时显示“hello w…...
【机器学习chp3】判别式分类器:线性判别函数、线性分类器、广义线性分类器、分段线性分类器
前言: 本文遗留问题:(1)对最小平方误差分类器的理解不清晰.(2)分段线性判别函数的局部训练法理解不清晰。 推荐文章1,其中有关于感知机的分析 【王木头从感知机到神经网络】-CSDN博客 推荐文…...
【学习】【HTML】HTML、XML、XHTML
HTML 什么是 HTML? HTML (HyperText Markup Language) 是一种用于创建和展示网页的标准标记语言。它由一系列的元素组成,这些元素通过标签的形式来告诉浏览器如何显示内容。 HTML 的基本结构是什么? <!DOCTYPE html> <html> …...

ARM中ZI-data段和RW-data段
ARM中ZI-data段和RW-data段 1、只定义全局变量,不使用,不占用内存空间2、 定义并初始化全局变量为0 占用ZI-Data区域3、定义并初始化全局变量非0 占用RW-Data区域4、增加的是一个int8的数据为什么,size增加不是15、定义的全局变量为0…...

测试微信模版消息推送
进入“开发接口管理”--“公众平台测试账号”,无需申请公众账号、可在测试账号中体验并测试微信公众平台所有高级接口。 获取access_token: 自定义模版消息: 关注测试号:扫二维码关注测试号。 发送模版消息: import requests da…...
【根据当天日期输出明天的日期(需对闰年做判定)。】2022-5-15
缘由根据当天日期输出明天的日期(需对闰年做判定)。日期类型结构体如下: struct data{ int year; int month; int day;};-编程语言-CSDN问答 struct mdata{ int year; int month; int day; }mdata; int 天数(int year, int month) {switch (month){case 1: case 3:…...

8k长序列建模,蛋白质语言模型Prot42仅利用目标蛋白序列即可生成高亲和力结合剂
蛋白质结合剂(如抗体、抑制肽)在疾病诊断、成像分析及靶向药物递送等关键场景中发挥着不可替代的作用。传统上,高特异性蛋白质结合剂的开发高度依赖噬菌体展示、定向进化等实验技术,但这类方法普遍面临资源消耗巨大、研发周期冗长…...

Java-41 深入浅出 Spring - 声明式事务的支持 事务配置 XML模式 XML+注解模式
点一下关注吧!!!非常感谢!!持续更新!!! 🚀 AI篇持续更新中!(长期更新) 目前2025年06月05日更新到: AI炼丹日志-28 - Aud…...
Java 加密常用的各种算法及其选择
在数字化时代,数据安全至关重要,Java 作为广泛应用的编程语言,提供了丰富的加密算法来保障数据的保密性、完整性和真实性。了解这些常用加密算法及其适用场景,有助于开发者在不同的业务需求中做出正确的选择。 一、对称加密算法…...

让AI看见世界:MCP协议与服务器的工作原理
让AI看见世界:MCP协议与服务器的工作原理 MCP(Model Context Protocol)是一种创新的通信协议,旨在让大型语言模型能够安全、高效地与外部资源进行交互。在AI技术快速发展的今天,MCP正成为连接AI与现实世界的重要桥梁。…...
OpenPrompt 和直接对提示词的嵌入向量进行训练有什么区别
OpenPrompt 和直接对提示词的嵌入向量进行训练有什么区别 直接训练提示词嵌入向量的核心区别 您提到的代码: prompt_embedding = initial_embedding.clone().requires_grad_(True) optimizer = torch.optim.Adam([prompt_embedding...
C++课设:简易日历程序(支持传统节假日 + 二十四节气 + 个人纪念日管理)
名人说:路漫漫其修远兮,吾将上下而求索。—— 屈原《离骚》 创作者:Code_流苏(CSDN)(一个喜欢古诗词和编程的Coder😊) 专栏介绍:《编程项目实战》 目录 一、为什么要开发一个日历程序?1. 深入理解时间算法2. 练习面向对象设计3. 学习数据结构应用二、核心算法深度解析…...

uniapp 开发ios, xcode 提交app store connect 和 testflight内测
uniapp 中配置 配置manifest 文档:manifest.json 应用配置 | uni-app官网 hbuilderx中本地打包 下载IOS最新SDK 开发环境 | uni小程序SDK hbulderx 版本号:4.66 对应的sdk版本 4.66 两者必须一致 本地打包的资源导入到SDK 导入资源 | uni小程序SDK …...

结构化文件管理实战:实现目录自动创建与归类
手动操作容易因疲劳或疏忽导致命名错误、路径混乱等问题,进而引发后续程序异常。使用工具进行标准化操作,能有效降低出错概率。 需要快速整理大量文件的技术用户而言,这款工具提供了一种轻便高效的解决方案。程序体积仅有 156KB,…...