文档章节

CSS3学习笔记

彭小厨
 彭小厨
发布于 2015/11/24 00:38
字数 1233
阅读 21
收藏 1

css3学习笔记

1.css3的发展史

HTML的诞生 20世纪90年代初

1996年底   css第一版诞生

1998年5月  css2正式发布

2004年     css2.1发布

css3的发布...   (时间段,不是时间点)

2.css3模块介绍

css1中定义了网页的基本属性:

  字体,颜色,补白,基本选择器等

css2中在css1的基础上添加了高级功能

  浮动和定位,高级选择器等(子选择器,相邻选择器,通用选择器)

css3遵循的是模块化开发,发布时间不是一个时间点,而是一个时间段。


3.css3新特性预览

 1.强大的css选择器.

 2.新的颜色制式和透明设定.

 3.多栏布局的实现.

 4.多背景图效果.

 5.文字阴影效果.

 6.开放的网络字体类型.

 7.圆角.

 8.边框背景图片.

 9.盒子阴影.

 10.媒体查询.

 

 CSS的负面因素

 1.IE浏览器这个拖油瓶(IE9开始支持css3,但是效果不怎么样)

 2.CSS验证问题

 3.代码冗余,臃肿


 1.元素选择器

 *          通配选择符        所有元素对象

 E          类型(HTML)选择符  以文档语言对象类型作为选择符。

 E#myid     id选择符          以唯一标识符id属性等于myid的E对象作为选择符

 E.myclass  class选择符       以class属性包含myclass的E对象作为选择符

 

 2.关系选择器

 E F  包含选择器   选择所有被E元素包含的F元素(子孙都包含)

 E>F  子选择器     选择所有作为E元素的子元素的子元素F(只包含子元素)

 E+F  相邻选择器   选择紧贴在E元素之后F元素 

 E~F  兄弟选择器   选择E元素后面的所有兄弟F元素(CSS3新增)

 

 3.伪类选择器

 E:link    连接伪类选择器      设置超链接a在未被访问前的样式

 E:visited 链接伪类选择器      设置超链接a在其链接地址已被访问过时的样式

 E:hover   用户操作伪类选择器  设置元素在其鼠标悬停时的样式

 E:active  用户操作伪类选择器  设置元素在被用户激活(在鼠标点击与释放之间发生的事件)时的样式

 E:focus   用户操作伪类选择器  设置元素在成为输入焦点(该元素的onfocus事件发生)时的样式。

 E:lang()  :lang()伪类选择器   匹配使用特殊语言的E元素。

 

 4.属性选择器

 E[att]        选择具有att属性的E元素

 E[att="val"]  选择具有att属性且属性值等于val的E元素

 E[att~="val"] 选择具有att属性且属性值作为一用空格分隔的字词列表,其中一个等于val的E元素

 E[att|="val"] 选择具有att属性且属性值以val开头并用连接符“-”分隔的字符串的E元素。

 

 5.伪对象选择器

 E:first-letter 设置对象内的第一个字符的样式

 E:first-line   设置对象内的第一行的样式

 E:before       设置在对象前(依据对象树的逻辑结构)发生的内容,用来和content属性一起使用

 E:after        设置在对象后(依据对象树的逻辑结构)发生的内容,用来和content属性一起使用。

 

 6.结构伪类选择器

 E:root                匹配E元素在文档的根元素。(CSS3)

 E:first-child         匹配父元素的第一个子元素E。(CSS2)(父节点的第一个子元素必须是E类型元素,其他父子类型标签同理)

 E:last-child          匹配父元素的最后一个子元素E。(CSS3)

 E:only-child          匹配父元素仅有的一个子元素E。(CSS3)

 E:nth-child(n)        匹配父元素的第n个子元素E。(CSS3)

 E:nth-last-child(n)   匹配父元素的倒数第n个子元素E。(CSS3)

 E:first-of-type       匹配同类型中的第一个同级兄弟元素E。(CSS3)(E元素同级元素中第一个E类型元素,不要求父节点的第一个子元素必须是E类型元素)

 E:last-of-type        匹配同类型中的最后一个同级兄弟元素E。(CSS3)

 E:only-of-type        匹配同类型中的唯一的一个同级兄弟元素E。(CSS3)

 E:nth-last-of-type(n) 匹配同类型中的倒数第n个同级兄弟元素E。(CSS3)

 E:empty               匹配没有任何子元素(包括text节点)的元素E。(CSS3)

 

 

