Advanced CSS and Sass_学习记录_Natours_01

课程资源地址：https://github.com/jonasschmedtmann/advanced-css-course

全局样式重置

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

作用解析

• * 选择器：通用选择器，应用于页面中的所有元素，确保一致的基础样式。
• margin: 0;：重置所有元素的外边距，消除浏览器默认的外边距设置。
• padding: 0;：重置所有元素的内边距，消除浏览器默认的内边距设置。
• box-sizing: border-box;：设置盒模型的计算方式，使元素的总宽高包含内边距和边框，便于布局控制。

详细介绍 box-sizing

box-sizing 属性用于定义元素的盒模型计算方式。默认情况下，box-sizing 的值为 content-box，这意味着元素的宽度和高度只包括内容部分，不包括内边距和边框。当设置为 border-box 时，元素的宽度和高度将包括内容、内边距和边框。这样在进行布局时，更容易控制元素的实际大小，避免因为内边距或边框的添加而导致布局错位。

总结：

1. 使用*通用选择符选择页面内所有的页面元素，只用格式化margin、padding以及box-sizing，是因为现代浏览器内置的样式已经趋同，不需要进行更复杂的normalize.css。

页面主体样式

body {
    font-family: "Lato", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.7;
    color: #777;
    padding: 30px;
}

作用解析

• font-family: "Lato", sans-serif;：设置页面的主字体为“Lato”，如果该字体不可用，则使用默认的无衬线字体。
• font-weight: 400;：定义字体的粗细程度，400表示正常的字体重量。
• font-size: 16px;：设置基础字体大小为16像素。
• line-height: 1.7;：定义行高为字体大小的1.7倍。
• color: #777;：设置文本颜色为灰色。
• padding: 30px;：为页面内容添加30像素的内边距，体现出白边。

总结：

2. 字体相关属性不在*内使用，而是在body选择器中设置，利用了继承机制，body内的元素都会继承并应用这些字体属性。

头部区域样式

.header {
    height: 95vh;
    background-image: linear-gradient(to right bottom,
     hsla(111, 55%, 64%, 0.8), 
     hsla(160, 64%, 43%, 0.8)),
      url(../img/hero.jpg);
    background-size: cover;
    background-position: top;

    clip-path: polygon(0 0, 100% 0, 100% 75vh, 0 100%);
}

作用解析

• .header 类：应用于页面的头部区域，通常用于展示横幅、导航或重要信息。
• height: 95vh;：设置元素的高度为视口高度的95%，确保头部几乎占满整个屏幕高度。
• background-image：定义多个背景层，首先是一个线性渐变，然后叠加一张图片。
• background-size: cover;：确保背景图片覆盖整个元素，保持图片的比例，避免拉伸或压缩。
• background-position: top;：将背景图片定位在元素的顶部，确保关键部分显示在视野内。
• clip-path: polygon(...)：使用多边形裁剪路径，创建独特的形状效果，使头部区域的底部呈现倾斜或斜切的视觉效果。

详细介绍关键属性

background-image

background-image 属性用于设置元素的背景图像。它可以接受多个背景层，通过逗号分隔。每一层背景可以是图片、渐变或其他图形。

在上述代码中，首先定义了一个线性渐变 linear-gradient(to right bottom, hsla(111, 55%, 64%, 0.8), hsla(160, 64%, 43%, 0.8))，这为背景添加了从左上到右下的渐变效果，颜色从浅绿色过渡到深绿色，透明度为0.8。随后叠加了一张图片 url(../img/hero.jpg)。

总结：

3. background-image 可以设置多张背景图片，通过逗号分隔，前面的图片会覆盖在后面的图片之上。

background-size

background-size 属性定义背景图像的尺寸，常用的属性值包括：

• auto（默认值）：保持背景图像的原始尺寸。
• cover：缩放背景图像以完全覆盖容器。图像可能会被裁剪，但不会拉伸失真。
• contain：缩放背景图像以完全适应容器。图像不会被裁剪，但可能会有空白区域。

此外，还可以指定具体的尺寸：

• 长度值：如 background-size: 100px 200px;，分别指定背景图像的宽度和高度。
• 百分比值：如 background-size: 50% 50%;，相对于容器的尺寸进行缩放。

在上述代码中，使用了 background-size: cover;，这意味着背景图像会缩放到足以覆盖整个容器，同时保持其宽高比。

background-position

background-position 属性用于设置背景图像的起始位置，常用的属性值包括：

• 关键字：如 top、bottom、left、right、center。可以组合使用，如 background-position: top right;。
• 百分比值：如 background-position: 50% 50%;，表示背景图像的中心点与容器的中心点对齐。
• 长度值：如 background-position: 20px 30px;，表示从容器的左上角开始，水平偏移20px，垂直偏移30px。

在上述代码中，background-position: top; 等同于 background-position: top center;，即背景图像的顶部居中对齐。这在与 background-size: cover; 一起使用时，可以确保背景图像的重要部分（通常是顶部区域）显示在视口内。

clip-path

clip-path 属性允许开发者定义一个裁剪路径，显示元素的特定部分。支持多种形状，包括：

• 基本形状：如 circle()、ellipse()、inset()、polygon() 等。
• SVG 路径：可以使用复杂的路径来定义裁剪区域。

在上述代码中，使用了 polygon() 函数：

clip-path: polygon(0 0, 100% 0, 100% 75vh, 0 100%);

这个多边形的顶点坐标如下：

• 0 0：左上角（x=0，y=0）
• 100% 0：右上角（x=100%，y=0）
• 100% 75vh：右侧，垂直位置为视口高度的75%（x=100%，y=75vh）
• 0 100%：左下角（x=0，y=100%）

通过这些坐标，创建了一个四边形，其顶部是水平的，底部呈斜切形状。

总结

1. 全局样式重置：使用通用选择器 * 重置 margin、padding 和 box-sizing，简化了样式初始化过程，因为现代浏览器的默认样式已经趋于一致，不再需要复杂的 normalize.css。

2. 字体继承：在 body 中设置字体相关属性，利用 CSS 的继承机制，使页面中的所有文本元素都能继承这些属性，简化了样式的维护。

3. 多背景图片：background-image 可以设置多张背景图片，通过逗号分隔，前面的图片会覆盖在后面的图片之上，创造出丰富的视觉效果。

4. 背景尺寸控制：background-size 提供了多种方式来控制背景图像的尺寸，cover 和 contain 是最常用的值，可以适应不同的设计需求。

5. 背景定位：background-position 允许精确控制背景图像的位置，结合关键字、百分比或长度值，可以确保背景的关键部分在视口中正确显示。

6. 裁剪路径：clip-path 提供了创建复杂形状的能力，增强了设计的灵活性和创造性，但需要注意浏览器兼容性和性能。

成果展示