html代码转换css

<!-- 正确的链接方式 -->
<link rel="stylesheet" href="styles.css">

/* 示例：添加浏览器前缀 */
.example {
  -webkit-border-radius: 10px; /* Safari 和 Chrome */
  -moz-border-radius: 10px;    /* Firefox */
  border-radius: 10px;         /* 标准语法 */
}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>示例页面</title>
<style>
  body {
    font-family: Arial, sans-serif;
  }
  .container {
    width: 80%;
    margin: 0 auto;
  }
  h1 {
    color: #333;
  }
</style>
</head>
<body>
<div class="container">
  <h1>欢迎来到我的网站</h1>
  <p>这是一个使用内联样式的示例。</p>
</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>示例页面</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
  <h1>欢迎来到我的网站</h1>
  <p>这是一个使用外部样式表的示例。</p>
</div>
</body>
</html>

body {
  font-family: Arial, sans-serif;
}
.container {
  width: 80%;
  margin: 0 auto;
}
h1 {
  color: #333;
}