CSS的三种引入方式

前端三剑客分为html，css，js，

html作为骨架，楼体是观看者看到的第一元素，而css和js是美化并增加功能的肉体羽毛或者楼体工装，肉体羽毛需要安装到骨架上，才能使整体完美，所以三剑客之间需要一个连接，就是我要说的css和js的引入。

css和js的引入方式都是有3种：这次讲一讲css的

css

行内样式

简而言之就是写在html行内部的样式，写在html的标签内部

css的样式标签为style，英译汉直译为“样式”

可以通过css修改html的样式，从而为骨架增加肉体
例：可以修改标签的颜色，位置，大小，鼠标悬停样式，插入图片或音频

  这是一个普通的HTML，设立了一个h1标签：<body><h1>123</h1></body>增加内部样式后：<body><h1 style="color: aqua">123</h1></body>------style="color: aqua"就是为h1标签修改了他的字体颜色

内部样式

简而言之就是写在html内部的样式

css的样式标签同样为为style，只不过变为双标签，例：,在两个style中写css代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><h1>123</h1></body>
</html>
这是一个基础html代码，通过vscode用！一键生成，内部样式写在标签内部，html的内容写在body里（body：身体），内部样式写在head中，好处是在电脑解析这个文件时，如果css文件在html后面，就会先出现没有css美化过的“骨架”，很突兀，会造成观看者的鄙视

写在head中的内部样式例子：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>h1 {color: aqua;}</style></head><body><h1>123</h1></body>
</html>

外联样式

简而言之就是写在html外部的样式，要重新写一个文档。
无需使用style标签了，需新建一个后缀为.css的文件，例：

打开后直接编写css代码即可：

写完后需将这个css文件和html相连接起来，要不然css文件不会作用与html文件（需父子相认）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="css文件.css">
</head>
<body></body>
</html>
link标签的作用就是把css文件给引进来，使两者相连接，切记在href处写的css文件位置符合规范才行！

link标签的作用就是把css文件给引进来，使两者相连接，切记在href处写的css文件位置符合规范才行！

CSS的三种引入方式与JS的三种引入方式相关推荐

html三张图片自动轮回播放,JS -- 记一种用原生JS 完成轮播图的要领（非无穷轮回不自动切换）...
完成一个非无穷轮回不自动切换的轮播图只需要几张图片和两个按钮(简化) HTML部份两个按钮,几张图片(假如有四张图) 右边按钮左边按钮 CSS部份动态增加删除li的class属性(native ...
JS的三种引入方式[javaScript入门]
目录 1.行内引入方式 2.内嵌引入方式(内部引入) 3.外部引入方式 1.行内引入方式写在行内,每个标签里面单独设置 (1)写在标签的事件属性当中(以on开头的属性),如onclick[on+事件 ...
JS设置CSS样式的几种方式（js设置!important）
JS设置CSS样式的几种方式(js设置!important) x619y 用JS来动态设置CSS样式,常见的有以下几种 1. 直接设置style的属性某些情况用这个设置 !important值无效 ...
javascript-入门篇-使用js的三种方式
练习题: 弹出窗口,提示语句"hello js" <script>alert("hello js"); </script> javasc ...
vue中，scss样式的三种写法——当前页面直接定义、@import引入样式、main.js引入公共样式 deep和important的写法
vue中,scss样式的三种写法--当前页面直接定义.@import引入样式.main.js引入公共样式 & deep和important的写法 1.安装scss # 安装node-sass ...
关于Vue下组件引入第三方外部Js几种方式
第一种方式:利用Vue的mounted生命周期 const oScript = document.createElement('script'); oScript.type = 'text/javas ...
在vue文件引入echarts_vue文件中使用echarts.js的两种方式
最近工作中需要用到echarts,由于项目是用的vue-cli开发的.在网上搜到vue中合成了vue-echarts,但是不想使用vue中规定好的数据格式,于是就自己做了一个vue项目引用原生echa ...
浅谈js函数三种定义方式四种调用方式调用顺序
在Javascript定义一个函数一般有如下三种方式: 函数关键字(function)语句: function fnMethodName(x){alert(x);} 函数字面量(Function Li ...
外链引入css有哪些方式_CSS 文件的4种引入方式
(1)链接式 : 在网页的标签对中使用标记来引入外部样式表文件,使用html规则引入外部css (用得比较多) : (2)导入式 : 将一个独立的.css文件引入HTML文件中,导入式使用CSS ...

CSS的三种引入方式与JS的三种引入方式

CSS的三种引入方式

css

行内样式

内部样式

外联样式

CSS的三种引入方式与JS的三种引入方式相关推荐

最新文章

热门文章