第一周学习笔记DAY.1

元素之间的关系：

父子关系

直接包含和被包含的关系

      父元素：直接包含子元素

      子元素：直接被父元素包含

祖先后代关系

直接或间接包含和被包含的关系（包括父子关系在内）

      祖先元素：直接或间接包含后代元素

      后代元素：直接或间接被祖先元素包含的

兄弟关系

    拥有共同的父元素

1、子元素选择器：

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

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

2、后代选择器

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

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

3、下一个兄弟选择器

   作用：通过指定的兄找到指定的弟

   语法：兄+弟{}

4、所有兄弟选择器

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

      语法：兄～弟{}

CSS书写位置：

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

    书写位置：

      在开始标签或者自结束标签内，写一个style属性，将css样式写在style属性值里

      可以写多组样式，样式与样式之间要用；隔开

    缺点：

      1、html结构和css表现耦合了，导致代码宽度变大，不方便查看

      2、不易修改

      3、权重很高，后期很难通过js或者其他框架去修改

    不推荐使用

第二种方式：内部样式表

      书写位置：

        在head标签内，写一个style子标签，通过选择器选中对应的内容，

        在{}内书写css样式，可以写多组样式，样式与样式之间；隔开

      缺点：

        1、css样式还是写在html文件内，如果css样式过多，会导致html文件很长，不方便查看html结构

        2、不方便复用

      如果css代码较少，且不会被复用，可以使用内部样式表

   

第三种方式：外部样式表

      书写位置：

        在html文件外新建一个.css文件，在css文件内，通过选择器选中对应的内容

        在{}内书写样式，然后通过link标签，将css文件和html文件联系在一起

     

      如果css代码较多，代码可能被复用，推荐外部样式写法

常用选择器：

1、标签选择器：

      语法：标签名{}

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

      注意：常用的标签就那么多，如果用标签选择器，很可能会选中其他不需要设置样式的内容

2、id选择器

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

      语法：#id属性值{}

      注意：

          id属性值：不能以数字开头，最好不要是汉字

          id属性值不能复用

3、class选择器

    作用：跟id选择器很像，选中对应class属性值的内容

    语法：.class属性值{}

    注意：也是我们用的最多的选择器

 4、通配选择器

      语法：*{}

      作用：选中所有的标签

复合选择器：

        交集选择器

          作用：选中同时满足选择器1选择器2选择器3····对应的内容

          语法：选择器1选择器2·····{}

          注意：如果选择器中有标签选择器，那么标签选择器必须放在首位

        并集选择器（群组选择器）

          作用：同时选中选择器1，选择器2·····对应的内容

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

CSS的注释，作用和HTML注释类似，只不过它必须编写在style标签中，或者是css文件中

            快捷键：ctrl+/

        CSS的语法：

           选择器   声明块  

        选择器：选中需要设置样式的部分  

        声明块：具体样式，是一组组名值对结构