HTML && CSS 学习笔记(1)CSS(关键词:CSS/样式表/style)
2017-11-26 21:45
525 查看
如何使用样式
当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化。有以下三种方式来插入样式表:外部样式表
当样式需要被应用到很多页面的时候,外部样式表将是理想的选择。使用外部样式表,你就可以通过更改一个文件来改变整个站点的外观。<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>
举例:
<html> <head> <style type="text/css"> h1 {color: red} <!-- 此处的含义是,下方<h1></h1>内的header 1为红色 --> p {color: blue} </style> </head> <body> <h1>header 1</h1> <p>A paragraph.</p> </body> </html>
内部样式表
当单个文件需要特别样式时,就可以使用内部样式表。你可以在 head 部分通过<head> <style type="text/css"> body {background-color: red} p {margin-left: 20px} </style> </head>
内联样式
当特殊的样式需要应用到个别元素时,就可以使用内联样式。 使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。<p style="color: red; margin-left: 20px"> This is a paragraph </p>
参考文献:
1.HTML CSS。
相关文章推荐
- HTML && CSS 学习笔记(2)超文本(关键词:HTML/超文本/超链接/锚/anchor)
- HTML && CSS 学习笔记(5)div、class(关键词:html/div/class)
- HTML && CSS 学习笔记(4)HTML <span> 标签(关键词:HTML/span)
- HTML && CSS 学习笔记(3)CSS(关键词:CSS/基础语法)
- HTML&CSS基础学习笔记1.33-元素选择器
- webpack学习笔记-1-css-loader & style-loader
- Head first HTML&CSS学习笔记
- Head first HTML&CSS ---[学习笔记第四章]
- HTML&CSS学习笔记
- Head first HTML&CSS ---[学习笔记第三章]
- HTML&CSS基础学习笔记1.29-灵活地使用样式
- HTML&CSS基础学习笔记1.25-input标签的选择文件和隐藏元素
- HTML&CSS基础学习笔记1.23-表单的文本域和下拉列表
- 【慕课网】HTML&CSS基础课程学习笔记
- HTML&CSS基础学习笔记1.17-表格的头部与尾部
- Head first HTML&CSS ---[学习笔记第六章]
- HTML&CSS基础学习笔记1.18-表格的边框
- html&css学习笔记
- HTML&CSS基础学习笔记1.34-通用选择器
- HTML&CSS学习笔记