zoukankan      html  css  js  c++  java
  • 第四章css初识

    1.CSS(层叠样式表)

    2.CSS语法

        选择器{

            属性名1:属性值1;

            属性名2:属性值2;

         }

    3.引用CSS的三种方式

        第一种:行内样式

            例:<a style="color:red;">内部样式</a>

        第二种:内部样式

            在head标签中,写入style标签.

            例:

              <head>

                  .......

                  <style type="text/css">

                      h1{

                        .........

                      }

                  </style>

              </head>

        第三种:外部样式

            使用步骤:

                a)创建一个以.css为后缀的文件(css文件)

                b)在html中通过link引入css文件

                    <link rel="stylesheet" href="css文件路径"/>

    4.基本选择器

        4.1 标签选择器

            标签名{}

        4.2 类选择器

            .class属性值{}

        4.3 id选择器

            #id属性值{}

    5.层次选择器

        5.1 后代选择器

            父元素 子元素{}

        5.2 子选择器

            父元素>子元素{}

        5.3 相邻兄弟选择器

            本元素+相邻兄弟元素{} 

        5.4 通用兄弟选择器

           本元素~兄弟元素{}

    6.结构伪类选择器

        E F:first-child{}    //第一个子元素

        E F:last-child{}    //最后一个子元素

        E F:nth-child(?){}   // ?表示第几个子元素,还可以使odd奇数,even偶数

        E F:first-of-type{}  //指定类型的第一个元素

        E F:last-of-type{}  //指定类型的最后一个元素

        E F:nth-of-type(?){}   //?表示指定类型第几个子元素

    注意: 

        E F:nth-child(n)在父级里从一个元素开始查找,不分类型.

        E F:nth-of-type(n)在父级里先看类型,再看位置.

    7. 属性选择器

        E[attr] //具有属性attr的元素

        E[attr=val] //属性attr的值是val的元素

        E[attr^=val] //属性attr的值以val开头的元素

        E[attr$=val] //属性attr的值以val结尾的元素

        E[attr*=val] //属性attr的值包含val的元素

  • 相关阅读:
    JDK动态代理源码分析
    使用docker-compose快速搭建本地ElasticSearch7和Elastichd环境
    IDEA导入SVN项目提示HTTPS:Server SSL certificate verification failed
    双重校验锁为什么要用volatile修饰
    Ribbon的基础知识
    Eureka的基础知识
    JDK1.8 JVM内存模型个人理解
    OAuth2+Zuul报RedisConnection.set([B[B)V解决方案
    Spring aop @aspect不生效问题
    教你使用markdown画程序流程图
  • 原文地址:https://www.cnblogs.com/q2q2/p/7791834.html
Copyright © 2011-2022 走看看