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

初识CSS,美化HTML

CSS称为:层叠样式表(Cascading style sheets)

美化HTML即给页面种的HTML标签设置样式

CSS语法规则

css要写在head标签的里边,title标签的下面,用style标签框住

<head>
<title>...</title>
<style>
...
<style>
</head>

在style的书写格式为选择器+大括号

选择器:选择你要改变的那个标签的名称,例如<p></p>标签就写成

<style>p {color: red;}
</style>

上面的代码第三行叫做css属性,color是属性名,red是属性值,在语句结束末尾一定要加分号";"

<head><title>Document</title><style>/* css注释 *//* 在这里写css *//* 选择器{css属性} */p {color: red;/* px是像素 */font-size: 30px;/* 背景色 */background-color: blue;width: 300px;height: 300px;}</style>
</head>

显示效果如上图

CSS引入方式

  • 内嵌式

CSS写在style标签中,style标签虽然可以写在页面任意位置,但是通常约定写在head标签中

  • 外联式

CSS写在一个单独的.css文件中

需要通过link标签在网页中引入

  • 行内式

写在标签的style属性中(可配合js使用)

外联式

下面我们看看怎样用link标签把css引入html中

1.先创建一个html文件,用p标签试验一下,这是引入前的样式

2.创建一个css文件

我这里命名为“引入”,文件后缀一定要是.css

3.然后我们要美化html里的p标签,就返回到我们的html代码中,输入link(一般还是在title底下写)

<!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>Document</title><!-- stylesheet:关系为样式表 href为路径,同级目录我们只需./就能找到了 --><link rel="stylesheet" href="./引入.css">
</head>
<body><p>引入css</p>
</body>
</html>

然后看一下此时html显示的效果

可以看见.css文件已经被成功引用,改变了p标签的字体

行内式

在标签内添加style,以div标签为例,添加颜色和字号

<!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>Document</title><!-- stylesheet:关系为样式表 href为路径,同级目录我们只需./就能找到了 --><link rel="stylesheet" href="./引入.css">
</head>
<body><p>引入css</p><div style="color: rebeccapurple; font-size: 30px;">这是个div标签</div>
</body>
</html>

效果图

行内式有一个局限性,就是只能控制一个标签

这三种引用方式区分特点和使用场景

引用方式

书写位置

作用范围

使用场景

内嵌式

CSS写在style标签中

当前页面

小案例

外联式

CSS写在单独的css文件中,通过link标签引入

多个页面

项目中

行内式

CSS写在标签的style属性中

当前标签

配合js使用

相关文章:

初识CSS,美化HTML

CSS称为&#xff1a;层叠样式表&#xff08;Cascading style sheets&#xff09;美化HTML即给页面种的HTML标签设置样式CSS语法规则css要写在head标签的里边&#xff0c;title标签的下面&#xff0c;用style标签框住<head> <title>...</title> <style>…...

华为OD机试 - 二维矩阵的最大值(Python)

题目二维矩阵的最大值 给定一个仅包含0和1的n*n二维矩阵 请计算二维矩阵的最大值 计算规则如下 每行元素按下标顺序组成一个二进制数(下标越大约排在低位), 二进制数的值就是该行的值,矩阵各行之和为矩阵的值允许通过向左或向右整体循环移动每个元素来改变元素在行中的位置 …...

华为OD机试 - 快递业务站(Python)

快递业务站 题目 快递业务范围有 N 个站点,A 站点与 B 站点可以中转快递,则认为 A-B 站可达, 如果 A-B 可达,B-C 可达,则 A-C 可达。 现在给 N 个站点编号 0、1、…n-1,用 s[i][j]表示 i-j 是否可达, s[i][j] = 1表示 i-j可达,s[i][j] = 0表示 i-j 不可达。 现用二维…...

百度沈抖:文心一言将通过百度智能云对外提供服务

2月17日&#xff0c;在2023 AI工业互联网高峰论坛上&#xff0c;百度智能云宣布“文心一言”将通过百度智能云对外提供服务&#xff0c;为产业带来AI普惠。 百度集团执行副总裁、百度智能云事业群总裁沈抖表示&#xff0c;“文心一言”是基于百度智能云技术打造出来的大模型&a…...

cmd 窗口、记事本打开后一片空白且几秒钟后闪退的问题解决方案汇总

