文档章节

CSS3学习笔记

我的小确幸日记
 我的小确幸日记
发布于 2015/11/24 00:38
字数 1233
阅读 20
收藏 1
点赞 0
评论 0

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
微信应用号开发必备技能都在这里了啦!

“微信应用号”就像平地里炸响的一声春雷,在互联网圈内炸开了锅,小代码小程序即将成为主流,H5迎来了自己的第二春。废话少说,关于微信应用号开发技能,你都掌握了吗? 没掌握的看这里,干...

咖啡
2016/09/23
0
0
全栈数据,主要技术点

生命之源 0. 缘起 本文仅仅只是列出一些知识点,拟做为内部技术分享的点,只是对『全栈数据』技术点有一个概要性的了解。 列出的点,99%都是自己的经验,或接触、或了解、或实战的内容。 本文...

云戒
2017/06/25
0
0
来自IOS开发工程师的零基础自学HTML5经验分享

移动互联网的火爆,而Html具有跨平台、开发快的优势,越来越受到开发者的青睐。感谢IOS开发工程师“小木_Boy”’带来的HTML5学习经验分享。 一、学习途径 1、很多视频网站 比如慕课、和极客学...

inw3cschool
2017/03/21
0
0
canvas 学习笔记

由于公司业务需要,要用canvas,实现一些比较炫酷的效果,所以这段时间领导让学canvas,正好个人想用canvas做个网站宠物,给以后自己的个人博客用,所以两全其美,就开始了。 需要的基础知识...

起什么name呢
2016/04/23
93
0
10 个轻松学会 CSS3 的优秀在线资源

本文包揽 CSS 的所有关键点,并且引入了最新的 CSS3 版本。这个先进的技术提供超级多的新标签和属性,使得 Web 设计构建创新更简单,帮助开发者创建具有新趋势,带有漂亮布局的 Web 页面。随...

oschina
2015/03/29
3.7K
7

没有更多内容

加载失败,请刷新页面

加载更多

下一页

conda 换源

https://mirrors.tuna.tsinghua.edu.cn/help/anaconda/ conda config --add channels https://mirrors.tuna.tsinghua.edu.cn/anaconda/pkgs/free/conda config --add channels https://mir......

阿豪boy
8分钟前
0
0
Confluence 6 安装补丁类文件

Atlassian 支持或者 Atlassian 缺陷修复小组可能针对有一些关键问题会提供补丁来解决这些问题,但是这些问题还没有放到下一个更新版本中。这些问题将会使用 Class 类文件同时在官方 Jira bug...

honeymose
18分钟前
0
0
设计模式:代理模式

代理模式可以分为三种:静态代理,动态代理,cglib代理 1.静态代理:被代理的类需要实现一接口或是继承一父类 委托类(被代理的类): package com.java.pattern.proxy.staticdemo;publ...

人觉非常君
20分钟前
0
0
非常实用的IDEA插件之总结

1、Alibaba Java Coding Guidelines 经过247天的持续研发,阿里巴巴于10月14日在杭州云栖大会上,正式发布众所期待的《阿里巴巴Java开发规约》扫描插件!该插件由阿里巴巴P3C项目组研发。P3C...

Gibbons
26分钟前
0
0
Tomcat介绍,安装jdk,安装tomcat,配置Tomcat监听80端口

Tomcat介绍 Tomcat是Apache软件基金会(Apache Software Foundation)的Jakarta项目中的一个核心项目,由Apache、Sun和其他一些公司及个人共同开发而成。 java程序写的网站用tomcat+jdk来运行...

TaoXu
26分钟前
0
0
TensorFlow,从一个 Android Demo 开始

TensorFlow Android Demo 项目地址 Machine Learning 既然提到了 TensorFlow,那是不是得神经网络、机器学习了解下? 如果你能坚持把 机器学习速成课程 给啃完了,觉得还挺有兴趣的,那可以考...

孟飞阳
28分钟前
0
0
JVM学习笔记二:内存结构规范

1、JVM基本结构图 2、java堆(Heap) 3、方法区(Method Area) 4、程序计数器 5、JAVA栈图解 局部变量表:八大基本类型,还可以存储引用类型 上一篇:JVM学习笔记一:类加载机制介绍...

刘祖鹏
34分钟前
0
0
mui集成微信H5支付(返回白屏问题已经解决)

一.项目需求 因为公司人员缺少,没有专门开发安卓和ios的人员,为了项目尽早上线采用了混合APP开发的方式,我选择了MUI混合开发框架,项目中需要在用户购买VIP会员的时候进行支付,所以需要在项目...

银装素裹
38分钟前
0
0
SpringBoot集成Redis--配置自定义的RedisCacheManager

配置自定义的RedisCacheManager--1自定义键生成规则 默认的键生成器 当不指定缓存的key时,SpringBoot会使用SimpleKeyGenerator生成key。 SimpleKeyGenerator SimpleKey 查看源码可以发现,它...

karma123
57分钟前
0
0
防火墙未来的发展趋势在哪里?

导读 防火墙(Firewall),也称防护墙,是由Check Point创立者Gil Shwed于1993年发明并引入国际互联网。当下互联网时代,无论是大小企业,大部分都会部署有防火墙的设备,但这些防火墙往往并不...

问题终结者
59分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部