当前位置： 首页 > news >正文

前端三大件之CSS

news 2025/7/11 6:05:24

引言

CSS（层叠样式表，Cascading Style Sheets）是一种用于描述网页文档外观和格式的样式表语言。它主要用于控制网页的布局、颜色、字体、间距等视觉效果，使开发者能够将内容与设计分离。

一，CSS的基本概念

  1. 选择器（Selector）：

    • 用于指定要应用样式的HTML元素。
    • 常见选择器包括类选择器（如.classname）、ID选择器（如#idname）和类型选择器（如div, p）。

  2. 属性（Property）和值（Value）：

    • 选择器应用样式时，使用属性和值的配对来定义样式，例如： 
      h1 {  color: blue;  font-size: 30px;  
}

  3. 层叠机制（Cascading）：

    • CSS的“层叠”特性允许多个样式规则应用于同一元素，依据特定优先级确定最终样式。优先级通常取决于选择器的权重、来源（内联样式、外部样式表等）和顺序。

  4. 盒子模型（Box Model）：

    • 每个HTML元素在CSS中都被视为一个盒子，这个盒子由外边距（margin）、边框（border）、内边距（padding）和内容（content）组成。

  5. 响应式设计：

    • CSS可以通过媒体查询（media queries）来创建响应式网页，使内容在不同设备和屏幕尺寸下都能良好显示。

CSS的常用特性

  • 布局：使用 Flexbox 和 Grid 布局模型来创建灵活的页面布局。
  • 动画和过渡：可以通过 CSS 动画和过渡效果，为网页元素添加动态效果。
  • 变量：CSS 变量可以让开发者更方便地管理主题色或其他常用值。

使用CSS的好处

  • 增强可维护性：样式与内容的分离使得后期维护和修改变得更加简单。
  • 提高加载速度：通过外部样式表，可以缓存 CSS，提高网页的加载效率。
  • 适应多设备：可以轻松创建响应式设计，改善用户体验。

 接下来我们直观感受一段CSS代码

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>CSS入门</title><style>img{width: 40px;height: 50px;}</style></head><body><img src="./img/heiwukun.jpg"  /><img src="./img/tmall-01.jpg"  /></body></html>

 在<style>中，给img标签规定了宽度和高度后，<body>中的<img>标签都会自动按照规定的宽度和高度放置。

二，三大选择器

选择标签使用指定的css效果  

标签选择器

根据标签名称选择css操作。

font-size: 字体大小

<html>
<head><meta charset="utf-8"><title>css-标签选择器</title><style>span{font-size: 32px;}</style>
</head>
<body><p><span>今天</span>是个好<span>天气</span></p>
</body>
</html>

id选择器

标签内加入一个唯一id属性

tips： id不能使用数字开头

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>css-id选择器</title><style>#shangId{font-size: 32px;font-family: 华文楷体;}#shuId{font-size: 32px;font-family: 华文彩云;}</style></head><body><p>《〈尚书〉学文献集成·朝鲜卷》共35册，入选2019年度国家出版基金资助项目，是由扬州大学钱宗武教授及其团队整理的一套关于朝鲜学者用汉文撰写<span id="shangId">《尚书》</span>学文献的集成性著述。程兴丽老师独立整理第12册<span id="shuId">《书经讲义》</span>。《书经讲义》乃朝鲜第二十二代国王正祖所著，正祖在位时期极力推进科举制度的改革，以达到毓养人才的目的，所以正祖躬临课试，形式主要是正祖问难、文臣答解，而《书经讲义》所收录的就是正祖关涉《尚书》的提问及文臣的答辩。《书经讲义》较好地折射了正祖时期朝鲜官方学术关于《尚书》学研究的主要内容及显著特点，对于我们了解朝鲜《尚书》学乃至经学研究的概貌具有重要的价值和意义。</p></body>
</html>

span ： 行内插入数据

如果要对行内的内容修饰，不妨用span标签并使用ID选择器。 

class(类)选择器

