Html CSS的三种链接方式_html链接css代码-程序员宅基地

技术标签: Html  HTML  

感谢原文: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>

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_43670802/article/details/94174581

智能推荐

Mybatis学习笔记_select * from term_library where team_info && arra-程序员宅基地

文章浏览阅读519次。文章目录Mybatis1. Mybatis 简介1.1 什么是Mybatis1.2 回顾JDBC1.3 Mybatis的优点2. Myabtis入门案例2.1 数据库、表的创建2.2 创建Maven项目并配置POM文件2.3 配置Mybatis的核心配置文件2.4 创建实体类2.5 创建Dao层接口2.6 编写Mybatis工具类2.7 编写ORM映射文件2.8 配置映射文件的扫描位置2.9 注册映射文件2.10 测试代码2.11 测试结果3.Mybatis的CRUD操作3.1 增加insert3.2 删_select * from term_library where team_info && array ['1','2'] 在xml中书写方

showModalDialog的用法:_showformbelongroot-程序员宅基地

文章浏览阅读1.4k次。 示例:在页面一的基础上弹出页面二,页面二的接受页面一传过来的两个参数方法1:页面1: script>... var openUrl="页面二" var openWindowSty="dialogWidth:200px;dialogHeight:300px;status:no"; var obj=new Object(); obj.title="参数一"_showformbelongroot

python偏最小二乘法回归分析_偏最小二乘回归(PLSR)- 2 标准算法(NIPALS)-程序员宅基地

