CSS — 外部、内部、内联及它们的优先级顺序

一丶外部样式

首先先在相对与网页同一个路径下建立一个扩展名以.css的文件,将它用记事本打开,放入代码:
如图:
CSS — 外部、内部、内联及它们的优先级顺序_第1张图片
然后利用 link 标签即可导入外部样式文件,代码如下:

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Documenttitle>
		
		<link rel="stylesheet" type="text/css" href="index.css">

head>

<body>
	<p>加油!p>
body>
html>

效果图:
CSS — 外部、内部、内联及它们的优先级顺序_第2张图片

—————————————————————————————————————————

二丶内部样式

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Documenttitle>

	<style type="text/css">
		p{
			text-align: center;
			font-size: 30px;
		}
	style>
	
head>

<body>

	<p>加油!p>

body>
html>

—————————————————————————————————————————

三丶内联样式

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Documenttitle>

head>

<body>

	<p style="text-align: center;font-size: 30px;color: red">加油!p>

body>
html>

—————————————————————————————————————————

四丶优先级详解

  • 如果在HTML文件中同时出现了三种样式的写法,那么他们会查漏补缺,意思也就是说会把没有的效果自动加上去,已有的效果才会按照它们各自的优先级大小进行选择。
  • 那么优先级顺序为:内联样式 > 内部样式 > 外部样式

你可能感兴趣的:(Web,Web,CSS,外部,内部,内联样式,优先级顺序,样式)