CSS (Cascading Style Sheets) 用于渲染HTML元素标签的样式,简单的说就是让HTML富有色彩更加美观。
CSS 可以通过以下方式添加到HTML中:
内联样式- 在HTML元素中使用"style" 属性
内部样式表 -在HTML文档头部 <head> 区域使用<style> 元素 来包含CSS
外部引用 - 使用外部 CSS 文件
要定义单个元素时使用,样式属性可以包含任何 CSS 属性。
<元素名称 style="属性:属性值;"></元素名称>
内联样式
内部样式表
外部样式表
<p style="color:blue;">内联样式</p> <p>内部样式表</p> <p>外部样式表</p>
定义单个HTML文件里的样式时使用,你可以在<head> 部分通过 <style>标签定义内部样式表。
<style> 选择符{属性:属性值;} </style> <元素名称 class="类选择符名称"></元素名称> <元素名称 id="id 类选择符名称"></元素名称>
<!doctype html> <html> <head> <meta charset="utf-8"> <title>炫代码(www.xuandaima.com)</title> <style type="text/css"> p.hh1 {color:blue;} </style> </head> <body> <p>内联样式</p> <p class="hh1">内部样式表</p> <p>外部样式表</p> </body> </html>
只要引入外部样式表,该站点内外的所有文件都可以使用。
<link rel="stylesheet" href="css文件路径" type="text/css"/> <元素名称 class="类选择符名称"></元素名称> <元素名称 id="id 类选择符名称"></元素名称>
p.hh1{color:blue;}
<!doctype html> <html> <head> <meta charset="utf-8"> <title>炫代码(www.xuandaima.com)</title> <link rel="stylesheet" type="text/css" href="/Template/Test/css/wailian.css"> </head> <body> <p>内联样式</p> <p>内部样式表</p> <p class="hh1">外部样式表</p> </body> </html>
标签 | 描述 |
---|---|
<style> | 定义文本样式 |
<link> | 定义资源引用地址 |
如果想了解更多CSS知识,请看CSS教程。