【 Python 全栈开发 - WEB开发篇 - 25 】css基础

最新推荐文章于 2024-05-28 13:09:25 发布

书某人.py

最新推荐文章于 2024-05-28 13:09:25 发布

阅读量873

点赞数

分类专栏： Python 全栈开发文章标签： css 前端 html

本文链接：https://blog.csdn.net/SHUTIAN2010/article/details/131092019

版权

Python 全栈开发专栏收录该内容

45 篇文章 15 订阅

订阅专栏

文章目录

一、css
二、CSS 基础语法
三、CSS 盒模型
四、CSS 布局
五、CSS 样式处理
六、CSS3 新特性
七、响应式设计
八、CSS 框架
九、CSS 预处理器
- 最受欢迎的 CSS 预处理器：Sass
- Sass 的功能和特性

一、css

CSS 是层叠样式表（Cascading Style Sheets）的缩写，它是一种用于描述网页（HTML 或 XML 等）外观和样式的标准化语言。CSS 可以通过控制文本、字体、链接、背景、边框、布局等各方面的样式，来实现对网页内容的精细控制和美化。CSS 的主要作用是将网页内容和网页样式分离开来，使得网页设计更加达到结构与样式分离的目标，这样不仅可以使网页结构更加清晰，而且可以大大提高网页加载速度和用户体验。

学习 CSS 可以按照以下步骤：

学习基础知识：了解 CSS 的基础语法、选择器和属性；
实践操作：通过实例进行编写和调试，以加深对 CSS 知识的理解；
学习布局：了解盒模型、浮动、定位等常用布局方式；
学习响应式设计：学习如何使用媒体查询实现响应式设计；
学习预处理器：了解 Sass 或 Less 等预处理器的使用，加快 CSS 编写效率；
学习框架：了解 Bootstrap 或 Foundation 等 CSS 框架的使用。

最后，不断练习和探索，参与 CSS 相关的社区和讨论，加深理解和掌握常用技巧和最佳实践。

学习 CSS 的内容应包括以下方面：

CSS 基础语法：包括 CSS 的基本结构、选择器、属性和值等。
CSS 盒模型：了解盒模型的概念、分类、尺寸、边框、内边距、外边距等。
CSS 布局：包括浮动、定位、弹性布局、网格布局等。
CSS 样式处理：包括 CSS 样式的引入、继承、层叠、优先级等。
CSS3 新特性：包括渐变、阴影、边框、文本特效、2D/3D 转换、动画等。
响应式设计：学习如何利用媒体查询实现响应式布局，以及常用的响应式设计模式。
CSS 框架：了解常用的 CSS 框架，如 Bootstrap、Foundation 等，以及如何使用它们加速开发。
CSS 预处理器：了解 Sass、Less 等 CSS 预处理器的使用，以及如何提高 CSS 编写效率。
CSS 案例分析：通过实际项目的案例分析，加深对 CSS 的理解和实践能力。

综上所述，学习 CSS 的内容应该包括基础语法、盒模型、布局、样式处理、新特性、响应式设计、框架、预处理器以及案例分析等多个方面，以全面掌握 CSS 的知识和应用。

二、CSS 基础语法

CSS 的基础语法包括以下三个部分：

选择器：用于选中 HTML 标记，从而对其应用样式。选择器可以是标签选择器、类选择器、ID 选择器、伪类选择器、伪元素选择器等，它们的语法如下：

标签选择器：标签名，如 p、h1、div 等。
类选择器：以点 . 开头，后跟类名，如 .main、.nav 等。
ID 选择器：以 # 开头，后跟 ID 名，如 #header、#content 等。
伪类选择器：以冒号 : 开头，表示选择器所匹配元素的状态，如 :hover、:active 等。
伪元素选择器：以双冒号 :: 开头，用于向某些元素添加特殊效果，如 ::before、::after 等。

选择器的写法可以组合使用，如 div.header 表示选择所有类名为 header 的 div 标签。

属性：CSS 属性用于设置 HTML 元素的样式，常见的属性有颜色、字体、背景、边框、位置、大小等，它们的语法如下：

selector {
  property1: value1;
  property2: value2;
  ...
}

