作用:为了更好的渲染HTML元素而引入。
如何添加到HTML中?
- 内联样式-在HTML元素中使用"style"属性
- 内部样式表-在HTML文档头部<head>区域使用<style>元素来包含CSS
- 外部引用-使用外部CSS文件
推荐使用外部引用CSS
内联样式
1 <p style="color:blue; margin-left:30px;">段落颜色为蓝色,左外边距为30px</p>
1 <p style="background-color: gray;">段落背景颜色为灰色</p>
1 <p style="text-align:center">文本水平垂直对齐</p>
元素:
- font-family(字体)
- color(颜色)
- font-size(字体大小)
内部样式表
什么情况使用?
- 当单个文件需要特别样式时,就可以使用内部样式表。
- 在<head>部分通过<style>标签来定义内部样式表。
1 <head> 2 <style type="text/css"> 3 body{background-color:red;} 4 p{color:blue;} 5 </style> 6 </head>
外部样式表
什么情况使用?
- 当样式需要被应用到很多页面的时候。
- 使用外部样式表,就可以通过更改一个文件来改变整个站点的外观。
<head> <link rel="stylesheet" type="text/css" href="hello.css"> </head>
元素:
- link-定义资源引用地址,HTML中没有结束标签,只能存在于head部分
- rel-定义当前文档与被链接文档之间的关系
- type-规定被链接文档的MINME类型
- href-定义被链接文档的位置
2020-10-12 17:03:00