成茂峰
成茂峰

CSS基础知识 【一篇就够】

文章目录

  • CSS知识点
    • 基础知识
      • 什么是css？
      • css的历史和版本
      • css语法的结构
      • css选择器，如何选择元素
      • css属性和值的基础知识
        • CSS属性
        • CSS值
        • css 属性值类型
        • css 单位
        • css 值的继承性
        • css 值的优先级
    • 排版和布局
      • 盒子模型的概念
        • W3C盒子模型
        • IE盒子模型
      • 块级元素和行内元素的区别
      • 浮动和清除浮动
      • 定位，绝对定位和相对定位
      • 弹性盒子模型（flexbox）的概念
      • 网格布局（grid）的概念
    • 样式化文本
      • 字体样式和字体大小
      • 文本颜色和背景颜色
      • 文本对齐方式和行高
      • 文本装饰，如下划线、删除线和强调
      • 阴影和轮廓效果
    • 图像和背景
      • 背景颜色和背景图像
      • 背景尺寸和背景重复
      • 边框和圆角
      • 图像透明度和过渡效果
    • 动画和交互
      • css动画和关键帧
      • css过渡效果
      • 悬停效果和活动状态效果
      • 响应式设计和媒体查询
  • 总结

CSS知识点

基础知识

什么是css？

css是一种用于描述网页样式的语言，全称为cascading style sheets（层叠样式表）。
css可以将html文档中的内容与样式分离，从而使得网页的结构和呈现分离，并且能够使得同样的样式应用于多个页面，从而提高了页面的可维护性和可重用性。

css允许开发者对html元素进行各种视觉方面的样式控制，包括文字和字体属性、颜色和背景、布局和定位等等。
通过定义不同的样式规则和类别，我们可以轻松地改变网站的外观和感觉。
由于css是一种标记语言，因此使用起来十分灵活和易于理解，也是web前端开发的基础技能之一。

css的历史和版本

css是一种用于网页设计的样式表语言，它可以为html文档添加样式和布局效果。css有着悠久的历史，下面是css的历史与版本：

css1
1996年12月，w3c发布了第一个css标准，即css1。这个版本的css定义了基本的样式属性，如颜色、字体、背景、边框等，并且支持样式层叠和继承。

css2
1998年5月，w3c发布了css2标准。这个版本的css新增了更多的样式属性，如定位、浮动、清除浮动、伪类、伪元素、表格布局等，并且引入了媒体查询、内容生成和盒模型等新特性。

css2.1
2004年6月，w3c发布了css2.1标准。这个版本的css对css2进行了修订和完善，但没有引入新的特性。

css3
css3是css的最新版本，它并不是一个单独的规范，而是由一系列模块组成。每个模块都包含了一个或多个新的css特性。css3的一些主要模块包括：

selectors level 3：新增了一些高级选择器。
box model：新增了弹性盒子模型和网格布局模型。
color：新增了rgba、hsla和透明度等颜色属性。
text effects：新增了文本阴影、渐变和多列布局等效果。
transitions and animations：新增了过渡和动画效果。
media queries：进一步完善了媒体查询，可以根据设备和屏幕尺寸来设置样式。
css3模块的开发和发布是分散的，并且每个模块都有自己的版本号。因此，css3没有一个明确的版本号，而是根据使用的模块不同而有所不同。

css语法的结构

CSS语法的基本结构如下：

选择器 { 属性1: 值1; 属性2: 值2; … }

其中，选择器表示要应用样式的HTML元素，可以是标签名、类名、ID、属性等；花括号{}中的内容表示要设置的样式属性和对应的取值。

多个样式规则可以连续书写，以分号分隔。具体示例代码如下：

h1 {
color: red;
font-size: 24px;
}

p {
color: blue;
font-size: 18px;
}

在上面的例子中，h1和p是选择器，它们分别匹配HTML中的

和

标记， 并且设置了不同的样式属性。

注意，在样式中使用属性时需要遵循”属性：值“的格式规定，属性和取值之间需要用冒号分隔，多个属性之间需要用分号分隔。

css选择器，如何选择元素

CSS 选择器是用于选择单个或一组 HTML 元素，并对其应用样式的模式。
下面是一些常见的 CSS 选择器示例以及如何使用它们来选择元素：

  • 标签选择器（element selector）：
    通过指定 HTML 标签名来选择所有具有该标记的元素。
    例如，要选择所有段落元素，可以使用 p 标签选择器。
p {
/* 样式 */
}
  • 类选择器 (class selector)：
    通过使用 .class 来选择拥有相同 class 属性值的元素。
    例如，要选择所有具有 title 类的元素，可以使用 .title 类选择器。
.title {
/* 样式 */
}
  • ID 选择器 (id selector)：
    通过使用 #id 来选择指定 id 属性的元素。请注意，id 在文档中必须是唯一的。
    例如，要选择拥有 main-content ID 的元素，可以使用 #main-content ID 选择器。