文章浏览阅读2.9k次。1 NIPALS 算法Step1:对原始数据X和Y进行中心化,得到X0和Y0。从Y0中选择一列作为u1,一般选择方差最大的那一列。 注:这是为了后面计算方便,如计算协方差时,对于标准化后的数据,其样本协方差为cov(X,Y)=XTY/(n-1)。Step2:迭代求解X与Y的变换权重(w1,c1)、因子(u1,t1),直到收敛 step 2.1:利用Y的信息U1,求X的变换权重w1(w1实现有X..._pytorch偏最小二乘回归

分布式事务键值数据库 TiKV 加入 CNCF 沙箱孵化器-程序员宅基地

文章浏览阅读207次。开发四年只会写业务代码,分布式高并发都不会还做程序员? >>> 云原生计算基金会CNCF 昨日宣布..._事务 键值

Microsoft SQL Server Native Client(sqlncli.msi)的安装程序包-程序员宅基地

文章浏览阅读2w次。下载地址:http://msdn.microsoft.com/zh-cn/ff658533选择需要的包进行下载_sqlncli.msi

DERBY数据库环境搭建以及简单使用_linux远程怎么连接到apache derby server-程序员宅基地

文章浏览阅读1.1w次,点赞2次,收藏14次。1 derby数据库Apache Derby 项目的目标是构建一个完全用 Java 编程语言编写的、易于使用却适合大多数应用程序的开放源码数据库。 特点:l 程序小巧,基础引擎和内嵌的JDBC驱动总共大约2MB ;l 基于Java、JDBC和SQL标准 ;l 提供内嵌的JDBC驱动,你可把Derby嵌入到基于Java的应用程序中 ;l 支持客户端/服务器模式 ;l _linux远程怎么连接到apache derby server

随便推点

分库分表知识大全及Sharding-JDBC实践_sharding-jdbc如何实现分库分表-程序员宅基地

文章浏览阅读331次。一个数据库分成多个数据库,部署到不同机器一个数据库表分成多个表最早是当当网内部使用的一款分库分表框架,名字叫Sharding-JDBC,定位为轻量级 Java 框架,在 Java 的 JDBC 层提供的额外服务。它使用客户端直连数据库,以 jar 包形式提供服务,无需额外部署和依赖,Sharding-JDBC直接封装JDBC API,可以理解为增强版的JDBC驱动,旧代码迁移成本几乎为零,适用于任何基于 JDBC 的 ORM 框架,支持任何第三方的数据库连接池,支持任意实现 JDBC 规范的数据库。_sharding-jdbc如何实现分库分表

c++11 智能指针底层原理和代码模拟实现_c++ 指针的内部实现-程序员宅基地

文章浏览阅读1.7k次,点赞44次,收藏27次。上述的SmartPtr还不能将其称为智能指针,因为它还不具有指针的行为。内存泄漏的危害:长期运行的程序出现内存泄漏,影响很大,如操作系统、后台服务等等,出现。AutoPtr模板类中还得需要将* 、->重载下,才可让其像指针一样去使用。原理:是通过引用计数的方式来实现多个shared_ptr对象之间共享资源。内存泄漏指因为疏忽或错误造成程序未能释放已经不再使用的内存的情况。,而是应用程序分配某段内存后,因为设计错误,失去了对。该段内存的控制,因而造成了内存的浪费。在对象构造时获取资源,智能指针的使用及原理。_c++ 指针的内部实现

BI系统AWS云迁移方案设计(通用)_awsbi-程序员宅基地

文章浏览阅读1.5k次。背景:为一家大型企业本地化BI系统做上云迁移的总体方案。客户对当前本地的BI系统不满意,希望迁移到AWS云之后,能够重新用Tableau做新的BI报表设计。所以这不是本地系统的平滑迁移,而是需要在云上重建BI系统的优化迁移。因此,主要内容是BI数据的迁移,利用AWS原生服务和生态厂商服务重建数据仓库和BI报表,并保留本地其他业务系统的联系和数据源。业务需求客户公司为了匹配整体业务上云..._awsbi

dell 7559笔记本无法进入bios了,咋办?详细情况如下_dell 7559 无法进入bios-程序员宅基地

文章浏览阅读345次。7.这时候出现了三个启动项(Ubuntu,机械硬盘windows10,固态硬盘windows10),但这里的机械硬盘启动项是假的,其实就是第三步导致的。4.这时候从机械硬盘启动,也一样会进入固态硬盘的windows10,不会进入机械硬盘的windows10。3.我只好把固态硬盘的windows10 的引导文件拷贝到机械硬盘上。2.这个时候固态硬盘的windows10可以更新了,但是机械硬盘上的系统无法启动了。8.后来我一直用固态硬盘的windows10,但windows10 总是修改启动项。_dell 7559 无法进入bios

Apache Shiro 1.2.4反序列化漏洞(CVE-2016-4437) 复现_apache shiro 1.2.4反序列化漏洞复现-程序员宅基地

文章浏览阅读3.1k次,点赞2次,收藏7次。基础知识序列化和反序列化反序列化漏洞原因在Java反序列化中,会调用被反序列化的readObject方法,当readObject方法书写不当时就会引发漏洞。反序列化的检测基础库中隐藏的反序列化漏洞优秀的Java开发人员一般会按照安全编程规范进行编程,很大程度上减少了反序列化漏洞的产生。并且一些成熟的Java框架比如Spring MVC、Struts2等,都有相应的防范反序列化的机制。如果仅仅是开发失误,可能很少会产生反序列化漏洞,即使产生,其绕过方法、利用方式也较为复杂。但_apache shiro 1.2.4反序列化漏洞复现

【软件需求工程与UML建模】小组成员及分工_许沣鲡-程序员宅基地

文章浏览阅读177次。小组成员组长:陈思宇组员:许沣鲡、施阳、冯舜、施钧元、张泽渊任务分工成 员任务分工陈思宇统筹组织安排组员工作,汇总各种资料,在课堂做第二次报告,代表甲方与乙方进行面谈张泽渊汇总整理需求规格说明文档,在课堂做第一次报告,用前端制作系统原型,建立小组博客许沣鲡代表乙方与甲方进行面谈,手绘系统原型,对甲方需求进行结构化分析施 阳进行涉众分析与硬数据采样,对甲方需求进行面向对象分析冯 舜汇总整理软件需求规格说明文档,制作第一次报告PPT施钧元编写_许沣鲡

推荐文章

热门文章

相关标签