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…...
【快手拥抱开源】通过快手团队开源的 KwaiCoder-AutoThink-preview 解锁大语言模型的潜力
引言： 在人工智能快速发展的浪潮中，快手Kwaipilot团队推出的 KwaiCoder-AutoThink-preview 具有里程碑意义——这是首个公开的AutoThink大语言模型（LLM）。该模型代表着该领域的重大突破，通过独特方式融合思考与非思考…...
剑指offer20_链表中环的入口节点
链表中环的入口节点 给定一个链表，若其中包含环，则输出环的入口节点。 若其中不包含环，则输出null。 数据范围 节点 val 值取值范围 [ 1 , 1000 ] [1,1000] [1,1000]。 节点 val 值各不相同。 链表长度 [ 0 , 500 ] [0,500] [0,500]。 …...
土地利用/土地覆盖遥感解译与基于CLUE模型未来变化情景预测；从基础到高级，涵盖ArcGIS数据处理、ENVI遥感解译与CLUE模型情景模拟等
🔍 土地利用/土地覆盖数据是生态、环境和气象等诸多领域模型的关键输入参数。通过遥感影像解译技术，可以精准获取历史或当前任何一个区域的土地利用/土地覆盖情况。这些数据不仅能够用于评估区域生态环境的变化趋势，还能有效评价重大生态工程…...
C# 求圆面积的程序（Program to find area of a circle）
给定半径r，求圆的面积。圆的面积应精确到小数点后5位。 例子： 输入：r 5 输出：78.53982 解释：由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982，因为我们只保留小数点后 5 位数字。 输…...
Unsafe Fileupload篇补充-木马的详细教程与木马分享（中国蚁剑方式）
在之前的皮卡丘靶场第九期Unsafe Fileupload篇中我们学习了木马的原理并且学了一个简单的木马文件 本期内容是为了更好的为大家解释木马（服务器方面的）的原理，连接，以及各种木马及连接工具的分享 文件木马：https://w…...
华硕a豆14 Air香氛版，美学与科技的馨香融合
在快节奏的现代生活中，我们渴望一个能激发创想、愉悦感官的工作与生活伙伴，它不仅是冰冷的科技工具，更能触动我们内心深处的细腻情感。正是在这样的期许下，华硕a豆14 Air香氛版翩然而至，它以一种前所未有的方式&#x…...
JavaScript 数据类型详解
JavaScript 数据类型详解 JavaScript 数据类型分为 原始类型（Primitive） 和 对象类型（Object） 两大类，共 8 种（ES11）： 一、原始类型（7种） 1. undefined 定…...
Python 训练营打卡 Day 47
注意力热力图可视化 在day 46代码的基础上，对比不同卷积层热力图可视化的结果 import torch import torch.nn as nn import torch.optim as optim from torchvision import datasets, transforms from torch.utils.data import DataLoader import matplotlib.pypl…...
用递归算法解锁「子集」问题 —— LeetCode 78题解析
文章目录 一、题目介绍二、递归思路详解：从决策树开始理解三、解法一：二叉决策树 DFS四、解法二：组合式回溯写法（推荐）五、解法对比 递归算法是编程中一种非常强大且常见的思想，它能够优雅地解决很多复杂的…...
FOPLP vs CoWoS
以下是 FOPLP（Fan-out panel-level packaging 扇出型面板级封装）与 CoWoS（Chip on Wafer on Substrate）两种先进封装技术的详细对比分析，涵盖技术原理、性能、成本、应用场景及市场趋势等维度： 一、技术原…...