CSS是一種用于網(wǎng)頁設(shè)計(jì)的樣式表語言，它可以通過控制HTML元素的樣式和布局，控制網(wǎng)頁的呈現(xiàn)效果。在本文中我們將學(xué)習(xí)如何使用HTML元素和CSS樣式表進(jìn)行簡(jiǎn)單的布局。
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
<style>
/* 這里是CSS樣式表代碼 */
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
.container {
margin: 0 auto;
width: 80%;
background-color: #fff;
border: 1px solid #ccc;
padding: 20px;
}
h1 {
font-size: 2em;
color: #333;
}
p {
font-size: 1.2em;
line-height: 1.5em;
color: #666;
}
</style>
</head>
<body>
<div class="container">
<h1>Welcome to My Website</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam auctor bibendum sapien, quis malesuada nulla faucibus vel. Vestibulum vestibulum, sem vel aliquet posuere, lorem enim sodales sapien, vitae tristique sapien nibh eu justo.</p>
<p>Donec auctor arcu sed magna pellentesque, non dictum nisl porttitor. Praesent gravida, sapien euismod lobortis vulputate, sem eros tristique magna, commodo faucibus nibh libero sed odio. Etiam vitae orci libero. Aenean faucibus blandit quam, eu sagittis lorem facilisis quis. Fusce a commodo ipsum. Aenean sit amet leo tellus. Nulla facilisi. Nullam dignissim justo vitae neque aliquam fringilla.</p>
</div>
</body>
</html>在上面的代碼中，我們使用了HTML的基本元素如div、p、h1等，并使用CSS樣式表對(duì)這些元素進(jìn)行了樣式和布局設(shè)置。在CSS樣式表中，我們控制了整個(gè)body的字體和背景顏色，使用了.container類對(duì)文章進(jìn)行了居中和邊框樣式的設(shè)置，控制了標(biāo)題和段落的字體、顏色和行高等屬性的設(shè)置。
使用CSS樣式表可以大大簡(jiǎn)化頁面設(shè)計(jì)的流程，使得網(wǎng)頁設(shè)計(jì)更加快捷、高效。