一、CSS介绍：

        CSS（Cascading Style Sheets）是一种用于描述网页外观的样式表语言。它可以控制网页的布局、颜色、字体、大小、间距等各种样式，使网页更加美观和易于阅读。

二、CSS 的基本语法

1.选择器（Selector）：

  • 元素选择器：通过元素名称选择，例如： p 选择所有的 <p> 段落元素。
  • 类选择器：以 . 开头，后跟类名，例如 ：my-class 选择具有 class="my-class" 的元素。
  • ID 选择器：以 # 开头，后跟 ID 名称，例如 ：#my-id 选择具有 id="my-id" 的唯一元素。

2.属性（Property）：

  • 常见的属性包括 color（文本颜色）、font-size（字体大小）、background-color（背景颜色）等。

3.值（Value）：

  • 为属性指定具体的值，例如 ：color: red; 表示将文本颜色设置为红色。

    列举一些常用的选择器：

66f05b5c0c8a406a97330a557568640e.jpeg

示例：

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

.my-class {
  background-color: yellow;
}

#my-id {
  font-weight: bold;
}

三、CSS 的引入方式

1.内联样式（Inline Styles）:

        直接在 HTML 元素中使用 style 属性添加样式，例如：

<p style="color: green;">这是一个段落</p>

2.内部样式表（Internal Style Sheets）：

在 HTML 文件的 <style> 标签中定义样式，例如：

<head>
  <style>
    p {
      font-family: Arial;
    }
  </style>
</head>

3.外部样式表（External Style Sheets）：

        将 CSS 代码保存为独立的 .css 文件，然后在 HTML 文件中通过 <link> 标签引入

例如：

<head>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>

四、盒模型（Box Model）：

1.什么是盒模型？

        盒子模型是 CSS 中一个重要的概念，页面上的每个元素都可被看作是一个矩形的盒子。这个盒子由内容区域（content）、内边距区域（padding）、边框区域（border）和外边距区域（margin）构成。

2.元素盒子大小的计算：

        1.一个元素的实际宽度 = 左边界＋左边框＋左填充＋内容宽度＋右填充＋右边框＋右边界。

        2.如果盒子里面嵌套有盒子，且两个盒子都有边框，那么两个盒子边框之间的距离等于外面盒子的填充（padding）值＋里面盒子的边界（margin）值。

3.内容区（Content）:

        实际显示的文本、图像等内容。

4.内边距（Padding）:

        内边距用于控制内容与边框之间的距离。属性名是 padding，可以当作复合属性来使用，给单独的方向设置内边距，最多取 4 个值（上右下左，顺时针顺序）。

  取值个数与效果的对应关系如下：

  • 1 个值：给上下左右同时设置相同的内边距。
  • 4 个值：分别对应盒子的上右下左内边距。
  • 3 个值：第一个值表示上内边距，中间的数值表示左右内边距，最后一个值表示下内边距。
  • 2 个值：第一个值表示上下内边距，第二个值表示左右内边距。

3.边框（Border）:

  • 边框可以设置宽度、颜色和样式，分别对应属性 border-width（宽度）、border-color（颜色）和 border-style（样式）。
  • 其中 border-style 属性可将边框设置为：实线（solid）、虚线（dashed）、点划线（dotted）、双线（double）等效果。
  • 连写形式：border: 10px solid red; （10px 为边框粗细，solid 为边框样式，red 为边框颜色）。
  • 单方向设置：如 border-top: 1px solid skyblue; 表示只设置顶部边框。

4.外边距（Margin）：

        外边距和内边距的写法类似，也可以给四个方向设置外边距，或单独给某个方向设置外边距。

需要注意外边距的两种现象：

  1. 合并现象：垂直布局的块级元素，上下的 margin 会合并，最终两者距离为 margin 的最大值。解决方法是避免这种情况，只给其中一个盒子设置 margin。
  2. 塌陷现象：互相嵌套的块级元素，子元素的 margin-top 会作用在父元素上面。

示例：

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>盒子模型</title>
  <style>
    /* 清除标签默认的内外边距 */
    * {
      margin: 0;
      padding: 0;
    }

    div {
      width: 600px;
      height: 600px;
      background-color: pink;
      box-sizing: border-box; 
      /* 自动内减 */
      border: 1px solid skyblue; 
      padding: 20px; 
      /* 上下左右的内边距均为 20px */
      margin: 0 auto; 
      /* 版心居中代码 */
      margin-top: 20px; 
    }

    ul {
      list-style: none; 
    }
  </style>