其中，selector 表示选择器，property 表示属性名，value 表示属性值。多个属性之间用分号隔开。

例如，设置 p 标签的文本颜色为红色和字体大小为 16 像素的样式可以写成：

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

值：CSS 属性的值可以是数字、颜色、大小、位置等，还可以是函数、关键字等。例如，颜色可以使用 RGB、RGBA、HSL、HEX 等表示法，如红色可以写成：

color: red; /* 关键字表示法 */
color: #ff0000; /* HEX 表示法 */
color: rgb(255, 0, 0); /* RGB 表示法 */
color: rgba(255, 0, 0, 0.5); /* RGBA 表示法 */
color: hsl(0, 100%, 50%); /* HSL 表示法 */

除了常规属性值，一些特殊属性值也需要注意，如长度单位（px、em、rem）、百分比、calc() 函数等。

综上所述，CSS 的基础语法包括选择器、属性和值三个部分，掌握这些基本语法是学习 CSS 的第一步。

三、CSS 盒模型

CSS 盒模型是一个基本的概念，它描述了一个HTML元素是如何被排列和显示的。

一个HTML元素可以被分为四个主要部分，它们从外到内依次为：外边距（margin），边框（border），内边距（padding）和内容（content）。

CSS 盒模型的大小计算方式可以使用以下公式表示：

{width = content width + padding + border}
{height = content height + padding + border}
{total width = width + margin}
{total height = height + margin}

由此可以看出，CSS 盒模型的大小是由内容、内边距、边框和外边距四个部分共同决定的。

具体来说，CSS 盒模型有以下几个特点：

内容（content）：这是元素的实际内容，例如文本、图像和视频等。
内边距（padding）：这是内容与边框之间的空间，用于控制元素内部的空白区域。
边框（border）：这是围绕元素内边距之外的线条，用于控制元素的边框样式、颜色、宽度等。
外边距（margin）：这是元素与其他元素之间的空间，用于控制元素之间的距离。

了解CSS 盒模型的概念和特点，可以更好地控制和定位HTML元素，使其在页面布局中更加灵活和精确。

四、CSS 布局

CSS 布局是指在网页中对页面元素的位置和大小进行控制和调整，使页面达到美观、合理的效果。在实现 CSS 布局时，有多种方法可以使用，下面详细介绍其中几种。

基于浮动的布局

在这种布局中，通过设置元素的浮动属性，让元素相对于其容器进行定位。使用浮动布局时，需要注意清除浮动，以避免元素重叠或布局出错。

基于定位的布局

在这种布局中，通过设置元素的绝对或相对定位，以实现元素的定位和位置调整。可以通过设置 top、bottom、left、right 属性来控制元素的位置。

基于网格的布局

CSS 网格布局是一种用于网页设计和布局的新的标准。通过在网格中设置网格行和列，可以轻松地将页面元素排列和定位。

基于弹性布局

CSS 弹性布局是在容器内创建弹性网格，通过设置弹性网格中元素的属性，以实现元素的自适应和位置调整。

基于 响应式 布局

响应式布局指的是使用 CSS 手段，根据不同的设备屏幕大小和分辨率，自动生成适合于屏幕的布局和样式。可以通过设置 CSS 媒体查询，以实现页面布局的响应式设计。

以上是几种常见的 CSS 布局方法，实现 CSS 布局时需要注重以下几点：

准确理解盒模型的概念，可以更好地控制和调整页面元素的大小和位置。
熟悉 CSS 布局属性，例如 position、margin、padding、float、display、flex 等。
选择合适的布局方法，根据网页设计的需要和要求进行选择。
在实现 CSS 布局时，需要注意浏览器的兼容性问题，避免使用一些过时或不被支持的属性和方法。
为了实现响应式布局，需要设置 CSS 媒体查询，以实现页面对不同设备的自适应控制。

五、CSS 样式处理

CSS 样式处理是指使用 CSS 对 HTML 文档中的元素进行样式设置和处理的过程。CSS 样式处理的主要目的是让网页更好看、更易读、更易用。以下是 CSS 样式处理的具体内容：

