CSS0

初识CSS

前段的组成

结构语言：HTML (盖内房子毛坯房）涉及到布局设计

表现语言：CSS (装修 美化)

行为语言：JavaScript (安装电梯 基于事件)

1.了解CSS

CSS:Cascading Style Sheet级联/层叠样式

它是用来给我们的HTML做美化。事实上HTML也能做一些美化，但是为啥单独提出来CSS呢，因为降低耦合性，面向对象

CSS的样式非常丰富，这是HTML不可比拟的。

CSS的文件格式：.css

2.掌握CSS的基本语法

CSS使用示例：

3.掌握CSS的引入方式

行内样式表：直接在标签中通过style属性设置样式，每一个HTML标签都有此属性。

内部样式 表：在head标签中添加style标签，然后编写完整的css语法。

外部样式表：

本项目中的CSS文件

公网的CSS链接（CDN加速）

三种引入方式的优先设置样式。例如：h3 p级：行内样式表优先级最高>内部样式表和外部样式表谁在后面谁优先级高（代码是由上而下执行的，后面的相同设置会覆盖前面的）

4.掌握CSS的基本选择器

CSS中有三大基本选择器：

标签选择器：标签名就作为一种选择器，表示给对应的标签统一设置样式。例如：h3 p

类选择器：需要借助标签的class属性（应用最广泛的基本选择器）

ID选择器：需要借助标签的id属性

基本选择器优先级（范围越小，优先级越高）：ID选择器>类选择器>标签选择器

5.掌握CSS的初级优化

5.1字体美化

字体类型：font-family

字体大小:font-size

字体的风格:font-style

字体的粗细:font-weight

一个字体属性设置所有字体样式：font

5.2 文本美化

文本颜色：color

文本对齐 方式：text-align（必须保证要设置的对齐是处于块元素内的）

块元素和行内元素：

在标准文档流中，我们的HTML的元素可以分为两大派 。

块元素：独占一行，可以设置宽度和高度等信息。例如：div ph1-h6…

行内元素：多个行内元素可以在一行展示内容，它不可 以设置宽度和高度等信息，内容撑开宽度和高度。a image span…

文本缩进：text-indent

文本行高：（行间距）

文本装饰：text-decoration

5.3超链接美化

伪类选择器，可以应用其他的标签，但是常用于a标签。

hover:可以设置鼠标悬浮在超链接标签上的样式

linked可以设置超链接未点击前的样式（等价于标签选择器直接设置）

visited可以设置超链接被 点击后的样式。

active可以设置超链接被点击但还未释放的样式。

5.4鼠标指针

小手型指针

wait加载中

help 帮助带问号

text文本光标型

crosshair 十字型

default 默认光标样式

5.5 背景美化

背景颜色设置：background-color

背景图片：background-image

背景尺寸：background-size

背景平铺：background-report

背景定位:background-position

背景属性background

6. 掌握列表的使用

在HTML中为我们准备了三种列表形式：无序列表，有序列表，定义列表。

无序列表：以符合为前缀的列表（应用最广是a标签之外的最常用的的）

有序列表：以有序的数字或者有序的符合（| || ||| A B C D)

定义列表：带小标题的列表形式

对于列表的样式设置，CSS有专门的属性。