注:

1.div 元素  <div> 标签

2.E:nth-of-type(2){color:#f00;} 选中指定序号(正序)

3.E:nth-of-type(even){color:#f00;} 选中奇odd偶even类型(正序)

4.E:nth-of-type(3n+1){color:#f00;} 选中自定义序列类型(正序)

5.在E:root跟踪器中,html页面的根元素永远都是html元素


© 著作权归作者所有

共有 人打赏支持
彭小厨
粉丝 5
博文 59
码字总数 28144
作品 0
深圳
程序员
私信 提问
《HTML+CSS3权威指南》笔记摘要 - 目录

主要是想借助这个平台让大家给我学习途中的错误和不好的地方给与纠正。 我会努力最短时间内完成更新,如果发现有错别字或者Code错误,请指出。 信息:建议使用Opera10以上或者Google浏览器测...

Contac
2011/12/02
0
1
css3学习笔记

对CSS3已完全向后兼容,所以你就不必改变现有的设计。浏览器将永远支持CSS2。 CSS3 模块 CSS3被拆分为"模块"。旧规范已拆分成小块,还增加了新的。 一些最重要CSS3模块如下: 选择器 盒模型 ...

effto
2016/08/15
18
0
啦啦啦哈利路亚/laravel_biji

采用Laravel5.1框架的在线笔记系统 演示地址 http://120.27.102.104/auth/login 项目介绍 基于Laravel+Bootstrap+MariaDB开发系统架构 功能说明 在线笔记系统基于B/S结构的社区性质的协调信息...

啦啦啦哈利路亚
2017/03/08
0
0
Vue 2.0学习笔记:自定义表单组件

Vue 2.0学习笔记:自定义表单组件 W3CPlus2017-09-297 阅读 表单组件自定义 上一节中 ,通过 的学习,我们可以实现 双向数据绑定 的的效果。在整个教程中,我们看到的示例都是表单控件方面的...

W3CPlus
2017/09/29
0
0
【前端开发系列】—— CSS3属性选择器总结

想想自己为什么要学CSS,作为一个开发过前端的人员来说,调试一个图片花了半天的时间,最后发现分隔符用错了,实在是一件很丢人的事情。因此,痛下决心来学习CSS,最近一周也会更新下相关的学...

青夜之衫
2017/12/04
0
0

没有更多内容

加载失败,请刷新页面

加载更多

jquery通过id显示隐藏

var $div3 = $('#div3'); 显示 $div3.show(); 隐藏 $div3.hide();

yan_liu
今天
3
0
《乱世佳人》读书笔记及相关感悟3900字

《乱世佳人》读书笔记及相关感悟3900字: 之前一直听「荔枝」,后来不知怎的转向了「喜马拉雅」,一听就是三年。上班的时候听房产,买房了以后听装修,兴之所至时听旅行,分手后听亲密关系,...

原创小博客
今天
3
0
大数据教程(9.6)map端join实现

上一篇文章讲了mapreduce配合实现join,本节博主将讲述在map端的join实现; 一、需求 实现两个“表”的join操作,其中一个表数据量小,一个表很大,这种场景在实际中非常常见,比如“订单日志...

em_aaron
今天
3
0
cookie与session详解

session与cookie是什么? session与cookie属于一种会话控制技术.常用在身份识别,登录验证,数据传输等.举个例子,就像我们去超市买东西结账的时候,我们要拿出我们的会员卡才会获取优惠.这时...

士兵7
今天
3
0
十万个为什么之为什么大家都说dubbo

Dubbo是什么? 使用背景 dubbo为什么这么流行, 为什么大家都这么喜欢用dubbo; 通过了解分布式开发了解到, 为适应访问量暴增,业务拆分后, 子应用部署在多台服务器上,而多台服务器通过可以通过d...

尾生
今天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部