前言 前段时间&#xff0c;电脑忽然出现了问题&#xff0c;首先是通过 微软应用商店 Microsoft Store 下载安装的 Snipaste 截图软件崩溃&#xff0c;不过将其卸载后&#xff0c;通过电脑管家下载后又可以正常使用了。 之后就是突然发现&#xff0c;记事本文本文档不能使用了…...

Linux 安装 SNMP服务

从安装盘IOS中导入安装SNMP. --挂载系统安装盘 [rootnb /]# mount -o loop -t iso9660 /software/radhat.iso /media mount: /dev/loop0 is write-protected, mounting read-only --导入安装包 [rootnb /]# rm -f /etc/yum.repos.d/*.repo [rootnbubackup /]# cat >/etc/yu…...

华为OD机试 - 滑动窗口最大和(Python)

滑动窗口最大和 有一个N个整数的数组,和一个长度为M的窗口。 窗口从数组内的第一个数开始滑动,直到窗口不能滑动为止。 每次滑动产生一个窗口,和窗口内所有数的和, 求窗口滑动产生的所有窗口和的最大值 输入 第一行输入一个正整数N,表示整数个数0 < N < 100000 …...

用Nacos搭建微服务操作

Nacos服务搭建 我们首先在Nacos的GitHub中下载相关的安装文件。https://github.com/alibaba/nacos/releases 但是因为服务器在国外&#xff0c;所以我们直接给大家提供了对应的安装文件。直接解压缩到非中文的目录下&#xff0c;然后启动即可 服务访问的地址是&#xff1a;htt…...

ChatGPT模型采样算法详解

ChatGPT模型采样算法详解 ChatGPT所使用的模型——GPT&#xff08;Generative Pre-trained Transformer&#xff09;模型有几个参数&#xff0c;理解它们对文本生成任务至关重要。其中最重要的一组参数是temperature和top_p。二者控制两种不同的采样技术&#xff0c;用于因果…...

【Unity3d】Unity与iOS通信

在unity开发或者sdk开发经常需要用到unity与oc之间进行交互&#xff0c;这里把它们之间通信代码整理出来。 Unity调用Objective-C 主要分三个步骤&#xff1a; (一)、在xcode中定义要被unity调用的函数 新建一个类&#xff0c;名字可以任意&#xff0c;比如UnityBridge&…...

RDD的持久化【博学谷学习记录】

RDD的缓存缓存: 一般当一个RDD的计算非常的耗时|昂贵(计算规则比较复杂),或者说这个RDD需要被重复(多方)使用,此时可以将这个RDD计算完的结果缓存起来, 便于后续的使用, 从而提升效率通过缓存也可以提升RDD的容错能力, 当后续计算失败后, 尽量不让RDD进行回溯所有的依赖链条, 从…...

Python3 正则表达式

Python3 正则表达式 正则表达式是一个特殊的字符序列&#xff0c;它能帮助你方便的检查一个字符串是否与某种模式匹配。 Python 自1.5版本起增加了re 模块&#xff0c;它提供 Perl 风格的正则表达式模式。 re 模块使 Python 语言拥有全部的正则表达式功能。 compile 函数根…...

Qt-基础

Qt1. 概念其他概念对话框模态对话框与非模态对话框事件事件拦截/过滤事件例子鼠标/屏幕使用界面功能qt-designer工具debug目录结构mainwindow控件窗口QMainWindow事件2. 项目概览QOBJECT tree 对象树3. 信号和槽信号函数关联自定义信号和槽函数自定义信号和槽函数1自定义信号和…...

ABB机器人将实时坐标发送给西门子PLC的具体方法示例

ABB机器人将实时坐标发送给西门子PLC的具体方法示例 本次以PROFINET通信为例进行说明,演示ABB机器人将实时坐标发送给西门子PLC的具体方法。 首先,要保证ABB机器人和PLC的信号地址分配已经完成,具体的内容可参考以下链接: S7-1200PLC与ABB机器人进行PROFINET通信的具体方法…...

反向传播与梯度下降详解

一,前向传播与反向传播 1.1,神经网络训练过程 神经网络训练过程是: 先通过随机参数“猜“一个结果(模型前向传播过程),这里称为预测结果 a a a;然后计算 a a a 与样本标签值...

Skywalking ui页面功能介绍

