Web基础 ( 二 ) CSS
2.CSS
2.1.概念与基础
2.1.1.什么是CSS
Cascading Style Sheets 全称层叠样式单 简称样式表。
是告诉浏览器如何来显示HTML的元素的特殊标记
2.1.2.编写方式
2.1.2.1.外部文件
在html文件的<head>中加入<link>结点来引入外部的文件
<link rel="stylesheet" type="text/css" href="../c.css"/>
2.1.2.2.定义属性
在html元素中加入 style 属性来引入样式,
style="样式属性 : 值 ; 样式属性 : 值 ;"
<input type="text" style="color: red; background: yellow;" />
2.1.2.3.样式定义
在<head>下加入<style>结点,
<style type="text/css">.ss{color: red; background: yellow;}
</style>
2.1.3.选择器
# 对应 id
. 对应 class
标签名tagName 对应 匹配的标签
也可以通过[attr =value]来通过属性进行筛选
三种选择器的优先原则：
# ID>.类名>标签名称
2.2.常用样式
2.2.1.文本处理
text-decoration : 横线修饰 如 : text-decoration: none;
| none | 默认值。无装饰 |
|---|---|
| blink | 闪烁 |
| underline | 下划线 |
| line-through | 贯穿线 |
| overline | 上划线 |
letter-spacing : 字间距
vertical-align : 垂直对齐
text-align : 水平对齐 如 : text-align: center;
text-transform : 大小写
| none | 默认值。无转换发生 |
|---|---|
| capitalize | 将每个单词的第一个字母转换成大写，其余无转换发生 |
| uppercase | 转换成大写 |
| lowercase | 转换成小写 |
text-indent : 缩进量
line-height : 行间距
2.2.2.使用字体
font : 字体
font-family : 字体
font-style : 风格
| normal | 默认值。正常的字体 |
|---|---|
| italic | 斜体。对于没有斜体变量的特殊字体，将应用 oblique |
| oblique | 倾斜的字体 |
font-variant : 大小写
| normal | 默认值。正常的字体 |
|---|---|
| small-caps | 小型的大写字母字体 |
font-weight : 粗细
| normal | 默认值。正常的字体。相当于 400 。声明此值将取消之前任何设置 |
|---|---|
| bold | 粗体。相当于 700 。也相当于 b 对象的作用 |
| bolder | 比 normal >粗 |
| lighter | 比 normal >细 |
font-size : 尺寸
| xx-small | 绝对字体尺寸。根据对象字体进行调整。最小 |
|---|---|
| x-small | 绝对字体尺寸。根据对象字体进行调整。较小 |
| small | 绝对字体尺寸。根据对象字体进行调整。小 |
| medium | 默认值。绝对字体尺寸。根据对象字体进行调整。正常 |
| large | 绝对字体尺寸。根据对象字体进行调整。大 |
| x-large | 绝对字体尺寸。根据对象字体进行调整。较大 |
| xx-large | 绝对字体尺寸。根据对象字体进行调整。最大 |
| larger | 相对字体尺寸。相对于父对像中字体尺寸进行相对增大。使用成比例的 em 单位计算 |
| smaller | 相对字体尺寸。相对于父对像中字体尺寸进行相对减小。使用成比例的 em 单位计算 |
| length | 百分数 | 由浮点数字和单位标识符组成的长度值，不可为负值。其百分比取值是基于父对象中字体的尺寸。 |
2.2.3.颜色和背景
background :
background-image:url(../img/bs.png); : 背景图片
background-color : 背景颜色 如 : background-color: black; background-color: aliceblue;
background-repeat : 背景平铺
| repeat | 默认值。背景图像在纵向和横向上平铺 |
|---|---|
| no-repeat | 背景图像不平铺 |
| repeat-x | 背景图像仅在横向上平铺 |
| repeat-y | 背景图像仅在纵向上平铺 |
background-attachment : 是否滚动
| scroll | 默认值。背景图像是随对象内容滚动 |
|---|---|
| fixed | 背景图像固定 |
background-position : 偏置位置
| length | 百分数 | 由浮点数字和单位标识符组成的长度值。 |
|---|---|
| position | top | center | bottom | left | center | right |
color : 颜色
2.2.4.盒子
在 CSS 中，盒子（Box）是用于表示所有 HTML 元素的矩形区域。每个盒子包含了元素的内容、内边距（Padding）、边框（Border）和外边距（Margin）。
盒子模型描述了一个HTML元素的矩形框的大小和位置，其中包括：
- 内容区域（content area）：元素的实际内容所占据的空间。
- 内边距（padding）：内容区域和边框之间的空间。
- 边框（border）：内边距和外边距之间的空间。
- 外边距（margin）：边框和周围元素之间的空间。
CSS 的盒模型是一种计算元素宽高大小和定位属性的方式，设计网页时经常用到。了解盒模型对于 CSS 布局至关重要。
margin : 边距属性 外边距
margin-top : 顶端边距 如 : margin-top: -240px ;
margin-right
margin-bottom
margin-left : 如 : margin-left: -200px; margin-left: 10px;
padding : 填充距属性 内边距
padding-top
padding-right
padding-bottom
padding-left
border : 边框属性 如: border: 1px solid #AAAAAA;
border-top-width
border-right-width
border-bottom-width
border-left-width
border-width
border-color
border-top
border-right
border-bottom
border-left
外边距的特性：
a)垂直方向的外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。
并且合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
b) 当一个标签包含在另一个标签中时（在没有内边距或边框把外边距分隔开），它们的上下外边距也会发生合并。
取消父与子的垂直方向外边距合并效果：
只需要在父级的垂直方向上加上内边距或边框就可以。（加一堵墙）。
如果提供全部四个参数值，
将按上－右－下－左的顺序作用于四边。
如果只提供一个，将用于全部的四边。
如果提供两个，第一个用于上－下，第二个用于左－右。 如: margin: 5px 10px;
如果提供三个，第一个用于上，第二个用于左－右，第三个用于下。
2.2.5.其它
display : 显示
| block | 块对象的默认值。将对象强制作为块对象呈递，为对象之后添加新行。 |
|---|---|
| inline | 内联对象的默认值。将对象强制作为内联对象呈递，从对象中删除行。 |
| inline-block | 将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内。 |
| none | 隐藏对象。与 visibility 属性的hidden值不同，其不为被隐藏的对象保留其物理空间。 |
visibility : 显示,隐藏时保留位置
| inherit | : | 默认值。继承父对象的可见性 |
|---|---|---|
| visible | : | 对象可视 |
| collapse | : | 未支持。主要用来隐藏表格的行或列。隐藏的行或列能够被其他内容使用。对于表格外的其他对象，其作用等同于 hidden |
| hidden | : | 对象隐藏 |
overflow : 内容溢出
| visible | : | 默认值。不剪切内容也不添加滚动条。假如显式声明此默认值，对象将以包含对象的 window 或 frame 的尺寸裁切。并且 clip 属性设置将失效 |
|---|---|---|
| auto | : | 在必需时对象内容才会被裁切或显示滚动条 |
| hidden | : | 不显示超过对象尺寸的内容 |
| scroll | : | 总是显示滚动条 |
float : 漂移
width : 宽 如: width: 400px; width: 100%;
height : 高 如: height: 100%;
min-height : 最小高度 如: min-height: 150px;
left : 左边距 如 : left: 0px; left: 50%;
right : 右边距如 : right: 5px;
top : 上边距 如 : top: 0px; top: 50%;
bottom : 下边距
border-collapse : 表格线边框合并 如: border-collapse: collapse;
empty-cells : 是否显示空的td
z-index : 层叠序号 如: z-index: 3000;
opacity : 透明度, 0~1 之间 如: opacity: 0.5;
border-radius : 圆角, 如: border-radius: 8px;
position : 定位：absolute代表决对定位 如: position: fixed; position: absolute;
| static | : | 默认值。无特殊定位，对象遵循HTML定位规则 |
|---|---|---|
| absolute | : | 将对象从文档流中拖出，使用 left ， right ， top ， bottom 等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。如果不存在这样的父对象，则依据 body 对象。而其层叠通过 z-index 属性定义 |
| *fixed* | : | 对象定位遵从绝对(absolute)方式。但是是相对于窗口定位 |
| relative | : | 对象不可层叠，但将依据 left ， right ， top ， bottom 等属性在正常文档流中偏移位置 |
cursor : 鼠标样式 如: cursor: pointer;
| auto | : | 默认值。浏览器根据当前情况自动确定鼠标光标类型。 | |
|---|---|---|---|
| all-scroll | : | IE6.0 | 有上下左右四个箭头，中间有一个圆点的光标。用于标示页面可以向上下左右任何方向滚动。 |
| col-resize | : | IE6.0 | 有左右两个箭头，中间由竖线分隔开的光标。用于标示项目或标题栏可以被水平改变尺寸。 |
| crosshair | : | 简单的十字线光标。 | |
| default | : | 客户端平台的默认光标。通常是一个箭头。 | |
| *hand* | : | 竖起一只手指的手形光标。就像通常用户将光标移到超链接上时那样。 | |
| move | : | 十字箭头光标。用于标示对象可被移动。 | |
| help | : | 带有问号标记的箭头。用于标示有帮助信息存在。 | |
| no-drop | : | IE6.0 | 带有一个被斜线贯穿的圆圈的手形光标。用于标示被拖起的对象不允许在光标的当前位置被放下。 |
| not-allowed | : | IE6.0 | 禁止标记(一个被斜线贯穿的圆圈)光标。用于标示请求的操作不允许被执行。 |
| pointer | : | IE6.0 | 和 hand 一样。竖起一只手指的手形光标。就像通常用户将光标移到超链接上时那样。 |
| progress | : | IE6.0 | 带有沙漏标记的箭头光标。用于标示一个进程正在后台运行。 |
| row-resize | : | IE6.0 | 有上下两个箭头，中间由横线分隔开的光标。用于标示项目或标题栏可以被垂直改变尺寸。 |
| text | : | 用于标示可编辑的水平文本的光标。通常是大写字母 I 的形状。 | |
| vertical-text | : | IE6.0 | 用于标示可编辑的垂直文本的光标。通常是大写字母 I 旋转90度的形状。 |
| wait | : | 用于标示程序忙用户需要等待的光标。通常是沙漏或手表的形状。 | |
| *-resize | : | 用于标示对象可被改变尺寸方向的箭头光标。w-resize | s-resize | n-resize | e-resize | ne-resize | sw-resize | se-resize | nw-resize | |
| url ( url ) | : | IE6.0 | 用户自定义光标。使用绝对或相对 url 地址指定光标文件(后缀为 .cur 或者 .ani )。 |
相关文章：
Web基础 ( 二 ) CSS
2.CSS 2.1.概念与基础 2.1.1.什么是CSS Cascading Style Sheets 全称层叠样式单 简称样式表。 是告诉浏览器如何来显示HTML的元素的特殊标记 2.1.2.编写方式 2.1.2.1.外部文件 在html文件的<head>中加入<link>结点来引入外部的文件 <link rel"stylesh…...
MSQL系列(一) Mysql实战-索引结构 二叉树/平衡二叉树/红黑树/BTree/B+Tree
Mysql实战-索引结构 二叉树/平衡二叉树/红黑树/BTree/BTree 我们在项目中都会使用索引，所以我们要了解索引的存储结构，今天我们就着重讲解下Mysql的索引结构存储模型，并且看下 二叉树，平衡二叉树，红黑树，B…...
理论力学专题：张量分析
张量方法的引入 自然法则与坐标无关，坐标系的引入方便分析，但也掩盖了物理本质指标符号哑标和自由标 Einstein求和约定：凡在某一项内，重复一次且仅重复一次的指标，表示对该指标在它的取值范围内求和，并称这…...
索引失效情况
左或者左右模糊匹配，like %xx，like %xx% select * from student where name like %三; 原因：B是按照索引值有序排列，只能根据前缀比较来确定数据，一旦左边是模糊的，显然无法确定到底是哪个索引值 对索引字…...
pv操作练习题
信号量解决五个哲学家吃通心面问题 题型一 有五个哲学家围坐在一圆桌旁，桌中央有盘通心面，每人面前有一只空盘于，每两人之间放一把叉子。每个哲学家思考、饥饿、然后吃通心面。为了吃面，每个哲学家必须获得两把叉子，…...
【小菜鸡刷题记】--字符串篇
【小菜鸡刷题记】：字符串 剑指 Offer 05. 替换空格剑指 Offer 58 - II.左旋转字符串剑指 Offer 20.表示数值的字符串剑指 Offer 67. 把字符串转换成整数 特此声明：题目均来自于力扣 剑指 Offer 05. 替换空格 题目链接 请实现一个函数，把字符…...
Sonar加入jenkins流水线
前提：已搭建sonarqube 1、配置sonarqube server jenkins 中manage jenkins-configure System配置sonarqube server 2、准备sonar环境 在jenkins项目的构建环境步骤中，勾选prepare SonarQube environment token需要提前在凭据里添加一个token 3、执行s…...
FSW26现金回收RS FSW43 信号和频谱分析仪
Rohde & Schwarz FSW26信号和频谱分析仪，2 Hz - 26.5 GHz 高性能 Rohde & Schwarz (R&S) FSW26 信号和频谱分析仪专为方便、准确和快速而设计。其独特的触摸屏、直观的多视图结果显示和优化的用户指南使 R&S FSW26 分析仪的操作高效方便。凭借其无…...
GraphPad Prism 9.5.1 for Mac 操作简便功能强大且实用的医学绘图分析工具
GraphPad Prism简介 GraphPad Prism是一款非常实用的统计软件，其功能非常强大，能够帮助用户进行各类科研数据的处理和分析，快速绘制出各种专业的图像和数据报告。 GraphPad Prism软件的用户界面非常友好，易于学习和操作…...
六. Activity启动模式
Task任务栈(ActivityTask) Activity属于App进程,但是Task属于操作系统,Task里面的Activity可以是属于不同的App的,所以App之间是可以相互调用的.比如:App里面可以使用打电话、地图等. 当我们查看手机后台运行的程序,他们其实就是一个个任务栈Task,我们平时可能会把他认为是一个…...
本机连接aws的ec2时报错：所选用户的用户密钥未在远程主机上注册
引言 由于工作的需要，所以需要去学习下AWS相关的知识，所以自己注册了一个AWS的账号去进行学习。 问题发现 按照启动ec2实例的步骤：选择镜像->选择系统配置->配置密钥对->配置安全组->设置存储卷大小->启动实例 在上述操作…...
谁看见我的猫照片了
今天分享一个可自由拖得动的图片效果样式。 先看效果： 谁看见我猫的照片了？ 再上源码： <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>Title</title><st…...
数据结构与算法之深度优先算法详解
深度优先算法（Depth First Search，DFS）是一种常见的图形算法，它是一种用于遍历或搜索树或图的算法。在深度优先搜索中，我们首先探索一个子树的深度，然后再回溯到父节点，接着探索另一个子树的深度…...
C# 给winfrom窗体添加皮肤控件
如何快速给C# winform添加好看的皮肤C# Winform中窗体的美化 SkinEngine的应用 皮肤控件换肤素材包，IrisSkin2.dll皮肤素材资源下载 压缩包内一共有22种皮肤素材，使用说明：把控件拖到你的form上，只需一行代码，即可实…...
数据分析真的很火吗？真的有很多企业需要这样的岗位吗？求大佬指点。
“我是去年毕业的，因为疫情影响，整个就业环境都很不好，很多企业都裁员了。加上疫情三年基本都是玩过去，也没啥一技之长，就业就更难了。听说现在做数据分析的人很多，我身边的朋友都在转行做数据分析。 其实…...
100 个 Go 错误以及如何避免：9~12
协议：CC BY-NC-SA 4.0 译者：飞龙 本文来自【OpenDocCN 饱和式翻译计划】，采用译后编辑（MTPE）流程来尽可能提升效率。 真相一旦入眼，你就再也无法视而不见。——《黑客帝国》 九、并发实践 本章涵盖 防止 …...
用户/用户组管理
用户管理 * useradd 命令添加用户，会在/etc/passwd生成用户信息，信息分为7列，被6个冒号隔开 第一列 username (login name) 第二列 密码，但是该列已经被移除，用x表示，密码信息已经存放在了/etc/shadow文…...
如何进行TCP抓包调试？
网络调试工具——Wireshark Wireshark 是世界上应用最广泛的网络协议分析器，它让我们在微观层面上看到整个网络正在发生的事情。 Wireshark 本身是一个开源项目，所以也得到了很多志愿者的支持。同时，Wireshark 具有丰富的功能集，…...
分享一个国内可用的ChatGPT网站，免费无限制，支持AI绘画 - AI 百晓生
背景 ChatGPT作为一种基于人工智能技术的自然语言处理工具，近期的热度直接沸腾🌋。 作为一个AI爱好者，翻遍了各大基于ChatGPT的网站，终于找到一个免费！免登陆！手机电脑通用！国内可直接对话的C…...
API安全性的要素与开发人员必修课测试
一、API安全性的要素主要包括以下几点： 1.身份验证和访问控制：API应该通过身份验证来验证请求的源，确保只有授权的用户或应用程序才能访问API。这可以通过使用API密钥、访问令牌、OAuth令牌或其他身份验证机制实现。 2.数据加密：A…...
用C语言解决‘换硬币’问题？我来教你如何调试和验证你的循环逻辑
用C语言解决‘换硬币’问题？我来教你如何调试和验证你的循环逻辑 当你第一次面对"换硬币"这类组合问题时，那种既兴奋又困惑的感觉我至今记忆犹新。作为C语言初学者，理解多重循环的运作机制就像在迷宫中寻找出口——每次你以为找到了…...
如何用SMUDebugTool彻底掌控你的AMD Ryzen处理器性能调优
如何用SMUDebugTool彻底掌控你的AMD Ryzen处理器性能调优 【免费下载链接】SMUDebugTool A dedicated tool to help write/read various parameters of Ryzen-based systems, such as manual overclock, SMU, PCI, CPUID, MSR and Power Table. 项目地址: https://gitcode.co…...
高性能Windows流媒体服务器部署：5大核心技术与3种实战架构深度解析
高性能Windows流媒体服务器部署：5大核心技术与3种实战架构深度解析 【免费下载链接】srs-windows 项目地址: https://gitcode.com/gh_mirrors/sr/srs-windows 在Windows平台上构建专业级流媒体服务系统，需要综合考虑协议兼容性、性能优化和部署架…...
ARM PMU外部接口与性能监控寄存器详解
1. ARM性能监控寄存器外部接口深度解析性能监控单元(PMU)是现代处理器架构中用于硬件性能分析的核心模块，它通过一组可编程计数器实时捕获处理器微架构层面的各类事件。在ARMv8/v9架构中，PMU不仅可以通过系统寄存器访问，还提供了标准化的外部…...
手把手教你为WCH CH582移植CherryUSB主机栈（基于RT-Thread，含中断优化）
基于RT-Thread的WCH CH582 USB主机协议栈深度移植指南在嵌入式开发领域，USB主机功能的实现往往意味着设备能够直接连接各类USB外设，从简单的键盘鼠标到复杂的存储设备。对于使用WCH CH582这类RISC-V内核MCU的开发者而言，原厂SDK提供的USB主机…...
告别手写UI！用NXP GUI Guider拖拽设计LVGL界面，5分钟搞定音乐播放器Demo
嵌入式UI开发革命：5分钟用GUI Guider构建LVGL音乐播放器在嵌入式系统开发中，用户界面(UI)设计曾长期是工程师的痛点——既要考虑资源受限的硬件环境，又要实现流畅美观的交互体验。传统手动编写UI代码的方式不仅效率低下，调试过程更…...
为内部知识库问答机器人接入Taotoken多模型增强回答效果
🚀 告别海外账号与网络限制！稳定直连全球优质大模型，限时半价接入中。 👉 点击领取海量免费额度 为内部知识库问答机器人接入Taotoken多模型增强回答效果 构建一个高效的企业内部知识库问答机器人，核心挑战在于如何让…...
关联规则挖掘在Calabi-Yau流形Hodge数分析中的应用与复现
1. 项目概述：当数据挖掘遇见高维几何在理论物理和代数几何的交叉领域，Calabi-Yau流形一直扮演着核心角色。这些具有特殊拓扑结构的空间，不仅是弦理论中额外维度紧化的关键候选者，其本身丰富的数学性质也吸引着无数研究者。然而&am…...
接口测试用例设计：超详细防御体系与分层校验实践
1. 为什么“超详细”三个字在接口测试用例里不是修饰词，而是生死线我带过三支不同行业的测试团队——金融支付、SaaS中台、IoT设备管理平台。每次新人入职第一周，我都会收走他们写的前5条接口测试用例，逐行标红批注。不是因为格式不对&#x…...
天文时序数据分析：机器学习评估、半监督学习与无监督方法实战
1. 项目概述：当机器学习遇见星空 处理海量的天文时序数据，比如来自Kepler、TESS这些“巡天巨眼”的光变曲线，早已不是靠人眼一张张图去翻的时代了。数据量太大，噪声复杂，信号微弱，传统方法常常力不从心。这…...