CSS入门教程：层叠样式表的作用与引入方式

需积分: 5 63 浏览量更新于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页未读，继续阅读

人生的方向随自己而走

粉丝: 4511
资源: 328

CSS入门教程：层叠样式表的作用与引入方式

CSS 教程.ppt

html_css1.ppt

CSS_01.rar

CSS-day02.pptx

CSS-day04.pptx

CSS-day03.pptx

CSS-day05.pptx

CSS-day06 (2).pptx

IMG20240523121440.pptx

前端课程设计资料.7z

最新资源