css基础

css（层叠样式表）

两个特点：

1、继承性，继承父级的某些样式

2、层叠性，可被后来者继承

css的三个样式：

1、头部样式表（写在head之前）

　　例：<style type="text/css">

　　　　　　ul{background：yellow；}

　　　　<style>

2、外部样式表（用link引入，链入式）

　　例：<link rel="stylesheet" type="text/css" href="css文件的路径">

3、行内样式表（极差，不允许使用，除非自己写小demo）

　　例：<div syle=“width：100；height：100；”>

css优先级：

1、后来者居上，越往后越说了算

2、id > class > 标签

3、！important 优先级是最最高，不到迫不得已不要用

4、头部样式和外部样式

 常用选择器

• id选择器（#）

　　　　根据id名去选择，用#去选择id名

• class选择器（.）

　　　　根据class名去选择，用.去选择class名

• 标签选择器

　　　　直接选择标签，在写项目时要具体到某个板块的标签

• 父子选择器和隔代选择器

　　　　父子关系要用>进行选择，而隔代选择则用空格去选择

• 伪类选择器

　　　　一、向被激活的元素添加样式，：active。使用此伪类选择器可点击转换样式，可改变所数的类的宽度，高度，颜色等等

　　　　二、当鼠标悬浮在元素上方时，向元素添加样式。伪类选择器 :hover。此伪类选择器把鼠标放在所选的类的上方即可更改样式

　　　　三、改变鼠标指针样式中的光标，同样是使用:hover伪类选择器，不过是加一种属性cursor可以用在类选择器和输入标签input上

　　　　　　1、cursor:alias

　　　　　　　　

 

　　　　　　2、cursor:cell

　　　　　　　　

 

　　　　　　3、cursor:col-resize

　　　　　　　　

 

　　　　　　4、cursor:context-menu

　　　　　　　　

 

　　　　　　5、cursor:copy

　　　　　　　　

 

　　　　　　6、cursor:crosshair

　　　　　　　　

 

　　　　　　7、cursor:e-resize

　　　　　　　　

 

　　　　　　8、cursor:grab

　　　　　　　　

 

　　　　　　9、cursor:grabbing

　　　　　　　　

 

　　　　　　10、cursor:help

　　　　　　　　

 

　　　　　　11、cursor:move

　　　　　　　　

 

　　　　　　12、cursor:ne-resize

　　　　　　　　

 

　　　　　　13、cursor:no-dro

　　　　　　　　

 

　　　　　　14、cursor:none

　　　　　　　　

 

　　　　　　15、cursor:progress

　　　　　　　　

 

　　　　　　16、cursor:row-resize

　　　　　　　　

 

　　　　　　17、cursor:se-resize

　　　　　　　　

 

　　　　　　19、cursor:vertical-text

　　　　　　　　

 

　　　　　　20、cursor:wait

　　　　　　　　

 

　　　　　　21、cursor:zoom-in

　　　　　　　　

 

　　　　　　22、cursor:zoom-out

　　　　　　　　

 

　　　　四、向拥有键盘输入焦点的元素添加样式。伪类选择器 :focns适用于输入标签input上

　　　　五、向已被访问的链接添加样式 伪类选择器 :visited

　　　　六、向未被访问的链接添加样式 伪类选择器 :link

　　　　七、可用于在某个元素之前加入某些内容 :before

　　　　八、可用于在某个元素之后加入某些内容 :afte

　　　　九、：nth-child（）向元素的第某个子元素添加样式。伪类选择器 :first-child此伪类可用于在p、li等等标签中

　　　　十、：nth-of-type（）用法上没有区别，但它只会匹配相同标签的兄弟元素。也就是在：nth-child的基础上加了一条限制：标签要一致。