网页前端培训第三次笔记

一，什么是CSS？

• CSS 指层叠样式表 (Cascading Style Sheets)。
• 样式定义如何显示 HTML 元素，样式通常存储在样式表中
• 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
• 外部样式表可以极大提高工作效率，其通常存储在 CSS 文件中
• 多个样式定义可层叠为一个

二，CSS 规则

主要有两个主要的部分构成：选择器，（一条或多条）声明。

1.选择器：您需要改变样式的 HTML 元素。

2.声明：每条由一个属性和一个值组成。（CSS声明总是以分号;结束，声明总以大括号{}括起来）

三，注释：/* */

四，id 和 class 选择器

（作用：用于设置CSS样式）

1.id 选择器

（1）以 "#" 来定义。

（2）可以为标有特定 id 的 HTML 元素指定特定的样式。

（3）HTML元素以id属性来设置id选择器。

2.class选择器

（1）在 CSS 中，类选择器以一个点"."号显示

（2）class 选择器用于描述一组元素的样式，可以在多个元素中使用。（不同于id选择器）

（3）class 选择器在HTML中以class属性表示。

（4）也可以指定特定的HTML元素使用class。

实例：

所有的 p 元素使用 class="center" 让该元素的文本居中:

       

五，创建CSS

当读到一个样式表时，浏览器会根据它来格式化 HTML 文档。

1.插入样式表三种方式：

• 外部样式表(External style sheet)
• 内部样式表(Internal style sheet)
• 内联样式(Inline style)

2.外部样式表（样式需要应用于很多页面时。）

每个页面使用 <link> 标签链接到样式表。 <link> 标签在（文档的）头部：

3.内部样式表（当单个文档需要特殊的样式时。）

使用 <style> 标签在文档头部定义内部样式表，就像这样:

4.内联样式（当样式仅需要在一个元素上应用一次时。）

5.多重样式

注：

优先级 ：

 六，CSS背景

用于定义HTML元素的背景。

实例

1.背景颜色

 2.背景图像

 3.背景图像-水平或垂直平铺

 4.设置定位与不平铺

七，CSS文本格式

1.文本颜色

2.文本对齐方式（注：当text-align设置为"justify"，每一行被展开为宽度相等，左，右外边距是对齐（如杂志和报纸）。）

3.文本修饰

4.文本转换

5.文本缩进（注：指定文本第一行缩进）

6.更多属性                 CSS Text(文本) | 菜鸟教程 (runoob.com)

八，CSS字体

1.font-family 属性设置文本的字体系列。

 2.字体样式：

• 正常 - 正常显示文本
• 斜体 - 以斜体字显示的文字
• 倾斜的文字 - 文字向一边倾斜（和斜体非常类似，但不太支持）

 

3.字体大小：font-size 属性

 

 九.CSS链接

 十，CSS列表

1.在 HTML中，有两种类型的列表：

• 无序列表 ul - 列表项标记用特殊图形（如小黑点、小方框等）
• 有序列表 ol - 列表项的标记有数字或字母

使用 CSS，可以列出进一步的样式，并可用图像作列表项标记。

2.list-style-type属性

十一，CSS表格

1.border属性

 2.折叠边框：border-collapse 属性

3.（1）表格宽高：Width和height属性            （2）表格文字对齐：text-align属性

            

 （3）表格填充：                                        （4）表格颜色