初学html 第三天

01.css简介

网页分成3个部分

html  结构  30个左右的标签  先用一段时间

css   表现  外在显示的样子

 js    行为

html  超文本语言

css  -层叠样式表

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

 最终你看到的是最上面的一层

02.css书写位置 

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

书写位置：开始标签 style属性，讲css样式写在style属性值里面

可以写多个样式，只有用分隔号；隔开即可

    优点：有针对性

    缺点：修改麻烦、结构和表现耦合了

    注意：不推荐使用

   css语法：样式名，样式值

   color  设置字体的颜色  red  green  yellow

    font-size  设置字体大小  px

    background-color 设置背景颜色   red  green  yellow

 03.css语法

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

 css语法：

 选择器 声明块

 选择器：有多种选择器

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

 样式的结构

 04.css常用选择器

1.元素选择器（标签选择器）

        作用：选中

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

2.id选择器

         语法：#id属性值

         注意：id属性值不能重复使用

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

         语法:.class属性值{}

         列子：.s1{}，.ss{}

4.通配选择器

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

05.css符合选择

1.交集选择器

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

        语法：选择器1选择器2选择器3

        注意：如果选择器当中有元素选择器，元素选择器必须放在最前面

        例子：p#p1.pp{},div.ss{}

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

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

        语法：选择器，选择器2，选择器3

        例子：.red,#red1,div,ss{}

 06.关系选择器

 1.子元素选择器

    语法：父>子{}

    2.后代选择器

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

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

   

    3.下一个兄弟选择器

    作用：通过指定的兄长找到选择下一个兄弟

    语法：兄+弟{}

    4.

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

    语法：兄~第{}

 07.属性选择器

1:属性选择器

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

            语法：[属性名]{} 选择含有指定属性的元素

                 [属性名=属性值]{} 选择含有指定属性和属性值的元素

                 [属性名^=属性值]{} 选择属性值以指定值开头的元素  

                 [属性名$=属性值]{} 选择属性值以指定值结尾的元素

                 [属性名*=属性值]{} 选择属性值含有某值的元素

作业展示