css基础（1）

1.css介绍
Css:层叠样式表，它是cascading style sheets的缩写，作用就是给html标签加表现形式（样式-显示），如：字体，图片，列表，位置等。

<style type=”text/css">
.p{
color:red;
font-size:20px;
}
div{
border:1px solid red;
background:red;
}
</style>

2.HTML：超文本标记语言，主要作用把内容（文字，图片，视频等）放在网页中（结构）；
Css:层叠样式表，主要作用给HTML进行样式的显示，如何的布局，样式；
JavaScript：浏览器的脚本语言，主要作用给HTML加动态效果（行为）

Css特点：
可以非常精准的定位，定位某个或某些标记，给这些标记加样式；
HTML和css代码分离，减少后期工作量。
3.css基础：
（1）Css的基本语法：

Css样式由语法规则组成，由多个语法组成样式表；
一个css语法规则由选择器和声明语句组成；
选择器：如何的精准的定位到某个或某些HTML标记的方法，选择器有很多方式
声明语句：就是如何去给HTML标记加样式的属性和值，每个声明语句用分号（;)结束;多个声明语句用花括号括起来，这个是时候就是去给某个或某些标记加这个里面所有写的样式。

4.css的引入方式
（1）内嵌方式：把css样式表通过一对标签写在HTML文件的head标签中，当成HTML的标记来使用，一般情况都是写到head中，不推荐写到别的地方。
语法：

案例：

（2）行内方式：把css样式当成HTML的一个属性来写：如：

语法： <h1 style=”color:red;font-size:50px;>php<h1>
案例：

（3）外链方式：把css样式表写到一个以.css为结尾的文件中（index.css),把这个文件引入到某个HTML文件中，当前HTML文件就会有css的效果实现。好处：一个css文件可以给多个html使用
语法： <link rel=”stylesheet” type=”text/css” href=”具体的css文件路径”/>

（4）@import：在一个css文件中再次引入一个css文件
语法：
<@import url(“要引入的css文件路径”)>
1.css文件：



5.css选择器
标准选择器：通配选择器，标记选择器，类选择器，id选择器
（1）通配选择器
语法：*{color:red;}
注意：通配符是选择上所有的标记，但是少用，ie6不支持
（2）标记选择器：
说明：直接写标记名当成选择器来用，选择器那个标记当前这个页面中所有标记都会发生改变
语法：标记名{color:red}

(3)类选择器：又称”class选择器”
说明：每个HTML都有一个公共属性，class 属性配合css使用的，这个css属性就是给某些或某个标记加一类样式。
语法：class 属性的值{color:red;}
注意：类名可以给不挑剔的标记加，这个是时候，这些标记统称为一类
在写css选择器时必须加.
建议不管是某个或某些标记都使用类的方式

（4）id选择器
说明：每个HTML都有一个公共的属性id，每个id必须是唯一的；
语法：#id的值{color:red;}
注意：id选择器只是给一个标记加样式，一般用js 的动态效果使用
Id和class是分开使用的，id给js使用，class给css使用

（5）复杂选择器：多元素选择器，后代选择器，子类选择器，伪类选择器
1.多元素选择器：
说明：把css基本选择器进行组合，组合成多种选择器方式
语法：div,p,il,li,.class,.my,#id{color:red}
注意：大型的网站一般都是用多元素来替代通配符；
每个选择器用逗号隔开；
案例：

2.后代选择器：
说明：在制作网站时会出现”嵌套“的形式，有可能是多级，而且每个多级里面的标记还相同，这个时候就可以选择某个标记中的某个内容
语法：第一代 第二代 第三代 …{color:red;}
注意：
如果某一代有相同的标记，那都会选择，需要每代都写清楚
P 标记中不能嵌套一些块元素


4.子类选择器
说明：就是选择一代
语法：父类（选择器） > 子类（选择器）{color：red;}
案例：

5.伪类选择器：
说明：给超链接加样式的方法
Link:默认状态；
Hover：放上状态；
Active：当点击时的状态（不放手）；
Visited：访问过的状态。
语法：选择器：状态{color：red;}
注意:一般是默认状态和访问过的状态设置成一样的效果
所有的标签都可以加伪类选择器
案例：

6.css常用属性
1.文字属性


2.文本属性：


3.尺寸属性：
说明：其实就是元素的宽和高，任何的标记元素都有宽和高



4.列表属性
说明：对ul,ol,li,dl,dd,dt进行样式的修改




5.背景属性




6.精灵图：把很多小图片放入一个大的背景图