CSS入门教程：层叠样式表的作用与引入方式
需积分: 5 152 浏览量
更新于2024-08-03
收藏 974KB PPTX 举报
"CSS-day01.pptx"
CSS（Cascading Style Sheets）层叠样式表是网页设计中用于美化和布局的重要工具。HTML虽然能够创建网页的基本结构，但其在设计灵活性和视觉表现上存在局限，使得HTML文档变得臃肿且难以维护。CSS的引入就是为了弥补这些不足，使网页设计更加丰富多彩，布局更加灵活。它实现了结构（HTML）与样式（CSS）的分离，让HTML专注于内容结构，而CSS则负责外观和布局。
CSS的概念包括字体、颜色、背景、图片外形、元素尺寸、边框样式、边距等控制，以及整体排版。通过CSS，我们可以更精细地调整网页元素的显示效果，并且可以根据不同浏览器定制样式，确保跨平台的兼容性。
CSS的引入方式主要有三种：
1. 行内样式（内联样式）：通过在HTML标签中使用`style`属性来直接设置元素样式，例如：
```html
<div style="color:red;font-size:12px;">内容</div>
```
行内样式只影响当前元素及其嵌套的子元素，但会导致HTML代码冗余，没有实现样式和结构的分离。
2. 内部样式表（内嵌样式表）：将CSS代码写在HTML文档的`<head>`部分，用`<style>`标签包裹，如下所示：
```html
<style>
div {
color: red;
font-size: 12px;
}
</style>
```
这种方式可以让整个页面共享同一套样式，但仍然未完全分离结构和样式。
3. 外部样式表（外链式）：将CSS代码存储在独立的`.css`文件中，然后通过HTML的`<link>`标签将其链接到HTML文档中，如下所示：
```html
<link rel="stylesheet" type="text/css" href="styles.css">
```
这种方法实现了样式和结构的完全分离，便于代码管理和维护，尤其在大型项目中更为常见。
这三种引入方式各有优缺点，实际应用中应根据项目需求和维护性来选择合适的方法。行内样式方便快捷，但不推荐大量使用；内嵌样式适合小型项目或局部样式；外部样式表则是大型网站的首选，利于代码组织和复用。理解并熟练运用CSS，能够极大地提升网页的设计质量和开发效率。
4.4 三种样式表总结(位置)
样式表 优点 缺点 使用情况 控制范围
行内样
式
没有实现样式和结构
相分离
控制一个标签
(少)
书写方便，权重高 较少
内部样
式表
部分结构和样式相分
离
控制一个页面
(中)
没有彻底分离
需要引入
较多
外部样
式表
完全实现结构和样式
相分离
最多，强烈
推荐
控制整个站点
(多)
5.CSS样式规则总结
使用HTML时，需要遵从一定的规范。CSS亦如此，要想熟练地使用CSS对网页进行修饰，首先需要了解
CSS样式规则，
具体格式如下:
总结：
1.选择器用于指定CSS样式作用的HTML标签，花括号内是对该对象设置的具体样式。
2.属性和属性值以”键值对”的形式出现。
3.属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等。
4.属性和属性值之间用英文 : 连接。
5.多个"键值对"之间用英文 , 进行区分。
优先级：就近原则
书写规范
展开格式(推荐)
样式选择器，属性名，属性值关键字全部使用小写字母书写，属性字符串允许使用大小写。
1 div {
2 color: red;
3 font-size: 12px;
4 }
二. CSS基础选择器
1. 选择器的作用
找到特定的HTML页面元素
剩余11页未读，继续阅读
2024-01-25 上传
2024-01-25 上传
2024-01-25 上传
2023-05-21 上传
2023-03-27 上传
2023-05-26 上传
2023-05-26 上传
2023-07-20 上传
2023-02-26 上传
人生的方向随自己而走
- 粉丝: 3947
- 资源: 328
我的内容管理
展开
最新资源
- 最优条件下三次B样条小波边缘检测算子研究
- 深入解析：wav文件格式结构
- JIRA系统配置指南：代理与SSL设置
- 入门必备：电阻电容识别全解析
- U盘制作启动盘：详细教程解决无光驱装系统难题
- Eclipse快捷键大全：提升开发效率的必备秘籍
- C++ Primer Plus中文版：深入学习C++编程必备
- Eclipse常用快捷键汇总与操作指南
- JavaScript作用域解析与面向对象基础
- 软通动力Java笔试题解析
- 自定义标签配置与使用指南
- Android Intent深度解析：组件通信与广播机制
- 增强MyEclipse代码提示功能设置教程
- x86下VMware环境中Openwrt编译与LuCI集成指南
- S3C2440A嵌入式终端电源管理系统设计探讨
- Intel DTCP-IP技术在数字家庭中的内容保护
