20210524-CSS引入方式
程序员文章站
2022-06-04 09:09:16
...
20210524-CSS引入方式
外部样式
所谓外部样式就是在外面引入的
比如当前页面是a.html(路径是wabapp/page/a.html) 现要对a.html 内容添加样式，可以在a文件夹下创建a.css 文件(路径是wabapp/style/a.css)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>哈哈</title>
<link rel="stylesheet" type="text/css" href="CSS文件路径(<%=basePath%>style/a.css)"/>
</head>
<body>
</body>
</html>
rel 是relative的缩写,取值stylesheet 意为引入css文件
type 取值固定 “text/css”，表示CSS
href 表示路径 即上述。
注：@import与外部样式表相似，两者区别：
@import 先加载HTML后加载CSS
link 先加载CSS 后加载HTML
由此可知 我们在开发时基本不用@import 方式
内部样式表
内部 即 CSS样式和HTML在一个文件内
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>哈哈</title>
<style type="text/css">
</style>
</head>
<body>
</body>
</html>
style在head里
行内样式表
行内：可以通俗看作是一行。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>哈哈</title>
</head>
<body>
<div style="color:blue;">CSDN博客-写文章</div>
</body>
</html>
上一篇： 20210524跨平台编译记录