感谢原文：https://blog.csdn.net/abc5382334/article/details/24260817

感谢原文：https://blog.csdn.net/jiaqingge/article/details/52564348

Html CSS的三种链接方式

css文本的链接方式有三种：分别是内联定义、链入内部css、和链入外部css

1.代码为：

<html>

	<head>

		<title>内联定义</title>

	</head>

	<body>

		<p style="border:2px solid #000000">内联定义</p>

		<p style="color:red">内联定义</p>

		<p style="font-size:12px">内联定义</p>

	</body>

</html>

2.代码为：

<html>

	<head>

		<title>链入内部css</title>

		<style type="text/css">

			#myid

			{

				width:200px;

				height:300px;

				color:red;

			}

			.myclass

			{

				width:200px;

				height:300px;

				color:red;

			}

		</style>

	</head>

	<body>

		<p id="myid">链入内部css</p>

		<p class="myclass">链入内部css</p>

	</body>

</html>

3.代码为：

<html>

	<head>

		<title>链入外部css</title>

		<link type="text/css" rel="stylesheet" href="style.css"/>

	</head>

	<body>

		<p id="p1">链入外部css</p>

		<p id="p2">链入外部css</p>

		<p class="p3">链入外部css</p>

	</body>

</html>

代码3的style.css是和你的html文件在同一个文件夹。

其代码为：

#p1

{

	border:2px;

	color:red;

}

#p2

{

	border:2px;

	color:blue;

}

.p3

{

	border:2px;

	color:red;

}

在css中

id前面是要加一个#

class前面要加一个.

补充：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>外联式css样式03</title>

    <!-- 引入外部的css样式表

        引入css样式表有两种方式:(面试)

        1.link标签引入  推荐使用

        2.@import引入

    -->

    <!--

        link标签引入,该标签写在head标签里(与文档配置有关,不需显示)

    -->

      <link rel="stylesheet" href="style.css">

    <!--

        @import引入,需要写在style标签里

    -->

    <style typle="text/css">

        @import url(style.css)

    </style>

    <!-- link与import的区别:

        1.link是html语法,import是css语法.

        2.link是在html文档加载时同时开始加载对应的css文件:@import是在html文档加载完成后才开始加载对应的css文件.

        3.link可以引入任何类型的文件,而import只能引入css文件.

        4.使用link方式引入的css样式我们在后期可以使用js的方式进行修改,但是import不可以.

        我们以后使用link

        当一个网站有多个文档时,建议使用外联式.

     -->

</head>

<body>

    <div>lalala</div>

</body>

</html>

