前端开发：（三）CSS入门

1. 介绍CSS

1.1 什么是CSS

CSS（Cascading Style Sheets）是一种用于描述文档样式和布局的样式表语言，用于美化和排版HTML和XML等标记语言的内容。

1.2 CSS的作用和优势

CSS的主要作用是控制网页的样式和布局，包括字体、颜色、间距、边框、背景等方面，从而增强用户体验并提高页面的可读性和美观度。其优势包括：

  • 分离内容与表现：将样式和结构分开，使得网页结构更清晰，易于维护和管理。
  • 提高网页性能：可以通过CSS控制页面加载速度和渲染效率，提升用户体验。
  • 增强可访问性：使用CSS可以轻松实现对网页内容的可访问性和无障碍体验。
  • 跨平台兼容性：CSS可以适用于各种不同的设备和平台，并且能够适应不同尺寸和分辨率的屏幕。

1.3 CSS的发展历史

CSS最初由Håkon Wium Lie和Bert Bos在1996年提出，并在1997年成为W3C的推荐标准。随着Web技术的发展，CSS经历了多个版本的更新，从CSS1到CSS2再到CSS3，逐步增加了新的特性和功能，如盒模型、浮动、定位、动画等，以满足不断增长的Web设计需求。

2. CSS基础

2.1 CSS语法规则

CSS语法规则由选择器和声明块组成，选择器用于选择要应用样式的元素，声明块包含一个或多个属性值对。

selector {property: value;
}

2.2 CSS样式规则的结构

CSS样式规则由选择器和一组样式声明组成，选择器指定了要应用样式的HTML元素，样式声明指定了要修改的样式属性和对应的值。

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

2.3 CSS选择器的分类和使用

CSS选择器根据选择元素的不同方式分为元素选择器、类选择器、ID选择器、属性选择器、伪类和伪元素等。不同的选择器适用于不同的场景，可以精确地选择需要修改样式的元素。

/* 元素选择器 */
p {color: red;
}/* 类选择器 */
.title {font-weight: bold;
}/* ID选择器 */
#header {background-color: #ccc;
}

2.4 CSS注释的语法

CSS注释以/* */的形式包裹注释内容，用于在样式表中添加注释说明，提高代码的可读性和可维护性。

/* 这是一个CSS注释 */
p {color: blue; /* 这是另一个CSS注释 */
}

3. CSS样式的应用

3.1 内联样式

内联样式通过在HTML标签的style属性中直接定义样式，适用于单个元素的特定样式设置。

<p style="color: red; font-size: 16px;">这是一个红色字体的段落。</p>

3.2 嵌入样式表

嵌入样式表将样式规则直接写在HTML文档的<style>标签内部，适用于单个页面的样式设置。

<head><style>p {color: blue;font-size: 18px;}</style>
</head>

3.3 外部样式表的链接

外部样式表将样式规则写在一个单独的CSS文件中，并通过<link>标签引入到HTML文档中，适用于整个网站的样式共享和统一管理。

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

4. CSS文本样式

4.1 字体样式（font）

字体样式属性用于控制文本的字体、大小、粗细和样式。

body {font-family: Arial, sans-serif;font-size: 16px;font-weight: bold;font-style: italic;
}

4.2 文本颜色（color）

文本颜色属性用于设置文本的颜色。

p {color: #333;
}

4.3 文本对齐（text-align）

文本对齐属性用于设置文本在其容器中的水平对齐方式。

h1 {text-align: center;
}

4.4 文本装饰（text-decoration）

文本装饰属性用于添加文本的下划线、删除线等装饰效果。

a {text-decoration: none; /* 移除链接下划线 */
}

5. CSS盒模型

5.1 盒模型的概念

CSS盒模型描述了一个元素在页面上所占空间的模型，它由内容区域、内边距、边框和外边距组成。

