CSS 的作用是让网页元素的样式更加丰富,也为了让网页的内容和样式能拆分开。CSS 是 Cascading Style Sheets 的首字母缩写,意思是层叠样式表。有了 CSS ,html中大部分表现样式的标签就废弃不用了,html只负责文档的结构和内容,表现形式完全交给CSS,html文档变得更加简洁。
CSS 基本语法: 选择器{属性:值;属性:值;属性:值} 选择器是将样式和页面元素关联起来的名称,属性是希望设置的样式属性每个属性有一个或多个值
CSS 页面引入的方法: 推荐使用第一种方法,第二种比较直观,演示的时候用
1 外联式 通过link标签,连接到外部样式表到页面中 <link rel="stylesheet" type="text/css" href="css/main.css">
2 嵌入式 通过style标签,在网页上创建嵌入的样式表
3 内敛式 通过标签的style属性,在标签上直接写样式
外联式案例
在 css 目录下创建 main.css
div{
font-size:160px;
color:red;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>link_document</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<div>this is a div label</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>link_document</title>
<!-- <style type="text/css">
h1{
font-size:120px;
color:gold;
}
</style>-->
<!--
<link rel="stylesheet" type="text/css" href="css/main.css">
-->
</head>
<body>
<h1>page_label</h1>
<div>this is a div label</div>
<!-- zhi jie zai biao qian zhogn xie geshi -->
<a href="www.baidu.com" style="font-size:120px;color:red">habby_yang</a>
</body>
</html>