CSS-网页的美容师
CSS-Cascading Style Sheets 美化样式
通常叫做层叠样式表(级联样式表)。
CSS样式引入的方式有三种(书写位置):
- 1、内部样式表
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/* 选择器{ 属性:值; } 选择器是选择标签的 */
th{
color:skyblue;
}
td{
font-size:14px;
}
tr{
height:30px;
}
</style>
</head>
直接写在head标签里面,统一更改。
- 2、行内式(内联样式)
<h3 style="color:pink;font-size:25px;">青春无悔,恋爱赶紧</h3>
<input type="text" value="北京" style="color:#ccc;" />
直接写在行标签内部里面,偶尔使用,不适合大批量使用。
- 3、外部样式表(外链式)
实际工作中以外部样式表为主。
外部样式表不用写style。
CSS文件:
div {
color:red;
}
HTML文件:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<div>小帅哥</div>
<div>小靓妹</div>
<div>小骚货</div>
</body>
</html>
总结:
行内样式表:书写方便,权重高;没有实现样式和结构相分离;使用较少;控制一个标签;
内部样式表:部分结构和样式相分离;没有彻底实现样式和结构相分离;使用较多;控制一个页面;
外部样式表:完全实现结构和样式相分离;需要link来引入;使用最多,推荐使用;控制整个站点;