CSS：美化网页的美容师，实现HTML与样式分离

需积分: 5 177 浏览量更新于2024-08-03 收藏 786KB PDF 举报

CSS-day01是一份关于CSS基础的教程，它强调了HTML与CSS分离的重要性，使得网页设计更为高效和灵活。CSS全称为层叠样式表（Cascading Style Sheets），是一种用于描述HTML或XML（包括如SVG等）文档的呈现方式的样式语言。它的主要作用是控制页面元素的样式，包括文本内容（字体、大小、对齐）、图像样式（尺寸、边框、间距）以及页面布局和视觉效果。在HTML中，CSS的应用解决了传统HTML局限性的问题，例如操作html属性的不便以及过多的样式导致的代码冗余和页面结构混乱。理想情况下，HTML负责定义网页结构，而CSS则专注于控制页面的外观和行为，实现了“结构与表现分离”，使得维护和更新更加容易。 CSS初识概念部分介绍了三种常见的CSS引入方式： 1. **行内样式**（内联样式）：直接在HTML标签中使用`style`属性设置，虽然简洁但会导致样式和结构紧密耦合，不便于管理和复用。例如： ```html <div style="color:red;font-size:12px;">...</div> ``` 2. **内部样式表**（内嵌样式表）：将CSS代码放在`<head>`内的`<style>`标签中，这使得样式更具组织性，但仍然没有完全分离结构与样式。 3. **外部样式表**（外链样式表）：通过`<link>`标签引用单独的`.css`文件，实现了真正的样式和结构分离，提高代码的复用性和可维护性。例如： ```html <link rel="stylesheet" type="text/css" href="styles.css"> ``` `<link>`标签中的`rel`属性定义了样式表与文档的关系，`type`属性指定了文档类型，`href`属性指定了外部样式表文件的URL。 CSS-day01文档深入浅出地讲解了CSS的基本概念、不同引入方式及其优缺点，帮助读者理解如何利用CSS提升网页设计的质量和效率。通过学习和实践，读者能够更好地掌握CSS，从而创建出更加美观、结构清晰的网页。

样式表优点缺点使用情况控制范围

行内样

式

书写方便，权重高

没有实现样式和结构

相分离

较少

控制一个标签

(少)

内部样

式表

部分结构和样式相分

离

没有彻底分离较多

控制一个页面

(中)

外部样

式表

完全实现结构和样式

相分离

需要引入

最多，强烈

推荐

控制整个站点

(多)

4.4 三种样式表总结(位置)

5.CSS样式规则总结

使用HTML时，需要遵从一定的规范。CSS亦如此，要想熟练地使用CSS对网页进行修饰，首先需要了解

CSS样式规则，

具体格式如下:

总结：

1.选择器用于指定CSS样式作用的HTML标签，花括号内是对该对象设置的具体样式。

2.属性和属性值以”键值对”的形式出现。

3.属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等。

4.属性和属性值之间用英文 : 连接。

5.多个"键值对"之间用英文 , 进行区分。

优先级：就近原则

书写规范

展开格式(推荐)

样式选择器，属性名，属性值关键字全部使用小写字母书写，属性字符串允许使用大小写。

二. CSS基础选择器

1. 选择器的作用

找到特定的HTML页面元素

div {

color: red;

font-size: 12px;

}

剩余11页未读，继续阅读

人生的方向随自己而走

粉丝: 4482
资源: 328

CSS：美化网页的美容师，实现HTML与样式分离

CSS-day03.pdf

CSS-day02.pdf

CSS-day04.pdf

CSS-day05.pdf

CSS-day06.pdf

web-day4.rar

wordpress函数大全-补完.pdf

计算机后端-PHP视频教程. laravel-p2p-day1ta-12.pdf

Israel-RL-day.github.io

day06（CSS04-浮动）.rar

最新资源