css3有哪些新增属性、新增伪类、伪类和伪元素的区别?

2024-01-03 08:54:24

CSS3 新增了那些属性

CSS3 新增属性很多,先列举出一些关键的新增内容:

新增各种 css 选择器
盒子模型属性:border-radiusbox-shadowborder-image
背景:background-sizebackground-originbackground-clip
文本效果:text-shadowword-wrap
颜色:新增 RGBAHSLA 模式
渐变:线性渐变、径向渐变
字体:@font-face
2D/3D转换:transformtransform-origin
过渡与动画:transition@keyframesanimation
多列布局
媒体查询

以下是其中一些常见的:

  • border-radius:用于设置元素的圆角效果。
  • box-shadow:用于在元素周围创建阴影效果。
  • transition:用于控制元素的过渡效果,如颜色、大小、位置的平滑过渡。
  • transform:用于对元素进行旋转、缩放、倾斜等变换操作。
  • gradient:用于创建元素的渐变效果,包括线性渐变和径向渐变。
  • flexbox:用于实现弹性盒子布局,使元素更好地适应不同屏幕尺寸。

CSS3新增伪类有那些?

  • :hover:鼠标悬停伪类。
  • :active:激活伪类,例如鼠标点击时。
  • :focus:元素获得焦点时。
  • :visited:链接被访问过的状态。
  • :lang(language):根据语言匹配元素。
  • :after :在元素之前添加内容,也可以用来做清除浮动。
  • :before :在元素之后添加内容。
  • :enabled :已启用的表单元素。
  • :disabled :已禁用的表单元素。
  • :checked: 单选框或复选框被选中。
  • ::selection:用于设置文本被选中时的样式。
  • :nth-child(n):选择第n个子元素,可以使用表达式来选择一定规律的子元素。
  • :not()伪类:允许选择除了指定元素之外的所有元素。
  • :not(selector):选择不符合给定选择器的元素。
  • :placeholder-shown:选择具有占位符的输入框,并且占位符可见时的样式。
  • :valid和:invalid:选择表单元素中有效或无效的输入。
  • :target:用于选择当前活动的目标元素。
  • p:first-of-type :选择属于其父元素的首个 <p> 元素的每个 <p> 元素。
  • p:last-of-type :选择属于其父元素的最后<p>元素的每个 <p> 元素。
  • p:only-of-type :选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。
  • p:only-child :选择属于其父元素的唯一子元素的每个 <p> 元素。
  • p:nth-child(2) :选择属于其父元素的第二个子元素的每个 <p> 元素。
  • :nth-child(n):匹配元素是父元素的第n个子元素
  • :nth-child():允许选择指定位置的子元素。
  • :first-child:元素是父元素的第一个子元素。
  • :last-child:元素是父元素的最后一个子元素。

注意:a:hover 必须在 CSS 定义中的 a:link 和 a:visited 之后,才能生效!a:active 必须在 CSS
定义中的 a:hover 之后才能生效!伪类名称对大小写不敏感。

CSS3文字效果

   - hanging-punctuation:规定标点字符是否位于线框之外。

   - punctuation-trim:规定是否对标点字符进行修剪。

   - text-align-last:设置如何对齐最后一行或紧挨着强制换行符之前的行。

   - text-emphasis:向元素的文本应用重点标记以及重点标记的前景色。

   - text-justify:规定当 text-align 设置为 "justify" 时所使用的对齐方法。

   - text-outline:规定文本的轮廓。

   - text-overflow:规定当文本溢出包含元素时发生的事情。

   - text-shadow:向文本添加阴影。

   - text-wrap:规定文本的换行规则。

   - word-break:规定非中日韩文本的换行规则。

   - word-wrap:允许对长的不可分割的单词进行分割并换行到下一行。

CSS3边框

   - border-radius:CSS3圆角边框。

   - box-shadow:用于向方框添加阴影。

   - border-image:CSS3边框图片,可以使用图片来创建边框。

CSS3背景

   - background-size:属性规定背景图片的尺寸。

   - background-origin:属性规定背景图片的定位区域。

   - background-clip:规定背景的绘制区域。 

CSS3 转换

   - transform 向元素应用 2D 或 3D 转换。

   - transform-origin 允许你改变被转换元素的位置。

   - transform-style 规定被嵌套元素如何在 3D 空间中显示。

   - perspective 规定 3D 元素的透视效果。

   - perspective-origin 规定 3D 元素的底部位置。

   - backface-visibility 定义元素在不面对屏幕时是否可见。

CSS3 过渡

当元素从一种样式变换为另一种样式时为元素添加效果。

   - transition:简写属性,用于在一个属性中设置四个过渡属性。

   - transition-property:规定应用过渡的 CSS 属性的名称。

   - transition-duration:定义过渡效果花费的时间。默认是 0。

   - transition-timing-function:规定过渡效果的时间曲线。默认是 "ease"。

   - transition-delay:规定过渡效果何时开始。默认是 0。

