CSS 应用

简单示例

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>CSS</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>Hello CSS!</h1>
    <p>CSS 很 666666……</p>
  </body>
</html>
/* style.css */
h1 {
  padding: 10px;
  background-color: orange;
  border: 1px solid black;
}

p {
  color: purple;
}

查看运行结果 https://codepen.io/twhy/pen/MoWOeW

CSS 工作原理

![https://mdn.mozillademos.org/files/11781/rendering.svg]

CSS 应用方式

外部样式表(推荐)

1.通过 <link> 引入 CSS。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>CSS</title>
  <link rel="stylesheet" href="index.css">
</head>
<body>
  <h1>Hello CSS!</h1>
</body>
</html>

2.通过 @import 引入样式,放入 css 中

不要忘记分号

<style>
@import url("index.css");
@import url('index.css');
@import url(index.css);
@import 'custom.css';
@import "common.css";
@import url('landscape.css') screen and (orientation:landscape);

</style>

内部样式表

将 CSS 放在页面的 <style>元素中。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>CSS</title>
  <style>
    h1 { background: orange; }
  </style>
</head>
<body>
  <h1>Hello CSS!</h1>
</body>
</html>

内联样式

不推荐,但在某些情况下很有用。

<p style="background: orange; font-size: 24px;">CSS 很 👍<p>

属性样式

废弃

<img src="a.png" width=100 height=200 >

参考链接

results matching ""

    No results matching ""