CSS内联样式与外联样式

第一种内联样式

通过HTML元素的style属性来设置CSS样式，语法如下:

style="css属性:css属性值;"
1

示例代码:

DOCTYPE html>
<html>
  <head>
    <title>01_第一种使用方式.htmltitle>
  head>
  <body>
    
	<div style="color:red;" >atguigudiv>
  body>
html>
1
2
3
4
5
6
7
8
9
10

第二种内联样式

通过HTML页面的style元素来设置CSS样式，语法如下:

<style type="text/css">
	选择器 {
		属性名 : 属性值;
	}
style>
1
2
3
4
5

示例代码:

DOCTYPE html>
<html>
  <head>
    <title>02_第二种使用方式.htmltitle>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
	
	<style type="text/css">
		div {
			color : red;
		}
	style>
  head>
  <body>
    <div>atguigudiv>
  body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

外联样式

通过HTML页面的link元素来引入外部CSS样式，语法如下:

<link href="css文件路径" rel="stylesheet" type="text/css" />
1

示例代码:

DOCTYPE html>
<html>
  <head>
    <title>04_第四种使用方式.htmltitle>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
	
	<link href="div.css" rel="stylesheet" type="text/css" />
  head>
  <body>
    <div>atguigudiv>
  body>
html>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

相关阅读:
备忘录模式（Memento Pattern）
SpringAI——Java生态接入LLM
java 桥接方法
搭建网站使用宝塔面板遇到的问题
用PHP组合数组，生成笛卡尔积的几个例子
【数据结构】单链表的增删查改
艾体宝案例 | 使用Redis和Spring Ai构建rag应用程序
2023年数维杯数学建模C题宫内节育器的生产求解全过程文档及程序
Python02--python中的缩进，注释和模块
学习笔记：根号分治（优雅的暴力）

原文地址：https://blog.csdn.net/DeepLearning_/article/details/132713507