javaEE 初阶 — CSS 的 基本语法 与 引入方式
文章目录
- 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 的基本语法规范是由 选择器 和 若干个声明 组成的。 选择器选中一个元素之后，这些属性都是针对于这个元素展开的。 先来看一个没有 CSS 的效果。 <body><p>这是一个段落</p> </bo…...
QEMU启动ARM32 Linux内核
目录前言前置知识ARM Versatile Express开发板简介ARM处理器家族简介安装qemu-system-arm安装交叉编译工具交叉编译ARM32 Linux内核交叉编译ARM32 Busybox使用busybox制作initramfs使用QEMU启动ARM32 Linux内核模拟vexpress-a9开发板模拟vexpress-a15开发板参考前言 本文介绍采…...
than的用法合集
首先需要了解一下than的词性，其有两个词性，一个是介词，一个是连词。 介词后面一定要接上名词性的词语，比如 i am taller then him 我比我的老师高 连词就比较自由，一般用来连接两个句子；但是使用than连词词…...
)
Unet 基于TCGA颅脑肿瘤MRI分割(高阶API分割模型)
目录 1. 介绍 2. dice 指标 3. resnet34 作为 backbone 的分割 4. deeplabv3 图像分割 4.1 问题 4.2 训练 4.3 预测 5. MAnet 图像分割...
[NIPS 2017] Improved Training of Wasserstein GANs (WGAN-GP)
Contents IntroductionDifficulties with weight constraintsCapacity underuseExploding and vanishing gradientsGradient penaltyReferencesIntroduction WGAN 增加了 GAN 模型训练的稳定性，但有时仍然会有生成质量不高或难以收敛的问题。作者发现上述问题经常是由 WGAN 中…...
力扣-每天的领导和合伙人
大家好，我是空空star，本篇带大家了解一道简单的力扣sql练习题。 文章目录前言一、题目：1693. 每天的领导和合伙人二、解题1.正确示范①提交SQL运行结果2.正确示范②提交SQL运行结果3.正确示范③提交SQL运行结果4.正确示范④提交SQL运行结果5.…...
考虑分配与合并，用GO实现GCMarkSweep
完整源码 ≧ω≦ 希望各位爸爸们，给我点赞吧 kokool/GCByGo: 《垃圾回收的算法与实现》有感而发 (github.com) 书接上文 我们之前不考虑分配与合并情况下，用GO实现GCMarkSweep（标记清除算法），而这次我们继续回顾书本…...
浙江大学海宁IMBA提面经验分享
先来介绍一下我的个人情况：本人毕业于浙江一所普通的本科院校，毕业已经6年了，在一家互联网公司担任市场部经理。其实在参加浙大IMBA项目提面之前，我也参加了浙大MBA项目的提面，可惜只拿到了良好的结果，所以…...
Mybatis源码分析系列之第四篇：Mybatis中代理设计模型源码详解
一： 前言 我们尝试在前几篇文章的内容中串联起来，防止各位不知所云。 1：背景 我们基于Mybatis作为后台Orm框架进行编码的时候，有两种方式。 //编码方式1 UserDao userDao sqlSession.getMapper(UserDao.class); userDao.quer…...
JDBC的API详解
🍎道阻且长，行则将至。🍓 目录 一、DriverManager 驱动管理类 1.注册驱动 2.获取数据库连接 二、Connection 数据库连接对象 1.获取执行对象 2.事务管理 三、Statement 1.执行DDL、DML语句 2.执行DQL语句 四、ResultSet 以JDBC快速…...
【深度强化学习】(4) Actor-Critic 模型解析，附Pytorch完整代码
大家好，今天和各位分享一下深度强化学习中的 Actor-Critic 演员评论家算法，Actor-Critic 算法是一种综合了策略迭代和价值迭代的集成算法。我将使用该模型结合 OpenAI 中的 Gym 环境完成一个小游戏，完整代码可以从我的 GitHub 中获得…...
SQL注入——文件上传
目录 一，mysql文件上传要点 二，文件上传指令 一句话木马 三，实例 1，判断注入方式 2，测试目标网站的闭合方式： 3，写入一句话木马 4，拿到控制权 一，mysql文件上传…...
【ESP32+freeRTOS学习笔记之“ESP32环境下使用freeRTOS的特性分析（新的开篇）”】
目录【ESP32freeRTOS学习笔记】系列新的开篇ESP-IDF对FreeRTOS的适配ESP-IDF环境中使用FreeRTOS的差异性简介关于FreeRTOS的配置关于ESP-IDF FreeRTOS Applications结语【ESP32freeRTOS学习笔记】系列新的开篇 ESP-IDF对FreeRTOS的适配 FreeRTOS是一个可以适用于多个不同MCU开…...
Uipath Excel 自动化系列18-RefreshPivotTable(刷新透视表)
活动描述 RefreshPivotTable(刷新透视表)：如果透视表的数据源发生变化，需使用刷新透视表活动，该活动需与Use Excel File 活动选择的 Excel 文件一起使用。 使用如下图： RefreshPivotTable(刷新透视表)属性 属性 作用 Display…...
设计模式之不变模式
在并行软件开发过程中，同步操作是必不可少的。当多线程对同一个对象进行读写操作时，为了保证对象数据的一致性和正确性，有必要对对象进行同步操作，但同步操作对系统性能有损耗。不变模式可以去除这些同步操作，提高并行…...
C++11 map
C11中Map的使用Map是c的一个标准容器，她提供了很好一对一的关系，在一些程序中建立一个map可以起到事半功倍的效果，总结了一些map基本简单实用的操作！1. map最基本的构造函数；map<string , int >mapstring; map&l…...
docker基本命令 - 数据卷
作用 ● 做数据持久化。防止容器一旦停止运行，该容器中运行产生的数据就没了 ● 不同容器之间的数据共享(大鲸鱼背上各个小集装箱之间可以共享数据) 交互式命令使用 docker run -it -v / 宿主机的绝对路径目录:/容器内绝对路径目录 镜像名 docker run -it -v / 宿…...
SQL查漏补缺
有这么一道题，先看题目，表的内容如下 显示GDP比非洲任何国家都要高的国家名称(一些国家的GDP值可能为NULL)。 错误的查询： SELECT name FROM bbcWHERE gdp > ALL (SELECT gdp FROM bbc WHERE region Africa)正确的查询： SE…...
偏向锁撤销
偏向状态 一个对象创建时： 如果开启了偏向锁（默认开启），那么对象创建后，markword 值为 0x05 即最后 3 位为 101，这时它的thread、epoch、age 都为 0。偏向锁是默认是延迟的，不会在程序启动时立…...
Qt版海康MV多相机的采集显示程序
创建对话框工程MultiCamera工程文件MultiCamera.pro#------------------------------------------------- # # Project created by QtCreator 2023-03-11T16:52:53 # #-------------------------------------------------QT core guigreaterThan(QT_MAJOR_VERSION, 4): …...
TDengine 快速体验（Docker 镜像方式）
简介 TDengine 可以通过安装包、Docker 镜像 及云服务快速体验 TDengine 的功能，本节首先介绍如何通过 Docker 快速体验 TDengine，然后介绍如何在 Docker 环境下体验 TDengine 的写入和查询功能。如果你不熟悉 Docker，请使用 安装包的方式快…...
selenium学习实战【Python爬虫】
selenium学习实战【Python爬虫】 文章目录 selenium学习实战【Python爬虫】一、声明二、学习目标三、安装依赖3.1 安装selenium库3.2 安装浏览器驱动3.2.1 查看Edge版本3.2.2 驱动安装 四、代码讲解4.1 配置浏览器4.2 加载更多4.3 寻找内容4.4 完整代码 五、报告文件爬取5.1 提…...
短视频矩阵系统文案创作功能开发实践，定制化开发
在短视频行业迅猛发展的当下，企业和个人创作者为了扩大影响力、提升传播效果，纷纷采用短视频矩阵运营策略，同时管理多个平台、多个账号的内容发布。然而，频繁的文案创作需求让运营者疲于应对，如何高效产出高质量文案成…...
与常用工具深度洞察App瓶颈)
iOS性能调优实战：借助克魔(KeyMob)与常用工具深度洞察App瓶颈
在日常iOS开发过程中，性能问题往往是最令人头疼的一类Bug。尤其是在App上线前的压测阶段或是处理用户反馈的高发期，开发者往往需要面对卡顿、崩溃、能耗异常、日志混乱等一系列问题。这些问题表面上看似偶发，但背后往往隐藏着系统资源调度不当…...
JS手写代码篇----使用Promise封装AJAX请求
15、使用Promise封装AJAX请求 promise就有reject和resolve了，就不必写成功和失败的回调函数了 const BASEURL ./手写ajax/test.jsonfunction promiseAjax() {return new Promise((resolve, reject) > {const xhr new XMLHttpRequest();xhr.open("get&quo…...
uniapp手机号一键登录保姆级教程（包含前端和后端）
目录 前置条件创建uniapp项目并关联uniClound云空间开启一键登录模块并开通一键登录服务编写云函数并上传部署获取手机号流程(第一种) 前端直接调用云函数获取手机号（第三种）后台调用云函数获取手机号 错误码常见问题 前置条件 手机安装有sim卡手机开启…...
Python Einops库：深度学习中的张量操作革命
Einops（爱因斯坦操作库）就像给张量操作戴上了一副"语义眼镜"——让你用人类能理解的方式告诉计算机如何操作多维数组。这个基于爱因斯坦求和约定的库，用类似自然语言的表达式替代了晦涩的API调用，彻底改变了深度学习工程…...
Proxmox Mail Gateway安装指南：从零开始配置高效邮件过滤系统
💝💝💝欢迎莅临我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。 推荐：「storms…...
LangChain 中的文档加载器（Loader）与文本切分器（Splitter）详解《二》
🧠 LangChain 中 TextSplitter 的使用详解：从基础到进阶（附代码） 一、前言 在处理大规模文本数据时，特别是在构建知识库或进行大模型训练与推理时，文本切分（Text Splitting） 是一个…...
自定义线程池1.2
自定义线程池 1.2 1. 简介 上次我们实现了 1.1 版本，将线程池中的线程数量交给使用者决定，并且将线程的创建延迟到任务提交的时候，在本文中我们将对这个版本进行如下的优化： 在新建线程时交给线程一个任务。让线程在某种情况下…...