菜单栏 仪表盘&#xff1a;查看被监控服务的运行状态&#xff1b; 拓扑图&#xff1a;以拓扑图的方式展现服务之间的关系&#xff0c;并以此为入口查看相关信息&#xff1b; 追踪&#xff1a;以接口列表的方式展现&#xff0c;追踪接口内部调用过程&#xff1b; 性能剖析&am…...

哪里可以找到免费的 PDF 阅读编辑器?7 个免费 PDF 阅读编辑器分享

如果您曾经需要编辑 PDF&#xff0c;您可能会发现很难找到免费的 PDF 编辑器。幸运的是&#xff0c;您可以使用在线资源来编辑该文档&#xff0c;而无需为软件付费。 在本文中&#xff0c;我将介绍七种不同的 PDF 编辑器&#xff0c;它们至少可以让您免费编辑几个文件。我通过…...

使用梯度下降的线性回归(Matlab代码实现)

目录 &#x1f4a5;1 概述 &#x1f4da;2 运行结果 &#x1f389;3 参考文献 &#x1f468;‍&#x1f4bb;4 Matlab代码 &#x1f4a5;1 概述 梯度下降法&#xff0c;是一种基于搜索的最优化方法&#xff0c;最用是最小化一个损失函数。梯度下降是迭代法的一种,可以用于求…...

在Ubuntu上设置MySQL可以远程登录

在Ubuntu上设置MySQL可以远程登录一.设置数据库二.设置防火墙由于Ubuntu查看修改MySQL不是很方便&#xff0c;想着在虚拟机安装的Windows系统或者局域网中的其他电脑上去查看Ubuntu系统上的数据库&#xff0c;这样省事一些&#xff0c;我电脑安装的数据库是MySQL8。一.设置数据…...

清风1.层次分析法

一.流程1.建立评价体系2.建立判断矩阵2.1 A-C-C矩阵从准则层对目标层的特征向量上看&#xff0c;花费的权重最大算术平均法求权重的结果为&#xff1a;0.26230.47440.05450.09850.1103几何平均法求权重的结果为&#xff1a;0.26360.47730.05310.09880.1072特征值法求权重的结果…...

「首席架构师推荐」免费数据可视化软件你喜欢哪一个?

数据可视化&#xff0c;是关于数据视觉表现形式的科学技术研究。其中&#xff0c;这种数据的视觉表现形式被定义为&#xff0c;一种以某种概要形式抽提出来的信息&#xff0c;包括相应信息单位的各种属性和变量。它是一个处于不断演变之中的概念&#xff0c;其边界在不断地扩大…...

深度学习术语解释:backbone、head、neck,etc

backbone&#xff1a;翻译为主干网络的意思&#xff0c;既然说是主干网络&#xff0c;就代表其是网络的一部分&#xff0c;那么是哪部分呢&#xff1f;这个主干网络大多时候指的是提取特征的网络&#xff0c;其作用就是提取图片中的信息&#xff0c;共后面的网络使用。这些网络…...

基础篇—CSS margin(外边距)解析

什么是CSS margin(外边距)? CSS margin(外边距)属性定义元素周围的空间。 属性描述margin简写属性。在一个声明中设置所有外边距属性。margin-bottom设置元素的下外边距。margin-left设置元素的左外边距。margin-right设置元素的右外边距。margin-top设置元素的上外边距。mar…...

ChatGPT或将引发新一轮失业潮?是真的吗?

最近&#xff0c;要说有什么热度不减的话题&#xff0c;那ChatGPT必然榜上有名。据悉是这是由美国人工智能研究实验室OpenAI开发的一种全新聊天机器人模型&#xff0c;它能够通过学习和理解人类的语言来进行对话&#xff0c;还能根据聊天的上下文进行互动&#xff0c;并协助人类…...

【Selenium学习】Selenium 中特殊元素操作

1.鼠标定位操作鼠标悬停&#xff0c;即当光标与其名称表示的元素重叠时触发的事件&#xff0c;在 Selenium 中将键盘鼠标操作封装在 Action Chains 类中。Action Chains 类的主要应用场景为单击鼠标、双击鼠标、鼠标拖曳等。部分常用的方法使用分类如下&#xff1a;• click(on…...

Spark相关的依赖冲突,后期持续更新总结

