css学习-css引入&css选择

一、引入css的方式，一共有4种，我们只需要掌握三种就可以了，@import的方法我们不做掌握

1、第一种引入的方法

    <!--1、第一种引入css的方法-->
    <h1 style="color: greenyellow;background-color: black">这是一个h1标签</h1>

　　

2、第二种引入的方法

    <style>
        /*2、第二种引入css的方法*/
        h3{
            color: red;
            background-color: black;
        }
        h4{
            color: green;
            background-color: blue;
        }
    </style>

　　

3、第三种引入的方法，也是推荐的方法，这种方法需要新建一个stylesheet文件，也就是css文件

    <!--3、第三种引入css的方法，这个是最好的，也是推荐大家使用-->
    <link type="text/css" href="css.css" rel="stylesheet">

　　

二、标签选择器，作用就是通过各种方法找到到我们修饰的标签

1、简单选择器，通过标签的id属性，标签的名称，标签的class值选择标签

 　　　　　/*1、通用型的标签选择器，对所有标签生效*/
         *{
             font-size: 45px;
         }

         /*2、标签选择器，根据标签的名称选择，对所有的p标签生效*/
         p{
             background-color: red;
         }
         /*3、id选择器，通过标签的id查找标签，id是唯一的*/
         #id{
             color: black;
         }
         /*3、通过class选择一类的标签，class不是唯一的,是一类标签都可以有的属性*/
         .c1{
             font-style: inherit;
         }

　　

2、组合选择器，通过标签之间的位置关系来选择标签，比如后代，毗邻，相邻，子代

 　　　　  /*1、后代选择器，选择div下的p标签,无论儿子还是孙子，只要是后代就都会被选中*/
         div p{
             font-size: 40px;
         }

         /*选择div下的class为c1的所有的标签*/
         div .c1{
             color: blue;
         }

         /*2、子代选择器，用大于号，只选择子代的选择器,只有在儿子这一层在起作用，孙子就不起作用了*/
         #outer>.c1{
             color: green;
         }

         /*3、并行选择器，只选择兄弟的标签*/
         a,div{
             color: greenyellow;
         }

         /*4、毗邻选择器，只选择完全相邻或者说紧挨着的标签*/
         a+div{
             font-size: 34px;
         }

　　

3、属性选择器，通过标签的属性或者属性+属性的值来选择标签

 <!--/*1、如果标签有属性的名称为id的标签，就会被选中*/-->
         [id]{
             color: red;
         }

         <!--/*2、属性+值的选择器，属性id的值为div1的标签将会被选中*/-->
         [id="div1"]{
             color: blue;
          }
         <!--/*3、选择div标签中有属性id，且属性id的值是div的标签*/-->
         div[id="div"]{
             color: blue;
         }

         <!--4、选择div的标签中有属性class且class属性的值中有div2的标签就会选中,一个属性的值可以有多个-->
         div[class~="div2"]{
            color: blue;
         }

         <!--5、选择div标签中有属性id的切id属性的值以div2开头的标签就会选中-->
         div[id^="div2"]{
            color: blue;
         }

          <!--6、选择div标签中有属性id的切id属性的值以div2结尾的标签就会选中-->
          div[id$="div2"]{
            color: blue;
         }

         <!--7、选择div标签中有属性id的切id属性的值有div2这个字符的的标签就会选中-->
          div[id*="div2"]{
            color: blue;
         }