伴学笔记——CSS入门篇

维生素b
124 阅读6分钟

CSS（Cascading Style Sheets，层叠样式表）是HTML的辅助工具。HTML主要用于定义网页的结构和内容，而CSS则用于定义网页的样式和布局。通过CSS，我们可以更加精确地控制HTML元素的外观，例如字体、颜色、大小、布局、背景等。

CSS的主要作用包括：

  1. 样式控制：可以为HTML元素添加样式，使其更加美观。
  2. 布局控制：可以控制HTML元素的布局，例如定位、浮动、对齐等。
  3. 响应式设计：可以根据不同的设备和屏幕尺寸，应用不同的样式，实现响应式设计。
  4. 提高代码复用性：可以将样式定义在CSS文件中，然后在多个HTML文件中引用，提高代码的复用性。
  5. 维护和更新：当需要修改样式时，只需修改CSS文件，所有引用该CSS文件的HTML文件都会更新。

因此，CSS是HTML的重要辅助工具，它使得网页的设计和开发更加高效和灵活。

例子1

a {

display: block;

margin: 0.5em;

width: fit-content;

}

解释：

一、当前代码定义了一个CSS样式规则，适用于所有的标签。下面是对代码的详细解释：

总的来说，这段代码的作用是为所有的标签设置样式，使其以块级元素的形式显示，并且具有一定的外边距和自适应内容宽度。

二、display属性用于定义元素的显示方式，它有多个值，以下是一些常见的值：

  1. block：将元素显示为块级元素，它会独占一行，并且可以设置宽度、高度、内边距、外边距和边框。
  2. inline：将元素显示为行内元素，它不会独占一行，并且不能设置宽度和高度，但是可以设置内边距、外边距和边框。
  3. inline-block：将元素显示为行内块级元素，它不会独占一行，但是可以设置宽度、高度、内边距、外边距和边框。
  4. none：隐藏元素，使其不显示在页面上。
  5. flex：将元素显示为弹性容器，它的子元素可以在弹性容器内自由排列。
  6. grid：将元素显示为网格容器，它的子元素可以在网格容器内按照网格布局排列。
  7. table：将元素显示为表格。
  8. table-cell：将元素显示为表格单元格。
  9. table-row：将元素显示为表格行。
  10. table-row-group：将元素显示为表格行组。
  11. table-header-group：将元素显示为表格表头组。
  12. table-footer-group：将元素显示为表格表尾组。
  13. table-column：将元素显示为表格列。
  14. table-column-group：将元素显示为表格列组。

这些只是display属性的一些常见值，实际上display属性还有其他一些值，如list-item、run-in、inherit等，这些值可以用来实现更复杂的布局和样式效果。

三、margin属性用于设置元素的外边距，它可以接受多种类型的值，以下是一些常见的参数类型：

  1. 长度值：可以是像素（px）、百分比（%）、em、rem等单位的值，例如margin: 10px; 、margin: 5%; 、margin: 1em; 等。
  2. 自动值：可以使用auto关键字，让浏览器自动计算外边距的值，通常用于水平居中对齐，例如margin: auto; 。
  3. 单独设置：可以分别设置四个方向的外边距，例如margin-top、margin-right、margin-bottom、margin-left。
  4. 缩写形式：可以使用缩写形式一次性设置四个方向的外边距，例如margin: 10px 20px 30px 40px; （上、右、下、左）。
  5. 对称设置：如果只提供两个值，第一个值将应用于上下两边，第二个值将应用于左右两边，例如margin: 10px 20px; 。
  6. 三个值设置：如果提供三个值，第一个值将应用于上边，第二个值将应用于左右两边，第三个值将应用于下边，例如margin: 10px 20px 30px; 。

此外，margin还可以接受负值，这在某些布局场景中非常有用，例如可以通过负外边距来实现元素的重叠效果。

在你提供的代码上下文中，margin: 0.5em; 使用了长度值0.5em作为外边距，这意味着元素的上下左右四个方向都将有0.5em的外边距。

 

四、width属性用于设置元素的宽度，它可以接受多种类型的值，以下是一些常见的参数类型：

  1. 长度值：可以是像素（px）、百分比（%）、em、rem等单位的值，例如width: 100px; 、width: 50%; 、width: 1em; 等。
  2. 自动值：可以使用auto关键字，让浏览器自动计算宽度的值，通常用于块级元素的默认宽度，例如width: auto; 。
  3. 最大宽度：可以使用max-width属性来设置元素的最大宽度，例如max-width: 500px; 。
  4. 最小宽度：可以使用min-width属性来设置元素的最小宽度，例如min-width: 200px; 。
  5. 继承值：可以使用inherit关键字，让元素继承其父元素的宽度值，例如width: inherit; 。

此外，width还可以接受负值，这在某些布局场景中非常有用，例如可以通过负宽度来实现元素的重叠效果。

在你提供的代码上下文中，width: fit-content; 使用了fit-content关键字作为宽度值，这意味着元素的宽度将根据其内容的宽度自动调整，以适应内容的大小。

 

例2：

input, textarea {

    display: block;

    margin: 1em;

    width: 16em;

    font-size: inherit

  }

 

 

一、font-size: inherit是CSS中的一个声明，它的作用是将当前元素的字体大小设置为继承其父元素的字体大小。

在CSS中，font-size属性用于设置文本的字体大小。inherit是一个特殊的值，它表示当前属性的值应该从其父元素继承。这意味着如果一个元素的字体大小没有被显式设置，它将使用其父元素的字体大小。

在你提供的代码上下文中，font-size: inherit这个声明可能是用于某个特定的HTML元素，例如

、 、

等，目的是让这些元素的字体大小与它们的父元素保持一致，而不是使用默认的字体大小或者显式设置的字体大小。

例如，如果一个

标签的父元素的字体大小是16px，那么设置了font-size: inherit的

标签也将显示为16px的字体大小。

这种做法可以提高样式的一致性和可维护性，因为如果需要更改整个页面或部分页面的字体大小，只需修改父元素的字体大小，所有继承了该字体大小的子元素都会自动更新。

avatar
文章
阅读
粉丝