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. ApiDoc官方文档

    链接地址:https://blog.csdn.net/whatday/article/details/84590795

  2. 小米5查看设备号信息及验证type-c数据线

    首先,下载adb软件. 接着打开系统的开发者模式和调试模式. 打开cmd软件,切换到adb软件文件夹所在路径,输入命令:adb devices,则能看到设备的设备号信息. 如果设备号是00000001 ...

  3. h5完美实现无刷新上传并附带上传效果

    附带上传源码如下: <!DOCTYPE html> <html> <head> <title>测试上传功能</title> <meta ...

  4. 在linux和windows用c++编写c接口的动态库

    linux 动态的头文件api.h #ifndef _API_H #define _API_H #ifdef DLL_IMPLEMENT #define DLL_EXPORT extern " ...

  5. 算法（第四版）C# 习题题解——2.2

    写在前面 整个项目都托管在了 Github 上:https://github.com/ikesnowy/Algorithms-4th-Edition-in-Csharp 查找更为方便的版本见:http ...

  6. 【Alpha】Scrum Meeting 11

    目录 前言 任务分配 燃尽图 会议照片 签入记录 前言 第11次会议于4月16日18:15在一公寓三楼召开. 交流确认了任务进度,讨论项目发布事宜,分配下一阶段任务.时长45min. 任务分配 姓名 ...

  7. jQuery Gantt Edit:(一)参数以及方法说明

    jQuery Gantt editor jQuery Gantt Edit(以下简称GE)是一款开源的基于jQuery的甘特图插件,作者:robicch. GitHub地址:https://githu ...

  8. Python3 tkinter基础 Scrollbar pack 创建靠右、充满Y轴的垂直滚动条

             Python : 3.7.0          OS : Ubuntu 18.04.1 LTS         IDE : PyCharm 2018.2.4       Conda ...

  9. Redis集群 - Sentinel与RAFT算法

    引入   在主从模型中讲到 一旦Master宕机失效,需要手动将Slave角色提升为Master,否则这个子集群将不可用.   这个缺陷使得系统可用性大大降低.因此Redis专门提供了一个哨兵机制来实 ...

  10. CentOS7攻克日记(三) —— 安装Python3.6

    我是在EVERNOTE上面写的,本来格式是有代码段的,结果复制上来就没有了,所以会有一点乱,我就不调整了   我主要安装的是python环境,这一篇主要解决一下python的问题.在这里给个建议,安装 ...