个人博客
使用CSS
的第一步是要了解如何将CSS
关联到文档上,只有将HTML文档和CSS
关联,CSS
才能够影响到HTML
文档。
#style标签
利用HMTL
的style
标签可以在HTML
文档众嵌入CCSS样式。
<style type="text/css">
<!--css代码-->
</style>
<body>
<div>Hello World</div>
</body>
#行内样式
利用标签的style
属性设置行内样式,除了body
之外所有的HTML
标签都可以设置style
属性。
<body>
<div style="CSS代码">我是一个盒子</div>
</body>
#link标签
link标签
可以在HTML
中引入外部的CSS
样式文件,做到HTML
和CSS
相分离,这种方式也是最常用的一种。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CODE</title>
<link rel="stylesheet" type="text/css" href="CSS文件路径">
</head>
<body>
</body>
</html>
使用link
标签时 rel
,href
属性是必须的
#@import指令
在CSS
中,@import
指令可以用来引入外部的CSS
文件,从而在当前文件中应用其中定义的样式。
/* main.css */
@import url("header.css");
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
}
h1 {
color: blue;
}
/* header.css */
header {
background-color: #333;
color: white;
padding: 20px;
}
我们在main.css
中引入了header.css
,使用@import
指令可以使CSS
代码更加模块化和可维护,从而方便团队协作和代码管理。
以上是常见的CSS
应用方式,无论使用哪种方式,都需要了解CSS
的基本语法和常用属性,才能实现丰富多样的网页布局和样式效果,在接下来的一段时间中,让我们来更深入的了解 CSS。