</head>

<body>
  <div>div div div
    <ul>
      啦啦啦
      <li>哈哈哈</li>
      <li>嘿嘿嘿</li>
      <li>嘻嘻嘻</li>
    </ul>
  </div>
</body>

</html>

在上述代码中:

  1. 使用 * 清除了所有标签的默认内外边距。
  2. div 元素设置了宽度、高度、背景色、边框、内边距和外边距。
  3. 通过 box-sizing: border-box; 实现了自动内减，避免盒子被边框和内边距撑大。
  4. margin: 0 auto; 使 div 在水平方向上居中，
  5. margin-top: 20px; 则设置了顶部外边距。
  6. ul 元素通过 list-style: none; 去掉了列表前的符号。

五、布局

1.浮动（Float）:

  • 浮动是使元素沿着其容器边缘移动的布局方式。
  • 使用float属性实现，如float:left;向左浮动，float:right;向右浮动

 示例：

.left {
  float: left;
  width: 50%;
}

.right {
  float: right;
  width: 50%;
}

2.浮动的重要性：

        可用于将文本环绕在图片周围，或创建多列布局等。

3.浮动带来的问题：

        父元素塌陷：子元素浮动导致父元素高度无法自适应子元素内容。

        元素重叠：多个浮动元素可能会相互重叠。

4.清除浮动的方法：

                方法 1：使用clear属性，如clear:left;清除左浮动，clear:right;清除右浮动，                  clear:both;清除左右浮动。

                方法 2：添加空的 div 并设置clear属性。

                方法 3：使用父元素的overflow属性等。

5.定位（Position）：

        更高级的布局方式，可精确控制元素位置。通过position属性设置定位类型，常用属性值有：

  • static（默认值）：元素按照正常文档流排列。
  • relative：相对自身原来的位置进行偏移。
  • absolute：相对于最近的已定位祖先元素进行定位。
  • fixed：相对于浏览器窗口进行定位。

示例：

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

.absolute {
  position: absolute;
  top: 50px;
  right: 50px;
}

.fixed {
  position: fixed;
  bottom: 10px;
  right: 10px;
}

6.静态定位（static）

  • 默认方式，元素按照正常文档流布局。

7.相对定位（relative）

  • 相对于其原文档流的位置进行定位。
  • 只添加relative值对元素本身无影响，需通过定位属性改变位置，但其在文档流中的位置仍保留。

8.绝对定位（absolute）

  • 相对于其上一个已定位（相对、绝对或固定定位）的父元素进行定位，若所有父元素都没有定位，则依据浏览器窗口左上角进行定位。
  • 特点 1：块元素添加绝对定位后，默认宽与内容的宽相同。
  • 特点 2：嵌套结构中，当父元素或祖先元素中有相对或绝对定位时，子元素相对于父元素或祖先元素定位；否则子元素相对于浏览器窗口进行偏移。

9.固定定位（fixed）

  • 元素被固定，不会随着滚动条的拖动而改变位置，总是相对浏览器窗口左上角进行偏移。
  • 常用于实现网页中的“回到顶部”按钮等。

10.定位的层级

  • 多个元素添加定位时可能出现叠加，默认情况下输出的 HTML 结构层级越高。
  • 使用z-index属性调节层级，数值越大，层级越高。

11.浮动与定位的结合应用

  • 可同时使用浮动和定位，如让元素浮动在一侧，同时相对于父元素进行精确定位

六、响应式设计：

        响应式设计是一种网页设计方法，是我们在使网页能够根据访问设备的屏幕尺寸和特性自动调整布局、字体大小、图片尺寸等元素，以提供最佳的视觉效果和可用性。

1.媒体查询（Media Queries）：

  1.1基本语法：

@media 媒体类型 and (条件) {
  /* 样式规则 */
}

1.2常见的媒体类型包括：

  • screen：用于电脑屏幕、平板电脑、智能手机等。
  • print：用于打印页面。

 条件示例：

  • width：屏幕宽度。
  • height：屏幕高度。
  • orientation：设备的方向（portrait 竖屏，landscape 横屏）。

例如：

