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中的<h1>和<p>标记， 并且设置了不同的样式属性。

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

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中块级元素和内联元素之间的区别，我们需要首先了解它们是什么。

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

块级元素的示例包括<div>、<p>、<h1>-6>、<ul>、<ol>、<li>、<table>、<form>和<header>。这些元素通常用于创建网页的结构。

• 内联元素：只占用必要的宽度，并且不会在元素之后创建新行。

内联元素的示例包括<a>、<span>、<img>、<strong>、<em>和<input>。这些元素通常用于设置块级元素内内容的样式或格式。

总之：

1. 块级元素在元素之后创建一条新行，并占用其可用的全部宽度。
2. 内联元素只占用必要的宽度，不会在元素之后新建一条新行。

浮动和清除浮动

浮动是一种布局技术，可以使元素脱离文档流并向左或向右移动，直到它们遇到另一个元素或容器的边缘。浮动元素通常用于创建多列布局或图像浮动效果。

要将元素浮动，可以使用CSS属性float。例如，要将一个元素向左浮动，可以使用以下代码：

.my-element {
  float: left;
}

但是，浮动元素可能会导致一些问题，例如它们可能会覆盖其他元素或破坏布局。为了解决这些问题，可以使用清除浮动技术。清除浮动是一种CSS技术，可以将浮动元素的影响限制在其容器内部，从而避免布局问题。

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

要清除浮动，可以使用CSS属性clear。例如，要清除左浮动，可以使用以下代码：

这将在浮动元素的容器中创建一个伪元素，并将其清除。请注意，这是一种常见的清除浮动技术，称为“clearfix”。

总之，浮动是一种布局技术，可以使元素脱离文档流并向左或向右移动，而清除浮动是一种CSS技术，可以避免浮动元素导致的布局问题。

定位，绝对定位和相对定位

定位是指通过CSS属性来设定HTML元素在网页中的位置。有三种常用的定位方式：静态定位、相对定位和绝对定位。

• 静态定位（position: static）：默认定位方式，即按照文档顺序排列元素，默认不受top、bottom、left、right等属性的影响。

• 相对定位（position: relative）：元素通过top、bottom、left、right的属性进行偏移，根据原来的位置进行相对偏移而影响其他元素的布局位置。例如：

    .box{
        position: relative;
        top: 20px;
        left: 10px;
    }

• 绝对定位（position: absolute）：元素不再占用文档流，通过top、bottom、left、right的属性以及其父元素的相对位置进行偏移。例如：

    .box{
        position: absolute;
        top: 20px;
        left: 10px;
    }

弹性盒子模型（flexbox）的概念

弹性盒子模型（flexbox）是一种CSS布局模式，可以让容器内的元素自动排列。它为内容提供了显式和隐式的灵活性，使得容器和它的子项能够更好地适应各种各样的屏幕大小和设备类型。

在使用flexbox布局时，需要将容器的display属性设置为flex或inline-flex。然后可以通过以下属性来控制子项的排列：

• flex-direction：设置主轴的方向
• justify-content：控制子项在主轴上的位置分布
• align-items：控制子项在交叉轴上的位置分布
• flex-wrap：是否允许子项换行
• align-content：多行项目时，控制各行在交叉轴上的位置分布

例如，下面是一些常用的flexbox属性例子：

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

网格布局（grid）的概念

网格布局（grid）是一种CSS布局模式，用于创建类似表格的二维网格布局。它允许开发者以行和列的方式创建一个网格，使得元素可以被放置到这个网格中的特定单元格内。

在使用Grid布局时，需要在父元素上设置display: grid。然后在父元素中可以通过以下属性来定义网格的大小和排列方式：

• grid-template-columns、grid-template-rows：定义网格列数和行数
• grid-template-areas：定义每个区域的名称
• grid-column-start、grid-column-end、grid-row-start、grid-row-end：将元素放置到具体的行和列中，并占用几个单元格

例如，下面是一个网格布局的例子：

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
}

.item {
  grid-column-start: 2;
  grid-row-start: 1;
  grid-row-end: 3;
}

总之，在HTML中，定位、弹性盒子和网格布局是CSS中非常重要的布局方式，可以使得页面元素更加灵活地排列和组织。了解这些技术以及它们的使用方法可以为开发者提供更多选项，并增加Web应用程序的各种效果。

样式化文本

字体样式和字体大小

在HTML中，可以通过CSS设置文本的字体和大小。例如，以下是一些示例：

/* 设置字体 */
body{
    font-family: Arial, sans-serif;
}
/* 设置字体大小 */
h1{
    font-size: 36px;
}

文本颜色和背景颜色

可以通过CSS来改变文本的颜色和背景颜色。例如：

/* 设置文本颜色 */
p{
    color: #333;
}
/* 设置背景颜色 */
div{
    background-color: #f5f5f5;
}

文本对齐方式和行高

还可以控制文本的对齐方式和行高。例如：

