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. pyinstaller

    下载pyinstaller pip install pyinstaller 打包文件 pyinstaller -F run.py # 打包成单个文件

  2. 16: vue + crypto-js + python前后端加密解密

    1.1 vue中使用crypto-js进行AES加密解密    参考博客:https://www.cnblogs.com/qixidi/p/10137935.html 1.初始化vue项目 vue i ...

  3. writeup

    ``` #签到题``` 请打开微信关注,发送give me flag,即可获得.```Encode````1.ACSCLL首先看到这类题,我们肯定是要使用ASCLL的(这么明显的提示大家肯定一眼就能看 ...

  4. 王之泰201771010131《面向对象程序设计（java）》第十五周学习总结

    第一部分:理论知识学习部分 第13 章 部署应用程序 1.jar文件 a) java 程序的打包:编译完成后,员 将.class 文件压缩打包为 .jar 文件后, GUI 界面 程序就可以直接双击图 ...

  5. HDU 5919 Sequence II（主席树）题解

    题意:有A1 ~ An组成的数组,给你l r,L = min((l + ans[i - 1]) % n + 1, (r + ans[i - 1]) % n + 1),R = max((l + ans[ ...

  6. 我的第一篇博客。(JavaScript的声明和数据类型的一些笔记)

    这是我的第一篇博客,务必请大家多多关照. 下面是前端js的变量和数据类型的一些笔记,不是很全请多多包涵. 1.变量 变量的声明 var 变量名 变量这个容器中放的是数据 变量的赋值 变量名 = 数据 ...

  7. LaTex Verbatim 环境下使用数学符号

    参考: Write math and make a box with alltt environment LaTex Verbatim 环境下使用数学符号 在 Verbatim 环境下使用数学符号,需 ...

  8. Thinkphp5背景图片的引入~ 以及图片的引入

    将图片信息从数据库查询 再渲染于前台页面

  9. vue--监听器

    vue当中的属性,侦听器watch computed可以根据数据的变化而变化,而watch也具备同样的功能 既然这么相似,那么两者的区别是什么呢 首先是执行顺序上有一些细微差别,dom加载完成后将立即 ...

  10. MVC基本登陆与验证码功能实现

    一.基本登陆实现与验证码功能实现,该功能是和spring.net功能集合使用的,因为后面要用到验证是否处于登陆状态 1. 先构建一个登陆页面 @{ Layout = null; } <!DOCT ...