定义好css内容，由内容自行选择。 ----框架  

 font-weight: 字体粗细。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>css-class选择器</title><style>.my-font{font-size: 38px;}.my-font-famliy{font-family: 华文彩云;font-weight: bold;}</style>	</head><body><p>君不见<span class="my-font my-font-famliy">黄河</span>之水天上来，奔流到海不复回。</p></body>
</html>

效果如下： 

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>css-class选择器</title><style>.my-font{font-size: 38px;}.my-font-famliy{font-family: 华文彩云;font-weight: bold;}</style></head><body><p>君不见<span class="my-font">黄河</span>之水天上来，奔流到<span class="my-font-famliy">海</span>不复回。</p></body>
</html>

效果图如下：

 

 在<style>中创建类名，然后在<body>中的标签引用。

三，CSS中常用的样式属性

1. 背景属性

  • background：设置背景的简写属性，可以同时设置颜色、图像、位置、大小等。
  • background-color：设置背景颜色。
  • background-image：设置背景图像。
  • background-position：设置背景图像的位置。
  • background-size：控制背景图像的大小。
  • background-repeat：设置背景图像是否重复。

2. 排版属性

  • color：设置文本颜色。
  • font-family：定义字体。
  • font-size：设置字体大小。
  • font-weight：设置字体粗细。
  • line-height：设置行间距。
  • text-align：设置文本对齐方式（左、中、右）。

3. 盒模型属性

  • width：设置元素的宽度。
  • height：设置元素的高度。
  • margin：设置元素外部的空白。
  • padding：设置元素内部的空白。
  • border：设置元素的边框样式、宽度和颜色。

4. 布局属性

  • display：定义元素的显示方式（如 block、inline、flex、grid）。
  • position：设置元素的定位类型（static、relative、absolute、fixed）。
  • top、right、bottom、left：对于绝对或固定定位元素，设置相对位置。
  • flex、grid：用于现代布局方法，可以创建响应式设计。

5. 边框属性

  • border-color：设置边框颜色。
  • border-style：定义边框的样式（如 solid、dashed、dotted）。
  • border-width：设置边框宽度。

6. 文本属性

  • text-decoration：设置文本装饰（如下划线、删除线）。
  • text-transform：设置文本的转换方式（如大写、小写）。
  • letter-spacing：设置字母间距。
  • word-spacing：设置单词间距。

7. 过渡和动画

  • transition：控制属性变化的过渡效果。
  • animation：定义动画效果。

8. 阴影和光晕

  • box-shadow：设置元素的阴影效果。
  • text-shadow：设置文本的阴影效果。

9. 透明和叠加

  • opacity：设置元素的透明度。
  • z-index：设置元素的堆叠顺序。

这些属性可以组合使用，创建复杂的布局和样式。

相关文章：

前端三大件之CSS

引言 CSS&#xff08;层叠样式表&#xff0c;Cascading Style Sheets&#xff09;是一种用于描述网页文档外观和格式的样式表语言。它主要用于控制网页的布局、颜色、字体、间距等视觉效果&#xff0c;使开发者能够将内容与设计分离。 一&#xff0c;CSS的基本概念 选择器&…...

编程日记 2024/11/19 21:17:23

C语言 | 指针 | 野指针 | 数组指针 | 指针数组 | 二级指针 | 函数指针 | 指针函数

文章目录 1.指针的定义2.指针的加减运算3.野指针4.指针 & 数组 & 传参 & 字符数组5.数组指针 & 指针数组6.二级指针7.指针函数 & 函数指针 & 回调函数8.函数指针数组 & 指向函数指针数组的指针 1.指针的定义 指针是内存中一个最小单元的编号&…...

编程日记 2024/11/19 21:15:21

mysql 的乐观锁和 mvcc 是一回事吗

MySQL 的乐观锁和 MVCC&#xff08;多版本并发控制&#xff09;是两个不同的概念&#xff0c;尽管它们都涉及到并发控制和数据的一致性&#xff0c;但在设计目的和实现方式上存在本质区别。 1. 乐观锁 概念 乐观锁是一种用于解决并发更新冲突的控制机制。它假设数据在大部分情况…...

编程日记 2024/11/19 21:13:20

redis的击穿和雪崩