/* 设置文本对齐方式 */
h1{
    text-align: center;
}
/* 设置行高 */
p{
    line-height: 1.5;
}

文本装饰，如下划线、删除线和强调

可以使用CSS来添加文本效果，例如下划线、删除线和强调等。例如：

/* 添加下划线 */
a{
    text-decoration: underline;
}
/* 添加删除线 */
del{
    text-decoration: line-through;
}
/* 设置字体加粗 */
b{
    font-weight: bold;
}

阴影和轮廓效果

可以使用CSS来为文本添加阴影和轮廓效果。例如：

/* 添加文本阴影 */
h1{
    text-shadow: 2px 2px 4px #888;
}
/* 添加文本轮廓 */
h2{
    text-outline: 1px solid #333;
}

在使用这些属性时，需要合适地设置其值以达到最佳效果。

图像和背景

背景颜色和背景图像

在HTML中，可以通过CSS设置元素的背景颜色和背景图像。例如：

/* 设置背景颜色 */
body{
    background-color: #f5f5f5;
}
/* 设置背景图像 */
div{
    background-image: url("bg.jpg");
}

背景尺寸和背景重复

还可以控制背景图像的尺寸和重复方式。例如：

/* 设置背景图像的尺寸 */
div{
    background-size: cover;
}
/* 设置背景图像不重复 */
body{
    background-repeat: no-repeat;
}

边框和圆角

在HTML中，可以通过CSS来添加边框和圆角效果。例如：

/* 添加边框 */
div{
    border: 1px solid #ddd;
}
/* 添加圆角 */
img{
    border-radius: 50%;
}

图像透明度和过渡效果

还可以使用CSS来控制图像的透明度和过渡效果。例如：

/* 设置图像透明度 */
img{
    opacity: 0.8;
}
/* 设置过渡效果 */
div{
    transition: width 2s, height 2s;
    /* 在:hover时改变宽高 */
    &:hover {
        width: 200px;
        height: 200px;
    }
}

这些CSS属性可以帮助开发人员为网站添加更多的视觉效果和交互性。要注意的是，在使用这些属性时，需要谨慎选择其值以达到最佳效果，并确保其不会影响网页的性能和可用性。

动画和交互

css动画和关键帧

CSS动画和关键帧是使元素动起来的重要方式。使用CSS关键帧（@keyframes）规则定义动画，然后将其应用到特定元素上。

以下是一个简单的CSS动画示例：

/* 定义动画 */
@keyframes slide {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(300px);
    }
}

/* 应用到元素上 */
div {
    animation: slide 2s ease forwards;
}

在这个例子中，我们首先定义了一个名为slide的动画，并为其定义了两个关键帧，从0%到100%它将元素从左侧移动到右侧。然后，在元素上应用了slide动画，并设置其时间、缓动以及完成后是否保持最后状态。

css过渡效果

CSS过渡是另一种常见的动画方式，可以平滑地将元素的某些属性值从一个状态转换到另一个状态。例如：

/* 设置初始状态 */
div {
    width: 100px;
    height: 100px;
    background-color: red;
    transition: all 0.5s ease;
}

/* 设置悬停状态 */
div:hover {
    width: 200px;
    height: 200px;
    background-color: green;
}

在这个例子中，当用户将鼠标悬停在div元素上时，该元素将从初始状态平滑地过渡到悬停状态。

悬停效果和活动状态效果

除了使用过渡和动画外，还可以为元素添加其他视觉效果，例如悬停效果和活动状态效果。例如：

/* 设置悬停效果 */
a:hover {
    text-decoration: underline;
}

/* 设置活动状态效果 */
a:active {
    background-color: #ddd;
}

在这个例子中，当用户将鼠标指针移到链接上时，该链接的下划线将被显示出来；当用户激活（点击）该链接时，一个灰色背景将被应用。

响应式设计和媒体查询

响应式设计是一种使网站适应不同设备屏幕尺寸的方法。通过使用CSS媒体查询，可以检测并适应不同的屏幕尺寸。

以下是一个简单的响应式设计示例：

/* 当屏幕宽度小于600px时 */
@media (max-width: 600px) {
    body {
        font-size: 14px;
    }
}

/* 当屏幕宽度大于600px时 */
@media (min-width: 601px) {
    body {
        font-size: 16px;
    }
}

在这个例子中，我们为body元素设置了两组不同的字体大小，分别对应于屏幕宽度小于600px和大于600px的情况。当屏幕尺寸符合其中之一时，相应的样式将被应用。

总之，在HTML中，CSS动画和过渡可以帮助开发人员为网站添加视觉效果，并增强交互性；悬停效果和活动状态效果可以改进网页的可用性；响应式设计可以使网页适应不同设备屏幕尺寸。了解这些技术以及如何正确使用它们可以提高Web应用程序的质量和用户体验。

总结

以上就是今天要讲的内容，本文简单介绍了CSS基础知识点。

如果觉得有用欢迎 点赞 关注
有问题私信我！！~~