本日学习css常用知识小结

如履灬薄冰丿

已于 2024-06-17 19:34:20 修改

阅读量493

点赞数 17

文章标签： css 学习前端

于 2024-06-17 19:32:51 首次发布

本文链接：https://blog.csdn.net/qq_64417283/article/details/139752692

版权

CSS 基础知识

2. 样式定义

选择器（Selectors）:
- 用于选择 HTML 元素以应用样式。选择器的类型多种多样，包括类选择器（.classname）、ID 选择器（#idname）、元素选择器（element）、属性选择器（[attribute]）、伪类选择器（:hover）等。
属性与值（Properties and Values）:
- 样式定义的核心，通过 属性: 值; 的形式，为选择的 HTML 元素应用样式。
  - 例如 font-size: 14px; 设置字体大小为 14 像素。
  - color: rgba(0, 0, 0, 0.9); 设置文本颜色为接近黑色的半透明效果。

具体知识应用

3. 文本样式和布局

字体大小（font-size）:
- 控制文本的大小，可以使用不同的单位，如 px（像素）、em（相对单位）、rem（根元素相对单位）等。
  - 例如 font-size: 14px; 表示字体大小为 14 像素。
颜色（color）:
- 设置文本的颜色，可以使用预定义的颜色名称、十六进制值（#rrggbb）、RGB 或 RGBA 颜色（rgb(r, g, b) 或 rgba(r, g, b, a)）。
  - 例如 color: rgba(0, 0, 0, 0.9); 设置颜色为几乎不透明的黑色。
对齐方式（text-align）:
- 控制文本在块级元素内的水平对齐方式。
  - 例如 text-align: center; 让文本在块级元素内居中对齐。
行高（line-height）:
- 控制行间距，即行与行之间的垂直空间。
  - 例如 line-height: 1.5; 设置行高为 1.5 倍的字体大小。

4. 背景和图像

背景图像（background-image）:
- 设置元素的背景图片，通过 URL 指定图像的位置。
  - 例如 background-image: url(images/zimu.jpg); 设置背景图片为 zimu.jpg。
背景位置（background-position）:
- 控制背景图像在元素中的显示位置，常用值包括 center、top、bottom、left、right，也可以使用具体的像素值或百分比。
  - 例如 background-position: -239px -475px; 表示背景图像从元素的左上角偏移 -239 像素和 -475 像素。
背景重复（background-repeat）:
- 控制背景图像是否以及如何重复。
  - background-repeat: no-repeat; 表示背景图像不重复显示。

5. 响应式设计

视口设置（viewport）:
- 使用 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 声明，使网页能够根据设备的宽度进行缩放和调整。
  - width=device-width 设置视口宽度为设备的宽度。
  - initial-scale=1.0 设置初始缩放比例为 1。
媒体查询（media queries）:
- 根据不同的设备类型和特性（如宽度、高度、分辨率等）应用不同的样式。
  - 例如：
```
@media (max-width: 600px) {
    body {
        background-color: lightblue;
    }
}
```
  - - - 这段代码表示，当视口宽度小于等于 600 像素时，背景颜色将变为浅蓝色。
  - display: inline-block:
    - 将块级元素显示为内联元素，同时保留块级元素的特性（如宽度和高度可以被设置）。
      - 例如：
  - 6. 内联块元素
```
.st4 {
    display: inline-block;
}
```

7. 伪类与交互效果

伪类（Pseudo-classes）:
- 提供对元素的特定状态的样式，比如 :hover 表示当用户将鼠标悬停在元素上时应用的样式。
  - 例如
```
.bakcground_gray:hover {
    background-color: rgba(0, 0, 0, 0.3);
}
```
  - - - 这段代码表示，当用户将鼠标悬停在具有 .bakcground_gray 类的元素上时，背景颜色将变为半透明的黑色。
  - 三个文件的内容总结
    
    第一个文件
  - 主要展示了一个网站的底部信息栏，内容涉及版权声明、隐私政策和其他法律信息。
  - 用到了 文本样式 和 背景图像定位。
  - 例子中多次使用了 font-size 和 color 来调整文本的外观，使用了 text-align: center 来居中文本。
  - 通过使用不同的背景位置（background-position）来显示不同的图标。
  - 第二个文件
  - 展示了两个具有不同背景图像的方块。
  - 强调了 背景图像 的使用，通过 background-image 设置背景图片，并使用 background-position 定位背景图像的特定部分。
  - display: inline-block 使得这两个元素可以水平排列。
  - 显示了一个多层级的分类导航，带有用户交互效果。
  - 使用了伪类 :hover 来实现当用户悬停在元素上时的样式变化（例如颜色变红并下划线）。
  - 通过 .background_red 类的 hover 样式，使得导航链接在鼠标悬停时发生变化，增强了用户体验。
  - 进一步解释各部分的具体作用和用法
    
    字体和颜色
  - 字体大小（font-size） 是 CSS 中非常常用的属性，它可以通过多种单位进行定义，比如：
    - px（像素）：精确控制字体大小，如 font-size: 14px;。
    - em 和 rem：相对单位，em 是相对于父元素的字体大小，rem 是相对于根元素的字体大小。
    - 百分比：相对于父元素的字体大小，比如 font-size: 100%; 相当于与父元素的字体大小相同。
  - 颜色（color） 可以用多种方式定义：
    - 颜色名称（如 red、blue）。
    - 十六进制值（如 #ff0000 表示红色）。
    - RGB（如 rgb(255, 0, 0) 表示红色）。
    - RGBA（如 rgba(255, 0, 0, 0.5) 表示半透明红色）。
  - 布局和对齐
  - 文本对齐（text-align） 是用于水平对齐文本的属性，常见值有：
    - left：左对齐。
    - center：居中对齐。
    - right：右对齐