文档章节

CSS3学习笔记

我的小确幸日记
 我的小确幸日记
发布于 2015/11/24 00:38
字数 1233
阅读 20
收藏 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
博文 53
码字总数 24420
作品 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

没有更多内容

加载失败,请刷新页面

加载更多

分布式框架spring-session实现session一致性使用问题

前言:项目中使用到spring-session来缓存用户信息,保证服务之间session一致性,但是获取session信息为什么不能再服务层获取? 一、spring-session实现session一致性方式 用户每一次请求都会...

WALK_MAN
15分钟前
1
0
C++ yield()与sleep_for()

C++11 标准库提供了yield()和sleep_for()两个方法。 (1)std::this_thread::yield(): 线程调用该方法时,主动让出CPU,并且不参与CPU的本次调度,从而让其他线程有机会运行。在后续的调度周...

yepanl
23分钟前
0
0
Java并发编程实战(chapter_3)(线程池ThreadPoolExecutor源码分析)

这个系列一直没再写,很多原因,中间经历了换工作,熟悉项目,熟悉新团队等等一系列的事情。并发课题对于Java来说是一个又重要又难的一大块,除非气定神闲、精力满满,否则我本身是不敢随便写...

心中的理想乡
33分钟前
15
0
shell学习之获取用户的输入命令read

在运行脚本的时候,命令行参数是可以传入参数,还有就是在脚本运行过程中需要用户输入参数,比如你想要在脚本运行时问个问题,并等待运行脚本的人来回答。bash shell为此提 供了read命令。 ...

woshixin
59分钟前
1
0
区块链技术中的那些能商用的企业级应用

WEPOWER是一家立陶宛初创企业,旨在改变可再生电力项目的付费方式。WePower公司创始人Nick Martyniuk表示,政府统一收购价的存在推动了全球风能与太阳能市场的发展。因此,他的公司希望帮助那...

问题终结者
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部