基本概念
CSS 指层叠样式表 (Cascading Style Sheets)
为什么要用CSS?
HTML描述了要呈现的内容,而CSS则定义了这些内容的呈现形式,比如字体,颜色。使用CSS能够将页面内容和呈现形式有效分离,有利于分工合作,也有利于快速更换不同的呈现形式。
使用样式表可以有三种方式:
(1)内联样式
讲样式定义在style属性中,内容和表现形式高度耦合。维护困难,不利于分工合作。
<p style="font-size:24px;color:red;">内联样式的演示</p>
(2)内部样式
在<head>标签中通过<style>标签来定义。
内容和表现形式的耦合程度降低了,但是也在同一个html文件中,没有实现完全分离。定义的样式只能在当前的html文件中使用。
<style>
p{
font-size: 50px;
color: red;
}
</style>
</head>
<body>
<p style="font-size: 24px;color: aqua">内部样式1</p>
<p>内部样式2</p>
(3)外部样式
首先需要定义一个样式表文件.css,(.css文件中可以用/* */)
外部样式使得内容和表现形式彻底分离,有利于分工合作及维护,可在多个html文件中使用。尽量使用外部样式。
css样式
/*
设置字体和颜色
*/
p{
font-size: 36px;
color: red;
}
html中使用一个标签来使用定义的CSS样式
<heah>
<link rel="stylesheet" type="text/css" href=".css路径">
</head>
<body>
<p>CSS样式定义</p>
</body>