css代码html代码配合使用
时间: 2023-12-29 16:02:29 浏览: 29
HTML代码和CSS代码是紧密配合的,HTML是结构化标记语言,而CSS是用来控制HTML页面样式的语言。下面是一个例子:
HTML代码:
```
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<h1>Welcome to my website</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<main>
<h2>About Me</h2>
<p>My name is John and I am a web developer.</p>
</main>
<footer>
<p>© 2021 My Website</p>
</footer>
</body>
</html>
```
CSS代码:
```
/* Global styles */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
/* Header styles */
header {
background-color: #333;
color: #fff;
padding: 20px;
}
h1 {
margin: 0;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
nav li {
display: inline-block;
margin-right: 20px;
}
nav li a {
color: #fff;
text-decoration: none;
}
/* Main styles */
main {
padding: 20px;
}
h2 {
font-size: 24px;
margin-bottom: 10px;
}
p {
line-height: 1.5;
}
/* Footer styles */
footer {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
```
在HTML中,我们链接了一个名为“style.css”的CSS文件,这个文件包含了所有的样式代码。我们可以对HTML中的元素应用这些样式,例如对header元素应用背景颜色、字体颜色和内边距等样式。
在CSS中,我们定义了全局样式、头部样式、主要内容样式和底部样式。我们使用选择器来选定HTML中的元素,例如使用header选择器来选定HTML中的<header>元素,并应用样式。我们也可以使用类选择器和ID选择器来选定特定的元素,并应用样式。
通过HTML和CSS的配合使用,我们可以轻松地控制网页的外观和布局,使其更具吸引力和易用性。