一、认识HTML与CSS

HTML（超文本标记语言）是构建网页结构的基础，它使用一系列标签来定义网页的内容。而CSS（层叠样式表）则是用来描述网页的外观和格式。两者结合，可以让网页不仅拥有良好的结构，还具备吸引人的视觉效果。

1.1 HTML基础

HTML通过标签来构建网页，如<h1>表示标题，<p>表示段落，<a>表示链接等。这些标签按照一定的规则组合，形成了网页的基本结构。

1.2 CSS基础

CSS通过选择器来定位页面中的元素，并对其应用样式。样式包括颜色、字体、布局等，可以极大地提升网页的视觉效果。

二、CSS样式标签的嵌入

在HTML文档中，CSS样式可以通过三种方式嵌入：

2.1 内部样式表

内部样式表将CSS代码写在HTML文档的<style>标签中，通常位于<head>部分。

<head>
<style>
body {
  background-color: #f4f4f4;
  font-family: Arial, sans-serif;
}
</style>
</head>

2.2 行内样式表

行内样式表直接在HTML标签的style属性中定义样式。

<p style="color: red; font-size: 18px;">这是一段特殊样式的文字</p>

2.3 外部样式表

外部样式表将CSS代码保存在单独的.css文件中，然后通过<link>标签引入。

<head>
<link href="styles.css" rel="stylesheet">
</head>

三、CSS选择器与属性

CSS选择器用于定位页面中的元素，而属性则用于定义元素的样式。

3.1 选择器

CSS选择器包括：

  • 基础选择器：如id选择器#myElement，class选择器.myClass等。
  • 复合选择器：如后代选择器parent > child，子选择器parent > child等。

3.2 属性

CSS属性包括：

  • 字体属性：如font-size、font-family等。
  • 文本属性：如color、text-align等。
  • 背景属性：如background-color、background-image等。

四、CSS布局技巧

CSS布局技巧包括：

  • 盒模型：了解盒模型有助于更好地控制元素的位置和大小。
  • 弹性布局：使用flex布局可以轻松实现响应式设计。

五、实战案例

以下是一个简单的HTML和CSS示例，展示了如何使用CSS来美化网页。

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: #f4f4f4;
  font-family: Arial, sans-serif;
}
header {
  background-color: #333;
  color: white;
  padding: 10px;
  text-align: center;
}
</style>
</head>
<body>

<header>
  <h1>我的网站</h1>
</header>

<p>这是一个简单的网页布局示例。</p>

</body>
</html>

通过以上步骤，您已经掌握了使用HTML和CSS打造个性网站风格的基本方法。不断实践和探索，您将能够创造出更多精彩的作品。