web前端-CSS引入方式

一、内部样式表

内部样式表(内嵌样式表)是写到html页面内部,是将所有的 CSS 代码抽取出来,单独放到一个<styie>标签中。

注意:
① <style>标签理论上可以放在 HTML文档的任何地方,但一般会放在文档的<head>标签中

② 通过此种方式,可以方便控制当前整个页面中的元素样式设置

③ 代码结构清晰,但是并没有实现结构与样式完全分离

④ 使用内部样式表设定CSS,通常也被称为嵌入式引入,这种方式是我们练习时常用的方式

二、行内样式表

行内样式表(内联样式表)是在元素标签内部的style属性中设定CSS 样式。适合于修改简单样式

注意:

① style 其实就是标签的属性

② 在双引号中间,写法要符合CSS规范

③ 可以控制当前的标签设置样式

④ 由于书写繁琐,并且没有体现出结构与样式相分离的思想,所以不推荐大量使用,只有对当前元素添加简单样式的时候,可以考虑使用

⑤ 使用行内样式表设定CSS,通常也被称为行内式引入

例如:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div style="color: green;">十个勤天,做大做强</div>
</body>
</html>

三、外部样式表

实际开发都是外部样式表,适合于样式比较多的情况.核心是:样式单独写到CSS 文件中,之后把CSS文件引入到 HTML页面中使用

引入外部样式表分为两步:
1.新建一个后缀名为 .css 的样式文件,把所有 CSS 代码都放入此文件中。

2.在 HTML页面中,使用<link>标签引入这个文件。

使用外部样式表设定CSS,通常也被称为外链式或链接式引入,这种方式是开发中常用的方式

例如:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="D:\JavaWeb\HTML\css\style.css">
</head>
<body>
    <div>十个勤天,做大做强</div>
</body>
</html>
div {
    color: green;
    font-size: 66px;
    font-style: italic;
}

四、总结

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

开发提效的工具tabby快速入门

1.什么是tabby&#xff1f; Tabby is an open-source, self-hosted AI coding assistant. With Tabby, every team can set up its own LLM-powered code completion server with ease. 官方网站&#xff1a;https://tabby.tabbyml.com/ 2.tabby服务安装(Hugging Face Spaces…

虚幻引擎的三种输入模式和将控件显示到屏幕上

首先要知道一个概念 , HUD 和 Input 都是由 PlayerController 来控制的 而虚幻的Input控制模式有三种 Set Input Mode Game Only (设置输入模式仅限游戏): 视角会跟着鼠标旋转 , 就是正常游戏的模式 , 这也是游戏默认输入模式 Set Input Mode UI Only (设置输入模式仅限UI): …

【C++】 vector 迭代器失效问题

【C】 vector 迭代器失效问题 一. 迭代器失效问题分析二. 对于vector可能会导致其迭代器失效的操作有&#xff1a;1. 会引起其底层空间改变的操作&#xff0c;都有可能是迭代器失效2. 指定位置元素的删除操作--erase3. Linux下&#xff0c;g编译器对迭代器失效的检测并不是非常…

通信工程学习:什么是FDD频分双工

