返回

前端知识点精选集——CSS知识点（二）

前端

CSS选择器

CSS选择器用于指定要应用样式的HTML元素。CSS选择器有很多种，每种都有自己的用途和特点。以下是一些常用的CSS选择器：

  • 元素选择器：用于选择特定元素，如<div>、<p>或<a>。
  • 类选择器：用于选择具有特定类名的元素。类选择器使用.符号，后跟类名。
  • ID选择器：用于选择具有特定ID的元素。ID选择器使用#符号，后跟ID名。
  • 通配符选择器：用于选择所有元素。通配符选择器使用*符号。
  • 后代选择器：用于选择父元素的后代元素。后代选择器使用>符号，后跟子元素的选择器。
  • 兄弟选择器：用于选择与某个元素相邻的元素。兄弟选择器使用+或~符号，后跟兄弟元素的选择器。

CSS属性

CSS属性用于设置HTML元素的各种样式，如颜色、背景、边框、字体等。CSS属性有很多种，每种属性都有自己的用途和取值范围。以下是一些常用的CSS属性：

  • color：用于设置元素的文本颜色。
  • background-color：用于设置元素的背景颜色。
  • border：用于设置元素的边框。
  • font-family：用于设置元素的字体系列。
  • font-size：用于设置元素的字体大小。
  • font-weight：用于设置元素的字体粗细。
  • text-align：用于设置元素的文本对齐方式。
  • padding：用于设置元素内边距。
  • margin：用于设置元素外边距。

盒子模型

盒子模型是CSS中用于元素外观的一种模型。盒子模型将元素视为一个具有内容、内边距、边框和外边距的矩形。内容是元素的内容，内边距是元素内容与边框之间的空间，边框是元素的边框，外边距是元素边框与其他元素之间的空间。

CSS3

CSS3是CSS的最新版本，它增加了许多新的特性和功能。CSS3的主要新特性包括：

  • 弹性布局：弹性布局允许元素根据可用空间自动调整大小和位置。
  • 媒体查询：媒体查询允许您根据设备或屏幕尺寸、方向或分辨率来调整样式。
  • 动画：CSS3支持动画，允许您创建动态的动画效果。
  • 过渡：CSS3支持过渡，允许您在元素之间平滑过渡。
  • 变换：CSS3支持变换，允许您将元素旋转、缩放、位移或倾斜。

扩展学习