CSS学习

1.css

        层叠样式表，用来修饰文档的语言，相当于给HTML文件进行“打扮”，

        为了将内容和样式进行分离，提高了工作效率（外部样式）

2.css声明

        css核心功能：给特定的属性设置特定的值

        css的属性和值（大小写敏感）

        属性和属性值通过“:”分割

background-color: black

3.css声明块

        将多个css声明写在一起，声明和声明之间通过‘；’  分割，使用‘{}’将多个声明括起来，形成一个声明块

   {
      background-color: black;
      border:1px solid black;
    }

4. css选择器

        css声明块前面添加选择器，用来指定将这个声明块用在哪些元素上

   div {
      background-color: black;
      border:1px solid black;
    }

5.css应用

        HTML文档如何使用css

                1.外部样式

                        新建.css文件，然后在HTML内的head通过link标签引入

       <link rel="stylesheet" href="./style.css">     

                        或者在style标签内通过@import"xxx.css"引入

   <style>
          @import "style.css";
        </style>     

                2.内部样式表

                        将css写到HTML的style标签中，可以在不修改css文件的前提下修改样式

<style>
          p {
            color: tomato;
          }
        </style>

 

                 3.行内样式表

                        将css写到元素的style属性中，只能作用于一个元素，但是违背样式与文档的分离原则

<p style="color: chartreuse;">hello,world</p>

                优先级 行内样式表>内部样式表>外部样式表

6.css选择器

        标签选择器：又叫元素选择器，使用元素名可以直接选中相同的元素

        类名选择器：以"."开头，后面紧跟类名，不允许有空格，与元素的class属性值保持一致

        id选择器：以“#”开头，后面紧跟id名，与元素的id属性保持一致，在一个文档中，id值不能重复，所以这个一般选择唯一元素

        普遍选择器：使用*表示所有元素，通常在组合选择器中

 * {
          background-color: honeydew;
        }
      #app>*{
          background-color: honeydew;
        }

 

        层次选择器

                后代选择器

                        “ ”：#app p 包括子元素，也包括孙子元素

                 子代选择器

                        “>”:表示的是直接子元素.#app>p

                相邻同胞选择器 下一个兄弟元素,

                        "+", .myP+* 选的是class为myP的元素的下一个兄弟元素

                一般同胞选择器

                        "~":   .myP~*   选的是class为myP的元素的后面的所有兄弟元素

        多选择器

                组合选择器

        

  div,p,li,.myDiv,#app {

        }

        

                嵌套选择器

  div.myDiv              

        属性选择器

[title] {
        color: khaki;
      }
      // 属性包含title，属性值为val
      [title=val] {
      color: khaki;
      }
      // 属性包含title，属性值以val开头
      [title^=val] {
      color: khaki;
      }
      // 属性包含title，属性值以val结尾
      [title$=val] {
      color: khaki;
      }
      // 属性包含title，属性值包含val(模糊匹配 只要有这个字符串就行)
      [title*=val] {
      color: greenyellow;
      }
      // 属性包含title，属性值中有val(必须是目标字符串)
      [title~=val] {
      color: greenyellow;
      }
    *****^^^***div # .    
      [class=mydiv] {}
      <div class="mydiv di" id="one">1</div>

         伪类选择器

                子代元素相关

:only-child	独生子元素
:first-child	第一个孩子元素
:last-child	最后一个孩子元素
:nth-child(n)	第n个孩子元素 n从1开始
:nth-last-child(n)	倒数第n个孩子元素 n从1开始
:first-of-type	选中app类子代的每种类型的第1个孩子元素
:last-of-type	选中app类子代的每种类型的最后1个孩子元素
:nth-of-type(n)	选中app类子代的每种类型的第n个孩子元素 n从1开始
:nth-last-of-type(n)	) 选中app类子代的每种类型的倒数第n个孩子元素

                元素状态相关的

                

:hover	鼠标移入
:link	a标签未被访问过的状态
:visited	a标签已被访问过的状态
:active	活动时的状态
:focus	聚焦时的状态
:checked	按钮被选中时的状态
:default	默认选中时的状态
:enabled	表单项可用时的状态
:disabled	表单项禁用时的状态
:valid	通过表单验证
:invalid	不通过表单验证
:required	必填项
:optional	选填项
:in-range	在范围内
:out-of-range	不在范围内

                伪元素选择器

                                "::" 开头 用在其它选择器之后

        

::after	选中之后的不存在的节点，然后结合content添加内容
::before	选中之前的不存在的节点，然后结合content添加内容
::first-letter	选中第一个文本字符
::first-line	选中第一行文本字符
::selection