Redis 是一个高性能的键值存储数据库&#xff0c;广泛用于缓存、会话管理等场景。然而&#xff0c;Redis 在高并发场景下可能会遇到一些问题&#xff0c;比如“击穿”和“雪崩”。下面详细解释这两个概念&#xff1a; 击穿&#xff08;Hotspot&#xff09; 击穿是指某个热点数…...

编程日记 2024/11/19 21:10:17

java中创建多线程的4种方式

目录 一、继承 Thread 类创建线程 步骤 示例代码 原理 二、实现 Runnable 接口创建线程 步骤 示例代码 原理 三、实现 Callable 接口创建线程 步骤 示例代码 原理 与Runnable接口相比的不同之处 四、使用线程池创建线程 步骤 示例代码&#xff08;使用 Executo…...

编程日记 2024/11/19 21:06:13

MATLAB深度学习(二)——如何训练一个卷积神经网路

2.1 基本概念 从数学的角度看&#xff0c;机器学习的目标是建立输入和输出的函数关系&#xff0c;相当于 y F&#xff08;x&#xff09;的过程。F&#xff08;x&#xff09;就是我们所说的模型&#xff0c;对于使用者来说&#xff0c;这个模型就是一个黑箱&#xff0c;我们不知…...

编程日记 2024/11/19 21:05:12

删除k8s 或者docker运行失败的脚本

vi delete_exited_containers.sh#!/bin/bash# 列出所有停止的容器并存储到数组 list_exited_containers() {echo -e "\nStopped containers:"containers()# 获取停止的容器信息并存入数组while IFS read -r line; docontainers("$line")done < <(do…...

编程日记 2024/11/19 21:04:11

重置docker版本的octoprint管理员账号密码

我的情况是octoprint安装在HiNAS系统的机顶盒上&#xff0c;只有一个账号&#xff0c;但是忘记了用户名和密码。有两个选择&#xff1a; 可以试试先找回用户名&#xff0c;然后尝试你的常用密码。直接重置所有账号。 1.找回用户名&#xff1a; 使用使用 docker exec -it <…...

编程日记 2024/11/19 21:03:10

prometheus监控数据远程写入Kafka集群

文章目录 前言一、环境简介1.1 环境简介1.2 部署清单1.3 组件版本 二、部署步骤2.1 prometheus部署2.2 kafka集群部署2.3 prometheus-kafka-adapter部署 三、数据验证四、总结 前言 根据项目要求&#xff0c;需将prometheus监控数据存储到kafka中。前面为了图方便就搭建了单机…...

编程日记 2024/11/19 21:01:07

Excel使用-弹窗“此工作簿包含到一个或多个可能不安全的外部源的链接”的发生与处理

文章目录 前言一、探讨问题发生原因1.引入外部公式2.引入外部数据验证二、问题现象排查及解决1.排查公式2.排查数据验证3.特殊处理方式总结前言 作为一种常用的办公软件，Excel被大家所熟知。尽管使用了多年，有时候在使用Excel时候也会发生一些不太常见的现象，需要用心核查下…...

编程日记 2024/11/19 21:00:06

C++小白实习日记——Day 2 TSCNS怎么读取当前时间

和老板问了一下&#xff0c;今天就可以自己上手了&#xff1a; 用TSCNS写了一个cpp,运行出来老板说让我去看看另一个项目是怎么做的 用TSCNS和std库获取当前时间 #include <iostream> #include <iomanip> #include "tscns.h"using namespace std;TSCN…...

编程日记 2024/11/19 20:58:04

【Pythonr入门第二讲】你好，世界

"Hello, World!" 是一种传统的编程入门示例&#xff0c;通常是程序员学习一门新编程语言时编写的第一个程序。这个程序的目标非常简单&#xff1a;在屏幕上输出 "Hello, World!" 这个字符串。尽管它非常简单&#xff0c;但具有重要的象征意义和实际价值。 …...

编程日记 2024/11/19 20:54:01

3D Streaming 在线互动展示系统：NVIDIA RTX 4090 加速实时渲染行业数字化转型