5.2 盒模型的组成（content、padding、border、margin）

  • 内容区域（content）：元素的实际内容，由宽度（width）和高度（height）决定。
  • 内边距（padding）：内容区域与边框之间的空间，可以用来增加元素内容与边框之间的距离。
  • 边框（border）：围绕内容和内边距的线条，可以设置边框的样式、宽度和颜色。
  • 外边距（margin）：元素边框与相邻元素边框之间的空间，用于控制元素之间的间距。

5.3 盒模型的尺寸控制

通过设置盒模型的宽度（width）、高度（height）、内边距（padding）、边框（border）和外边距（margin）等属性，可以控制元素在页面上的尺寸和位置。

.box {width: 200px; /* 设置元素宽度 */height: 150px; /* 设置元素高度 */padding: 20px; /* 设置内边距 */border: 1px solid #000; /* 设置边框 */margin: 10px; /* 设置外边距 */
}

6. CSS布局

6.1 常见的布局方式（水平布局、垂直布局）

常见的布局方式包括水平布局和垂直布局，可以通过设置元素的display属性和float属性来实现。

/* 水平布局 */
.horizontal-layout {display: flex;
}/* 垂直布局 */
.vertical-layout {display: flex;flex-direction: column;
}

6.2 流式布局和固定布局

流式布局（Fluid Layout）根据浏览器窗口大小自动调整元素尺寸和位置，而固定布局（Fixed Layout）则保持元素的固定尺寸和位置。

/* 流式布局 */
.fluid-layout {width: 100%;
}/* 固定布局 */
.fixed-layout {width: 960px;margin: 0 auto; /* 居中显示 */
}

6.3 弹性布局（Flexbox）和网格布局（Grid）

弹性布局和网格布局是CSS3新增的布局模式，可以更灵活地控制元素的排列和对齐方式。

/* 弹性布局 */
.flex-container {display: flex;justify-content: space-between;
}/* 网格布局 */
.grid-container {display: grid;grid-template-columns: 50% 50%;
}

7. CSS背景样式

7.1 背景颜色（background-color）

背景颜色属性用于设置元素的背景颜色。

.element {background-color: #f0f0f0;
}

7.2 背景图片（background-image）

背景图片属性用于设置元素的背景图片，可以使用图片的URL或者渐变色。

.element {background-image: url('example.jpg');
}

7.3 背景重复和定位

背景重复属性用于设置背景图片的重复方式，背景定位属性用于设置背景图片的位置。

.element {background-repeat: no-repeat; /* 不重复 */background-position: center; /* 居中显示 */
}

8. CSS边框样式

8.1 边框样式（border-style）

边框样式属性用于设置元素的边框线条的样式，包括实线、虚线、双线等。

.element {border-style: solid; /* 实线 */
}

8.2 边框宽度（border-width）

边框宽度属性用于设置元素的边框线条的宽度。

.element {border-width: 1px; /* 1像素宽度 */
}

8.3 边框颜色（border-color）

边框颜色属性用于设置元素的边框线条的颜色。

.element {border-color: #ccc; /* 灰色 */
}

9. CSS浮动和定位

9.1 浮动（float）的概念和使用

浮动属性用于控制元素在父元素内的浮动方式，常用于实现多列布局和图文混排效果。

.float-left {float: left; /* 左浮动 */
}.float-right {float: right; /* 右浮动 */
}

9.2 定位（position）的概念和属性

定位属性用于控制元素在文档中的定位方式，常用的定位属性包括相对定位、绝对定位和固定定位。

.relative-position {position: relative; /* 相对定位 */
}.absolute-position {position: absolute; /* 绝对定位 */
}.fixed-position {position: fixed; /* 固定定位 */
}

9.3 相对定位、绝对定位和固定定位

  • 相对定位（relative）：相对于元素本身原来的位置进行定位。
  • 绝对定位（absolute）：相对于最近的已定位的父元素进行定位。
  • 固定定位（fixed）：相对于浏览器窗口进行定位，元素固定在页面上不随滚动而移动。
.element {position: relative; /* 相对定位 */top: 10px; /* 相对原位置向下偏移10像素 */
}

10. CSS尺寸和单位

