CSS入门指南：常用代码与引用方法
需积分: 10 103 浏览量
更新于2024-09-17
收藏 164KB PDF 举报
"本文介绍了CSS入门的基本知识，包括如何开始CSS设计和在HTML文档中引用CSS的三种方式：内联、内部和外部样式表。"
在CSS（层叠样式表）入门过程中，首先需要理解页面布局的基本概念。分析页面布局是至关重要的一步，这涉及到将页面划分为不同的部分，如头部、尾部和内容区域，以及这些部分之间的相对位置。要关注每个部分的内容和所需的HTML元素，以及元素的视觉呈现和它们与周围元素的关系。通过这样的预规划，可以提高CSS的效率，确保整个项目页面的一致性。
在HTML文档中引用CSS有以下三种常见方法：
1. **内联样式**：直接在HTML元素的`style`属性中编写CSS。例如：
```html
<div style="margin: auto;">contentcontentcontentcontent</div>
```
这种方式简便快捷，但不推荐大量使用，因为会导致代码难以维护和管理。
2. **内部样式表**：在HTML文档的`<head>`部分使用`<style>`标签定义样式：
```html
<style>
div {
margin: auto;
}
</style>
```
内部样式表适用于整个文档共享的样式，但同样不宜过多，以保持HTML文档的清晰。
3. **外部样式表**：创建独立的CSS文件（如`index.css`），然后在HTML文档中使用`<link>`标签引入：
```html
<link rel="stylesheet" type="text/css" href="css/index.css" title="cool">
```
外部样式表是最佳实践，可实现代码复用和更好的组织结构。将CSS文件存放在专门的文件夹（如`css`或`style`）中便于管理。
另外，还可以使用`@import`规则在CSS文件内部导入其他CSS文件：
```css
@import url(my.css);
```
但相比`<link>`标签，`@import`在某些情况下可能会影响页面加载速度，因此通常不推荐用于页面加载时的样式导入。
如果需要用JavaScript动态切换CSS文件，应使用`<link>`标签，并设置`title`属性以便识别不同的样式表：
```html
<link rel="stylesheet" href="/css/styles.css" type="text/css" media="screen" />
<link rel="stylesheet" href="/css/orange.css" type="text/css" media="screen" title="orange" />
<link rel="alternate stylesheet" href="/css/blue.css" type="text/css" media="screen" title="blue" />
```
通过JavaScript，可以根据需要切换`<link>`标签的`disabled`属性或更改`href`来激活不同的样式表。
掌握CSS的基本原理和引用方式是成为CSS初学者的关键步骤。了解这些知识后，可以开始探索更复杂的CSS选择器、布局技术、响应式设计以及动画效果，逐步提升CSS技能。
一、如何开始 CSS
在写对应 html 文档的 css 之前首先需要分析一下整个页面的布局，比如说整个页面可以分成几个
部分，头部、尾部，内容部分...各个部分之间的位置有什么关系，各个部分中都有什么样的内容，大概需
要什么样的标签元素来描述这些内容，这些元素在页面上有什么样的表现形式，每个元素与其周围上下
左右的位置关系如何，跟其所在的容器的在表现上有什么样的关系...还有就是整体浏览并分析整个项目中
的页面，这样对优化 css 会很有用，也可以加快整个项目的页面开发，也可以使整个项目在页面风格上的
统一性更好。
二、如何在 HTML 文档中引用 CSS
在 html 文档中引用 css 的方法有三种：
内联，内部，外部；
内联就是在 html 文档中直接在标签的 style 属性中写样式：
<div style=”margin:auto;”>contentcontent contentcontent </div>
内部就是在 html 文档的头部在 style 标签内写样式：
<style>
div{
margin:auto;
};
</style>
外部就是在有一个单独的 css 文件，扩展名就是 css，在 html 文档的头部用 link 标签引入对应的
css 文件，较好的做法就是单独建立一个专门放置 css 文件的文件夹，一般命名为 css 或者 style，
<link rel=stylesheet type="text/css" href="css/index.css" title="cool">
还有一种外部引入 css 文件的方式就是用@import，
<style type="text/css">
@import url(my.css);
</style>
如果用到用 js 来控制用到哪个 css 文件的话就要用到 link 这种方式了：
<link rel="stylesheet" href="/css/styles.css" type="text/css" media="screen" />
<link rel="stylesheet" href="/css/orange.css" type="text/css" media="screen"
title="orange" />
<link rel="alternate stylesheet" href="/css/blue.css" type="text/css" media="screen"
title="blue" />
<link rel="alternate stylesheet" href="/css/pink.css" type="text/css" media="screen"
title="pink" />
因为 link 是 html 元素，可用 javascript 去控制 dom 元素最后达到改变样式的效果。
*最好的做法就是用外部的 css，这样可以统一管理整个项目的 css，更便于日后的维护或者更新
升级等等工作。
三、如何运用正确的选择器
外部文件的 css 控制标签样式的方式有很多种:
*{} /*控制整个文档中的所有的元素*/
p{} /*控制整个文档中的所有 p 元素*/
*.c{} /*控制整个文档中 class 为 c 的元素*/
p.c{} /*控制整个文档中 class 为 c 的 p 元素*/
#main{} /*控制文档中 id 为 main 的那个元素*/
下载后可阅读完整内容，剩余5页未读，立即下载
点击了解资源详情
点击了解资源详情
点击了解资源详情
2023-05-20 上传
2008-11-17 上传
2023-05-23 上传
544 浏览量
2009-07-13 上传
2011-04-02 上传
