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

前端三大件之CSS

news 文章来源：https://blog.csdn.net/2301_81156284/article/details/143824994 2024/11/28 23:39:36

引言

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

[STM32]从零开始的STM32 HAL库环境搭建

一、前言 之前在搭建STM32的标准库环境时就告诉过大家&#xff0c;开发STM32的方式主要有三种。一种是最原始但是效率最高的寄存器开发&#xff0c;另一种是效率仅次于寄存器难度相对较低的标准库开发&#xff0c;最后一种是最为简单但是程序效率最低的HAL库开发。如果对于初学…...

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

Docker部署Kafka SASL_SSL认证，并集成到Spring Boot

1&#xff0c;创建证书和密钥 需要openssl环境&#xff0c;如果是Window下&#xff0c;下载openssl Win32/Win64 OpenSSL Installer for Windows - Shining Light Productions 还需要keytool环境&#xff0c;此环境是在jdk环境下 本案例所使用的账号密码均为&#xff1a; ka…...

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

Pr：音频过渡

Adobe Premiere Pro 自带一组共三个音频过渡 Audio Transitions效果。 对音频剪辑之间应用交叉淡化 Crossfade过渡&#xff0c;操作方式类似于应用视频过渡效果。 对于交叉淡化&#xff0c;要保证前剪辑的出点之后及后剪辑的入点之前有足够的预留内容&#xff08;也称“手柄”&…...

编程日记 2024/11/19 20:33:39

HarmonyOs鸿蒙开发实战(17)=＞沉浸式效果第二种方案一组件安全区方案

1.沉浸式效果的目的 开发应用沉浸式效果主要指通过调整状态栏、应用界面和导航条的显示效果来减少状态栏导航条等系统界面的突兀感&#xff0c;从而使用户获得最佳的UI体验。 2.组件安全区方案介绍 应用在默认情况下窗口背景绘制范围是全屏&#xff0c;但UI元素被限制在安全区内…...

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

从 const 到 mutable：C++ 中的优雅妥协与设计智慧

在C编程中&#xff0c;const 关键字被广泛应用于确保数据的不变性&#xff0c;它提供了一种强大的机制来防止意外修改&#xff0c;从而增强了代码的可靠性和可维护性。然而&#xff0c;在某些特定场景下&#xff0c;完全的不变性可能会限制设计的灵活性&#xff0c;这时 mutabl…...

编程日记 2024/11/19 20:26:33

CC工具箱使用指南：【CAD导出界址点Excel】

一、简介 群友定制工具。 面图层导出界址点Excel表之前已经做过好几个&#xff0c;这个工具则是将CAD导出Excel。 CAD数据如下&#xff1a; 工具将如上截图中的边界线导出界址点Excel&#xff0c;并记录下面内的文字。 二、工具参数介绍 点击【定制工具】组里的【CAD导出界…...

编程日记 2024/11/19 20:25:25

制作图片马常用的五种方法总结

目录 1. 以文本方式2. Windows的cmd方式3. PhotoShop方式4. 16进制5. Linux的cat方式 图片马:就是在图片中隐藏一句话木马。利用.htaccess等解析图片为PHP或者asp文件。达到执行图片内代码目的。 1. 以文本方式 用文本方式&#xff08;这里用notepad。如果用记事本的方式打开…...

编程日记 2024/11/19 20:23:22

深入解析MySQL中的事务处理

一、引言 事务是数据库管理系统执行过程中的一个逻辑单位&#xff0c;它由一系列操作组成&#xff0c;这些操作要么全部执行&#xff0c;要么全部不执行。事务在保证数据的一致性、隔离性、持久性方面发挥着重要作用。MySQL作为一个广泛使用的数据库管理系统&#xff0c;对事务…...

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

TCP Analysis Flags 之 TCP Dup ACK

前言 默认情况下&#xff0c;Wireshark 的 TCP 解析器会跟踪每个 TCP 会话的状态&#xff0c;并在检测到问题或潜在问题时提供额外的信息。在第一次打开捕获文件时&#xff0c;会对每个 TCP 数据包进行一次分析&#xff0c;数据包按照它们在数据包列表中出现的顺序进行处理。可…...

编程日记 2024/11/19 20:20:17

r-and-r——提高长文本质量保证任务的准确性重新提示和上下文搜索的新方法可减轻大规模语言模型中的迷失在中间现象

概述 随着大规模语言模型的兴起&#xff0c;自然语言处理领域取得了重大发展。这些创新的模型允许用户通过输入简单的 "提示 "文本来执行各种任务。然而&#xff0c;众所周知&#xff0c;在问题解答&#xff08;QA&#xff09;任务中&#xff0c;用户在处理长文本时…...

编程日记 2024/11/19 20:16:12

网站开发搜索功能/seo推广是什么意思呢

1. 简介 手机传感器介绍手机传感器检测安卓手机上所有可用感应器&#xff0c;并通过图像生动的展示它们是如何运作的。手机传感器也能够识别该手机硬件支持哪些传感器&#xff0c;并提供对我们日常生活起着重要作用的传感工具。手机传感器只能检测到变化。如果属性没有变化&…...

编程日记 2024/11/28 22:01:51

网站模板有后台/搜索引擎原理

当我在GPT分区上设置’隐藏’标志时,它不受Windows 8.1的尊重(Windows尝试堆放,抛出UI等).但是,如果我从diskpart.exe设置’hidden’标志它是受到尊重的 – 这两个’隐藏’是不同的吗&#xff1f;如何从Linux中设置该位以使其受到Windows的尊重&#xff1f;GNU Parted 3.0Using…...

编程日记 2024/11/28 18:18:32

关于开通网站建设的请示/我对网络营销的理解

在多Activity开发中&#xff0c;有可能是自己应用之间的Activity跳转&#xff0c;或者夹带其他应用的可复用Activity。可能会希望跳转到原来某个Activity实例&#xff0c;而不是产生大量重复的Activity。 这需要为Activity配置特定的加载模式&#xff0c;而不是使用默认的加载模…...

编程日记 2024/11/28 17:55:18

网站测试模板/网页关键词排名优化

&#xff11;、普遍缓存技术&#xff1a; 数据缓存&#xff1a;这里所说的数据缓存是指数据库查询PHP缓存机制&#xff0c;每次访问页面的时候,都会先检测相应的缓存数据是否存在&#xff0c;如果不存在&#xff0c;就连接数据库&#xff0c;得到数据&#xff0c;并把查询结果序…...

编程日记 2024/11/28 16:57:45

建设广告网站费用/网络营销策划书封面

前言丨今天请zhang和yang吃火锅&#xff0c;吃完火锅的时候会有以下三种场景&#xff1a;场景一&#xff1a;小虫子(主)先吃完了&#xff0c;zhang(客)和yang(客)还没吃完&#xff0c;这种场景会导致结账的人先走了&#xff0c;剩下两位客人。场景二&#xff1a;小虫子(主)先吃…...

编程日记 2024/11/28 10:06:18

怎样建设网站?(怎样注册域名?如何选择主机?网站应有哪些功能模块/长尾关键词挖掘词

const arr3 [1, 2, 3] arr3.map(Number) const arr [1, 2, 3] arr.map(String)...

编程日记 2024/11/28 9:58:15