Html CSS的三种链接方式

感谢原文：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的三种链接方式相关推荐

CSS的三种链接方式（内联式、嵌入式、外部式）
内联式CSS样式其实就是用html中style属性 <p style="color:blue">示例</p> 嵌入式CSS样式嵌入式css样式,就是可以 ...
CSS的三种引入方式：外部样式、内部样式和行内样式
CSS的三种引入方式:外部样式.内部样式和行内样式外部样式链接式:link标签导入式:@import 链接式与导入式的区别内部样式行内样式样式优先级外部样式即CSS代码保存在外部,HT ...
CSS3基础(基础认知,选择器,字体属性,文本属性,CSS 的三种引入方式)
CSS3基础 1. 基础认知 1.1 CSS 简介 CSS 的使用场景是什么? 美化网页,布局页面 CSS 的中文名称是什么? 层叠/级联样式表(Cascading Style Sheets) CSS ...
VMware三种链接方式
VMware三种链接方式第一种:桥接Bridged 如其的说明:connected directly to the physical networkà直接连接到物理网络.如果是通过路由器连接出来的D ...
外部导入方式添加背景图_web前端基础：CSS的三种导入方式说明
随着html的成长,为了满足页面设计者的要求,HTML添加了很多显示功能.但是随着这些功能的增加,HTML变得越来越杂乱,而且HTML页面也越来越臃肿.于是css便诞生了. Web前端基础教程,Web ...
CSS line-height 三种赋值方式有何区别 (琐碎知识点整理)
之前有整理过一部分知识点, 一直没有发布, 因为都是有关前端方面的零散内容; 现在想想无论分享什么内容都需要慢慢积累, 所以还是决定将之前整理的相关内容验证之后慢慢分享给大家这个专题就是工作 ...
CSS的三种引入方式与JS的三种引入方式
CSS的三种引入方式前端三剑客分为html,css,js, html作为骨架,楼体是观看者看到的第一元素,而css和js是美化并增加功能的肉体羽毛或者楼体工装,肉体羽毛需要安装到骨架上,才能使整体完 ...
css样式三种引入方式选择器常用属性：背景属性字体属性边框属性内间距外间距盒子模型
一.CSS简介 1.什么是css 重叠样式表主要是负责标签的样式美化页面一个网页分三大部分结构层: 主要由html负责负责页面的结构表现层: 主要由css负责页面的展示样式美化页面行 ...
简述css样式的三种引入html的方式,css-1,css的三种引入方式基本选择器
css三种引入方式和四种基本选择器 /*内接样式*/ /*1 选择器选中的是 '共性'*/span{color:green;font-size:30px; } /*组合选择器*/ul,ol{lis ...

Html CSS的三种链接方式

Html CSS的三种链接方式

Html CSS的三种链接方式相关推荐

最新文章

热门文章