一、什么是css?
1、css Cascading Style Sheets(层叠样式表/级联样式表;
2、css 是控制HTML文档内容的排版;
二、css解决了什么问题:
以前网页的元素的样式,全部是依靠标签属性来控制,比如:<h1 align="center">hello world</h1>通过align="center"来控制文本居中;由于在html中使用大量的标签属性导致,可读性和维护性的代价太大,所以w3c(万维网联盟)创建了css,来控制页面的布局和元素的样式。
三、css的使用方式:
1、外部样式表:通过引入文件外部的样式;
<link rel="stylesheet" href="./common.css">
<!DOCTYPE html>
<html>
<head>
<title>css 学习</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" href="./common.css">
</head>
<body>
<h1>hello world</h1>
</body>
</html>
common.css:
h1{
color: green;
text-align: center;
background-color: darkred;
}
2、内部样式表:定义在html文档的内部样式
<!DOCTYPE html>
<html>
<head>
<title>css 学习</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style>
h1{
color: #fff;
text-align: center;
background-color: darkred;
}
</style>
</head>
<body>
<h1>hello world</h1>
</body>
</html>
3、内联样式:
<!DOCTYPE html>
<html>
<head>
<title>css 学习</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<h1 style="color: #fff;text-align: center; background-color:darkred;">hello world</h1>
</body>
</html>