#main-content {
    /* 样式 */
}
  • 后代组合选择器 (descendant combinator)：
    通过将选择器分隔符（空格）放置在两个选择器之间来选择元素的后代。
    例如，在以下 HTML 结构中，要选择外部 div 下的所有 p 标签，可以使用 div p 选择器。
  <div>
    <p>选我p>
    <div>
      <p>不要选我p>
    div>
  div>

  div p {
    /* 样式 */
  }
  • 子代组合选择器 (child combinator)：
    通过使用 > 符号来选择元素的直接子节点。
    例如，在以下 HTML 结构中，要选择外部 div 下的所有直接的子元素，可以使用 div > * 选择器（* 表示选择所有元素）。
  <div>
    <p>选我p>
    <div>
      <p>不要选我p>
    div>
  div>

  div > * {
    /* 样式 */
  }
  • 相邻兄弟组合选择器 (adjacent sibling combinator)：
    通过使用 + 符号来选择某个元素之后的第一个兄弟元素。
    例如，在以下 HTML 结构中，要选择 id 为 heading 的 h2 元素之后的第一个兄弟元素（也就是下一个 p 元素），可以使用 h2 + p 选择器。
<h2 id="heading">标题h2>
<p>选我p>
<p>不要选我p>

  h2 + p {
    /* 样式 */
  }

这些只是 CSS 选择器的一部分。可以通过结合使用它们来创建更复杂的选择器，以达到您想要选择的元素。

css属性和值的基础知识

CSS属性

CSS属性是一种用于设置元素样式的标准化名称。以下是几个常用的CSS属性：

  • color

color属性用于设置文本的颜色。它可以使用颜色名称、十六进制RGB值或RGBA值来指定颜色。

color: red; /* 使用颜色名称 */
color: #FF0000; /* 使用十六进制RGB值 */
color: rgba(255, 0, 0, 0.5); /* 使用RGBA值 */
  • font-size
    font-size属性用于设置字体的大小。它可以使用像素、EM、REM、百分比等单位来指定字体大小。
font-size: 16px; /* 使用像素 */
font-size: 1.2em; /* 使用EM */
font-size: 120%; /* 使用百分比 */
  • background-color
    background-color属性用于设置元素的背景颜色。它可以使用颜色名称、十六进制RGB值或RGBA值来指定背景颜色。
background-color: yellow; /* 使用颜色名称 */
background-color: #FFFF00; /* 使用十六进制RGB值 */
background-color: rgba(255, 255, 0, 0.5); /* 使用RGBA值 */
  • margin
    margin属性用于设置元素的外边距。它可以使用像素、EM、REM、百分比等单位来指定外边距的大小。
margin: 10px; /* 设置所有方向的外边距为10像素 */
margin-top: 5em; /* 只设置顶部外边距为5EM */
margin: 10px 20px 30px 40px; /* 分别设置上右下左四个方向的外边距 */
  • padding
    padding属性用于设置元素的内边距，也就是元素内容和边框之间的空间。它可以使用像素、EM、REM、百分比等单位来指定内边距的大小。
padding: 10px; /* 设置所有方向的内边距为10像素 */
padding-top: 5em; /* 只设置顶部内边距为5EM */
padding: 10px 20px 30px 40px; /* 分别设置上右下左四个方向的内边距 */
CSS值

CSS值表示了CSS属性的可选值。以下是一些常用的CSS值：

  • 长度单位
    长度单位用于指定长度或距离。以下是一些常用的长度单位：

px：像素（Pixel）
em：相对于父元素字体大小的单位
rem：相对于根元素字体大小的单位
%：相对于包含块的百分比

width: 100px; /* 使用像素 */
font-size: 1.2em; /* 相对于父元素字体大小增加20% */
padding: 2rem; /* 相对于根元素字体大小增加两倍 */
height: 50%; /* 相对于包含块高度的50% */
  • 颜色值
    颜色值用于设置颜色。以下是一些常用的颜色值：

颜色名称：例如red、blue等。
十六进制RGB值：例如#FF0000表示红色，#00FF00表示绿色，#0000FF表示蓝色。
RGBA值：RGBA值与RGB值类似，但是在最后添加了一个alpha通道，它用于控制透明度。

color: red; /* 使用颜色名称 */
background-color: #FFFF00;  /* 十六进制RGB值 */
background-color: rgba(0,0,0,1);  /* RGBA值 */
css 属性值类型

css 属性值可以分为以下几种类型：

  • 数字类型
    数字类型的值可以是整数或小数，并且可以带有单位，例如像素（px）、百分比（%）、em、rem 等。

  • 颜色类型
    颜色类型的值可以使用预定义的颜色名称或 rgb/rgba 值、hsl/hsla 值等方式来指定。

  • 文本类型
    文本类型的值包括字符串、url 和图像名称等。

  • 函数类型
    函数类型的值由函数名和参数组成，例如 linear-gradient()，它可以生成一个渐变背景。

  • 枚举类型
    枚举类型的值只能从预定义的选项中选择，例如 display 属性的值可以是 block、inline、inline-block、table 等。

  • 逻辑类型
    逻辑类型的值表示真假值，例如 visibility 属性的值可以是 visible 或 hidden。

