第二章 CSS基础 - 图1 CSS样式表由组成,由多个语法规则组成样式表 一个CSS语法规则由“”和“”组成 选择器:如何的精准的定位到 声明语句:就是如何去给HTML标记加样式的,每个声明语句用分号()结束,多个声明语句用花号扩起来,这个时候就是给某个或某些标记加这个里面的所有写的样式(属性和值) 第二章 CSS基础 - 图2
    1.内嵌方式:把CSS样式表通过一对标签写在HTML文件的head标签中,当成HTML的标记来使用,一般情况都是写到head中,不推荐写的别的地方。语法:案例:第二章 CSS基础 - 图3Figure : img2.行内方式:把CSS样式当成HTML的一个属性来写,如:语法:PHP07案例: 第二章 CSS基础 - 图43.外链方式:把CSS样式表写到一个以.css为结尾的文件中(index.css),把这个文件引入到某个HTML文件中,当前HTML文件就会有CSS的效果实现,好处:一个css文件可以给多个HTML文件使用。语法:案例:第二章 CSS基础 - 图5Figure : img4.@import:可以在一个css文件中再次引入一个css文件语法:案例:第二章 CSS基础 - 图6Figure : img标准选择器:通配符选择器、标记选择器、类选择器、id选择器1.通配符选择器语法:* {color:red;}注意:通配符是选择上所有的标记,但是少用,ie6不支持案例:第二章 CSS基础 - 图7Figure : img2.标记选择器:说明:直接写标记名当成选择器来使用,选择器那个标记当前这个页面中所有标记都会发生改变’语法:标记名 {color:red;}案例:第二章 CSS基础 - 图8Figure : img3.类选择器:又称“class选择器”说明:每个HTML标记都有一个公共属性,class属性配合CSS使用的,这个class属性就是给某些或某个标记加一类样式语法:.class属性的值 {color:red;}注意:类名可以给不同的标记加上,这个时候这些标记统称一类在写css选择器时必须加点(.)建议不管是某个或某些标记都使用类的方式案例:第二章 CSS基础 - 图9Figure : img4.id选择器说明:每个HTML标记都有一个公共的属性id,每个id必须是唯一的语法:#id的值 {color:red;}注意:id选择器只是给一个标记加样式,一般用js的动态效果使用。Id和class是分开使用的,id给js使用,class给css使用案例:第二章 CSS基础 - 图10Figure : img复杂选择器:多元素选择器、后代选择器、子类选择器、伪类选择器1.多元素选择器:说明:把CSS的进行组合,组合成多种选择器方式语法:div,p,ul,li,.class,.my,#id {color:red;}注意:大型的网站一般都是用多元素来替代通配符每个选择器用逗号(,)隔开案例:第二章 CSS基础 - 图11Figure : img2.后代选择器说明:在制作网站时会出现“嵌套”的形式,有可能是多级,而且没个多级里面的标记还相同,这个时候就可以选择某个标记中的某个内容语法:第一代 第二代 第三代 ……… {color:red;}注意:如果某一代有相同的标记都会选择,需要每代都写清楚P标记中不能嵌套一些块元素案例:第二章 CSS基础 - 图12Figure : img3.子类选择器说明:就是选择一代(子孙)语法:父类(选择器) > 子类(选择器) {color:red;}案例:第二章 CSS基础 - 图13Figure : img4.伪类选择器:说明:给超链接加样式的方法Link:默认状态Hover:放上状态Active:当点击时的状态(不放手)Visited:访问过的状态语法:选择器:状态 {color:red;}注意:一般是默认状态和访问过状态设置成一样的效果所有的标记都可以加伪类选择器案例:第二章 CSS基础 - 图14Figure : img