H5基础-4

一、CSS介绍

CSS:层叠样式表

CSS3：CSS最新版本

语法：选择器 { 属性：属性值；}

二、CSS的三种引入方式

1.内联式

<元素 style="属性：属性值；"> </元素>

2.内部式

在head标签里面添加一个style标签

<style>

        选择器{属性：属性值；}

</style>

3.外链式

A.新建一个以.css为后缀的文件

B.在html文件的head标签里面写一个link标签

        <link rel="stylesheet" href="">

C.在href属性中写CSS文件的路径

D.在CSS文件中按照语法写代码，并保存！

三、选择器：是一种匹配模式，是一种用于选中元素的规则

1.基本选择器

A:  * { }---通用选择器，通配符---选中所有元素

B:   e { }---标签选择器---选中所有元素e

C:  .e { }---类选择器---选中所有类名为e的元素

D.  #e { }---id选择器---选中id名为e的元素

注：类名可重复,id名是唯一的

2.伪类选择器

e:hover---选中鼠标悬停的元素e

四、优先级的判断规则

计算权重之和，和越大，越优先

!important > 行内样式（内联式）> id > class > 标签 * > 默认

注：如果权重之和一致，则后者覆盖前者（就近原则）

五、设置样式的属性

width : *px;---宽度

height : *px;---高度

background : #16进制值;---背景色

float : left;---元素横着排列

margin-left : *px;---元素距离左边的间隔

margin-bottom : *px;---元素距离下面的间隔

color : 颜色;---文字的颜色

font-size : *px;---文字的大小

font-weight : bold;---文字加粗