随着科技的飞速发展&#xff0c;实时渲染正逐步成为游戏与实时交互领域的重要驱动力。与离线渲染不同&#xff0c;实时渲染需要极高的计算性能&#xff0c;对硬件设备尤其是GPU的性能要求极高。随着 RTX 4090 显卡的问世&#xff0c;其强大的算力和创新技术&#xff0c;为实时渲…...

编程日记 2024/11/19 20:52:59

Oracle 单机及 RAC 环境 db_files 参数修改

Oracle 数据库中 DB_FILES 定义了数据库中数据文件的个数&#xff0c;默认值为200&#xff0c;如果创建数据库文件时超过DB_FILES 定义的值就会报 ORA-00059 错误。 下面分别演示单机及 RAC 环境下修改 db_files 参数的操作步骤。 一、单机环境 1.查询当前参数值 SQL> sh…...

编程日记 2024/11/19 20:50:57

消息中间件分类

消息中间件&#xff08;Message Middleware&#xff09;是一种在分布式系统中实现跨平台、跨应用通信的软件架构。它基于消息传递机制&#xff0c;允许不同系统、不同编程语言的应用之间进行异步通信。 常见的消息中间件类型包括&#xff1a; 1. JMS&#xff08;Java Message S…...

编程日记 2024/11/19 20:46:52

讯飞、阿里云、腾讯云：Android 语音合成服务对比选择

在 移动端 接入语音合成方面&#xff0c;讯飞和腾讯云等都是优秀的选择&#xff0c;但各有其特点和优势。咱们的需求是需要支持普通话/英语/法语三种语言&#xff0c;以下是对各个平台的详细比较&#xff1a; 一、讯飞语音合成介绍 与语音听写相反&#xff0c;语音合成是将一段…...

编程日记 2024/11/19 20:42:49

SpringBoot开发——整合AJ-Captcha实现安全高效的滑动验证码

文章目录 一、什么是AJ-Captcha二、项目配置1、Maven依赖配置2、滑动验证码的基本原理3、 后端实现3.1 生成滑动验证码图片代码解释3.2 校验滑块位置代码解释4、前端部分代码解释5、Redis 缓存滑动验证码信息5.1 Redis配置5.2使用Redis缓存验证码数据5.3 校验时从Redis获取总结…...

编程日记 2024/11/19 20:41:48

Spring Security 核心组件

Spring Security 是一个功能全面的安全框架&#xff0c;用于处理基于 Spring 应用程序的身份验证和授权。 它提供了开箱即用的支持&#xff0c;采用行业标准的做法和机制来保护你的应用。 无论你是开发简单的 Web 应用还是复杂的微服务架构&#xff0c;理解 Spring Security …...

编程日记 2024/11/19 20:40:47

聚焦 AUTO TECH 2025华南展：探索新能源汽车发展新趋势

随着“新四化”浪潮的推进&#xff0c;汽车行业正经历前所未有的变革。中国新能源汽车正逐渐走向世界。国内汽车制造巨头如比亚迪、吉利、奇瑞、长安等&#xff0c;已经将出口提升至核心战略地位。中国新能源汽车的发展&#xff0c;不仅推动了全球汽车产业的电动化转型&#xf…...

编程日记 2024/11/19 20:37:44

Python-简单病毒程序合集(一)

前言&#xff1a;简单又有趣的Python恶搞代码&#xff0c;往往能给我们枯燥无味的生活带来一点乐趣&#xff0c;激发我们对编程的最原始的热爱。那么话不多说&#xff0c;我们直接开始今天的编程之路。 编程思路&#xff1a;本次我们将会用到os,paltform,threading,ctypes,sys,…...

编程日记 2024/11/19 20:36:43

设计模式和设计原则回顾

设计模式和设计原则回顾 23种设计模式是设计原则的完美体现，设计原则设计原则是设计模式的理论基石， 设计模式 在经典的设计模式分类中（如《设计模式：可复用面向对象软件的基础》一书中），总共有23种设计模式，分为三大类： 一、创建型模式（5种） 1. 单例模式（Sing…...

编程新知 2025/6/20 13:00:49

python/java环境配置

