CSS样式表的写法及优先级

CSS样式表的三种写法：

  • 内联样式表：通过style属性在HTML标签中添加样式。
  • 内部样式表：在部分使用标签定义样式。
  • 外部样式表：将样式保存为.css文件，并在HTML文档中通过``标签引用。
    优先级排序：
  • 内联样式 > 内部样式 > 外部样式
  • 特殊性高的规则优先级高于低的规则。
  • 使用!important声明时，具有相同特殊性的规则，!important声明的规则优先。
  • 当两个规则都使用!important时，优先级较高的选择器或后出现的规则覆盖前者。
    使用外部样式表的场景：
  • 多个页面共享相同样式时，使用外部样式表有助于保持代码整洁和提高维护效率。

CSS基本语法与选择器

CSS基本语法：

  • 格式：selector { property: value; }
    常用选择器：
  • ID选择器：#id，匹配特定ID。
  • 类选择器：.class，匹配特定类名。
  • 标签选择器：直接使用HTML标签名称。
  • 通用选择器：*，匹配所有元素。
  • 伪类：
  • :hover：鼠标悬停时应用样式。
  • :link：未访问过的链接样式。
  • :visited：已访问过的链接样式。
  • :active：活动链接样式。
  • :focus：获取焦点时的样式。

盒子模型与页面布局

CSS盒子模型：

  • 包含：Margin（外边距）、Border（边框）、Padding（内边距）、Content（内容区域）。
    页面布局方法：
  • 绝对定位：元素相对于最近的已定位祖先元素定位。
  • 相对定位：元素相对于其正常位置定位。
  • 静态定位：默认定位方式，无特殊定位规则。
  • 固定定位：元素相对于浏览器窗口定位，通常用于创建固定头部或底部。

其他重要CSS属性

visibility与display的区别：

  • visibility: hidden：元素不可见，仍占用布局空间。
  • display: none：元素不显示，且不占用空间。
    清除浮动：
  • clear: left：不允许左侧浮动元素。
  • clear: right：不允许右侧浮动元素。
  • clear: both：左右两侧均不允许浮动元素。
    clearfix技巧：
  • 通过额外的HTML标签和CSS属性清除浮动效果。