Html CSS的三种链接方式的更多相关文章

  1. VMware三种链接方式

    VMware三种链接方式 第一种:桥接Bridged 如其的说明:connected directly to the physical networkà直接连接到物理网络.如果是通过路由器连接出来的D ...

  2. html(常用标签,标签分类)，页面模板， CSS(css的三种引入方式)，三种引入方式优先级

    HTML 标记语言为非编程语言负责完成页面的结构 组成: 标签:被<>包裹的由字母开头,可以结合合法字符( -|数字 ),能被浏览器解析的特殊符号,标签有头有尾 指令:被<>包 ...

  3. css-1,css的三种引入方式 基本选择器

    <!-- (1)CSS 层叠样式表 作用:修饰网页结构 (2)css的三种引入方式 权重: 优先级高 权重大 谁在页面谁的权重大 - 行内样式 注意:行内样式的优先级是最高的 - 内接样式 - ...

  4. 11 CSS的三种引入方式和基本选择器

    <!-- 整体说明: 1.CSS的三种引入方式 (1)行内样式 (2)内接样式 (3)外接样式 2.CSS的基本选择器 (1)id选择器 (引用方式:#id) (2)标签选择器(引用方式:标签名 ...

  5. css的三种导入方式

    内联样式表 <p style="font-size:50px; color:blue">css内联样式表</p> 内部样式表 <style type= ...

  6. CSS的三种引入方式

    1.标签 <style>定义样式         <link> 资源的引用(某些css的样式) 2.属性 rel=”stylessheet” 外部样式表  (rel为定义当前文 ...

  7. CSS三：CSS的三种引入方式

    CSS的引入方式共有三种:行内样式.内部样式表.外部样式表. 一.行内样式 使用style属性引入CSS样式. 示例:<h1 style="color:red;">st ...

  8. SQL语句的执行计划(oracle表的三种链接方式)

    SQL语句我们写完之后,就是分析其优化,这就要求我们了解到底数据是怎么存储. 首先我们需要了解,表链接的几种方式 nested loop join sort merge join hash join ...

  9. css的三种引入方式、常用的元素选择器以及css三大特性

    第一.html文件中如何使用css html文件中使用css有3种方式:链接式.嵌入式.行内式,推荐使用程度依次递减:1.链接式:在html文件通过<link />标签引入,rel属性值必 ...

随机推荐

  1. 求区间内第一个大于等于x的数的下标

    int tree[4*N]; void build(int o,int l,int r) { if(l==r) {cin>>tree[o];return;} build(ls,l,mid) ...

  2. Java中对象的内存分配机制

    一.内存划分 Java把内存划分为两种,一种是栈内存,另一种是堆内存. 1.栈内存 在函数中定义的一些基本类型的变量和对象的引用变量都在函数的栈内存中分配.当在一段代码块定义一个变量时,Java就在栈 ...

  3. 为什么操作dom会消耗性能

    因为对DOM的修改为影响网页的用户界面,重绘页面是一项昂贵的操作.太多的JavaScript DOM操作会导致一系列的重绘操作,为了确保执行结果的准确性,所有的修改操作是按顺序同步执行的.我们称这个过 ...

  4. .NET6 微服务——CI/CD（1）：搭建Jenkins并实现自动构建

    CI/CD 它的意思是 持续集成/持续部署,这也不是新概念.那些八股文就不写了,说话的方式简单点:如果成功搭建CI/CD环境,当你需要迭代线上程序时,只需通过git提交代码就可以,其他什么都不用做.是 ...

  5. 【VUE】VUE使用常见问题搜集

    文章目录 1.日期格式化 2.引用JSON文件中的数据 1.日期格式化 安装插件,官网:Moment.js npm install moment --save 示例: //Sat Mar 14 202 ...

  6. 【PowerShell】ASCII与Char之间的转换

    1 [char[]][int[]]$char=65..90 2 $char -join ',' 3 [int[]][char[]]$ascii=$char 4 $ascii -join ',' A,B ...

  7. 用软碟通UltraISO刻录Win 10 1909 到U盘，只有1个G左右，安装不了系统

    之前一直用软碟通刻录WIN10的ISO镜像到U盘.最近想到用最新版的WIN10 1909 来做一个U盘系统,刻录也成功了.就是安装系统的时候总报错,找了很久原因,终于发现刻录后占用U盘的空间只有1G左 ...

  8. LINUX学习-Mysql集群-主主备份

    接着主从备份继续. 1.编辑主从服务器 vim /etc/my.cnf 在server-id下添加一句 忽略一些信息 binlog-ignore-db=mysql 2.从服务器也授权给主服务器 gra ...

  9. 老旧业务重构案例——IM系统如何设计

    一年半之前刚来到这个团队,便遭遇了一次挑战: 当时有个CRM系统,老是出问题,之前大的优化进行了4次小的优化进行了10多次,要么BUG重复出现,要么性能十分拉胯,总之体验是否糟糕!技术团队因此受到了诸 ...

  10. 读 Linux 像读小说「GitHub 热点速览 v.22.03」

    本周特推选取了一个画风有点意思的 Linux 代码带读项目 flash-linux0.11-talk,希望有趣的文风能带你读完 Linux 代码.当然画风可以增加阅读体验,彩色标记也是一种学习方法-- ...