css该如何学习？这里有心人可以借鉴一下

Css基础

概念：层叠样式表或者叫级联样式表

内嵌式写法：

语法：

选择器

基础选择器

标签选择器

P

类选择器

定义：

.fontcolor

调用：

文字

特点：

谁调用谁改变

一个标签可以同时调用多个类样式

多个标签可以同时调用一个类样式

命名：

不推荐使用汉字定义类名

不推荐使用标签名或者属性名定义类名

不能使用纯数字或者特殊字符（"_"除外）定义类名

id选择器

定义：

#自定义名称

标签通过 id="自定义名称"

注意：

页面中的表id名称不能重复。

同一个标签不能调用多个id样式

通配符选择器

*

复合选择器

标签指定式选择器

P.类选择器

既。。。又。。。。

后代选择器

选择器 选择器

标签之间的关系属于嵌套关系。

并集选择器

选择器,选择器,选择器

注意：

标签之间不一定是并列关系！！！！！

Css书写位置介绍

内嵌式写法

外联式写法

新建一个文件，后缀名以.css命名（css文件）

在html页面中通过

标签将css文件引入

行内式写法

通过给标签设置style属性来设置样式。

Css书写方式之间的区别

内嵌式写法：

代码可维护性较差，没有实现css代码与html结构的完全分离

影响的范围只有当前页面

行内是写法：

代码可维护性极差，css代码和html结构没有实现分离

影响的范围只有当前标签

外联式写法：

代码可维护性高，css与html结构完全分离

影响范围广，当前整个网页站点。

Html标签的分类

显示方式不同进行的分类。

块级元素

典型代表：

div,p,li,h1...

特点：

元素自己独占一行显示（与宽度无关）

可以设置宽度和高度

当嵌套一个块级元素，子元素如果不设置宽度，那么该子元素的宽度为父元素的宽度。

行内元素

典型代表:

Span， a, font, strong...

特点：

元素在一行上显示

不能直接设置宽度和高度

行内块元素

典型代表:

Image, input(表单控件)

特点：

元素在一行上显示

可以设置宽度和高度

元素之间的转换

Display: inline 将元素转化为行内元素

Display：inline-block 将元素转化行内块元素

Display: block 将元素转化为块元素

Css特性

层叠性

样式的覆盖。 样式的层叠性与样式的调用顺序没有关系，与样式的定义顺序有关。

层叠性发生的前提： 样式冲突

继承性

继承性发生的前提是标签之间属于一种嵌套关系

文字颜色可以实现继承

文字大小可以实现继承

字体可以实现继承

行高可以实现继承

与文字有关的属性都可以 实现继承

特殊性：

不能继承父元素中的文字颜色（层叠掉了）

标题标签不能继承父元素中的文字大小

优先级

默认样式

0 1 10 100 1000 1000以上

优先级的特点

继承的权重为0

权重会叠加

伪类介绍

超链接默认状态下的样式

a{}与a:link{}实现的效果是一样的

a:link{

属性:值;

} 超链接访问过后的样式 a:visited{

属性:值;

}

鼠标放到超链接上的样式 a:hover{

}

超链接激活状态下的样式 a:active{

} 获取焦点（光标）的时候的样式 :focus{

}

背景（background）

Background-color

背景颜色

（背景图片）

注意：设置背景图片的时候一定要设置宽度和高度

background-repeat （设置背景平铺）

repeat （默认值）|

no-repeat （不平铺）|

repeat-x | （横向平铺）

repeat-y （纵向平铺）

background-position （设置背景位置）

设置具体值： left| right| top| bottom| cneter

设置具体值的时候不区分先后顺序

设置具体数字的时候，第一个值代表水平方向，第二个值代表垂直方向

background-attachment （设置背景是否固定）

Scroll（默认值）滚动

fixed （图片固定）

属性联写：

没有数量限制和先后顺序限制

去掉列表前面的显示方式：