@media screen and (max-width: 600px) {
  /* 当屏幕宽度小于等于 600 像素时应用的样式 */
  body {
    font-size: 14px;
  }
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
  /* 当屏幕宽度在 768 像素到 1024 像素之间时应用的样式 */
 .container {
    width: 70%;
  }
}

@media (orientation: landscape) {
  /* 当设备处于横屏时应用的样式 */
 .sidebar {
    display: none;
  }
}

2.弹性布局（Flexbox）

   基本概念：Flexbox 是一种用于创建灵活的布局结构的 CSS 模块。

   容器属性：

  1. display: flex;：将父元素设置为 Flex 容器。
  2. flex-direction：决定主轴的方向：（row 水平，column 垂直）。
  3. justify-content：主轴上的对齐方式：（flex-start 开始，center 居中，flex-end 结束，space-between 两端对齐，space-around 均匀分布）。
  4. align-items：交叉轴上的对齐方式（flex-start 开始，center 居中，flex-end 结束，stretch 拉伸）。

项目属性：

  • flex-grow：定义项目的放大比例。
  • flex-shrink：定义项目的缩小比例。
  • flex-basis：定义项目在主轴上的初始大小。

示例：

.container {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}

.item {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 200px;
}

3.网格布局（Grid）

    基本概念：Grid 布局是一种二维的布局方式，可以更方便地创建复杂的网格结构。

    容器属性：

  • display: grid;：将父元素设置为网格容器。
  • grid-template-columns：定义列的轨道大小和数量。
  • grid-template-rows：定义行的轨道大小和数量。
  • grid-gap：定义网格间隙。

   项目属性：

  • grid-column：指定项目跨越的列。
  • grid-row：指定项目跨越的行。

示例：

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 100px 200px;
  grid-gap: 10px;
}

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

4.图片响应式

        使用 max-width: 100%; 使图片能够根据容器自动缩放，避免图片溢出。

img {
  max-width: 100%;
  height: auto;
}

5.字体响应式：

        通过媒体查询调整字体大小，以适应不同的屏幕尺寸。

@media screen and (max-width: 600px) {
  body {
    font-size: 14px;
  }
}

6.响应式设计的优缺点：

         优点：1. 提供一致的用户体验，无论用户使用何种设备访问网站，都能获得相似且流畅的体验，减少了因设备差异导致的操作不便和理解困难。

例如：

        一个电商网站在手机、平板和电脑上都能清晰展示商品信息，用户可以方便地浏览和购买。

                   2. 节省开发和维护成本，相较于为不同设备单独开发多个版本的网站，响应式设计只需维护一个代码库，大大降低了开发和后续更新的成本。

例如：

        当网站需要更新功能或修复漏洞时，只需在一处进行修改，所有设备上的显示都会得到更新。

                   3. 有利于搜索引擎优化（SEO）：搜索引擎更倾向于索引具有单一 URL 的网站，响应式设计的网站只有一个 URL，有助于提高网站在搜索引擎中的排名。因为搜索引擎可以更有效地抓取和索引内容，而不会因为多个版本的网站而产生混淆。

                   4. 增强网站的可访问性，能够适应不同设备和屏幕分辨率，包括为视障用户提供更好的辅助功能支持，提高了网站的可访问性。

例如：

        对于使用屏幕阅读器的用户，响应式设计可以确保页面结构和内容的可读性。

七、CSS 动画

        通过 @keyframes 规则定义动画关键帧，然后应用到元素上。

示例：

@keyframes my-animation {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.element {
  animation: my-animation 2s ease-in-out;
}

八、总结：

        CSS 是网页设计中不可或缺的一部分，掌握其基本语法、引入方式、盒模型、布局、响应式设计和动画等知识，可以创建出美观、实用且具有良好用户体验的网页。

# css # 前端
Logo
MCP技术社区

欢迎加入 MCP 技术社区！与志同道合者携手前行，一同解锁 MCP 技术的无限可能！

更多推荐

cover

谷云科技iPaaS发布 MCP Server加速业务系统API 跨入 MCP 时代

avatar MCP技术社区
cover

打工人必看！Qwen3+MCPs 一键生成爆款笔记，摸鱼式运营轻松涨粉

avatar MCP技术社区
cover

MCP（Model Context Protocol）是专为LLM（大语言模型）应用设计的标准化协议

avatar MCP技术社区