0
点赞
收藏
分享

微信扫一扫

CSSF复习总结(2)

年夜雪 2022-04-13 阅读 105

目录

一,定位

1,相对定位(relative)

2,绝对定位(absoult)

3,固定定位(fiexed)

4,粘性定位(sticky)

二,HTML5新增标签

三,CSS3新增选择器

1,css3属性选择器

2.css3结构伪类选择器

四,过渡

1,简介:CSS 过渡允许您在给定的时间内平滑地改变属性值。

2,属性 


一,定位

1,相对定位(relative)

2,绝对定位(absoult)

3,固定定位(fiexed)

4,粘性定位(sticky)

二,HTML5新增标签

1、video,表示一段视频并提供播放的用户界面;

2、audio,表示音频;

3、canvas,表示位图区域;

4、source,表示为video和audio提供数据源;

5、svg,用于定义矢量图等等。

三,CSS3新增选择器

1,css3属性选择器

选择器功能描述
E[attribute]选取带有指定属性的元素
E[attribute=value] 选取带有指定属性和值的元素
E[attr^=“val”] 匹配属性attr的值以指定值"val"开头的每个元素
E[attr$=“val”] 匹配属性attr的值以指定值"val"结尾的元素
E[attr*=“val”] 匹配属性attr的值包含字符串"val"元素

2.css3结构伪类选择器

1、伪类选择器:CSS中已经定义好的选择器,不能随便取名           

      常用的伪类选择器是使用在a元素上的几种,如a:link|a:visited|a:hover|a:active

2、伪元素选择器:并不是针对真正的元素使用的选择器,而是针对CSS中已经定义好的伪元素使用的选择器

      CSS中有如下四种伪元素选择器:

  1. first-line:为某个元素的第一行文字使用样式;
  2. first-letter:为某个元素中的文字的首字母或第一个字使用样式;
  3. before:在某个元素之前插入一些内容;
  4. after: 在某个元素之后插入一些内容;
:activea:active选择活动的链接。
:checkedinput:checked选择每个被选中的 <input> 元素。
:disabledinput:disabled选择每个被禁用的 <input> 元素。
:emptyp:empty选择没有子元素的每个 <p> 元素。
:enabledinput:enabled选择每个已启用的 <input> 元素。
:first-childp:first-child选择作为其父的首个子元素的每个 <p> 元素。
:first-of-typep:first-of-type选择作为其父的首个 <p> 元素的每个 <p> 元素。
:focusinput:focus选择获得焦点的 <input> 元素。
:hovera:hover选择鼠标悬停其上的链接。
:in-rangeinput:in-range选择具有指定范围内的值的 <input> 元素。
:invalidinput:invalid选择所有具有无效值的 <input> 元素。
:lang(language)p:lang(it)选择每个 lang 属性值以 "it" 开头的 <p> 元素。
:last-childp:last-child选择作为其父的最后一个子元素的每个 <p> 元素。
:last-of-typep:last-of-type选择作为其父的最后一个 <p> 元素的每个 <p> 元素。
:linka:link选择所有未被访问的链接。
:not(selector):not(p)选择每个非 <p> 元素的元素。
:nth-child(n)p:nth-child(2)选择作为其父的第二个子元素的每个 <p> 元素。
:nth-last-child(n)p:nth-last-child(2)选择作为父的第二个子元素的每个<p>元素,从最后一个子元素计数。
:nth-last-of-type(n)p:nth-last-of-type(2)选择作为父的第二个<p>元素的每个<p>元素,从最后一个子元素计数
:nth-of-type(n)p:nth-of-type(2)选择作为其父的第二个 <p> 元素的每个 <p> 元素。
:only-of-typep:only-of-type选择作为其父的唯一 <p> 元素的每个 <p> 元素。
:only-childp:only-child选择作为其父的唯一子元素的 <p> 元素。
:optionalinput:optional选择不带 "required" 属性的 <input> 元素。
:out-of-rangeinput:out-of-range选择值在指定范围之外的 <input> 元素。
:read-onlyinput:read-only选择指定了 "readonly" 属性的 <input> 元素。
:read-writeinput:read-write选择不带 "readonly" 属性的 <input> 元素。
:requiredinput:required选择指定了 "required" 属性的 <input> 元素。
:rootroot选择元素的根元素。
:target#news:target选择当前活动的 #news 元素(单击包含该锚名称的 URL)。
:validinput:valid选择所有具有有效值的 <input> 元素。
:visiteda:visited选择所有已访问的链接。

四,过渡

1,简介:CSS 过渡允许您在给定的时间内平滑地改变属性值。

2,属性 

属性描述
transition简写属性,用于将四个过渡属性设置为单一属性。
transition-delay规定过渡效果的延迟(以秒计)。
transition-duration规定过渡效果要持续多少秒或毫秒。
transition-property规定过渡效果所针对的 CSS 属性的名称。
transition-timing-function规定过渡效果的速度曲线。

 

 

 

 

举报

相关推荐

假期复习总结day1-2

SpringMVC复习总结

JVM复习总结

算法复习总结

知识复习总结

redis复习总结

MySQL个人复习总结

Pytorch 复习总结 5

LUA语法复习总结

0 条评论