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

javaEE 初阶 — CSS 的 基本语法 与 引入方式

news 2026/3/27 12:32:50

文章目录

  • 1. 基本语法规范
  • 2. 三种引入方式

1. 基本语法规范


CSS 的基本语法规范是由 选择器 和 若干个声明 组成的。
选择器选中一个元素之后，这些属性都是针对于这个元素展开的。


先来看一个没有 CSS 的效果。

<body><p>这是一个段落</p>
</body>




可以看到此时只是显示出了内容，并没有什么特殊的效果，接下来我们引入 CSS代码。


这里的 style 标签可以放到任意位置，推荐的位置是 head 标签中。

<body><style>p {color: red;}</style><p>这是一个段落</p>
</body>


上述 style 标签里的 p 标签就是一个选择器，它所描述的就是当前代码中所有的 p 标签。
大括号里面的内容就是要针对这所有的 p 标签设置成什么样的属性。

上述的属性就是将字体颜色设置成 红色。



大括号里的 CSS 属性可以是一个或者多个，每个属性都是一个键值对，
键和值之间使用 : 分割。键值对之间 ; 分割。每个键值对可以独占一行，也可以不独占一行。


下面来演示多个属性

<body><style>p {color: red;font-size: 40px;}</style><p>这是一个段落</p>
</body>


上述的 font-size 属性就是将字体大小设置为 40像素 。

2. 三种引入方式


1、内部样式

使用 style 标签，直接把 CSS 写到 html 文件当中，此时的 style 标签可以放到任意位置，一般建议的是放到 head 标签中。
这个方式在上述的 基础语法规范演示过了，下面不再演示。


2、内联样式

使用 style 属性针对指定的元素设置样式。（此时不需要写选择器，直接写属性键值对）
这个时候的样式只针对当前的元素有效。

<body><p style="color:green; font-size: 40px;">这是一个段落</p><p>这是另一个段落</p>
</body>


上述代码里的属性只针对第一个 p 标签有效，对于第二个 p 标签无效。



当 内部样式 与 内联样式 冲突时，内联样式优先。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>我真帅</title><style>p{color: red;}</style></head>
<body><p style="color:green; font-size: 40px;">这是一个段落</p><p>这是另一个段落</p>
</body>
</html>




可以看到内部样式只对第二个 p 标签生效。


3、外部样式

把 CSS 文件单独作为一个**.css文件**，再通过 link 属性让 html 引入该 css 文件。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>我真帅</title>
</head>
<body><p>这是一个段落</p><p>这是另一个段落</p>
</body>
</html>


以下是 .css 文件，需要注意的是如果没有通过 link 属性引入，是不会起到作用的。



上述就是一个 .CSS文件。




可以看到在以上并没有使用 link 属性引入这个文件的时候，此时不会有任何的效果。

link 属性也是建议写到 head 标签里面。

 <link rel="stylesheet" href="style.css">


href 里填写的就是你的 .CSS 文件名。


可以看到此时就起了效果。

相关文章：

javaEE 初阶 — CSS 的 基本语法 与 引入方式

文章目录1. 基本语法规范2. 三种引入方式1. 基本语法规范 CSS 的基本语法规范是由 选择器 和 若干个声明 组成的。 选择器选中一个元素之后&#xff0c;这些属性都是针对于这个元素展开的。 先来看一个没有 CSS 的效果。 <body><p>这是一个段落</p> </bo…...

编程日记 2023/3/12 0:01:41

QEMU启动ARM32 Linux内核

目录前言前置知识ARM Versatile Express开发板简介ARM处理器家族简介安装qemu-system-arm安装交叉编译工具交叉编译ARM32 Linux内核交叉编译ARM32 Busybox使用busybox制作initramfs使用QEMU启动ARM32 Linux内核模拟vexpress-a9开发板模拟vexpress-a15开发板参考前言 本文介绍采…...

编程日记 2023/3/12 0:00:38

than的用法合集

首先需要了解一下than的词性&#xff0c;其有两个词性&#xff0c;一个是介词&#xff0c;一个是连词。 介词后面一定要接上名词性的词语&#xff0c;比如 i am taller then him 我比我的老师高 连词就比较自由&#xff0c;一般用来连接两个句子&#xff1b;但是使用than连词词…...

