理解CSS：层叠样式表入门指南
需积分: 0 18 浏览量
更新于2024-07-15
收藏 6.45MB DOCX 举报
"这是一份关于CSS的学习笔记，涵盖了CSS的基础概念、主要作用、语法规则以及三种书写方式：嵌入式、外链式和行内式。"
在Web开发中，CSS（Cascading Style Sheets）是用于控制HTML或XML（包括如SVG、MathML等各种XML方言）文档呈现的关键技术。CSS允许开发者独立于内容来定义元素的布局、视觉表现和版式设计，从而实现结构与表现的分离，使得网页设计更加灵活和易于维护。
1. CSS的主要概念和作用
CSS翻译为“层叠样式表”或“级联样式表”，它的主要任务是设置HTML网页的外观和样式。这包括但不限于字体大小、颜色、字体类型、背景颜色、背景图像等，使网页呈现出丰富多彩的视觉效果。
2. CSS的语法规则
CSS代码由选择器和花括号内的声明组成。选择器指向HTML元素，而声明语句则由属性和对应的值组成，如`h1{color:red;font-size:14px;}`。每条声明以英文冒号分隔，语句之间用分号结束。属性值通常不需引号，数值型值常伴随单位（如px），且CSS中不应包含HTML标签。
3. CSS的书写方式
- **嵌入式**：将CSS代码置于HTML文档的`<style>`标签内，常见于`<head>`标签中。例如：
```html
<head>
<style>
h1 {color: red; font-size: 14px;}
</style>
</head>
```
- **外链式**：创建独立的`.css`文件，通过`<link>`标签将其链接到HTML文档。确保HTML页面能正确引用CSS文件，如：
```html
<link rel="stylesheet" type="text/css" href="styles.css">
```
- **行内式**：直接在HTML元素的`style`属性中写入CSS样式，如：
```html
<p style="color: blue; font-size: 16px;">这是带内样式的段落</p>
```
4. 选择合适的书写方式
- 嵌入式适用于简单的样式或测试，只对当前HTML文件有效。
- 外链式是推荐的做法，便于样式管理，可复用性高，但需要额外的HTTP请求加载CSS文件。
- 行内式用于特定场景的样式覆盖，但应尽量避免过度使用，因为它可能导致代码混乱并降低可维护性。
理解并熟练运用这些CSS基础知识，能够帮助开发者构建美观、响应式的网页，并提升网站的用户体验。在实际项目中，通常会结合使用这三种方式，根据需求和项目规模来平衡易用性、效率和代码组织。
我们一定要确认0 文件被引入，怎么确认？
2.4 什么是行内式？
将 $$ 代码书写 标签的 属性中
$ 是一个通用属性，每一个标签里面都拥有这个属性！
语法格式：
&标签名 +# !" !"#'&)标签名'
总结：
使用嵌入式的方式来书写 代码，它只能作用域当前的 文件
使用外链式的方式来书写 代码，它可以作用于多个
剩余16页未读，继续阅读
2020-08-25 上传
2020-07-15 上传
2022-11-26 上传
2019-07-15 上传
2024-07-04 上传
2020-05-24 上传
2019-11-04 上传
2022-11-19 上传
2014-07-27 上传
