HTML|CSS3 学习知识点笔记：助力前端开发之路

前端

2023-06-10 00:32:10

HTML 和 CSS3：前端开发的基石

HTML 选择器权重：

HTML 选择器权重就像一个交通信号灯，它决定了 CSS 样式的优先级。权重越高，样式的优先级越高。权重计算方式类似于数学运算：

标签名：1 分
类名：10 分
ID 名：100 分
行内样式：1000 分

文本属性：

文本属性就好比一个化妆师，它能帮你美化文字。你可以使用这些属性来调整字体、字号、颜色和对齐方式。常用的文本属性包括：

font-family： 设置字体类型
font-size： 设置字号
color： 设置文本颜色
text-align： 设置文本对齐方式

网页浏览器支持的字体列表属性：

不同浏览器就像不同的朋友，对字体有着不同的偏好。这个属性允许你列出浏览器支持的字体。如果浏览器找不到你指定的字体，它就会尝试使用列表中的下一个字体。常用的字体列表属性包括：

font-family： 设置字体类型
font-size： 设置字号
color： 设置文本颜色
text-align： 设置文本对齐方式

背景属性：

背景属性就像画布，你可以用它来给你的网页增添色彩和视觉趣味。常用的背景属性包括：

background-color： 设置背景颜色
background-image： 设置背景图片
background-repeat： 设置背景重复方式

background-size 控制图片大小：

cover： 放大图片以覆盖整个区域，可能会导致图片变形。
contain： 按比例缩放图片以适应区域，可能会留白。
复合写法： 你可以结合这两个属性来控制图片大小。

浮动属性：

浮动属性像是一块磁铁，它可以将元素吸附到页面的一侧。常用的浮动属性值包括：

float： 设置元素的浮动方向
clear： 清除浮动效果

清除浮动效果：

要清除浮动效果，你可以使用 clear 属性。常用的 clear 属性值包括：

left： 清除左边浮动
right： 清除右边浮动
both： 清除左右浮动

代码示例：

<!DOCTYPE html>
<html>
<head>
  <style>
    h1 {
      font-family: Arial, Helvetica, sans-serif;
      font-size: 30px;
      color: #000;
      text-align: center;
    }
    p {
      background-color: #f0f0f0;
      padding: 10px;
    }
  </style>
</head>
<body>
  <h1>欢迎来到 HTML 和 CSS3 的世界！</h1>
  <p>让我们一起学习前端开发吧！</p>
</body>
</html>