编程日记 2023/3/11 23:59:35

Unet 基于TCGA颅脑肿瘤MRI分割(高阶API分割模型)

目录 1. 介绍 2. dice 指标 3. resnet34 作为 backbone 的分割 4. deeplabv3 图像分割 4.1 问题 4.2 训练 4.3 预测 5. MAnet 图像分割...

编程日记 2023/3/11 23:58:31

[NIPS 2017] Improved Training of Wasserstein GANs (WGAN-GP)

Contents IntroductionDifficulties with weight constraintsCapacity underuseExploding and vanishing gradientsGradient penaltyReferencesIntroduction WGAN 增加了 GAN 模型训练的稳定性，但有时仍然会有生成质量不高或难以收敛的问题。作者发现上述问题经常是由 WGAN 中…...

编程日记 2023/3/11 23:57:29

力扣-每天的领导和合伙人

大家好&#xff0c;我是空空star&#xff0c;本篇带大家了解一道简单的力扣sql练习题。 文章目录前言一、题目&#xff1a;1693. 每天的领导和合伙人二、解题1.正确示范①提交SQL运行结果2.正确示范②提交SQL运行结果3.正确示范③提交SQL运行结果4.正确示范④提交SQL运行结果5.…...

编程日记 2023/3/11 23:56:26

考虑分配与合并，用GO实现GCMarkSweep

完整源码 ≧ω≦ 希望各位爸爸们&#xff0c;给我点赞吧 kokool/GCByGo: 《垃圾回收的算法与实现》有感而发 (github.com) 书接上文 我们之前不考虑分配与合并情况下&#xff0c;用GO实现GCMarkSweep&#xff08;标记清除算法&#xff09;&#xff0c;而这次我们继续回顾书本…...

编程日记 2023/3/11 23:55:25

浙江大学海宁IMBA提面经验分享

先来介绍一下我的个人情况&#xff1a;本人毕业于浙江一所普通的本科院校&#xff0c;毕业已经6年了&#xff0c;在一家互联网公司担任市场部经理。其实在参加浙大IMBA项目提面之前&#xff0c;我也参加了浙大MBA项目的提面&#xff0c;可惜只拿到了良好的结果&#xff0c;所以…...

编程日记 2023/3/11 23:54:18

Mybatis源码分析系列之第四篇：Mybatis中代理设计模型源码详解

一&#xff1a; 前言 我们尝试在前几篇文章的内容中串联起来&#xff0c;防止各位不知所云。 1&#xff1a;背景 我们基于Mybatis作为后台Orm框架进行编码的时候&#xff0c;有两种方式。 //编码方式1 UserDao userDao sqlSession.getMapper(UserDao.class); userDao.quer…...

编程日记 2023/3/11 23:53:15

JDBC的API详解

&#x1f34e;道阻且长&#xff0c;行则将至。&#x1f353; 目录 一、DriverManager 驱动管理类 1.注册驱动 2.获取数据库连接 二、Connection 数据库连接对象 1.获取执行对象 2.事务管理 三、Statement 1.执行DDL、DML语句 2.执行DQL语句 四、ResultSet 以JDBC快速…...

编程日记 2023/3/11 23:52:10

【深度强化学习】(4) Actor-Critic 模型解析，附Pytorch完整代码

大家好&#xff0c;今天和各位分享一下深度强化学习中的 Actor-Critic 演员评论家算法&#xff0c;Actor-Critic 算法是一种综合了策略迭代和价值迭代的集成算法。我将使用该模型结合 OpenAI 中的 Gym 环境完成一个小游戏&#xff0c;完整代码可以从我的 GitHub 中获得&#xf…...

编程日记 2023/3/11 23:51:09

SQL注入——文件上传

目录 一&#xff0c;mysql文件上传要点 二&#xff0c;文件上传指令 一句话木马 三&#xff0c;实例 1&#xff0c;判断注入方式 2&#xff0c;测试目标网站的闭合方式&#xff1a; 3&#xff0c;写入一句话木马 4&#xff0c;拿到控制权 一&#xff0c;mysql文件上传…...

编程日记 2023/3/11 23:50:07

【ESP32+freeRTOS学习笔记之“ESP32环境下使用freeRTOS的特性分析（新的开篇）”】