FDD:频分双工 FDD(频分双工,Frequency Division Duplexing)是一种无线通信技术,它通过将频谱划分为上行和下行两个不重叠的频段来实现同时双向通信。以下是FDD频分双工的详细解释: 一、定义与原理 定义: FDD是一种无线通信系统的工作模式,其中上行链路(从移动…

每日OJ_牛客_OR59字符串中找出连续最长的数字串_双指针_C++_Java

目录 牛客_OR59字符串中找出连续最长的数字串 题目解析 C代码1 C代码2 C代码3 Java代码 牛客_OR59字符串中找出连续最长的数字串 字符串中找出连续最长的数字串_牛客题霸_牛客网 题目解析 双指针&#xff1a; 遍历整个字符串&#xff0c;遇到数字的时候&#xff0c;用双…

坚果N1 Air高亮版对比当贝D6X高亮版:谁是2000元预算的投影仪王者?

当贝D6X高亮版新品升级&#xff0c;对于那些计划在这个时间点购买投影仪的用户来说&#xff0c;现在是个绝佳的时机&#xff01;特别是那些预算在两千元左右的&#xff0c;目前两千元左右的投影仪&#xff0c;无外乎两款产品&#xff0c;当贝D6X高亮版和坚果N1 Air高亮版&#…

常见区块链数据模型介绍

除了加密技术和共识算法&#xff0c;区块链技术还依赖于一种数据模型&#xff0c;它决定了信息如何被结构化、验证和存储。数据模型定义了账户如何管理&#xff0c;状态转换如何发生&#xff0c;以及用户和开发者如何与系统交互。 在区块链技术的短暂历史中&#xff0c;数据…

13年408计算机考研-计算机网络

第一题&#xff1a; 解析&#xff1a;OSI体系结构 OSI参考模型&#xff0c;由下至上依次是&#xff1a;物理层-数据链路层-网络层-运输层-会话层-表示层-应用层。 A.对话管理显然属于会话层&#xff0c; B.数据格式转换&#xff0c;是表示层要解决的问题&#xff0c;很显然答案…

怎样用云手机进行TikTok矩阵运营?

在运营TikTok矩阵时&#xff0c;许多用户常常面临操作复杂、设备过多等问题。如果你也感到操作繁琐&#xff0c;不妨考虑使用云手机。云手机具备丰富的功能&#xff0c;能够帮助电商卖家快速打造高效的TikTok矩阵。接下来&#xff0c;我们将详细解析这些功能如何提升你的运营效…

智能化转型新篇章:EasyCVR引领大型连锁超市视频监控进入AI时代

随着科技的飞速发展&#xff0c;视频监控系统在各行各业中的应用日益广泛&#xff0c;大型连锁超市作为人员密集、商品繁多的公共场所&#xff0c;其安全监控显得尤为重要。为了提升超市的安全管理水平、减少损失、保障顾客和员工的安全&#xff0c;引入高效、全面的视频监控系…

Meta震撼发布Llama3.2大规模模型

在2024.9.26的年Meta Connect大会上&#xff0c;Meta正式推出了Llama3.2模型&#xff0c;旨在提升边缘AI和视觉任务的能力。Llama3.2系列包括11亿和90亿参数的中型视觉模型&#xff0c;以及为移动设备优化的1亿和3亿参数的小型模型&#xff0c;并针对高通和联发科的硬件平台进行…

Navicat数据库管理工具实现Excel、CSV文件导入到MySQL数据库

1.所需要的工具和环境 navicat等第三方数据库管理工具云服务器中安装了 1Panel面板搭建的mysql数据库 2.基于 1Panel启动mysql容器 2.1 环境要求 安装前请确保您的系统符合安装条件&#xff1a; 操作系统&#xff1a;支持主流 Linux 发行版本&#xff08;基于 Debian / Re…

C#和数据库高级:虚方法

文章目录 一、抽象方法和抽象类中的思考1.1、回顾抽象方法的特点1.2、针对抽象方法问题的引出 二、虚方法的使用步骤2.1、虚方法重写方法的调用2.2、系统自带的虚方法2.3、重写Equals方法2.4、虚方法和抽象方法的比较 三、虚方法和抽象方法的联系3.1、ToString()方法的应用 一、…

ARM点灯---看手册

知识点&#xff1a; 一个程序可能会遇到内存泄漏问题&#xff0c;可能一次运行泄漏几M大小&#xff0c;执行几个小时才会泄漏到站崩溃&#xff0c;所以要查看是否有内存泄漏。 查看手册教程 0927-上午 视频1&#xff1a;25&#xff1b;00 硬件程序开发流程 最小系统:单片…

单词的秘密3:从eight说起

单词的秘密&#xff0c;所谓秘密&#xff0c;就是指只有圈内的人知道&#xff08;而圈子往往代表了狭隘或某种专业性、独特或独占或垄断性&#xff09;&#xff0c;或者只有少数的人知道。 同样&#xff0c;一些单词的秘密&#xff0c;如果我不说&#xff0c;可能这一辈子&…

简单的spring缓存 Cacheable学习

简单的spring缓存 Cacheable学习 1.需求 项目中有很多的方法查询的数据其实是不会经常变的&#xff0c;但是其整体的查询sql以及调用第三方数据获取数据花费的时间很长&#xff0c;现在考虑对此类型的接口进行优化&#xff0c;首先想到的是对其进行缓存操作&#xff0c;所以简…

Docker全家桶:从0到加载本地项目

安装docker&#xff0c;我们选择的是CentenOS 7。 目录 Docker安装 命令 命令别名 数据卷挂载 Dockerfile 容器网络互联 Docker安装 1. 先删除本机旧的或者残留的docker sudo yum remove docker \docker-client \docker-client-latest \docker-common \docker-latest …

Python实战:爬取网页图片

文章目录 一、实战概述二、图片网站三、爬取图片1、编写程序&#xff0c;实现功能2、运行程序&#xff0c;查看结果 四、实战小结 一、实战概述 在本实战项目中&#xff0c;我们编写了一个Python程序&#xff0c;用于从指定的图片网站&#xff08;https://pic.netbian.com/4kf…

低代码平台推荐与对比,国内外哪家更胜一筹?

低代码开发通过图形界面简化开发&#xff0c;提升速度与协作&#xff0c;降低成本。国内外平台如ZohoCreator、OutSystems等各具特色&#xff0c;支持快速开发、集成与数据安全。企业可试用后按需选择&#xff0c;降低决策成本。 一、低代码是什么&#xff1f; 低代码开发是一…

EasyExcel将数据库里面的数据生成excel文件

EasyExcel官方文档 1.在model模块导入依赖 <!-- 生成报表--> <dependency><groupId>com.alibaba</groupId><artifactId>easyexcel</artifactId><version>4.0.3</version> </dependency> 2.修饰实体类 package…