学习css的一天

网页基本分为三部分：

html    结构  30左右标签

css     表现  外在显示的样子

js        行为

html  超文本语言

css   层叠样式表  

        网页是一个多层的结构，css可以给每一层结构做样式，

        最终显示出最上面一层

css书写位置：

①内联样式/行内样式：书写位置：开始标签

style属性：将css样式写在style属性里面，可以写多个样式，用分号隔开

优缺点：

优：有针对性

缺：结构和表现耦合了，页面不好看

    修改起来不方便

注意：不推荐使用

②内部样式表：书写位置：head标签内部

写一个style标签，通过选择器选中对应的html结构，

在花括号{}里面书写css样式，可以写多个样式，用分号隔开，

最后一个样式后可以不加分号，但一般都加

优缺点：

缺：复用率不高

注意：css比较多的时候，不推荐使用

      教学期间用的多

③外部样式表：书写样式：html文件外

在html文件外，新建一个.css文件，

在css文件里通过选择器选中对应的html结构，

在花括号中书写样式，可以写多个样式，用分号隔开

<link rel="stylesheet" href="./02.css书写位置.css">

注意：推荐使用

css语法：样式名，样式值

    color         设置字体颜色    red  green  yellow

   font-size       设置字体大小    px  默认字体大小16

background-color   设置背景颜色

选择器  声明块

选择器：有多种选择器

声明块：具体的css样式，是写在花括号里面

  样式的结构：名值

css常用的四种选择器：

①元素选择器

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

语法：h1{}

②id选择器

注意：不能复用

③class选择器

可以复用

④通配选择器

选中所以的标签，进行设置

复合选择器：

①交集选择器

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

②并集选择器/群组选择器

同时选中对应的内容

关系选择器：

元素之间关系

① 子元素选择器

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

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

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

②后代选择器

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

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

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

③下一个兄弟选择器

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

 语法：兄+弟{} *

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

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

 语法：兄～弟{}

 例子：#red～.p1{}vv