目录【ESP32freeRTOS学习笔记】系列新的开篇ESP-IDF对FreeRTOS的适配ESP-IDF环境中使用FreeRTOS的差异性简介关于FreeRTOS的配置关于ESP-IDF FreeRTOS Applications结语【ESP32freeRTOS学习笔记】系列新的开篇 ESP-IDF对FreeRTOS的适配 FreeRTOS是一个可以适用于多个不同MCU开…...

编程日记 2023/3/11 23:49:04

Uipath Excel 自动化系列18-RefreshPivotTable(刷新透视表)

活动描述 RefreshPivotTable(刷新透视表)&#xff1a;如果透视表的数据源发生变化&#xff0c;需使用刷新透视表活动&#xff0c;该活动需与Use Excel File 活动选择的 Excel 文件一起使用。 使用如下图&#xff1a; RefreshPivotTable(刷新透视表)属性 属性 作用 Display…...

编程日记 2023/3/11 23:48:01

设计模式之不变模式

在并行软件开发过程中&#xff0c;同步操作是必不可少的。当多线程对同一个对象进行读写操作时&#xff0c;为了保证对象数据的一致性和正确性&#xff0c;有必要对对象进行同步操作&#xff0c;但同步操作对系统性能有损耗。不变模式可以去除这些同步操作&#xff0c;提高并行…...

编程日记 2023/3/11 23:46:57

C++11 map

C11中Map的使用Map是c的一个标准容器&#xff0c;她提供了很好一对一的关系&#xff0c;在一些程序中建立一个map可以起到事半功倍的效果&#xff0c;总结了一些map基本简单实用的操作&#xff01;1. map最基本的构造函数&#xff1b;map<string , int >mapstring; map&l…...

编程日记 2023/3/11 23:45:54

docker基本命令 - 数据卷

作用 ● 做数据持久化。防止容器一旦停止运行&#xff0c;该容器中运行产生的数据就没了 ● 不同容器之间的数据共享(大鲸鱼背上各个小集装箱之间可以共享数据) 交互式命令使用 docker run -it -v / 宿主机的绝对路径目录:/容器内绝对路径目录 镜像名 docker run -it -v / 宿…...

编程日记 2023/3/11 23:44:52

SQL查漏补缺

有这么一道题&#xff0c;先看题目&#xff0c;表的内容如下 显示GDP比非洲任何国家都要高的国家名称(一些国家的GDP值可能为NULL)。 错误的查询&#xff1a; SELECT name FROM bbcWHERE gdp > ALL (SELECT gdp FROM bbc WHERE region Africa)正确的查询&#xff1a; SE…...

编程日记 2023/3/11 23:43:50

偏向锁撤销

偏向状态 一个对象创建时&#xff1a; 如果开启了偏向锁&#xff08;默认开启&#xff09;&#xff0c;那么对象创建后&#xff0c;markword 值为 0x05 即最后 3 位为 101&#xff0c;这时它的thread、epoch、age 都为 0。偏向锁是默认是延迟的&#xff0c;不会在程序启动时立…...

编程日记 2023/3/11 23:42:46

Qt版海康MV多相机的采集显示程序

创建对话框工程MultiCamera工程文件MultiCamera.pro#------------------------------------------------- # # Project created by QtCreator 2023-03-11T16:52:53 # #-------------------------------------------------QT core guigreaterThan(QT_MAJOR_VERSION, 4): …...

编程日记 2023/3/11 23:41:43

如何快速恢复丢失的Ren‘Py游戏源码：Unrpyc终极反编译指南

如何快速恢复丢失的RenPy游戏源码&#xff1a;Unrpyc终极反编译指南 【免费下载链接】unrpyc A renpy script decompiler 项目地址: https://gitcode.com/gh_mirrors/un/unrpyc 你是否曾经遇到过精心制作的RenPy游戏源代码意外丢失&#xff0c;只剩下编译后的.rpyc文件&…...

编程新知 2026/3/27 12:32:48

Java后端开发——真实面试汇总（持续更新）

一.浙江大学研究院一面&#xff08;面试Time&#xff1a;1小时30分钟&#xff09;1. 面试官自我介绍&#xff0c;同时我开始自我介绍2. 平时接触到哪些数据结构&#xff1f;3. ArrayList和LinkedList的主要区别是什么&#xff1f;4. 数组和链表的主要区别是什么&#xff1f;5.…...