样式系统：CSS 样式处理的核心是样式系统。CSS 样式系统包括样式规则和选择器两个部分。样式规则用来指定要应用的样式属性，选择器用来为文档中的元素定义样式规则。
样式属性：CSS 样式属性用来指定HTML元素的外观和格式。样式属性可以设置元素的字体、颜色、背景、布局、边框、尺寸等方面，从而改变元素在页面上的表现。
样式表：CSS 样式表是一种将样式应用到 HTML 文档的方式。CSS 样式表可以放置在 HTML 文档中的<head>标签内，也可以以外部样式表的形式嵌入在 HTML 文档中。外部样式表可以让多个 HTML 文档共享同样的样式表，从而方便集中管理和修改样式。
盒模型：CSS 中的盒模型是一个抽象的概念，用来描述 HTML 元素在页面上的占据空间。盒模型包括内容区、内边距、边框和外边距四部分。开发者可以使用 CSS 样式设置这些部分的属性，从而影响元素在页面上的位置和大小。
布局：CSS 布局用来指定 HTML 元素的位置和大小。布局可以使用相对定位、绝对定位、浮动、清除浮动等方式实现。通过使用不同的布局技术和属性，可以实现不同类型的页面布局。

总之，CSS 样式处理可以让网页变得更加美观和易用，在 Web 开发中起着非常重要的作用。

六、CSS3 新特性

CSS3 是Cascading Style Sheets（层叠样式表）的最新版本，它的一些新特性包括：

圆角（border-radius）和阴影（box-shadow）属性可以轻松地实现圆形和阴影效果。
渐变（linear-gradient、radial-gradient）可以让元素背景颜色实现平滑过渡。
文字阴影（text-shadow）可以为文本添加阴影效果。
变形（transform）可以让元素进行旋转、缩放、倾斜等变形操作。
过渡（transition）和动画（animation）可以实现元素的平滑过渡和动态效果。
媒体查询（media queries）可以根据设备屏幕尺寸和方向来设置不同的样式。
多列布局（multi-columns）可以实现多列文本布局，类似于报纸的排版方式。
Flexbox布局（flexbox）可以很方便地实现灵活的盒模型布局。

这些新特性使得 CSS3 在网页设计中的应用更加灵活、直观、高效。

七、响应式设计

响应式设计是一种网站设计方法，使得网站可以根据用户的设备和浏览器窗口大小自动适应不同的屏幕尺寸。这意味着无论用户使用电脑、平板电脑或手机，网站都可以自动调整布局、字体大小和图像等元素，以提供最佳的用户体验。

实现响应式设计需要遵循以下三个步骤：

使用弹性网格系统和弹性图片：弹性网格系统是响应式设计的基础。它可以将网站的布局分成若干列和行，并使用百分比单位来定义宽度和高度。弹性图片也是响应式设计的关键，可以根据屏幕尺寸自动调整大小，以确保图像不会拉伸或扭曲。
使用 CSS3 媒体查询：CSS3 媒体查询可以检测设备屏幕的宽度和高度，并根据不同的设备应用不同的样式。例如，在小屏幕设备上，可以使用单列布局和更小的字体大小来提供更好的阅读体验。
创建适合的内容并确保可访问性：响应式设计不仅要关注网站在不同设备上的外观和布局，还要确保内容易于访问和阅读。例如，在小屏幕设备上，可以隐藏不必要的内容或使用折叠导航菜单来提高页面的可用性。

总之，响应式设计可以为用户提供更好的用户体验，从而提高网站的可用性和可访问性。

八、CSS 框架

CSS 框架是指一组预定义的 CSS 样式，用于简化网站和应用程序的开发过程。通过使用 CSS 框架，开发人员可以快速构建漂亮的网站，而不必从头开始编写 CSS 代码。下面介绍如何编写 CSS 框架。

第一步：确定框架的设计风格

在编写 CSS 框架之前，需要确定框架的设计风格。例如，是否采用扁平化设计风格、是否使用圆角、是否使用阴影等。确定设计风格后，可以开始编写框架的 CSS 代码。

第二步：编写基本的布局和样式

编写 CSS 框架的第一步是创建基本的布局和样式，例如包含头部、内容和底部的三列布局。使用 CSS 盒模型和浮动属性创建布局，然后添加基本的样式，例如文本颜色和字体大小。此时可以建立命名规范，以确保样式对象的命名一致性。