CSS3动画: ( 简单动画的实现, 如旋转等)

通过 CSS3,我们能够创建简单的动画,这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript

依靠 CSS3 中提出的三个属性: transitiontransform animation

transition 过渡动画:定义了元素在变化过程中是怎么样的, 包含 transition-property transition-durationtransition-timing-functiontransition-delay

transform :定义元素的变化结果, 包含 rotate scaleskewtranslate

animation 关键帧动画 :动画定义了动作的每一帧 ( @keyframes ) 有什么效果, 包括 animation- name animation-durationanimation-timing-function animation- delay animation-iteration-countanimation-direction

transition 过渡动画:

   - transition-property:指定过渡的 CSS 属性
   - transition-duration:指定过渡所需的完成时间
   - transition-timing-function:指定过渡函数
   - transition-delay:指定过渡的延迟时间

animation 关键帧动画:

   - @keyframes:规定动画。
   - animation:所有动画属性的简写属性,除了 animation-play-state 属性。
   - animation-name:指定要绑定到选择器的关键帧的名称,规定 @keyframes 动画的名称。
   - animation-duration:规定动画完成一个周期所花费的秒或毫秒。默认是 0。
   - animation-timing-function:设置动画将如何完成一个周期,规定动画的速度曲线。默认是 "ease"。
   - animation-delay:设置动画在启动前的延迟间隔,规定动画何时开始。默认是 0。
   - animation-iteration-count:定义动画的播放次数,默认是 1。
   - animation-direction:指定是否应该轮流反向播放动画,规定动画是否在下一周期逆向地播放。默认是 "normal"。
   - animation-fill-mode:规定当动画不播放时(当动画完成时,或当动画有一个延迟未开始播放时),要应用到元素的样式。
   - animation-play-state:指定动画是否正在运行或已暂停,默认是 "running"

CSS3多列

   - column-count:指定元素应该被分割的列数。

   - column-fill:指定如何填充列

   - column-gap:指定列与列之间的间隙

   - column-rule: 所有 column-rule-* 属性的简写

   - column-rule-color:指定两列间边框的颜色

   - column-rule-style:指定两列间边框的样式

   - column-rule-width:指定两列间边框的厚度

   - column-span:指定元素要跨越多少列

   - column-width:指定列的宽度

   - columns:设置 column-width 和 column-count 的简写

CSS3用户界面

 - resize:属性规定是否可由用户调整元素尺寸。

   - box-sizing:属性允许您以确切的方式定义适应某个区域的具体内容。

   - outline-offset:属性对轮廓进行偏移,并在超出边框边缘的位置绘制轮廓。

   - appearance:允许您使一个元素的外观像一个标准的用户界面元素。

   - icon:为创作者提供了将元素设置为图标等价物的能力。

   - nav-down:指定在何处使用箭头向下导航键时进行导航。

   - nav-index:指定一个元素的Tab的顺序。

   - nav-left:指定在何处使用左侧的箭头导航键进行导航。

   - nav-right:指定在何处使用右侧的箭头导航键进行导航。

   - nav-up:指定在何处使用箭头向上导航键时进行导航。

伪类和伪元素的区别

伪类(pseudo-class)伪类是选择器的一种,用于选择元素的特定条件的元素、状态或位置。它们以冒号(:)开头,用于向特定的元素添加样式。并基于其状态或属性来应用样式。伪类通常通过选择器的一部分来表示,常见的伪类有::hover:active:focus等。它们是真实文档中已存在的元素的特殊状态。

伪元素(pseudo-element)则是在元素内部选择特定部分插入样式内容。伪元素以双冒号(::)开头,用于向文档的特定部分添加样式。常见的伪元素有::before::after::first-line等。它们不是真实的文档中已存在的元素,而是通过CSS生成的虚拟元素。

区别

  • 伪类和伪元素的区别在于它们的作用对象不同
  • 伪类是用于向特定选择器添加特殊效果的关键词,例如:hover用于鼠标悬停时的样式变化。
  • 伪元素则是在文档中创建虚拟元素,并为其赋予特定样式,例如使用::before来在元素前插入内容。
  • 伪类表状态
  • 伪元素是真的有元素
  • 前者单冒号,后者双冒号

具体来说,伪类用于选择元素的特殊状态或位置,例如悬停、点击等,而伪元素用于在元素的特定位置或内容前后插入样式。伪类用于选择已存在的元素,而伪元素则用于创建新的元素或部分。换句话说,伪类用于选择,而伪元素用于生成。

持续学习总结记录中,回顾一下上面的内容:
css3有哪些新增属性、CSS3新增伪类有那些?、CSS3文字效果、CSS3边框、CSS3背景、CSS3 转换、CSS3 过渡、CSS3动画: ( 简单动画的实现, 如旋转等)、CSS3多列、CSS3用户界面、伪类和伪元素的区别?

文章来源:https://blog.csdn.net/qq_37255976/article/details/134438049
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。