环境变量放一起 python&#xff1a; 1.首先下载Python Python下载地址&#xff1a;Download Python | Python.org downloads ---windows -- 64 2.安装Python 下面两个&#xff0c;然后自定义&#xff0c;全选 可以把前4个选上 3.环境配置 1&#xff09;搜高级系统设置 2…...

编程新知 2025/7/6 7:09:46

c++ 面试题(1)-----深度优先搜索（DFS）实现

操作系统&#xff1a;ubuntu22.04 IDE:Visual Studio Code 编程语言&#xff1a;C11 题目描述 地上有一个 m 行 n 列的方格&#xff0c;从坐标 [0,0] 起始。一个机器人可以从某一格移动到上下左右四个格子&#xff0c;但不能进入行坐标和列坐标的数位之和大于 k 的格子。 例…...

编程新知 2025/7/6 20:47:25

【论文笔记】若干矿井粉尘检测算法概述

总的来说&#xff0c;传统机器学习、传统机器学习与深度学习的结合、LSTM等算法所需要的数据集来源于矿井传感器测量的粉尘浓度&#xff0c;通过建立回归模型来预测未来矿井的粉尘浓度。传统机器学习算法性能易受数据中极端值的影响。YOLO等计算机视觉算法所需要的数据集来源于…...

编程新知 2025/7/9 21:22:02

如何为服务器生成TLS证书

TLS&#xff08;Transport Layer Security&#xff09;证书是确保网络通信安全的重要手段&#xff0c;它通过加密技术保护传输的数据不被窃听和篡改。在服务器上配置TLS证书&#xff0c;可以使用户通过HTTPS协议安全地访问您的网站。本文将详细介绍如何在服务器上生成一个TLS证…...

编程新知 2025/7/5 5:39:52

CMake 从 GitHub 下载第三方库并使用

有时我们希望直接使用 GitHub 上的开源库，而不想手动下载、编译和安装。 可以利用 CMake 提供的 FetchContent 模块来实现自动下载、构建和链接第三方库。 FetchContent 命令官方文档✅ 示例代码 我们将以 fmt 这个流行的格式化库为例，演示如何： 使用 FetchContent 从 GitH…...

编程新知 2025/7/8 19:51:41

【JavaSE】绘图与事件入门学习笔记

-Java绘图坐标体系 坐标体系-介绍 坐标原点位于左上角&#xff0c;以像素为单位。 在Java坐标系中,第一个是x坐标,表示当前位置为水平方向&#xff0c;距离坐标原点x个像素;第二个是y坐标&#xff0c;表示当前位置为垂直方向&#xff0c;距离坐标原点y个像素。 坐标体系-像素 …...

编程新知 2025/7/10 8:40:00

RNN避坑指南：从数学推导到LSTM/GRU工业级部署实战流程

本文较长&#xff0c;建议点赞收藏&#xff0c;以免遗失。更多AI大模型应用开发学习视频及资料&#xff0c;尽在聚客AI学院。 本文全面剖析RNN核心原理&#xff0c;深入讲解梯度消失/爆炸问题&#xff0c;并通过LSTM/GRU结构实现解决方案&#xff0c;提供时间序列预测和文本生成…...

编程新知 2025/7/9 23:30:34

AirSim/Cosys-AirSim 游戏开发（四）外部固定位置监控相机

这个博客介绍了如何通过 settings.json 文件添加一个无人机外的 固定位置监控相机&#xff0c;因为在使用过程中发现 Airsim 对外部监控相机的描述模糊&#xff0c;而 Cosys-Airsim 在官方文档中没有提供外部监控相机设置&#xff0c;最后在源码示例中找到了&#xff0c;所以感…...

编程新知 2025/7/9 23:20:21

Web中间件--tomcat学习

Web中间件–tomcat Java虚拟机详解 什么是JAVA虚拟机 Java虚拟机是一个抽象的计算机&#xff0c;它可以执行Java字节码。Java虚拟机是Java平台的一部分&#xff0c;Java平台由Java语言、Java API和Java虚拟机组成。Java虚拟机的主要作用是将Java字节码转换为机器代码&#x…...

编程新知 2025/7/6 17:21:04