css外部样式表怎么写
时间: 2023-05-28 17:03:02 浏览: 125
1. 创建一个后缀名为.css的文本文件,例如style.css。
2. 在文件中编写CSS样式,例如:
```
body {
background-color: #F0F0F0;
font-family: Arial, sans-serif;
}
h1 {
color: #333;
text-align: center;
}
p {
font-size: 16px;
line-height: 1.5;
}
```
3. 保存文件并将其链接到HTML文档中。可以使用以下代码在<head>标签中链接外部样式表:
```
<link rel="stylesheet" href="style.css">
```
其中,href属性指向外部样式表文件的路径。如果外部样式表文件与HTML文件在同一目录中,则只需提供文件名即可。如果在不同目录中,则需要提供完整的文件路径。
相关问题
css外部样式表基本格式
CSS(层叠样式表)外部样式表是指将样式信息存储在一个独立的文件中,而不是直接嵌入到HTML文档中的<style>标签内。外部样式表的基本格式如下:
1. 创建一个`.css`文件:通常,外部样式表文件的扩展名为`.css`,例如`styles.css`。
2. 标题声明:文件开始可以包含一个可选的`@charset`指令,指定字符集,如`:root { @charset "UTF-8"; }`。
3. 样式规则:每一条样式规则由选择器(target)和声明块组成。选择器用于标识要应用样式的HTML元素,声明块包含属性和值对,如:
```css
selector {
property: value;
/* 可能还有其他属性和值 */
}
```
4. 例子:
```css
body {
background-color: lightblue; /* 设置body元素背景颜色 */
font-family: Arial, sans-serif; /* 设置字体 */
}
h1 {
color: blue; /* 设置h1标题颜色 */
text-align: center; /* 文本居中 */
}
```
5. 引入到HTML:在HTML文档的<head>部分,通过`<link>`标签链接外部CSS文件,如:
```html
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
```
css 怎么使用外部样式表
要使用外部样式表(External Stylesheet),需要按照以下步骤进行操作:
1. 创建一个新的 CSS 文件,例如 "main.css"。
2. 在该文件中编写 CSS 样式规则,例如:
```css
body {
background-color: #f1f1f1;
font-family: Arial, sans-serif;
}
h1 {
color: #333;
}
.container {
width: 800px;
margin: 0 auto;
}
```
3. 将该 CSS 文件保存到与 HTML 文件相同的目录中。
4. 在 HTML 文件的 `<head>` 标签中添加以下代码来链接外部样式表:
```html
<link rel="stylesheet" href="main.css">
```
在这里,`href` 属性的值应该是 CSS 文件的路径,如果 CSS 文件与 HTML 文件在同一目录下,则只需提供文件名即可。
5. 保存 HTML 文件,并在浏览器中打开该 HTML 文件,你将看到应用了外部样式表的效果。
通过使用外部样式表,你可以在多个 HTML 文件中共享相同的样式规则,并且可以提高代码的可维护性和重用性。
阅读全文