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. springMVC注解总结

    由于BookController类加了value="/book"的@RequestMapping的注解,所以相关路径都要加上"/book",即请求的url分别为 ...

  2. standby_file_management参数为MANUAL导致添加数据文件错误

    症状:standby_file_management 在MANUAL模式下添加数据文件报错处理: 1.standby_file_management为MANUAL,主库添加数据文件,从库发现如下报错: ...

  3. 2019年3月10日 装饰器进阶-模拟session

    ser_dic={'username':None,'login':False}#用户字典,反应登入状态,用字典做全局变量 def idf(func):#验证登入信息是否正确 def wrapper(* ...

  4. SQL 删除数据 的所有用法

    https://blog.51cto.com/13588598/2066335 1.使用 delete 语句删除表中的数据:语法:delete from <表名> [where <删 ...

  5. stm32库函数建工程和使用Keil自带库建工程有没有区别？发现了同样的程序在两种情况下keil自带库可以运行的情况，不知是什么原因

    我使用库函数建的工程(非Keil自带库),为了实现SPI对Si24r1芯片数据的读写,以验证stm32是否可以和si24r1能够正常通信,发现使用库函数建的工程程序不能通过,读出来的数据和写的数据不一 ...

  6. ios高级开发之多线程(一）

    1.概念: 多线程(multithreading)到底是什么呢,它是指在软件或者硬件上实现多个线程并发执行的技术.具有多线程能力的计算机因有硬件的支持,而能够在同一时间执行多个线程,进而提升整体处理性 ...

  7. golang Mysql -- Tx

    Transaction 事务 事务处理是数据的重要特性.尤其是对于一些支付系统,事务保证性对业务逻辑会有重要影响.golang的mysql驱动也封装好了事务相关的操作.我们已经学习了db的Query和 ...

  8. react项目中页面跳转、刷新及获取网络状态

    // 页面跳转 window.location.href = 'http://speedtest.wangxiaotong.com/' // 页面刷新 window.location.reload() ...

  9. Postman应用笔记

    Postman应用: 项目组织格式 Collections 集合--项目--根路径文件夹 文件夹 集合下只支持1级文件夹 文件夹 Request --请求 url 认证参数,头信息,体信息(Autho ...

  10. useragent大全

    分享几个常见的User-Agent,复制粘贴过来的,谢谢原创. window.navigator.userAgent 1) Chrome Win7: Mozilla/5.0 (Windows NT 6 ...