CSS-DAY1

CSS-DAY1

一共有七天，加油，一天大概三十节

1.CSS简介

1.1HTML的局限性

HTML只关注内容的语义，并且很丑

1.2CSS-网页的美容师

CSS 是层叠样式表 ( Cascading Style Sheets ) 的简称.

有时我们也会称之为 CSS 样式表或级联样式表。

CSS 是也是一种标记语言 CSS 主要用于设置 HTML 页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、 边距等）以及版面的布局和外观显示样式。

CSS让我们的网页更加丰富多彩，布局更加灵活自如。

简单理解：CSS 可以美化 HTML , 让 HTML 更漂亮， 让页面布局更简单。

总结:

1. HTML 主要做结构,显示元素内容
2. CSS 美化 HTML ,布局网页
3. CSS 最大价值: 由 HTML 专注去做结构呈现，样式交给 CSS，即 结构 ( HTML ) 与样式( CSS ) 相分离

1.3CSS语法规范

CSS 规则由两个主要的部分构成：选择器以及一条或多条声明。

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

属性和属性值以“键值对”的形式出现

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

属性和属性值之间用**英文“:”**分开

多个“键值对”之间用**英文“;”**进行区分

所有的样式，都包含在

• 1
• 2
• 3
• 4
• 5
• 6

• 通过此种方式，可以方便控制当前整个页面中的元素样式设置
• 代码结构清晰，但是并没有实现结构与样式完全分离
• 使用内部样式表设定 CSS，通常也被称为嵌入式引入，这种方式是我们练习时常用的方式

5.3（较少使用）行内样式表（行内式）

行内样式表（内联样式表）是在元素标签内部的 style 属性中设定 CSS 样式。适合于修改简单样式

<div style="color: blue; font-size: 25px;">
    这是行内样式表
div>
1
2
3

• style 其实就是标签的属性
• 使用行内样式表设定 CSS，通常也被称为行内式引入
• 不推荐大量使用，只有对当前元素添加简单样式的时候，可以考虑使用

5.4（重点）外部样式表（链接式）

实际开发都是外部样式表. 适合于样式比较多的情况
核心是:样式单独写到CSS 文件中，之后把CSS文件引入 到 HTML 页面中使用

引入外部样式表分为两步：

1. 新建一个后缀名为 .css 的样式文件，把所有 CSS 代码都放入此文件中。
2. 在 HTML 页面中，使用标签引入这个文件。