CSS3学习笔记
CSS3学习笔记
我的小确幸日记 发表于2年前
CSS3学习笔记
  • 发表于 2年前
  • 阅读 17
  • 收藏 1
  • 点赞 0
  • 评论 0

新睿云服务器60天免费使用,快来体验!>>>   

摘要: CSS3学习笔记

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元素


标签: CSS3学习笔记
  • 打赏
  • 点赞
  • 收藏
  • 分享
共有 人打赏支持
粉丝 5
博文 21
码字总数 24420
×
我的小确幸日记
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: