css简介
1.1css引入方式
想要在网页中引入css,共有三种方法
- 外部样式表
- 内部样式表
- 行内样式表
外部样式表
外部样式表是css最理想的引入方式。在实际开发中,我为了提升网站的性能速度和可维护性,一般都会使用外部样式表。
语法
<link rel="stylesheet" type="text/css" href="文件路径" />
说明
rel属性的取值是固定的,既“stylesheet”,表示引入的是一个样式表文件,既css文件
type属性的取值也是固定的,既“text/css”,表示这是标准的css
href属性表示css的路径。
如果要使用外部样式表,必须使用link标签来引用,而link标签是放在head标签中的
内部样式表
内部样式表是指把HTML代码和css代码放在同一个html文件中,其中css放在style标签内,style标签是放在head标签内部的
语法:
<style type="text/css">
....
</style>
说明
type="text/css"是必须添加的,表示这是标准的css
css样式必须放在style标签内定义,而style放在head标签内
举例
<!!DOCTYPE >
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
div{color:red;}
p{color: aqua;}
</style>
</head>
<body>
<div>hello css</div>
<div>hello css</div>
<p>hello css</p>
</body>
</html>
效果:
行内样式表
举例:
<!!DOCTYPE >
<html>
<head>
<meta charset="utf-8" />
</style>
</head>
<body>
<div style="color: red;">hello css</div>
<div style="color: blueviolet;">hello css</div>
<div style="color: brown;">hello css</div>
</body>
</html>
样式: