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

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

news 2026/2/8 7:36:06

文章目录

  • 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

HTML 语义化

目录 HTML 语义化HTML5 新特性HTML 语义化的好处语义化标签的使用场景最佳实践 HTML 语义化 HTML5 新特性 标准答案&#xff1a; 语义化标签&#xff1a; <header>&#xff1a;页头<nav>&#xff1a;导航<main>&#xff1a;主要内容<article>&#x…...

编程新知 2026/1/15 21:24:41

linux之kylin系统nginx的安装

一、nginx的作用 1.可做高性能的web服务器 直接处理静态资源&#xff08;HTML/CSS/图片等&#xff09;&#xff0c;响应速度远超传统服务器类似apache支持高并发连接 2.反向代理服务器 隐藏后端服务器IP地址&#xff0c;提高安全性 3.负载均衡服务器 支持多种策略分发流量…...

编程新知 2026/1/18 3:11:35

MySQL 隔离级别：脏读、幻读及不可重复读的原理与示例

一、MySQL 隔离级别 MySQL 提供了四种隔离级别，用于控制事务之间的并发访问以及数据的可见性，不同隔离级别对脏读、幻读、不可重复读这几种并发数据问题有着不同的处理方式，具体如下： 隔离级别脏读不可重复读幻读性能特点及锁机制读未提交（READ UNCOMMITTED）允许出现允许…...

编程新知 2025/9/16 21:01:58

Auto-Coder使用GPT-4o完成：在用TabPFN这个模型构建一个预测未来3天涨跌的分类任务

通过akshare库&#xff0c;获取股票数据&#xff0c;并生成TabPFN这个模型 可以识别、处理的格式&#xff0c;写一个完整的预处理示例&#xff0c;并构建一个预测未来 3 天股价涨跌的分类任务 用TabPFN这个模型构建一个预测未来 3 天股价涨跌的分类任务&#xff0c;进行预测并输…...

编程新知 2025/9/20 4:34:47

Cinnamon修改面板小工具图标

Cinnamon开始菜单-CSDN博客 设置模块都是做好的&#xff0c;比GNOME简单得多&#xff01; 在 applet.js 里增加 const Settings imports.ui.settings;this.settings new Settings.AppletSettings(this, HTYMenusonichy, instance_id); this.settings.bind(menu-icon, menu…...

编程新知 2026/1/31 14:56:22

C++ 基础特性深度解析

目录 引言 一、命名空间&#xff08;namespace&#xff09; C 中的命名空间​ 与 C 语言的对比​ 二、缺省参数​ C 中的缺省参数​ 与 C 语言的对比​ 三、引用&#xff08;reference&#xff09;​ C 中的引用​ 与 C 语言的对比​ 四、inline&#xff08;内联函数…...

编程新知 2026/1/15 4:25:16

MySQL 8.0 OCP 英文题库解析（十三）

Oracle 为庆祝 MySQL 30 周年&#xff0c;截止到 2025.07.31 之前。所有人均可以免费考取原价245美元的MySQL OCP 认证。 从今天开始&#xff0c;将英文题库免费公布出来&#xff0c;并进行解析&#xff0c;帮助大家在一个月之内轻松通过OCP认证。 本期公布试题111~120 试题1…...

编程新知 2026/1/31 7:25:57

Android第十三次面试总结（四大 组件基础）

Activity生命周期和四大启动模式详解 一、Activity 生命周期 Activity 的生命周期由一系列回调方法组成&#xff0c;用于管理其创建、可见性、焦点和销毁过程。以下是核心方法及其调用时机&#xff1a; ​onCreate()​​ ​调用时机​&#xff1a;Activity 首次创建时调用。​…...

编程新知 2025/10/15 15:07:34

短视频矩阵系统文案创作功能开发实践，定制化开发

在短视频行业迅猛发展的当下&#xff0c;企业和个人创作者为了扩大影响力、提升传播效果&#xff0c;纷纷采用短视频矩阵运营策略&#xff0c;同时管理多个平台、多个账号的内容发布。然而&#xff0c;频繁的文案创作需求让运营者疲于应对&#xff0c;如何高效产出高质量文案成…...

编程新知 2026/2/1 8:24:29

职坐标物联网全栈开发全流程解析

物联网全栈开发涵盖从物理设备到上层应用的完整技术链路&#xff0c;其核心流程可归纳为四大模块&#xff1a;感知层数据采集、网络层协议交互、平台层资源管理及应用层功能实现。每个模块的技术选型与实现方式直接影响系统性能与扩展性&#xff0c;例如传感器选型需平衡精度与…...

编程新知 2026/2/7 1:11:29