本文深入讲解CSS行内样式和页面内联样式的应用，包括如何使用内联样式直接修改HTML元素的显示效果，以及如何利用页面内联样式通过类选择器统一管理多个元素的样式，实现网页设计的灵活性和高效性。
行内样式（内联样式）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>行内样式(内联样式)</title>
</head>
<body>
<!--
行内样式：是将css样式属性和值写到标签的style属性中。
任何标签，只要是body中显示的内容的，都拥有style属性
-->
<span style="color: red;font-family: '微软雅黑';font-size: 90px">行内样式</span>
<!--
有的标签本身就有一定的修饰作用，如H1标签。
我们想改变其默认样式，使用css样式属性，
可以叠加到其原来的默认标签之上，优先显示，所以css叫层叠。
-->
<h1 style="color: red;">层叠样式</h1>
</body>
</html>
页面内联样式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>页面内联样式</title>
<!--
页面内联通过<style></style>标签在页面内定义一些命名的样式组，
页面中的标签可以引用这些样式组的名字来应用样式。
-->
<style>
/**
*类选择器样式（伪类）
*一定是点开头，这里我们要说的是，
*如果在页面体内有样式应用了<style>中的类，
*那么该对象就有了类里面定义的相应属性
*/
.text1{
color:blue;
font-family:"微软雅黑";
font-size:"30" ;
}
</style>
</head>
<body>
<h1 class="text1">这是准备应用类样式的内容</h1><br />
<h2>这是准备应用类样式的内容</h1><br />
<h3 class="ttt">这是准备应用类样式的内容</h1><br />
<a href="#">这是准备应用类样式的内容</a><br />
<a href="#">这是准备应用类样式的内容</a><br />
<a href="#">这是准备应用类样式的内容</a><br />
</body>
</html>
扫一扫
471
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
