css 的引入方式
行内样式,行间样式
是通过style属性来设置元素的样式
<标签名 style="属性1:属性值1;属性2:属性2;属性3:属性3">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<div style="color:red; font-size:16px">
<input type="text" value="韩国思密达" style="color: red; font-size:18px"/>
</div>
</body>
</html>
缺点:没有与html分离开来
内部样式表
写在 head标签之间
选择器{
属性1:属性值;
属性2:属性值;
属性3:属性值;
}
<style type="text/css">
div {
color:red;
font-size:16px;
position:absolute;
}
</style>
初步实现了 样式与结构的分离。
文档仍然较为冗长,只针对当前页面。
外部样式表
结构与样式的完全分离
样式共享 只写一次
<head>
<link rel="stylesheet" type="text/css" href="path/to/file/" />
</head>
/** path/to/file/index.css**/
div h3 {
color:red;
font-size:16px;
}
KEVINGUO.CN https://www.kevinguo.cn