在HTML中设置CSS有多种方式,包括内联样式、内部样式表和外部样式表,下面将详细介绍这三种方法,并提供示例代码。
(图片来源网络,侵删)
1、内联样式
内联样式是直接在HTML标签中使用style
属性来设置样式,这种方法适用于单个元素或少量元素的样式设置,示例如下:
<p style="color: red; fontsize: 20px;">这是一个红色的段落文本。</p>
2、内部样式表
内部样式表是将CSS代码放在HTML文件的<head>
标签内的<style>
标签中,这种方法适用于整个页面的样式设置,示例如下:
<!DOCTYPE html> <html> <head> <style> p { color: red; fontsize: 20px; } </style> </head> <body> <p>这是一个红色的段落文本。</p> </body> </html>
3、外部样式表
外部样式表是将CSS代码放在一个单独的文件中,然后在HTML文件中通过<link>
标签引入,这种方法适用于多个页面共享相同的样式设置,示例如下:
创建一个名为styles.css
的文件,内容如下:
p { color: red; fontsize: 20px; }
在HTML文件中引入这个样式表:
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="styles.css"> </head> <body> <p>这是一个红色的段落文本。</p> </body> </html>
内联样式适用于单个元素或少量元素的样式设置,直接在HTML标签中使用style
属性。
内部样式表适用于整个页面的样式设置,将CSS代码放在HTML文件的<head>
标签内的<style>
标签中。
外部样式表适用于多个页面共享相同的样式设置,将CSS代码放在一个单独的文件中,然后在HTML文件中通过<link>
标签引入。
本文来自投稿,不代表重蔚自留地立场,如若转载,请注明出处https://www.cwhello.com/442930.html
如有侵犯您的合法权益请发邮件951076433@qq.com联系删除