10.1 像素（px）和百分比（%）

  • 像素（px）：绝对单位，相对于显示设备的屏幕分辨率而言，常用于固定尺寸的元素。
  • 百分比（%）：相对单位，相对于父元素的尺寸进行计算，常用于响应式布局和元素相对尺寸设置。
.element {width: 200px; /* 使用像素设置宽度 */height: 50%; /* 使用百分比设置高度 */
}

10.2 em、rem和vw/vh单位

  • em：相对于父元素字体大小的单位，可以实现相对于文本大小的尺寸设置。
  • rem：相对于根元素（html）字体大小的单位，可以实现全局的相对尺寸设置。
  • vw/vh：视口宽度和高度的百分比单位，可以根据视口大小进行尺寸设置，常用于响应式布局。
.element {font-size: 1.2em; /* 相对于父元素字体大小的1.2倍 */margin-bottom: 2rem; /* 相对于根元素字体大小的2倍 */width: 50vw; /* 相对于视口宽度的50% */height: 80vh; /* 相对于视口高度的80% */
}

10.3 CSS计算（calc()）

CSS计算函数calc()可以对长度值进行数学计算，用于实现动态计算尺寸的效果。

.element {width: calc(50% - 20px); /* 宽度为父元素宽度的50%，减去20像素 */
}

11. CSS动画与过渡

11.1 CSS过渡（transition）的基本使用

CSS过渡属性可以在元素属性变化时平滑地过渡到新状态，提升用户体验。

.element {transition: width 0.3s ease-in-out; /* 宽度变化时，过渡时间0.3秒，缓动效果 */
}

11.2 CSS动画（animation）的基本使用

CSS动画属性可以创建复杂的动画效果，可以定义动画的关键帧、持续时间和循环次数等。

@keyframes slide-in {from {transform: translateX(-100%);}to {transform: translateX(0);}
}.element {animation: slide-in 1s ease-in-out; /* 使用slide-in动画，持续1秒，缓动效果 */
}

11.3 关键帧动画（@keyframes）

关键帧动画允许开发人员定义动画的各个阶段，从而实现更灵活的动画效果。

@keyframes bounce {0%, 100% {transform: translateY(0);}50% {transform: translateY(-20px);}
}.element {animation: bounce 1s ease-in-out infinite; /* 使用bounce动画，无限循环 */
}

12. 响应式Web设计

12.1 媒体查询（media queries）的概念和使用

媒体查询允许我们针对不同的媒体类型和设备特性应用不同的样式，以实现响应式布局和设计。

/* 当视口宽度小于600px时应用以下样式 */
@media only screen and (max-width: 600px) {.element {font-size: 14px;}
}

12.2 响应式图片和视频

通过设置图片和视频的最大宽度为100%，可以实现在不同设备上自适应大小的响应式媒体展示。

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

12.3 移动优先设计理念

移动优先设计理念是指在进行网页设计时，首先从移动设备的视角出发，确保网站在小屏幕上具有良好的用户体验，然后逐步增强布局和样式以适应更大屏幕的设备。

/* 移动优先设计 */
.element {font-size: 16px; /* 默认字体大小 */
}@media only screen and (min-width: 768px) {.element {font-size: 18px; /* 在大屏幕上增加字体大小 */}
}

13. CSS预处理器

13.1 LESS、Sass和SCSS的介绍

LESS、Sass和SCSS是三种常用的CSS预处理器，它们提供了类似编程语言的特性，如变量、嵌套、混合和函数等，以提高CSS代码的可维护性和可复用性。

13.2 使用变量、混合（Mixin）和嵌套

预处理器可以定义变量来存储颜色、字体和尺寸等常用值，也可以定义混合和嵌套来减少重复代码和增加代码的可读性。

/* 定义变量 */
$primary-color: #3498db;/* 定义混合 */
@mixin button-style {background-color: $primary-color;color: white;padding: 10px 20px;
}/* 使用混合 */
.button {@include button-style;
}/* 嵌套 */
.container {width: 100%;.header {font-size: 24px;}.content {padding: 20px;}
}

13.3 CSS的模块化和组织

