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的元素

第四章css初识的更多相关文章

  1. web—第四章css&第五章

     web—第四章css&第五章 终于迎接等待已久的CSS,在没学这个之前,我们只会用一点img,查一点小图片,或者是用style改一下颜色,而且比较麻烦.现在多了个css在文件夹在创建一个cs ...

  2. 第四章 CSS基础

    1.CSS是cascading style sheets 层叠样式表.样式定义如何显示html元素,通常存储在样式表中,将样式添加到html中,是为了解决内容与表现分离的问题. 2.外部样式表可以极大 ...

  3. 第四章:初识CSS3

    1.CSS规则由两部分构成,即选择器和声明器 声明必须放在{}中并且声明可以是一条或者多条 每条声明由一个属性和值构成,属性和值用冒号分开,每条语句用英文冒号分开 注意: css的最后一条声明,用以结 ...

  4. [CSS]《CSS揭秘》第四章——视觉效果

    投影 单侧投影 box-shadow:0px 10px 10px -5px black; 邻边投影 box-shadow:10px 10px 10px 2px black; 双侧投影 box-shad ...

  5. 《Django By Example》第四章 中文 翻译 (个人学习,渣翻)

    书籍出处:https://www.packtpub.com/web-development/django-example 原作者:Antonio Melé (译者注:祝大家新年快乐,这次带来<D ...

  6. 《深入理解bootstrap》读书笔记:第4章 CSS组件(下)

    十. 标签(.label类,label-xxx) 高亮一些标题部分. 1 2 3 4 5 6 <h1>HELLO<span class="label label-defau ...

  7. 第四章SignalR自托管主机

    第四章SignalR自托管主机 SignalR服务器通常在IIS的Asp.Net应用程序上承载,但它也可以使用自托管库来作为自托管的主机来运行(就像控制台应用程序或Windows服务那样)与Signa ...

  8. Knockout应用开发指南 第四章:模板绑定

    原文:Knockout应用开发指南 第四章:模板绑定 模板绑定The template binding 目的 template绑定通过模板将数据render到页面.模板绑定对于构建嵌套结构的页面非常方 ...

  9. JavaScript DOM编程艺术-学习笔记(第三章、第四章)

    第三章: 1.js的对象分为三种:①用户自定义对象 ② 内建对象(js提供的对象) ③宿主对象(js寄宿的环境-浏览器,提供的对象) 2.文档是由节点组成的集合,即dom树,html元素是根元素,是唯 ...

随机推荐

  1. sqlite3出现SQLITE_BUSY错误码的原因以及解决方法

    转载:https://www.cnblogs.com/lijingcheng/p/4454884.html 转载:https://blog.csdn.net/venchia_lu/article/de ...

  2. flutter插件汇总2

    作者:知乎用户链接:https://www.zhihu.com/question/307594373/answer/568969429来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载 ...

  3. Polly 熔断策略

    熔断策略主要以 CircuitBreaker 来完成. 工作原理 熔断器可以被看作为一个主要含有三个状态的状态机 如果以电路开关来看: 开关闭合对应 CLOSED 状态, 开关打开对应 OPEN 状态 ...

  4. Docker Swarm Mode 学习笔记 (部署服务)

    使用 docker service 命令来管理 Swarm 集群中的服务,该命令只能在管理节点上执行. 新建服务 docker service create --replicas 3 -p 80:80 ...

  5. SAP 跨公司销售业务

    SAP 跨公司销售业务  http://blog.sina.com.cn/s/blog_95ac31e30102x5wh.html   分类: SAP_SD SAP 跨公司销售业务 一.业务简介 在由 ...

  6. shell for 循环

    test.sh #!/bin/bash for str in "C语言" "http://www.bilibili.com" "成立7年了" ...

  7. 大牛的IT经验,方法【跟,帮】

    学习方法一:实践,应用,坚持. [swoole-韩天峰] 我最开始工作也是在2家小公司,后来加入腾讯阿里,主要原因还是我坚持学习基础知识,从而得到了这个机会.有几个方面的基础知识,我建议每一位PHP程 ...

  8. MPU6050可以读取器件ID值,但读出的加速度计和陀螺仪的数据均为零

    今天在调试MPU6050时发现,MPU6050可以正常读取器件ID,但读取的加速度计和陀螺仪的数据均为零. 经过排查发现,MPU6050第20脚的电容没用焊接,C6可以使用10uF的电容.

  9. python+selenium的web自动化测试之一(手工执行)

    环境 Windows 前提: 1. python已正常安装 2. selenium已正常安装. 如果没安装,会报:ImportError: No module named 'selenium' (参考 ...

  10. guxh的python笔记十一:异常处理

    1,抓错方法 name = [0, 1, 2] try: name[3] except IndexError as exc: # 抓单个错误,打印错误信息e print(exc) except (In ...