分享程序员开发的那些事...
更新时间：2022-09-05 14:30:17
开发者学堂课程【CSS 快速掌握：行内式】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/611/detail/9167
内容介绍
一.行内式
什么是行内式？
将 Css 代码书写在 HTML 标签的 style 属性中
style 是一个通用属性，每一个标签里面都拥有这个属性！
语法格式：*
<标签名
style=“属性:值;属性:值;”></标签名》
示例：
<IDOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>行内式</title>
</head>
<body>
I
<|-
将 DIV 设置为宽度100px 高度100px 背景颜色为红色
使用行内式的方式来设置
<divstyle="width: 100px;height: 100px;background-color:#fod"></div>
</body>
</html>
总结：
·使用嵌入式的方式来书写 CSS 代码，它只能作用于当前的 HTML 文件
·使用外链式的方式来书写 CSS 代码，它可以作用于多个 HTML 文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>行内式</title>.I
<1--引入index.css这个单独的css文件-->
<link rel="stylesheet" type="text/css" href="./css/index.css">
</head>
<body>
人一1L
将 DIV 设置为宽度100px 高度100px 背景颜色为红色
使用行内式的方式来设置
<div style="width: 100px;height: 100px;background-color:#f00;"></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>外链式</title>
<!--将单独的 css 文件链接到当前的 HTML 文件中-->
<link rel="stylesheet" href="./css/index.css">
<link rel="stylesheet" href="./css/public.css">
</head>
<body>
<div></div>
</body>
</html>