感谢原文: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. Reliable evaluation of adversarial robustness with an ensemble of diverse parameter-free attacks

    目录 概 主要内容 Auto-PGD Momentum Step Size 损失函数 AutoAttack Croce F. & Hein M. Reliable evaluation of ...

  2. Obfuscated Gradients Give a False Sense of Security: Circumventing Defenses to Adversarial Examples

    目录 概 主要内容 Obfuscated Gradients BPDA 特例 一般情形 EOT Reparameterization 具体的案例 Thermometer encoding Input ...

  3. java-热部署

    IDEA热部署方式: spring-boot-devtools JRebel插件 spring-boot-devtools为应用提供一些开发时特性,包括默认值设置,自动重启,livereload等. ...

  4. SQL怎么求多列的和?

    日常比较常使用的SQL,查询各科的总分,并求出总分大于240的学生名字和总分,如图,要求出linux.Mysql.Java三科的总分,并查处总分大于240的学生姓名和总分 可能你会想到sum,但是su ...

  5. springboot 开启事务回滚

    在数据库操作时如果发生异常,回滚的方法 在方法上添加注解@Transactional,作用域是方法级的 参考资料: https://www.cnblogs.com/c2g5201314/p/13163 ...

  6. win10快捷方式小箭头怎么去掉

    为了演示,先来看看桌面图标是有小箭头的. 1.打开注册表 按下快捷键"win+R",然后输入"regedit",并点击确认按钮. 2.搜索HKEY_CLASSE ...

  7. linux修改默认的SSH远程端口22

    1.编辑sshd_config文件 [root@localhost ~]#  vim /etc/ssh/sshd_config 搜索 #Port 22行,删除开头的 # 字符,然后将其替换为要使用的端 ...

  8. CentOS7 防火墙firewalld 和 CentOS6 防火墙iptables 开放zabbix-agent端口的方法

    我们在生产环境中,一般都是把防火墙打开的,不像测试环境,可以直接关闭掉.最近安装zabbix ,由于公司服务器既有centos 7又有centos 6,遇到了一些防火墙的问题,现在正好把centos防 ...

  9. Linux上天之路系列目录

    Linux上天之路系列目录 Linux上天之路(一)之Linux前世今生 Linux上天之路(二)之Linux安装 Linux上天之路(三)之Linux系统目录 Linux上天之路(四)之Linux界 ...

  10. 微服务架构攀登之路(三)之gRPC入门

    一.gRPC入门 1. gRPC 简介 gRPC 由 google 开发,是一款语言中立.平台中立.开源的远程过程调用系统 gRPC 客户端和服务端可以在多种环境中运行和交互,例如用 java 写一个 ...