内联式CSS样式

其实就是用html中style属性

<p style="color:blue">示例</p>

嵌入式CSS样式

嵌入式css样式，就是可以把css样式代码写在<style type=“text/css”></style>标签之间。

(样式一多，内联式就很繁杂，不易于阅读和维护，这没法发挥CSS的优势了)

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>嵌入式css</title><style type="text/css"> /*嵌入式css是在head里面的*/span{color:blue;/*注意看，color后面跟的是冒号，blue没有双引号，最后有一个分号*/font-weight:bold;}</style></head><body><p><span>《温泉》</span>这首歌好好听！</p></body></html>

外部式CSS样式

基础语法

外部式css样式(也可称为外联式)就是把css代码写一个单独的外部文件中，这个css样式文件以“.css”为扩展名，在<head>内（不是在<style>标签内）使用<link>标签将css样式文件链接到HTML文件内

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

href 规定被连接文档的位置
rel="stylesheet"表示链接文档为当前文档的外部样式表
type=“text/css"描述链接的是样式表类型

HTML<link>标签

link 元素是空元素，它仅包含属性。只能存在于 head 部分，不过它可出现任何次数。

(上图来自w3school，侵删)

代码示例

/*这是一个css文件，命名为try.css*/
span {color: blue;font-weight: bold;}

<!DOCTYPE html>
<!--这是一个HTML文件-->
<html>
<head><meta charset="UTF-8"><title>外部式css</title><link href="try.css" rel="stylesheet" type="text/css" /><!--此处url这样写是因为我把try.css和这个html放在同一目录下了-->
</head><body><p><span>《温泉》</span>这首歌好好听！</p></body></html>

三种链接方式的优先级

就近原则

后记

坚持打卡第8天了，开始css
学的时候发现以前以为是html知识的东西原来严格上是css的，但是实际应用不必太过于纠结吧
欢迎关注我加入每日打卡~
《温泉》是许嵩的歌

CSS的三种链接方式（内联式、嵌入式、外部式）相关推荐

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

CSS的三种链接方式（内联式、嵌入式、外部式）