css书写方式

news2024/11/25 22:25:12

目录标题

    • 一、css是什么?
    • 二、css的书写方式
      • 1、行内样式【不推荐使用,太固定】
      • 2、页面样式(又叫内联样式)
      • 3、外联样式【店家推荐】
      • 4、import与link标签的区别

一、css是什么?

css(cascade style sheet)是用来装饰和装扮页面的。

二、css的书写方式

1、行内样式【不推荐使用,太固定】

它写在html代码里面的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css书写方式</title>
</head>
<body>
    <div style="color:red;font-size: 30px;">这里是</div>
    <!--样式颜色为红色,字体大小为30像素  -->
</body>
</html>

在这里插入图片描述

2、页面样式(又叫内联样式)

【可以共用样式,但是多个页面就比较麻烦】
它是单独写在style标签里面的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css书写方式</title>
    <style>
        div {
            color: darkred;
        }
    </style>
</head>
<body>
    <div style="color:red;font-size: 30px;">这里是</div>
    <!--样式颜色为红色,字体大小为30像素  -->
    <div>这些都是</div>
    <div>这些都是</div>
</body>
</html>

在这里插入图片描述

3、外联样式【店家推荐】

这个就是有单独的css文件,在css文件中把样式写好,在导进html页面中

div {
    color: darkred;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css书写方式</title>
    <link rel="stylesheet" href="css文件/index.css">
    <!-- 使用link标签,引入需要的css文件 -->
</head>
<body>
    <div>这些都是</div>
    <div>这些都是</div>
</body>
</html>

在这里插入图片描述

4、import与link标签的区别

@import url(xxx.css)
<link rel="stylesheet" href="css文件/xxx.css">

前者是css指令,后者是html标签。前者实现css资源共享,就是css里面导入css;后者是将css导入页面。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/346020.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【速通版】吴恩达机器学习笔记Part4

开启第二课&#xff01; 目录 1.神经网络概述 2 前向传播&#xff08;forward propogation&#xff09;神经网络 3. tensorflow实现 Numpy中的matrix&#xff1a; 用循环写NN&#xff1a; ​用numpy写NN:​ AGI​ 关于矩阵运算的解释&#xff08;略&#xff09; 用tf训练…

Redis主从、哨兵、集群原理

1、 前言 大家好&#xff0c;我是捡田螺的小男孩。今天跟小伙伴们一起学习Redis的主从、哨兵、Redis Cluster集群。 Redis主从 Redis哨兵 Redis Cluster集群 1、Redis 主从 面试官经常会问到Redis的高可用。Redis高可用回答包括两个层面&#xff0c;一个就是数据不能丢失&#…

叮当网上书城项目简介

叮当网上书城项目 一、项目功能 1.前台功能 图书基本展示,包括推荐图书展示和类图书类型展示.推荐图书包括条幅推荐,热销推荐和新品推荐.按照图书类型展示商品.图书详细信息展示.图书加入购物车.修改购物车内图书信息,例如数量等.用户登录.用户注册.修改个人信息,包括密码和…

漏洞修改全记录(工作总结)

漏洞修改记录1 : zookeeper 取消对外暴露2 : web服务器配置 CSP header 配置安全配置3 : 不安全的访问4 : 静态资源未授权访问1 : zookeeper 取消对外暴露 解决方式&#xff1a;增加密码增加密码 2 : web服务器配置 CSP header 配置安全配置 解决方式&#xff1a;接口配置CS…

new bing的申请与使用教程

文章目录新必应申请新必应免代使用教程总结新必应申请 下载安装 Edge dev 版本&#xff0c;这个版本可以直接使用 对于没有更新的用户而言&#xff0c;不容易找到入口&#xff0c;所以我们直接使用 集成new bing的dev版本 Edge dev 下载链接&#xff1a;https://www.microso…

14- 决策树算法 (有监督学习) (算法)

决策树是属于有监督机器学习的一种决策树算法实操: from sklearn.tree import DecisionTreeClassifier # 决策树算法 model DecisionTreeClassifier(criterionentropy,max_depthd) model.fit(X_train,y_train)1、决策树概述 决策树是属于有监督机器学习的一种&#xff0c;起源…

Python网络爬虫 学习笔记(2)BeaufitulSoup库

文章目录BeautifulSoup库的基本介绍HTML标签的获取和相关属性HTML文档的遍历prettify()方法使用BeautifulSoup库对HTML文件进行内容查找信息的标记的相关概念&#xff08;非重点&#xff09;find_all()方法&#xff08;重点&#xff09;综合实例&#xff1a;爬取软科2022中国大…

L2-037 包装机

一种自动包装机的结构如图 1 所示。首先机器中有 N 条轨道&#xff0c;放置了一些物品。轨道下面有一个筐。当某条轨道的按钮被按下时&#xff0c;活塞向左推动&#xff0c;将轨道尽头的一件物品推落筐中。当 0 号按钮被按下时&#xff0c;机械手将抓取筐顶部的一件物品&#x…

SegPGD

在这项工作中&#xff0c;我们提出了一种有效和高效的分割攻击方法&#xff0c;称为SegPGD。此外&#xff0c;我们还提供了收敛性分析&#xff0c;表明在相同次数的攻击迭代下&#xff0c;所提出的SegPGD可以创建比PGD更有效的对抗示例。此外&#xff0c;我们建议应用我们的Seg…

【STM32笔记】晶振及旁路电容设计避坑(低速外部晶振LSE无法起振的可能原因)

【STM32笔记】晶振及旁路电容设计避坑&#xff08;低功耗低速外部晶振LSE无法起振的可能原因&#xff09; 晶振无法起振 无非就是旁路电容设计的有问题 一般旁路电容选10pF 12pF 20pF等等 都没啥问题 尤其是高速晶振 基本不会出问题 但是对于低速晶振 电容没选对 就很可能不起…

17- 梯度提升回归树GBRT (集成算法) (算法)

梯度提升回归树: 梯度提升回归树是区别于随机森林的另一种集成方法&#xff0c;它的特点在于纠正与加强&#xff0c;通过合并多个决策树来构建一个更为强大的模型。该模型即可以用于分类问题&#xff0c;也可以用于回归问题中。在该模型中&#xff0c;有三个重要参数分别为 n_…

海盗峡湾——NFT 作品集来袭!

陌生人们&#xff0c;通过这个作品集&#xff0c;可以让你沉浸在海盗们的文化和魔法中。这可能是你唯一的机会&#xff0c;用这些资产把你的土地变成海盗王国&#xff0c;所以不要犹豫了&#xff01; 这个由 Alina Siniakova 制作的系列于 2 月 3 日晚上 11 点在 The Sandbox 市…

倒带ChunJun,同心前行|2022年度回顾2023年共建规划

ChunJun是一个开始于2018年的批流一体数据集成框架项目&#xff0c;原名FlinkX。2022年2月22日&#xff0c;在FlinkX进行初版开源的整整四年后&#xff0c;技术团队决定对FlinkX进行整体升级&#xff0c;并更名为ChunJun&#xff0c;希望为大家真正提供一个稳定、高效、易用的批…

服务器常见的网络攻击以及防御方法

网络安全威胁类别 网络内部的威胁&#xff0c;网络的滥用&#xff0c;没有安全意识的员工&#xff0c;黑客&#xff0c;骇客。 木马攻击原理 C/S 架构&#xff0c;服务器端被植入目标主机&#xff0c;服务器端通过反弹连接和客户端连接。从而客户端对其进行控制。 病毒 一…

蓝桥杯C/C++VIP试题每日一练之报时助手

💛作者主页:静Yu 🧡简介:CSDN全栈优质创作者、华为云享专家、阿里云社区博客专家,前端知识交流社区创建者 💛社区地址:前端知识交流社区 🧡博主的个人博客:静Yu的个人博客 🧡博主的个人笔记本:前端面试题 个人笔记本只记录前端领域的面试题目,项目总结,面试技…

Nacos——Nacos简介以及Nacos Server安装

资料来源&#xff1a;02-Nacos配置管理-什么是配置中心_哔哩哔哩_bilibili nacos记得下载2.x版本的&#xff0c;负责以后新建配置的时候会出现“发布错误&#xff0c;请检查参数是否正确”错误&#xff01;&#xff01;&#xff01;&#xff01; 目录 一、Nacos简介 1.1 四…

【CS224W】(task4)图嵌入表示学习

note node2vec&#xff1a; 计算随机游走概率从节点uuu开始模拟rrr条长度为lll的游走链路使用 Stochastic Gradient Descent 优化损失函数 Node2vec在节点分类方面表现更好&#xff1b;而其他方法在链路预测上效果更好&#xff0c;如random walk效率更高&#xff1b;graph emb…

请注意,PDF正在传播恶意软件

据Bleeping Computer消息&#xff0c;安全研究人员发现了一种新型的恶意软件传播活动&#xff0c;攻击者通过使用PDF附件夹带恶意的Word文档&#xff0c;从而使用户感染恶意软件。 类似的恶意软件传播方式在以往可不多见。在大多数人的印象中&#xff0c;电子邮件是夹带加载了恶…

Redis-简单动态字符串

Redis中字符串应该是我们使用最多的一种数据类型了&#xff0c;但是有没有想过Redis是如何存储字符串的呢&#xff1f;Redis并没有用C语言传统的字符串(C语言中的字符串一般末尾采用空字符结尾&#xff0c;\0)&#xff0c;而是采用它们自己实现的一种简单动态字符串(SDS)实现的…

若依ruoyi——手把手教你制作自己的管理系统【二、修改样式】

阿里图标一(&#xffe3;︶&#xffe3;*)) 图片白嫖一((*&#xffe3;3&#xffe3;)╭ ********* 专栏略长 爆肝万字 细节狂魔 请准备好一键三连 ********* 运行成功后&#xff1a; idea后台正常先挂着 我习惯用VScode操作 当然如果有两台机子 一个挂后台一个改前端就更好…