1.什么是CSS?
- CSS 指层叠样式表 (Cascading Style Sheets)
- 样式定义如何显示 HTML 元素
- 样式通常存储在样式表中
- 把样式添加到 HTML 4.0 中,是为了解决内容与表现分离的问题
- 外部样式表可以极大提高工作效率
- 外部样式表通常存储在 CSS 文件中
- 多个样式定义可层叠为一个
2.CSS语法
CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明:
选择器通常是您需要改变样式的 HTML 元素。
每条声明由一个属性和一个值组成。
属性(property)是您希望设置的样式属性(style attribute)。每个属性有一个值。属性和值被冒号分开。
CSS声明总是以分号(;)结束,声明总以大括号({})括起来。为了让CSS可读性更强,你可以每行只描述一个属性。
注释是用来解释你的代码,并且可以随意编辑它,浏览器会忽略它。
CSS注释以 /* 开始, 以 */ 结束。(这与Java中的注释方法是类似的)
3.CSS简单的应用举例
3.1 实例一:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>CSS简单学习</title> <style> body { background-color: aqua; } h1 { color: brown; text-align: center; } /*这是一行注释*/ p { /*这是另一行注释*/ color: deeppink; font-family: "楷体"; font-size: 20px; } </style> </head> <body> <h1>CSS实例</h1> <p>这是一个段落。</p> </body> </html>
3.2 实例二
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>CSS简单学习</title> <style> body {background-color: burlywood;} h1 {color: chocolate;} hr {color: black;} p { color: darkred; font-size: 15px; text-align: left; } a:link {color: red;} a:visited {color: blue;} a:hover {color: chartreuse;} a:active {color: white;} </style> </head> <body> <h1>这是一个一级标题</h1> <hr/> <p>这个段落是被设定的CSS样式渲染的。</p> <p> <a href="https://www.baidu.com" target="_blank">这是一个链接</a> </p> </body> </html>