第三课 初步认识css（定义，书写位置，常用选择器）

一.css

        层叠样式表是一种用来表现html的一个应用）或者（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

二.css书写位置

有三种方式（1.内联样式/行内样式    2.内部样式表   3.外部样式表）

1.第一种方式：内联样式/行内样式

       在开始标签里面书写，利用style属性来写css样式。可以写多个样式，只要用分割号隔开即可。

2.第二种方式：内部样式表

       在head标签的内部，写一个style标签，通过选择器选中对应的html结构，在花括号里面书写css样式,可以写多种样式，样式之间用分割号；隔开

3.第三种样式：外部样式表

在html文件外，新建一个.css文件，在css文件里通过选择器选择 对应的html结构，在花括号里面书写css样式，然后在head标签内写一个link标签将对应的css文件引入html文件内。

	优点	缺点
内联样式/行内样式	有针对性	1结构和表现耦合了  2.修改起来不方便.
内部样式表	结构分开，修改简单	复用率不高
外部样式表	推荐使用

三.四种常用选择器

1.元素选择器

作用：选择对应标签的内容

语法：标签名{css样式....}

例子：h1{}，h3{},p{}

2.id选择器

作用：选中对应id属性值的内容

 语法：#id属性值{}

 例子：#a1{},#a2{}····

3.class选择器

class选择器的用法跟id选择器是一样，只不过class属性值可以重复使用

作用：选中对应class属性值的内容

语法：.class属性值{}

注意：class属性值可以起多个，中间用空格隔开即开

例子：.s1{},.ss{},.pp{}

4.通配选择器

作用：选中所有的标签，进行设置

语法：*{}

四.两种复合选择器

1.交集选择器（选中同时符合多个条件的对象）

作用：选中同时符合多个条件的内容

语法：选择器1选择器2选择器3......{}

注意：若要有元素选择器，就一定要放在前面

2.并集选择器（同时选择多个对象）

作用：同时选中对应的内容

语法：选择器1，选择器2，选择器3......{}

五.四种关系选择器

 1、子元素选择器

      作用：通过指定的父元素找到指定的子元素

      语法：父元素>子元素{}

      例子：#red>.green{},   .pp>em{}

2、后代选择器

      作用：通过指定的祖先元素找到指定的后代元素

      语法：祖先元素 后代元素{}

      例子：.class .red{},#red p{}

3、下一个兄弟选择器

      作用：通过指定的兄长找到紧挨着我的一个兄弟

      语法：兄+弟{} 

 4、选择下面所有的兄弟(前面的不选)

      作用：通过指定的兄长找到下面所有的兄弟

      语法：兄～弟{}

      例子：#red～.p1{}

  

   

六.五种属性选择器

通过确定属性以及属性值来选中对应的内容，例如id属性，class属性，src属性，href属性

•             [属性名]{} 选择含有指定属性的元素
•             [属性名=属性值]{} 选择含有指定属性和属性值的元素
•             [属性名^=属性值]{} 选择属性值以指定值开头的元素  
•             [属性名$=属性值]{} 选择属性值以指定值结尾的元素
•             [属性名*=属性值]{} 选择属性值含有某值的元素