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

【JavaEE进阶】CSS

本节⽬标
  • 掌握 CSS 基本语法规范和CSS选择器的各种⽤法, 熟练使⽤CSS的常⽤属性.

一.CSS介绍

1.什么是CSS?

        CSS(Cascading Style Sheet),层叠样式表, ⽤于控制⻚⾯的样式.
        CSS 能够对⽹⻚中元素位置的排版进⾏像素级精确控制, 实现美化⻚⾯的效果. 能够做到⻚⾯的样式和结构分离.
CSS 可以理解为"东⽅四⼤邪术" 之化妆术.
对⻚⾯的展⽰进⾏"化妆"
                                                 CSS前 -> CSS修饰后

2.基本语法规范

选择器 + {⼀条/N条声明}
  • 选择器决定针对谁修改 (找谁)
  • 声明决定修改啥. (⼲啥)
  • 声明的属性是键值对. 使⽤ ; 区分键值对, 使⽤ : 区分键和值.
<head><title>Document</title><style>div{color: brown;}</style>
</head>
注意:
  • CSS 要写到 style 标签中(后⾯还会介绍其他写法
  • style 标签可以放到⻚⾯任意位置. ⼀般放到 head 标签内.
  • CSS 使⽤ /* */ 作为注释. (使⽤ ctrl + / 快速切换) .

3.引⼊⽅式

CSS有3种引⼊⽅式,语法如下表格所⽰:
3种引⼊⽅式对⽐:
  1.  内部样式会出现⼤量的代码冗余, 不⽅便后期的维护,所以不常⽤. 
  2. ⾏内样式, 只适合于写简单样式. 只针对某个标签⽣效. 缺点是不能写太复杂的样式.
  3. 外部样式,html和css实现了完全的分离, 企业开发常⽤⽅式.

4.规范

样式⼤⼩写
虽然 CSS 不区分⼤⼩写, 我们开发时统⼀使⽤⼩写字⺟
空格规范
  • 冒号后⾯带空格
  • 选择器和 { 之间也有⼀个空格.

二.CSS选择器

CSS 选择器的主要功能就是选中⻚⾯指定的标签元素. 选中了元素, 才可以设置元素的属性.
就好⽐ SC2, War3 这样的游戏, 需要先选中单位, 再指挥该单位⾏动.
CSS选择器主要分以下⼏种:

1. 标签选择器

2. class选择器

3. id选择器

4. 复合选择器

5. 通配符选择器

我们通过代码来学习CSS选择器的使⽤.

1. 标签选择器

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {color:purple;}a {color: antiquewhite;}</style>
</head>
<body><div>我是一个div</div><div>我是一个div2</div><div><a href="#">我是一个div3</a></div>
</body>
</html>

2. 类选择器

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 类选择器 */.cla1 {font-size: 40px;}</style>
</head>
<body><div id="div" class="cla1">我是一个div</div><div id="div2" class="cla1">我是一个div2</div><div id="div3" class="cla3"><a href="#">我是一个div3</a></div>
</body>
</html>
  • ⼀个类可以被多个标签使⽤, ⼀个标签也能使⽤多个类(多个类名要使⽤空格分割, 这种做法可以让代码更好复⽤)
  • 前面使用.标识

3. ID选择器

 
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* id选择器 */#div {color: purple;}#div2 {color: red;}</style>
</head>
<body><div id="div" >我是一个div</div><div id="div2">我是一个div2</div><div id="div3"><a href="#">我是一个div3</a></div>
</body>
</html>
  • id 是唯⼀的, 不能被多个标签使⽤ (是和 类选择器 最⼤的区别)
  • 使用#和标签名区分

4. 通配符选择器

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 通配符选择器 */* {color: rebeccapurple;}</style>
</head>
<body><div id="div" class="cla1">我是一个div</div><div id="div2" class="cla1">我是一个div2</div><div id="div3" class="cla3"><a href="#">我是一个div3</a></div>
</body>
</html>
  • 使用*标识

5. 复合选择器

(1)中间使用“,”为并集

#div,#div2 {color: antiquewhite;}

(2)具有父子关系的中间带空格,表示最关系最下面的更改

  ul li {color: aquamarine;}
 
1. 以上三个标签选择器 ul li a 中的任意, 都可以替换成类选择器, 或者id选择器, 可以是任意选
择器的组合, 也可以是任意数量选择器的组合
2. 不⼀定是相邻的标签, 也可以是"孙⼦"标签
3. 如果需要选择多种标签, 可以使⽤ , 分割, 如 p, div { } 表⽰同时选中p标签和div标签.
逗号前后可以是以上任意选择器, 也可以是选择器的组合.

三、 常⽤CSS

接下来学习⼀些常⻅的css样式
准备如下html
<div class="text1">我是⽂本1</div>

1.color

color: 设置字体颜⾊
div {color: #fff;color:aliceblue;color:rgb(0,255,255);}

颜⾊有如下⼏种表达⽅式:

  • 英⽂单词,如red,blue
  • rgb代码的颜⾊ 如rgb(255,0,0)
  • ⼗六进制的颜⾊ 如#ff00ff

2.font-size

font-size: 设置字体⼤⼩
   div {font-size: 200px;}

3. border

border: 边框
边框是⼀个复合属性, 可以同时设置多个样式, 不分前后顺序, 浏览器会根据设置的值⾃动判断
 
        div {width: 500px;height: 600px;border-width: 10px;border-style: dashed;border-color: aqua;}

以上border属性的对应设置的维度分别为边框粗细, 边框样式, 边框颜⾊.

也可以拆开来设置
样式说明取值
border-width设置边框粗细数值
border-style设置边框样式dotted : 点状
solid : 实线
double : 双线
dashed: 虚线
border-color设置边框颜⾊同 color
border: 1px solid purple; 
/*就等同于以下代码:*/
.text1 {
/* border: 1px purple solid; */
border-width: 1px;
border-style: solid;
border-color: purple;
}
 

4.width/height

  • width: 设置宽度
  • height: 设置⾼度
只有块级元素可以设置宽⾼
块级元素是HTML标签的⼀种显⽰模式, 对应的还有⾏内元素
  • 常⻅块级元素: h1-h6, p, div 等,块级元素独占⼀⾏, 可以设置宽⾼
  • 常⻅⾏内元素: a span,⾏内元素不独占⼀⾏, 不能设置宽⾼
改变显⽰模式
使⽤ display 属性可以修改元素的显⽰模式.
  • display: block 改成块级元素 [常⽤]
  • display: inline 改成⾏内元素 [很少⽤]
        #div4  {display: block;width: 40px;height: 100px;border-color: brown;border-width:10px;border-style: dotted;}
 

5.padding

padding: 内边距, 设置内容和边框之间的距离.
内容默认是顶着边框来放置的. ⽤ padding 来控制这个距离

 
padding也是⼀个复合样式, 可以对四个⽅向分开设置
  • padding-top
  • padding-bottom
  • padding-left
  • padding-right

6.margin 

margin: 外边距, 设置元素和元素之间的距离.
 
margin也是⼀个复合样式, 可以给四个⽅向都加上外边距
  • margin-top
  • margin-bottom
  • margin-left
  • margin-right
 

相关文章:

【JavaEE进阶】CSS

本节⽬标 掌握 CSS 基本语法规范和CSS选择器的各种⽤法, 熟练使⽤CSS的常⽤属性. 一.CSS介绍 1.什么是CSS? CSS(Cascading Style Sheet)&#xff0c;层叠样式表, ⽤于控制⻚⾯的样式. CSS 能够对⽹⻚中元素位置的排版进⾏像素级精确控制, 实现美化⻚⾯的效果. 能够做到⻚⾯…...

基于Java Springboot宠物领养救助平台

一、作品包含 源码数据库设计文档万字PPT全套环境和工具资源部署教程 二、项目技术 前端技术&#xff1a;Html、Css、Js、Vue、Element-ui 数据库&#xff1a;MySQL 后端技术&#xff1a;Java、Spring Boot、MyBatis 三、运行环境 开发工具&#xff1a;IDEA/eclipse 数据…...

C/C++ 中有哪些类型转换方式? 分别有什么区别?

在C编写C/C代码的时候&#xff0c;我们经常会遇到发生类型转换的场景&#xff0c;比如 赋值运算符的两个操作数不同、实参和形参类型不同、函数返回值类型和接收返回值的类型不同&#xff0c;都会发生类型转换&#xff1b;所以&#xff0c;在C语言中提供了两种类型转换 —— 隐…...

小程序租赁系统开发为企业提供高效便捷的租赁服务解决方案

内容概要 在这个数字化飞速发展的时代&#xff0c;小程序租赁系统应运而生&#xff0c;成为企业管理租赁业务的一种新选择。随着移动互联网的普及&#xff0c;越来越多的企业开始关注如何利用小程序来提高租赁服务的效率和便捷性。小程序不仅可以为用户提供一个快速、易用的平…...

Scala的Array

数组&#xff1a;物理空间上连续的&#xff08;一个挨一个&#xff09; 优势&#xff1a;根据下标&#xff0c;能快速找到元素 列表&#xff1a;物理空间上不连续&#xff08;不是一个元素挨着一个元素&#xff09; 优势&#xff1a;插入元素&#xff0c;删除比较快 object…...

等保测评怎么做?具体流程是什么?

等保测评是对信息系统进行等保&#xff08;等级保护&#xff09;安全评测的过程。等保是指对信息系统进行等级化保护管理&#xff0c;目的是提高信息系统的安全性&#xff0c;防止信息泄露、篡改、破坏等安全问题。哈尔滨等保测评按照《中华人民共和国网络安全法》及《信息安全…...

基于YOLOv8深度学习的汽车车身车损检测系统研究与实现(PyQt5界面+数据集+训练代码)

本文研究并实现了一种基于YOLOV8深度学习模型的汽车车身车损检测系统&#xff0c;旨在解决传统车损检测中效率低、精度不高的问题。该系统利用YOLOV8的目标检测能力&#xff0c;在单张图像上实现了车身损坏区域的精确识别和分类&#xff0c;尤其是在车身凹痕、车身裂纹和车身划…...

力扣 LeetCode 144. 二叉树的前序遍历(Day6:二叉树)

解题思路&#xff1a; 方法一&#xff1a;递归&#xff08;中左右&#xff09; class Solution {List<Integer> res new ArrayList<>();public List<Integer> preorderTraversal(TreeNode root) {recur(root);return res;}public void recur(TreeNode roo…...

Adobe Illustrator(Ai)修图软件入门操作参考,收集查过的各个细节用法

到现在&#xff0c;对于Ai的使用也是一半一半&#xff0c;基本上都是用到啥就查啥。因为用得也不是很频繁&#xff0c;脑子也记不住很多操作&#xff0c;所以有时候靠肌肉记忆&#xff0c;很多时候&#xff0c;得再百度一遍…… 所以 我在这再备份一下&#xff0c;做个搬运工 …...

Apache Paimon、Apache Hudi、Apache Iceberg对比分析

Apache Paimon、Apache Hudi、Apache Iceberg 都是面向大数据湖的表格式存储管理框架。它们各自的架构、数据管理方式以及适用场景有所不同。下面是对三者的详细对比分析: 1. 基本简介 Apache Paimon: Paimon 是一个新兴的数据湖存储引擎,旨在支持流批一体的数据处理和管理…...

[ 网络安全介绍 5 ] 为什么要学习网络安全?

&#x1f36c; 博主介绍 &#x1f468;‍&#x1f393; 博主介绍&#xff1a;大家好&#xff0c;我是 _PowerShell &#xff0c;很高兴认识大家~ ✨主攻领域&#xff1a;【渗透领域】【数据通信】 【通讯安全】 【web安全】【面试分析】 &#x1f389;点赞➕评论➕收藏 养成习…...

生产环境centos8 Red Hat8部署ansible and 一键部署mysql两主两从ansible脚本预告

一、各节点服务器创建lvm逻辑卷组 1.初始化磁盘为物理卷&#xff08;PV&#xff09; 命令&#xff1a;sudo pvcreate /dev/vdb 2.创建卷组&#xff08;VG&#xff09; 命令&#xff1a;sudo vgcreate db_vg /dev/vdb 3.创建逻辑卷&#xff08;LV&#xff09; 命令&#xff1a;s…...

华为云stack网络服务流量走向

1.同VPC同子网同主机内ECS间互访流量走向 一句话通过主机内部br-int通信 2.同VPC同子网跨主机ECS间互访流量走向 3.同VPC不同子网同主机ECS间互访流量走向 查看ECS配置文件底层KVM技术 查看日志 查看ECS的ID号&#xff08;管理员身份查询所有租户信息&#xff09; 查看ECS的其…...

嵌入式硬件杂谈(二)-芯片输入接入0.1uf电容的本质(退耦电容)

引言&#xff1a;对于嵌入式硬件这个庞大的知识体系而言&#xff0c;太多离散的知识点很容易疏漏&#xff0c;因此对于这些容易忘记甚至不明白的知识点做成一个梳理&#xff0c;供大家参考以及学习&#xff0c;本文主要针对芯片输入接入0.1uf电容的本质的知识点的进行学习。 目…...

计算机网络HTTP——针对实习面试

目录 计算机网络HTTP什么是HTTP&#xff1f;HTTP和HTTPS有什么区别&#xff1f;分别说明HTTP/1.0、HTTP/2.0、HTTP/3.0请说明访问网页的全过程请说明HTTP常见的状态码Cookie和Session有什么区别&#xff1f;HTTP请求方式有哪些&#xff1f;请解释GET和POST的区别&#xff1f;HT…...

JAVA中对象实体与对象引用有何不同?举例说明

在 Java 中&#xff0c;对象实体&#xff08;Object instance&#xff09;和对象引用&#xff08;Object reference&#xff09;是两个不同的概念&#xff0c;虽然它们通常被一起讨论&#xff0c;但它们的作用和表现方式是不同的。下面我们来详细说明这两者的区别。 1. 对象实体…...

C++设计思想-001-设计模式-单例模式

1.单例模式优点 保证一个类仅有一个实例,并提供一个访问它的全局访问点,该实例被所有程序模块共享; 实现: 1.1 单例模式的类只提供私有的构造函数 1.2类定义中含有一个该类的静态私有对象 1.3该类提供了一个静态的公有的函数用于创建或获取它本身的静态私有对象 2.单…...

远程连接服务器

1、远程连接服务器简介 ssh secure shell 非对称加密&#xff1a;一对公钥私钥 对称加密&#xff1a;加密和解密使用的是同一把密钥&#xff1b;(同一秘钥既可以进行加密也可以进行解密 )优势&#xff1a;使用一个秘钥它的加密效率高一些&#xff08;快一些&#xff09; …...

【分布式技术】ES扩展知识-Elasticsearch分词器的知识与选择

ES知识扩展 分词器有哪些&#xff1f;1. 标准分词器&#xff08;Standard Analyzer&#xff09;&#xff1a;示例示例文本分析配置参数与自定义应用场景 2. Simple Analyzer&#xff1a;示例示例文本分析应用场景与限制结论 3. Whitespace Analyzer&#xff1a;示例示例文本分析…...

【网络安全 | 漏洞挖掘】通过密码重置污染实现账户接管

未经许可,不得转载。 文章目录 密码重置污染攻击漏洞挖掘的过程目标选择与初步测试绕过 Cloudflare 的尝试发现两个域名利用 Origin 头部污染实现账户接管攻击流程总结在今天的文章中,我们将深入探讨一种 账户接管 漏洞,并详细分析如何绕过 Cloudflare 的保护机制,利用密码…...

DeepSeek 赋能智慧能源:微电网优化调度的智能革新路径

目录 一、智慧能源微电网优化调度概述1.1 智慧能源微电网概念1.2 优化调度的重要性1.3 目前面临的挑战 二、DeepSeek 技术探秘2.1 DeepSeek 技术原理2.2 DeepSeek 独特优势2.3 DeepSeek 在 AI 领域地位 三、DeepSeek 在微电网优化调度中的应用剖析3.1 数据处理与分析3.2 预测与…...

React hook之useRef

React useRef 详解 useRef 是 React 提供的一个 Hook&#xff0c;用于在函数组件中创建可变的引用对象。它在 React 开发中有多种重要用途&#xff0c;下面我将全面详细地介绍它的特性和用法。 基本概念 1. 创建 ref const refContainer useRef(initialValue);initialValu…...

《Playwright:微软的自动化测试工具详解》

Playwright 简介:声明内容来自网络&#xff0c;将内容拼接整理出来的文档 Playwright 是微软开发的自动化测试工具&#xff0c;支持 Chrome、Firefox、Safari 等主流浏览器&#xff0c;提供多语言 API&#xff08;Python、JavaScript、Java、.NET&#xff09;。它的特点包括&a…...

解锁数据库简洁之道:FastAPI与SQLModel实战指南

在构建现代Web应用程序时&#xff0c;与数据库的交互无疑是核心环节。虽然传统的数据库操作方式&#xff08;如直接编写SQL语句与psycopg2交互&#xff09;赋予了我们精细的控制权&#xff0c;但在面对日益复杂的业务逻辑和快速迭代的需求时&#xff0c;这种方式的开发效率和可…...

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

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

ios苹果系统,js 滑动屏幕、锚定无效

现象&#xff1a;window.addEventListener监听touch无效&#xff0c;划不动屏幕&#xff0c;但是代码逻辑都有执行到。 scrollIntoView也无效。 原因&#xff1a;这是因为 iOS 的触摸事件处理机制和 touch-action: none 的设置有关。ios有太多得交互动作&#xff0c;从而会影响…...

深度学习习题2

1.如果增加神经网络的宽度&#xff0c;精确度会增加到一个特定阈值后&#xff0c;便开始降低。造成这一现象的可能原因是什么&#xff1f; A、即使增加卷积核的数量&#xff0c;只有少部分的核会被用作预测 B、当卷积核数量增加时&#xff0c;神经网络的预测能力会降低 C、当卷…...

CSS设置元素的宽度根据其内容自动调整

width: fit-content 是 CSS 中的一个属性值&#xff0c;用于设置元素的宽度根据其内容自动调整&#xff0c;确保宽度刚好容纳内容而不会超出。 效果对比 默认情况&#xff08;width: auto&#xff09;&#xff1a; 块级元素&#xff08;如 <div>&#xff09;会占满父容器…...

08. C#入门系列【类的基本概念】:开启编程世界的奇妙冒险

C#入门系列【类的基本概念】&#xff1a;开启编程世界的奇妙冒险 嘿&#xff0c;各位编程小白探险家&#xff01;欢迎来到 C# 的奇幻大陆&#xff01;今天咱们要深入探索这片大陆上至关重要的 “建筑”—— 类&#xff01;别害怕&#xff0c;跟着我&#xff0c;保准让你轻松搞…...

macOS 终端智能代理检测

&#x1f9e0; 终端智能代理检测&#xff1a;自动判断是否需要设置代理访问 GitHub 在开发中&#xff0c;使用 GitHub 是非常常见的需求。但有时候我们会发现某些命令失败、插件无法更新&#xff0c;例如&#xff1a; fatal: unable to access https://github.com/ohmyzsh/oh…...