一、内联样式
<p style="color:red;">该段文字的颜色为红色</p>
内联样式指的是直接在HTML标签中使用样式属性进行定义的样式。如上面的例子中,使用了style属性来设置文字的颜色为红色。但是,内联样式有其局限性,如果要对所有页面元素应用同一样式,需要在每个标签中重复定义,工作量较大。
二、内部样式
<head> <style type="text/css"> p {color: blue;} </style> </head> <body> <p>该段文字的颜色为蓝色</p> </body>
内部样式指的是在HTML头部中定义的样式,使用<style>标签将样式写在HTML文件的head部分,在整个HTML文件中共享这些样式。上面的代码中,定义了p标签的文字颜色为蓝色,所有p标签中的文字都将应用这个样式。
三、外部样式
<head> <link rel="stylesheet" type="text/css" href="style.css"> </head>
外部样式指的是将CSS样式写在外部文件中,并通过<link>标签引入到HTML页面中。例如上面的代码中,通过<link>标签引入了style.css文件,其中包含了所有页面需要的样式。这种形式可以使得代码更加清晰、易于维护,也可以让多个页面共享同一个样式文件。
综上所述,CSS样式可以有三种存在形式:内联样式、内部样式和外部样式。根据页面需求和样式复杂度,来选用适合的样式存在形式,可以使得代码更加清晰易读、易于维护。