通过使用预处理器和模块化的设计思路，可以将CSS代码分割为多个模块，每个模块负责管理特定部分的样式，从而提高代码的可维护性和可扩展性。

/* _variables.scss */
$primary-color: #3498db;/* _button.scss */
@mixin button-style {background-color: $primary-color;color: white;padding: 10px 20px;
}/* main.scss */
@import 'variables';
@import 'button';.button {@include button-style;
}

以上是CSS的一些进阶主题，通过使用媒体查询、预处理器等技术，可以更好地管理和组织CSS代码，实现更复杂和更灵活的样式效果。

14. CSS优化与性能

14.1 CSS选择器

选择器的复杂度会直接影响到页面的渲染性能。过于复杂的选择器会增加匹配元素的时间，因此应尽量避免使用过于复杂的选择器，尤其是嵌套层级过深的选择器。

/* 不推荐的复杂选择器 */
.container .header .nav ul li a {}/* 推荐简单选择器 */
.nav-link {}

14.2 CSS压缩和合并

在生产环境中，可以对CSS文件进行压缩和合并，以减少文件大小和网络请求次数，提高页面加载速度。

# 使用压缩工具（如uglifycss、clean-css等）压缩CSS文件
uglifycss style.css > style.min.css# 使用构建工具（如Webpack、Gulp等）合并多个CSS文件

14.3 渲染性能优化

通过优化CSS代码，可以提高页面的渲染性能，例如避免使用不必要的样式属性、减少使用昂贵的属性（如box-shadow、border-radius等）、尽量减少重绘和回流等。

/* 不推荐的样式 */
.element {box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);border-radius: 10px;
}/* 推荐优化后的样式 */
.element {/* 尽量避免昂贵的属性 *//* 减少不必要的样式属性 */
}

15. CSS最佳实践

15.1 代码规范

制定良好的CSS代码规范对于团队协作和代码维护非常重要，可以提高代码的可读性和可维护性。例如使用一致的命名规范、缩进和空格规范、注释规范等。

/* 代码注释 */
/* Header Styles *//* 命名规范 */
.nav-menu {}/* 缩进和空格规范 */
.container {padding: 20px;margin: 0;
}

15.2 浏览器兼容性

在开发过程中应注意跨浏览器兼容性，确保样式在不同浏览器和设备上都能正确显示。可以使用浏览器的开发者工具进行调试和测试，同时考虑使用CSS前缀和特性检测等技术来解决兼容性问题。

