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): …...
基于大模型的 UI 自动化系统
基于大模型的 UI 自动化系统 下面是一个完整的 Python 系统，利用大模型实现智能 UI 自动化，结合计算机视觉和自然语言处理技术，实现"看屏操作"的能力。 系统架构设计 #mermaid-svg-2gn2GRvh5WCP2ktF {font-family:"trebuchet ms",verdana,arial,sans-…...
Xshell远程连接Kali（默认 | 私钥）Note版
前言:xshell远程连接，私钥连接和常规默认连接 任务一 开启ssh服务 service ssh status //查看ssh服务状态 service ssh start //开启ssh服务 update-rc.d ssh enable //开启自启动ssh服务 任务二 修改配置文件 vi /etc/ssh/ssh_config //第一…...
8k长序列建模，蛋白质语言模型Prot42仅利用目标蛋白序列即可生成高亲和力结合剂
蛋白质结合剂（如抗体、抑制肽）在疾病诊断、成像分析及靶向药物递送等关键场景中发挥着不可替代的作用。传统上，高特异性蛋白质结合剂的开发高度依赖噬菌体展示、定向进化等实验技术，但这类方法普遍面临资源消耗巨大、研发周期冗长…...
Python爬虫（一）：爬虫伪装
一、网站防爬机制概述 在当今互联网环境中，具有一定规模或盈利性质的网站几乎都实施了各种防爬措施。这些措施主要分为两大类： 身份验证机制：直接将未经授权的爬虫阻挡在外反爬技术体系：通过各种技术手段增加爬虫获取数据的难度…...
关于 WASM：1. WASM 基础原理
一、WASM 简介 1.1 WebAssembly 是什么？ WebAssembly（WASM） 是一种能在现代浏览器中高效运行的二进制指令格式，它不是传统的编程语言，而是一种 低级字节码格式，可由高级语言（如 C、C、Rust&am…...
ip子接口配置及删除
配置永久生效的子接口，2个IP 都可以登录你这一台服务器。重启不失效。 永久的 [应用] vi /etc/sysconfig/network-scripts/ifcfg-eth0修改文件内内容 TYPE"Ethernet" BOOTPROTO"none" NAME"eth0" DEVICE"eth0" ONBOOT&q…...
Docker 本地安装 mysql 数据库
Docker: Accelerated Container Application Development 下载对应操作系统版本的 docker ；并安装。 基础操作不再赘述。 打开 macOS 终端，开始 docker 安装mysql之旅 第一步 docker search mysql 》〉docker search mysql NAME DE…...
基于TurtleBot3在Gazebo地图实现机器人远程控制
1. TurtleBot3环境配置 # 下载TurtleBot3核心包 mkdir -p ~/catkin_ws/src cd ~/catkin_ws/src git clone -b noetic-devel https://github.com/ROBOTIS-GIT/turtlebot3.git git clone -b noetic https://github.com/ROBOTIS-GIT/turtlebot3_msgs.git git clone -b noetic-dev…...
使用LangGraph和LangSmith构建多智能体人工智能系统
现在，通过组合几个较小的子智能体来创建一个强大的人工智能智能体正成为一种趋势。但这也带来了一些挑战，比如减少幻觉、管理对话流程、在测试期间留意智能体的工作方式、允许人工介入以及评估其性能。你需要进行大量的反复试验。 在这篇博客〔原作者&a…...
打手机检测算法AI智能分析网关V4守护公共/工业/医疗等多场景安全应用
一、方案背景 在现代生产与生活场景中，如工厂高危作业区、医院手术室、公共场景等，人员违规打手机的行为潜藏着巨大风险。传统依靠人工巡查的监管方式，存在效率低、覆盖面不足、判断主观性强等问题，难以满足对人员打手机行为精…...