第三步：编写组件样式

组件是应用程序中的可重复使用的元素，例如按钮、表单和导航栏。编写组件样式是框架开发的关键部分。在编写组件样式时，需要考虑常见的组件类型，并确定每个组件的基本结构和样式。在这个过程中，可以使用 CSS 选择器来定位组件的不同部分。

第四步：响应式设计

响应式设计是现代 Web 开发的必要部分。现代 CSS 框架应该包含响应式设计，以便网站能够在不同的屏幕大小和设备上呈现良好的外观和功能。在这个过程中，需要使用 CSS 媒体查询来检测设备类型和屏幕大小，并应用不同的布局和样式。

第五步：测试和优化

在编写完 CSS 框架之后，需要进行测试和优化，以确保框架的性能和可靠性。测试应该包括在不同设备和浏览器上测试框架，以确保其表现如预期。通过使用Web性能测试工具来评估框架的性能，可以确定哪些地方需要优化。

总之，编写 CSS 框架需要一定的技术和经验。一个好的 CSS 框架应该具有良好的设计、清晰的组件结构、响应式设计和高性能。通过使用现代 Web 技术，如 CSS3 和 HTML5，可以创建出漂亮、强大和易于使用的 CSS 框架。

九、CSS 预处理器

CSS 预处理器是一种工具，用于编写 CSS 样式表的程序。它允许您使用类似编程语言的语法和工具，以更加模块化、可维护和轻松地编写 CSS 代码。在这篇文章中，我们将探讨 CSS 预处理器的定义和用途，以及最受欢迎的预处理器之一——Sass。

CSS 预处理器是一个工具，它可以让开发人员编写更加简洁、清晰和易于维护的 CSS 样式表。这种工具允许开发人员使用类似编程语言的语法，比如变量、条件语句和循环等。在这种语法的帮助下，开发人员可以轻松地编写出可重用的 CSS 代码模块，这些模块可以用于整个网站或应用程序。

这种工具的用途非常广泛，在大型项目中尤其有用。在这种项目中，开发人员可以使用这种工具来提高 CSS 代码的可维护性和重用性，同时减少代码的冗余和错误。

最受欢迎的 CSS 预处理器：Sass

Sass 是一种最受欢迎的 CSS 预处理器。它是一个基于 Ruby 的开源项目，由Hampton Catlin 创建。Sass 有两种语法：Sass 语法和 SCSS 语法。

Sass 语法是一种基于缩进的语法，它没有括号和分号。它看起来更像是一种自然语言，很容易阅读和编写。

SCSS 语法是一种更加传统的 CSS 语法，它支持括号和分号。它与 CSS 非常相似，更适合那些已经习惯了编写 CSS 的人。

Sass 的功能和特性

Sass 提供了许多功能和特性，可以帮助开发人员编写更加简洁、清晰和易于维护的 CSS 代码。有些最常用的功能和特性包括：

变量：Sass 允许开发人员定义变量，这些变量可以在整个样式表中使用。这使得更改样式表中颜色、字体和其他值变得更加容易。
嵌套：Sass 允许开发人员嵌套 CSS 选择器，以便更加清晰和易于阅读的代码。这种嵌套结构还使得 CSS 样式更加模块化，可以更容易地定位和更改。
继承：Sass 允许开发人员使用 CSS 选择器继承，以便在样式表中重复使用已有的 CSS 代码块。这使得代码更加容易维护，并减少了重复代码的使用。
混合器：Sass 提供了一种功能强大的混合器功能，允许开发人员在样式表中定义一组 CSS 属性和值。然后，它们可以在整个样式表中使用，以便对多个元素应用相同的样式。

CSS 预处理器是一种非常有用的工具，可以帮助开发人员编写更加清晰、简洁和易于维护的 CSS 代码。它们提供了很多功能和特性，可以减少代码的冗余和错误，并提高 CSS 代码的可维护性和重用性。

Sass 是一个非常受欢迎的 CSS 预处理器，它提供了许多有用的功能和特性，使得 CSS 代码的编写更加容易和高效。