/* 使用浏览器前缀 */
.element {-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

15.3 性能优化

除了上述提到的性能优化方法外，还可以考虑使用CSS Sprites技术来减少图片请求、使用字体图标代替图片图标、避免使用过多的嵌套和不必要的选择器等。

/* 使用CSS Sprites技术 */
.icon {background-image: url('sprites.png');background-position: -20px -40px;width: 20px;height: 20px;
}

综上所述，通过合理的CSS优化和最佳实践，可以提高页面的性能和用户体验，同时提高代码的可维护性和可读性。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/674646.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Hive与Presto中的列转行区别

Hive与Presto中的列转行区别

Hive与Presto列转行的区别 1、背景描述2、Hive/Spark列转行3、Presto列转行 1、背景描述 在处理数据时&#xff0c;我们经常会遇到一个字段存储多个值&#xff0c;这时需要把一行数据转换为多行数据&#xff0c;形成标准的结构化数据 例如&#xff0c;将下面的两列数据并列转换…
阅读更多...
2024年 复习 HTML5+CSS3+移动web 笔记 之CSS遍 第6天

2024年 复习 HTML5+CSS3+移动web 笔记 之CSS遍 第6天

6.1 定位-相对和绝对和固定 6.2 相对和绝对和固定 6.3 堆叠顺序z-index 6.4 定位总结 6.5 CSS精灵 基本使用 6.6 案例 CSS精灵 京东服务 6.7 字体图标-下载和使用 6.8 字体图标-上传 6.9 垂直对齐方式vertical-align 6.10 过渡属性 6.11 修饰属性-透明度与光标类型 6.12 综合案…
阅读更多...
2.8 数据类型与作用域练习

2.8 数据类型与作用域练习

1、选择题 1.1、以下选项中,不能作为合法常量的是 ___B___ A&#xff09;1.234e04 B&#xff09;1.234e0.4 C&#xff09;1.234e4 D&#xff09;1.234e0 解析&#xff1a;在C语言中&#xff0c;合法的浮点常量形式通常遵循以下规则&#xff1a;1.可以有整数部分、小数部…
阅读更多...
string容器

string容器

1. string基本概念 1.1 本质&#xff1a; string是C风格的字符串&#xff0c;而string本质上是一个类 string和char * 区别&#xff1a; char * 是一个指针 string是一个类&#xff0c;类内部封装了char*&#xff0c;管理这个字符串&#xff0c;是一个char*型的容器。 1.2 特点…
阅读更多...
Unity类银河恶魔城学习记录5-1.5-2 P62-63 Creating Player Manager and Skill Manager源代码

Unity类银河恶魔城学习记录5-1.5-2 P62-63 Creating Player Manager and Skill Manager源代码

Alex教程每一P的教程原代码加上我自己的理解初步理解写的注释&#xff0c;可供学习Alex教程的人参考 此代码仅为较上一P有所改变的代码 【Unity教程】从0编程制作类银河恶魔城游戏_哔哩哔哩_bilibili PlayerManager.cs using System.Collections; using System.Collections.G…
阅读更多...
ClickHouse的优缺点和应用场景

ClickHouse的优缺点和应用场景

当业务场景需要一个大批量、快速的、可支持聚合运算的数据库&#xff0c;那么可选择ClickHouse。 选择ClickHouse 的原因&#xff1a; 记录类型类似于LOG&#xff0c;读取、运算远远大于写入操作选取有限列&#xff0c;对近千万条数据&#xff0c;快算的运算出结果。数据批量…
阅读更多...
内网穿透工具

内网穿透工具

1. nps-npc 1.1 简介 nps是一款轻量级、高性能、功能强大的内网穿透代理服务器。目前支持tcp、udp流量转发&#xff0c;可支持任何tcp、udp上层协议&#xff08;访问内网网站、本地支付接口调试、ssh访问、远程桌面&#xff0c;内网dns解析等等……&#xff09;&#xff0c…
阅读更多...
Golang数据库编程详解 | 深入浅出Go语言原生数据库编程

Golang数据库编程详解 | 深入浅出Go语言原生数据库编程

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到网站https://www.captainbed.cn/kitie。 Golang学习专栏&#xff1a;https://blog.csdn.net/qq_35716689/category_12575301.html 前言 对数据库…
阅读更多...
OLED调试简介

OLED调试简介

文章目录 一、介绍调试方法介绍OLED简介硬件电路OLED驱动函数 二、操作连接线路使用驱动函数显示内容 OLED.c的内容 一、介绍 调试方法介绍 OLED简介 硬件电路 OLED驱动函数 二、操作 连接线路 因为这两个引脚不做配置是浮空状态&#xff0c;在这里直接用电源给OLED供电 使…
阅读更多...
【leetcode热题100】搜索二维矩阵

【leetcode热题100】搜索二维矩阵

给你一个满足下述两条属性的 m x n 整数矩阵&#xff1a; 每行中的整数从左到右按非严格递增顺序排列。每行的第一个整数大于前一行的最后一个整数。 给你一个整数 target &#xff0c;如果 target 在矩阵中&#xff0c;返回 true &#xff1b;否则&#xff0c;返回 false 。…
阅读更多...
python实现中国剩余定理

python实现中国剩余定理

中国剩余定理又称孙子定理&#xff0c;是数论中一个重要定理。最早可见于我国的数学著作《孙子算经》卷下“物不知数”问题&#xff0c;原文如下&#xff1a; 有物不知其数&#xff0c;三三数之剩二&#xff0c;五五数之剩三&#xff0c;七七数之剩二。问物几何&#xff1f;即…
阅读更多...
2024-02-04（hive）

2024-02-04（hive）

1.Hive中的分区表 可以选择字段作为表分区。 分区其实就是HDFS上的不同文件夹。 分区表可以极大的提高特定场景下Hive的操作性能。 2.分区语法 create table tablename(...) partitioned by (分区列 列类型, ...) row format delimited fields terminated by ; 3.Hive中的…
阅读更多...
《向量数据库指南》——Milvus Cloud「删除」：眼见未必为实

《向量数据库指南》——Milvus Cloud「删除」：眼见未必为实

“执行 Collection 中的 delete 操作后，再次调用 num_entities 检查集合中的数据的条数，和删除前一致， delete 不能从物理层面上删除数据吗？”“删除的数据还能被查到是为什么？”“请问下删除 collection 后，磁盘大小没有恢复，该怎么处理？”社区中关于“删除”讨论最多…
阅读更多...
ppi rust开发 python调用

ppi rust开发 python调用

创建python的一个测试工程 python -m venv venv .\venv\Scripts\activatepip install cffi创建一个rust的lib项目 cargo new --lib pyrustlib.rs #[no_mangle] pub extern "C" fn rust_add(x: i32, y: i32) -> i32 {x y }Cargo.toml [package] name "p…
阅读更多...
【算法】递归入门

【算法】递归入门

文章目录 一、基础知识二、刷题实战1. 汉诺塔问题2. 合并两个有序链表3. 反转链表4. 快速幂 三、技巧总结 一、基础知识 什么是递归&#xff1a; 函数自己调用自己 什么时候能用递归&#xff1a; 有重复子问题 如何看待递归函数&#xff1a; 看作一个黑盒 如何编写递归代码…
阅读更多...
Allergo_17_4安装记录

Allergo_17_4安装记录

习惯用Allergo软件中的Orcad组件来画原理图&#xff0c;画PCB用PADS PADS的安装记录参考&#xff1a;PADS VX 2.7安装记录-CSDN博客 一、资源&#xff1a; 资源&#xff1a;百度云安装包&#xff1a;Cadence SPB 17.4-2019 安装包 提取码&#xff1a;ajow 二、安装 2.1 右键…
阅读更多...
链表算法练习

链表算法练习

1、206-单链表反转 思路1:在链表上直接反转&#xff0c;只是需要一个节点存储剩余部分的链表指针 时间复杂度&#xff1a;O(n) 空间复杂度&#xff1a;O(1) const listNode (val,next) >{this.val val;this.next next; }const reverseList (head) >{if(!head || !hea…
阅读更多...
百面嵌入式专栏（面试题）C语言面试题22道

百面嵌入式专栏（面试题）C语言面试题22道

沉淀、分享、成长，让自己和他人都能有所收获！😄 📢本篇我们将介绍C语言相关面试题 。 宏定义是在编译的哪个阶段被处理的？答案：宏定义是在编译预处理阶段被处理的。 解读：编译预处理：头文件包含、宏替换、条件编译、去除注释、添加行号。 写一个“标准”宏MIN，这个…
阅读更多...
React中的Props：传递数据与组件通信

React中的Props：传递数据与组件通信

在React程序中&#xff0c;Props&#xff08;属性&#xff09;是组件之间通信的核心机制之一。Props允许将数据从一个组件传递到另一个组件&#xff0c;并在整个应用程序中有效地管理状态和行为。本文将探讨React中的Props&#xff0c;包括其基本概念和用法。 什么是Props&…
阅读更多...
c#表达式树(MemberInitExpression)成员初始化表达式

c#表达式树(MemberInitExpression)成员初始化表达式

在 C# 中&#xff0c;表达式树是表示代码中的表达式的一种抽象表示形式。它可以用于在运行时动态地构建、分析和执行代码。表达式树提供了一种方式来表示代码中的表达式&#xff0c;而不是直接执行它们。 成员初始化也可以在表达式树中使用&#xff0c;通过表达式树&#xff0…
阅读更多...
最新文章

Copyright @ 2022~2023