css 单位

  • 绝对单位
    绝对单位指的是长度单位，其值相对于物理尺寸而言是固定不变的，例如像素（px）、英寸（in）、厘米（cm）等。

  • 相对单位
    相对单位指的是长度单位，其值相对于某个基准值而言是可变的，例如百分比（%）、em、rem 等。其中，em 是相对于当前元素的字体大小，rem 是相对于根元素的字体大小。

  • 其他单位
    css 还支持其他类型的单位，例如时间单位（s、ms）、角度单位（deg、rad、grad）等。

css 值的继承性

有些 css 属性可以被子元素继承，例如 font-family、color、text-align 等。当一个元素没有设置这些属性时，它会从父元素继承这些属性的值。不过，并非所有属性都有继承性，例如 width、height、border 等就不具有继承性。

css 值的优先级

当多个 css 规则应用到同一元素时，可能会出现冲突。
此时，浏览器会根据规则的优先级来决定哪个规则应该生效。css 规则的优先级由以下因素确定：

  1. 指定了 !important 的属性具有最高优先级。
  2. 内联样式具有次高优先级。
  3. id 选择器的优先级高于类选择器和属性选择器。
  4. 类选择器和属性选择器的优先级相同，但如果它们同时作用于一个元素，则后声明的规则具有更高的优先级。
  5. 元素选择器的优先级最低。
    以上是css值的基础知识，掌握了这些知识后，就可以更好地理解和使用css。

排版和布局

盒子模型的概念

盒子模型是指计算机渲染的每个元素都被看作是一个盒子。这个“盒子”由四个边框、内部内容和外边距所组成。它是 Web 设计和开发中最基本的概念之一。在 HTML 和 CSS 中，每个元素都可以通过盒子模型来描述其布局。

盒子模型包括四个部分：

内容区域（content area）: 指一个元素包含的实际内容，并且被包围在一个框里，它是盒子模型中的核心。

填充区域（padding area）: 位于内容区域和边框之间，它的大小可以通过 padding 属性控制。填充区域可以用来设置内容与边框之间的距离。

边框区域（border area）：是围绕内容和填充区域的线条，可以通过 border 属性进行设置，用来定义元素的边界。

外边距区域（margin area）：位于边框和周围元素之间，可以通过 margin 属性进行控制，用来调整元素与其他元素之间的距离。

盒子模型的大小可以通过以下公式计算：

总宽度 = 左边距 + 左边框宽度 + 左填充宽度 + 内容宽度 + 右填充宽度 + 右边框宽度 + 右边距

总高度 = 上边距 + 上边框宽度 + 上填充宽度 + 内容高度 + 下填充宽度 + 下边框宽度 + 下边距
W3C盒子模型

W3C盒子模型是Web标准盒子模型，它将元素的宽度和高度属性应用于元素的内容框。这意味着元素的实际宽度和高度不包括填充、边框和边距。如果您想要计算元素的总宽度和高度，您需要将元素的内容框、填充、边框和边距相加。

以下是W3C盒子模型的示例：

.box {
    width: 200px;
    height: 100px;
    padding: 20px;
    border: 1px solid black;
    margin: 10px;
    box-sizing: content-box;
}

在此示例中，我们定义了一个宽度为200像素、高度为100像素、填充为20像素、1像素黑色边框和10像素边距的盒子。我们还将box-sizing属性设置为content-box，这意味着宽度和高度属性仅适用于元素的内容。

IE盒子模型

IE盒子模型是Internet Explorer浏览器使用的盒子模型。它将元素的宽度和高度属性应用于元素的内容框、填充和边框。这意味着元素的实际宽度和高度包括填充和边框，但不包括边距。如果您想要计算元素的总宽度和高度，您需要将元素的内容框、填充和边框相加。

以下是IE盒子模型的示例：

.box {
    width: 200px;
    height: 100px;
    padding: 20px;
    border: 1px solid black;
    margin: 10px;
    box-sizing: border-box;
}

在此示例中，我们定义了一个宽度为200像素、高度为100像素、填充为20像素、1像素黑色边框和10像素边距的盒子。我们还将box-sizing属性设置为border-box，这意味着宽度和高度属性包括元素的填充和边框。

盒子模型是Web开发中描述元素在网页上布局的基本概念。

W3C盒子模型和IE盒子模型是两种不同的盒子模型，它们在计算元素的宽度和高度时有所不同。

通过理解盒子模型及其工作原理，您可以创建更有效和高效的网页。

块级元素和行内元素的区别

要理解HTML中块级元素和内联元素之间的区别，我们需要首先了解它们是什么。

  • 块级元素：是指占用可用的全部宽度并在元素之后创建新行的元素。

块级元素的示例包括

、

、

-6>、