Spark相关的依赖冲突持续更新总结 Spark-Hive_2.11依赖报错 这个依赖是Spark开启支持hive SQL解析&#xff0c;其中2.11是Spark对应的Scala版本&#xff0c;如Spark2.4.7&#xff0c;对应的Scala版本是2.11.12&#xff1b;这个依赖会由于Spark内部调用的依赖guava的版本问题出…...

【每日一题Day122】LC1237找出给定方程的正整数解 | 双指针 二分查找

找出给定方程的正整数解【LC1237】 给你一个函数 f(x, y) 和一个目标结果 z&#xff0c;函数公式未知&#xff0c;请你计算方程 f(x,y) z 所有可能的正整数 数对 x 和 y。满足条件的结果数对可以按任意顺序返回。 尽管函数的具体式子未知&#xff0c;但它是单调递增函数&#…...

笔记本加装固态和内存条教程(超详细)

由于笔记本是几年前买的了&#xff0c;当时是4000&#xff0c;现在用起来感到卡顿&#xff0c;启动、运行速度特别慢&#xff0c;就决定换个固态硬盘&#xff0c;加个内存条&#xff0c;再给笔记本续命几年。先说一下加固态硬盘SSD的好处&#xff1a;1.启动快 2.读取延迟小 3.写…...

【Python】字典 - Dictionary

字典 - Dictionarykeys()values()items()get()获取文件中指定字符的个数进阶版&#xff1a;获取所有单词的频数进阶版&#xff1a;获取所有字符的频数函数内容keys()输出字典中的所有键values()输出字典中的所有值items()以元组的形式输出键值对get()获取字典中指定键的值 keys…...

LeetCode分类刷题----二叉树

二叉树1.二叉树的递归遍历144.二叉树的前序遍历145.二叉树的后序遍历94.二叉树的中序遍历2.二叉树的迭代遍历144.二叉树的前序遍历145.二叉树的后序遍历94.二叉树的中序遍历3.二叉树的层序遍历102.二叉树的层序遍历107.二叉树的层序遍历||199.二叉树的右视图637.二叉树的层平均…...

可以做兼职翻译的网站/预测2025年网络营销的发展

项目托管平台地址:https://gitee.com/w789369/YingWenCiPinJianCe/blob/master/text.py 功能测试:统计单词 功能,测试方法: def getstr(word,count,allwordnum):countstrword--------str(count)--------str(allwordnum)其他补充说明: 还在完善中。。。。转载于:https://www.cnb…...

做游戏直播什么游戏视频网站好/2023年5月份病毒感染情况

整理一下python的基本概念和知识, 主要用python3为语法标准. python介绍 一种面向对象的解释性计算机设计语言&#xff0c;具有丰富和强大的库。 python定位&#xff1a;“优雅”、“明确”、“简单”多种应用场景&#xff1a;可以写工具&#xff0c;后台服务&#xff0c;移动端…...

上海做网站费用/域名注册 阿里云

到mysql官网https://dev.mysql.com/downloads/mysql/下下载mysql编译好的二进制安装包&#xff0c;在下载页面Select Platform:选项选择linux-generic&#xff0c;然后把页面拉到底部&#xff0c;64位系统下载Linux - Generic (glibc 2.5) (x86, 64-bit)&#xff0c;32位系统下…...

wordpress 小工具天气/网站搭建服务

3.0之后推荐用actionbar&#xff0c;Menu已经过时但是我们还是了解一下吧&#xff0c;Menu学习在java语句中添加menu组件 重写onCreateOptionsMenu(Menu menu)方法Overridepublic boolean onCreateOptionsMenu(Menu menu) {MenuItem menuItem1 menu.add(100, 100, 1, "系…...

做的新网站能用多久/北京seo推广系统

我们接着上次的内容讲解,首先这次把smarty定界符改了:$tpl->left_delimiter "<!--{";//左定界符 $tpl->right_delimiter "}-->";//右定界符2.变量下面是通过php赋值(assign)方式分配值: 1.)简单变量通过$smarty->assign(name,xcf007);分…...

新手建站教程视频/电子商务网站

一、抽象工厂模式简介&#xff08;Bref Introduction&#xff09; 抽象工厂模式&#xff08;Abstract Factory Pattern&#xff09;&#xff0c;提供一个创建一系列相关或者相互依赖对象的接口&#xff0c;而无需制定他们的具体类。优点是&#xff1a;易于交换产品系列&#xf…...