CSS 概念

 

　　选择器 

　　　　1、基础选择器：

　　　　　　通配选择器 | 标签选择器 | class(类)选择器 | id选择器

　　　　2、复杂选择器：

　　　　　　群组选择器 | 后代选择器(父，子/孙) | 子代选择器(父子) | 兄弟选择器 | 相邻选择器 | 交叉选择器

　　　　3、伪类选择器

　　　　4、标签的四大伪类

　　具体样式

　　　　1、文本样式　　2、背景样式　　3、显示样式　　4、盒模型　　5、浮动

 

什么是css语言：

　　css语言开发的文件是以.css为后缀，通过在html文件中引入该css文件来控制html代码的样式（css语言代码也可以直接写在html文件中），采用的语言是级联样式表

　　如何学习css

　　　　1）：学习方向：从css代码书写位置、css选择器和css具体样式设置三部分进行学习

　　　　2）：学习目的：能够完成页面样式布局和位置布局

一、css 书写位置

　　css是来控制页面标签的样式，但是可以根据实际情况书写在不同的位置，放在不同位置有不同的专业叫法，可以分为行间式、内联式和外联式三种。

　　1）行间式

　　　　css样式书写在标签的style全局属性中，一条样式格式为 样式名: 样式值 单位;，可以同时出现多条样式

　　2）内联式

　　　　css样式书写在head标签内的style标签中，样式格式为 css选择器 { 样式块 }，样式块由一条条样式组成

　　3）外联式

　　　　css样式的写法同内联式，但样式书写在css文件中，在html页面中用link标签引入css文件（建议在head标签中引入）

　　总结：

　　　　行间式控制样式最直接，但是样式多了直接导致页面可读性变差，且样式相同的标签样式也需要各自设置，复用性差；

　　　　内联式可以用一套样式块同时控制多个标签，具有样式的复用性，但是css样式代码还是写在html文件中，在项目开发下，代码量剧增，导致html文件变得臃肿，不利于代码维护；

　　　　外联式将css样式移到外部css文件中，不仅避免项目开发下html文件的臃肿问题，同时具有一套代码块控制多个标签，一个css样式文件服务于多个html两种复用性的好处，但是在学习阶段代码量不大时，样式不需要服务于多个html页面时，前面两种方式显然显得更便利

 

二、css选择器

　　css选择器的本质就是css与html两种语法建立关联的特定标识符,在css语法中，通过html中标签的某种名字，与html具体的标签建立关联，从而使写在对应css选择器后的css样式能控制html中关联的标签或标签们，每一种名字在css语法中都对应这一种特定标识符。

　　1、基础选择器

　　　　1）通配选择器

　　　　　　特定标识符 星号(*) -- 可以表示页面所有标签的名字
　　　　　　通配选择器控制页面中所有的标签(不建议使用)
　　　　　　* {
  　　　　 　　 样式块
　　　　　　　　}

　　　　　　页面中的所有标签都能被匹配

　　　　2）标签选择器

　　　　　　特定标识符 标签名
　　　　　　标签选择器控制页面中标签名为标签选择器名的所有标签
　　　　　　div {
    　　　　　　样式块
　　　　　　　　}

　　　　　　页面中的所有div标签都能被匹配

　　　　3）class(类)选择器（提倡使用）

　　　　　　特定标识符 点(.)
　　　　　　class选择器控制页面中标签全局属性class值为class择器名的所有标签
　　　　　　.box {
    　　　　　　样式块
　　　　　　　　}

　　　　　　页面中class属性值为box的标签都能被匹配

　　　　4）id选择器

　　　　　　特定标识符 井号(#)
　　　　　　id选择器控制页面中标签全局属性id值为id择器名的唯一标签
　　　　　　#box {
　　　　　　　　样式块 */
　　　　　　　　}

　　　　　　页面中id属性值为box的唯一标签匹配，id具有唯一性：一个页面中所有标签的id属性值不能重名

　　　　 基础选择器的优先级

　　　　　　优先级：通配选择器 < 标签选择器 < class(类)选择器 < id选择器 < 行间式 < import

　　2、复杂选择器

　　　　1）群组选择器 

　　　　　　连接标识符逗号(,) ，群组选择器就是一套样式块同时控制几个目标标签，这几个目标标签可以是id，class，标签用逗号连接(,)

　　　　2）后代选择器(父，子/孙)

　　　　　　连接标识符 空格( )，后代选择器控制的是最后置的选择器位匹配到目标标签(们)，前置位的所有选择器都是修饰

　　　　3）子代选择器(父子)

　　　　　　连接标识符 大于号(>)，子代选择器控制的是 最后置位的选择器位匹配到目标标签(们)，前置位的所有选择器都是修饰

　　　　4）兄弟选择器

　　　　　　连接标识符 波浪号(~)，兄弟选择器控制的是最后置的选择器位匹配到目标标签(们)，前置位的所有选择器都是修饰

　　　　5）相邻选择器

　　　　　　连接标识符 加号(+)，相邻选择器控制的是最后置的选择器位匹配到目标标签(们)，前置位的所有选择器都是修饰

　　　　6）交叉选择器

　　　　　　连接标识符 紧挨着(没有任何连接符)，交叉选择器本质上是对一个目标标签的多个名字的同时表示

　　　高级选择器通过权重 同级的个数来区别优先级

　　　　id > class > 标签

　　　　　　种类相同：比个数 | 个数相同：比顺序

　　　　　高级选择器种类是同级别不影响优先级

　　3、伪类选择器

　　　　以冒号（：）开头，一般放在类或id后

　　4、标签的四大伪类

　　　　1）链接的初始状态

　　　　　　.类名：link{样式块}

　　　　2）链接的悬浮状态

　　　　　　.类名：hover{样式块}

　　　　3）连接的激活状态

　　　　　　.类名：active{样式块}

　　　　4）连接的已访问状态

　　　　　　.类名：visited{样式块}

　　　　 普通标签都可以去使用 :hover :active