编程新知 2026/3/27 12:16:27

【限时公开】20年农业AI工程师压箱底的17条精度校验铁律：从田间采集到模型上线零容错实践手册

第一章&#xff1a;农业图像识别精度校验的底层逻辑与行业特殊性农业图像识别并非通用计算机视觉任务的简单迁移&#xff0c;其精度校验需直面田间场景固有的复杂性&#xff1a;光照剧烈波动、作物生长阶段连续变化、病斑形态高度异质、背景杂草与土壤纹理干扰显著。这些因素共…...

编程新知 2026/3/27 11:48:09

Pixel Fashion Atelier保姆级教程：从INSERT COIN按钮到像素粒子物理引擎解析

Pixel Fashion Atelier保姆级教程&#xff1a;从INSERT COIN按钮到像素粒子物理引擎解析 1. 像素时装锻造坊简介 像素时装锻造坊是一款融合了复古游戏美学与现代AI技术的图像生成工具。它基于Stable Diffusion和Anything-v5模型构建&#xff0c;专为时尚设计和像素艺术创作而…...

编程新知 2026/3/27 10:55:51

Cursor最新版0.44.11配置DeepSeek-R1模型保姆级教程（含报错解决方案）

Cursor 0.44.11深度适配DeepSeek-R1模型全流程指南 当技术爱好者第一次在Cursor中尝试调用DeepSeek-R1模型时&#xff0c;往往会遇到各种"水土不服"的情况。就像刚拿到新相机的摄影师需要调整镜头焦距一样&#xff0c;我们需要对Cursor进行精确配置才能充分发挥这个强…...

编程新知 2026/3/27 10:27:44

深入剖析YOLOv8核心模块：从架构设计到实战应用全解析

1. YOLOv8架构设计揭秘 YOLOv8作为目标检测领域的标杆模型&#xff0c;其架构设计处处体现着工程师的巧思。我第一次拆解它的代码时&#xff0c;最惊艳的是它的模块化设计——就像搭积木一样&#xff0c;每个组件都能灵活替换。核心的Backbone部分采用CSPDarknet53结构&#xf…...

编程新知 2026/3/27 9:55:19

SecGPT-14B案例分享：某能源企业OT网络异常通信行为识别过程

SecGPT-14B案例分享&#xff1a;某能源企业OT网络异常通信行为识别过程 1. 引言&#xff1a;当能源网络遭遇“隐形”威胁 想象一下&#xff0c;一家大型能源企业的工业控制系统&#xff08;OT网络&#xff09;正在平稳运行&#xff0c;控制着发电、输电的关键设备。突然&…...

编程新知 2026/3/27 7:56:17

League-Toolkit：提升英雄联盟游戏体验的开源工具集

League-Toolkit&#xff1a;提升英雄联盟游戏体验的开源工具集 【免费下载链接】League-Toolkit 兴趣使然的、简单易用的英雄联盟工具集。支持战绩查询、自动秒选等功能。基于 LCU API。 项目地址: https://gitcode.com/gh_mirrors/le/League-Toolkit League-Toolkit是基…...

编程新知 2026/3/27 5:08:43

AI显微镜-Swin2SR基础教程：理解‘细节重构技术’对AI生成图的价值

AI显微镜-Swin2SR基础教程&#xff1a;理解‘细节重构技术’对AI生成图的价值 1. 从模糊到高清&#xff1a;AI超分的革命性突破 你是否曾经遇到过这样的情况&#xff1a;AI生成了一张很有创意的图片&#xff0c;但分辨率太低&#xff0c;放大后全是马赛克&#xff1b;或者找到…...

编程新知 2026/3/27 4:52:11

如何实现精准歌词同步？KRC格式全解析与应用实践

如何实现精准歌词同步&#xff1f;KRC格式全解析与应用实践 【免费下载链接】KuGouMusicApi 酷狗音乐 Node.js API service 项目地址: https://gitcode.com/gh_mirrors/ku/KuGouMusicApi 在音乐应用开发中&#xff0c;歌词显示功能看似简单&#xff0c;实则隐藏着诸多技…...

编程新知 2026/3/27 4:29:58