精灵网站建设外贸推广优化公司
文章目录
- HTML中引入CSS的方式
- 行内样式
- 内部样式
- 外部样式
- yinru.css文件
- 完整html文件
- 引入CSS方式的优先级
HTML中引入CSS的方式
HTML：是使用标签来描述网页元素
CSS：是Cascading Style Sheets，层叠样式表，用来控制样式来显示网页元素
html中通过以下三种方式来引入css从而控制网页元素的显示
行内样式
行内样式：写在需要控制样式的标签中的style属性中
<!--1、行内样式：写在标签的style属性中-->
<h1 style="background: brown">行内样式</h1>
内部样式
内部样式：写在style标签中，可以在html中的任意位置，通常约定在head标签中
<!--2、内部样式：写在style标签中，可以在html中的任意位置，通常约定写早head标签中-->
<h2>内部样式</h2>
外部样式
外部样式：写在一个单独的css文件中，需要通过link标签在html中进行引入，link一般写在head标签中
<!--3、外部样式：写在一个单独的.css文件中，需要通过link标签在html页面中引入，一般写在head标签中-->
<h3>外部样式</h3>
<!--3、外部样式：写在一个单独的.css文件中，需要通过link标签在html页面中引入，一般写在head标签中-->
<h3>外部样式</h3>
yinru.css文件
h3{background-color: blueviolet;
}
完整html文件
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>html引入css</title><style>h2{background: coral;}</style><!--3、外部样式：写在一个单独的.css文件中，需要通过link标签在html页面中引入，一般写在head标签中--><link rel="stylesheet" href="./yinru.css">
</head>
<body>
<!--html引入css的三种方式-->
<!--1、行内样式：写在标签的style属性中-->
<h1 style="background: brown">行内样式</h1>
<!--2、内部样式：写在style标签中，可以在html中的任意位置，通常约定写早head标签中-->
<h2>内部样式</h2>
<!--3、外部样式：写在一个单独的.css文件中，需要通过link标签在html页面中引入，一般写在head标签中-->
<h3>外部样式</h3></body>
</html>
引入CSS方式的优先级
css引入方式的优先级：行内样式 > 内部样式，外部样式
内部样式，外部样式的优先级取决于谁先加载，整个页面从上到下依次渲染加载