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

前端三大件之CSS

news 2025/7/11 7:25:19

引言

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

wordpress后台更新后 前端没变化的解决方法

使用siteground主机的wordpress网站&#xff0c;会出现更新了网站内容和修改了php模板文件、js文件、css文件、图片文件后&#xff0c;网站没有变化的情况。 不熟悉siteground主机的新手&#xff0c;遇到这个问题&#xff0c;就很抓狂&#xff0c;明明是哪都没操作错误&#x…...

编程新知 2025/7/9 21:25:53

UE5 学习系列（二）用户操作界面及介绍

这篇博客是 UE5 学习系列博客的第二篇&#xff0c;在第一篇的基础上展开这篇内容。博客参考的 B 站视频资料和第一篇的链接如下&#xff1a; 【Note】&#xff1a;如果你已经完成安装等操作&#xff0c;可以只执行第一篇博客中 2. 新建一个空白游戏项目 章节操作&#xff0c;重…...

编程新知 2025/7/9 11:13:42

UR 协作机器人「三剑客」：精密轻量担当（UR7e）、全能协作主力（UR12e）、重型任务专家（UR15）

UR协作机器人正以其卓越性能在现代制造业自动化中扮演重要角色。UR7e、UR12e和UR15通过创新技术和精准设计满足了不同行业的多样化需求。其中&#xff0c;UR15以其速度、精度及人工智能准备能力成为自动化领域的重要突破。UR7e和UR12e则在负载规格和市场定位上不断优化&#xf…...

编程新知 2025/7/10 23:48:02

【JavaWeb】Docker项目部署

引言 之前学习了Linux操作系统的常见命令&#xff0c;在Linux上安装软件&#xff0c;以及如何在Linux上部署一个单体项目&#xff0c;大多数同学都会有相同的感受&#xff0c;那就是麻烦。 核心体现在三点&#xff1a; 命令太多了&#xff0c;记不住 软件安装包名字复杂&…...

编程新知 2025/7/9 21:54:35

Linux --进程控制

本文从以下五个方面来初步认识进程控制&#xff1a; 目录 进程创建 进程终止 进程等待 进程替换 模拟实现一个微型shell 进程创建 在Linux系统中我们可以在一个进程使用系统调用fork()来创建子进程&#xff0c;创建出来的进程就是子进程&#xff0c;原来的进程为父进程。…...

编程新知 2025/7/7 7:10:35

AI，如何重构理解、匹配与决策？

AI 时代&#xff0c;我们如何理解消费&#xff1f; 作者&#xff5c;王彬 封面&#xff5c;Unplash 人们通过信息理解世界。 曾几何时&#xff0c;PC 与移动互联网重塑了人们的购物路径&#xff1a;信息变得唾手可得&#xff0c;商品决策变得高度依赖内容。 但 AI 时代的来…...

编程新知 2025/7/10 21:45:52

HDFS分布式存储 zookeeper

hadoop介绍 狭义上hadoop是指apache的一款开源软件 用java语言实现开源框架&#xff0c;允许使用简单的变成模型跨计算机对大型集群进行分布式处理&#xff08;1.海量的数据存储 2.海量数据的计算&#xff09;Hadoop核心组件 hdfs&#xff08;分布式文件存储系统&#xff09;&a…...

编程新知 2025/7/7 5:44:33

【分享】推荐一些办公小工具

1、PDF 在线转换 https://smallpdf.com/cn/pdf-tools 推荐理由&#xff1a;大部分的转换软件需要收费&#xff0c;要么功能不齐全&#xff0c;而开会员又用不了几次浪费钱&#xff0c;借用别人的又不安全。 这个网站它不需要登录或下载安装。而且提供的免费功能就能满足日常…...

编程新知 2025/6/28 13:23:48

GO协程(Goroutine)问题总结

在使用Go语言来编写代码时&#xff0c;遇到的一些问题总结一下 [参考文档]&#xff1a;https://www.topgoer.com/%E5%B9%B6%E5%8F%91%E7%BC%96%E7%A8%8B/goroutine.html 1. main()函数默认的Goroutine 场景再现&#xff1a; 今天在看到这个教程的时候&#xff0c;在自己的电…...

编程新知 2025/7/10 14:29:59

关于easyexcel动态下拉选问题处理

前些日子突然碰到一个问题&#xff0c;说是客户的导入文件模版想支持部分导入内容的下拉选&#xff0c;于是我就找了easyexcel官网寻找解决方案&#xff0c;并没有找到合适的方案&#xff0c;没办法只能自己动手并分享出来&#xff0c;针对Java生成Excel下拉菜单时因选项过多导…...

编程新知 2025/7/9 16:21:16