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…...
RestClient
什么是RestClient RestClient 是 Elasticsearch 官方提供的 Java 低级 REST 客户端，它允许HTTP与Elasticsearch 集群通信，而无需处理 JSON 序列化/反序列化等底层细节。它是 Elasticsearch Java API 客户端的基础。 RestClient 主要特点 轻量级ÿ…...
基于FPGA的PID算法学习———实现PID比例控制算法
基于FPGA的PID算法学习 前言一、PID算法分析二、PID仿真分析1. PID代码2.PI代码3.P代码4.顶层5.测试文件6.仿真波形 总结 前言 学习内容：参考网站： PID算法控制 PID即：Proportional（比例）、Integral（积分&…...
前端开发面试题总结-JavaScript篇(一)
文章目录 JavaScript高频问答一、作用域与闭包1.什么是闭包（Closure）？闭包有什么应用场景和潜在问题？2.解释 JavaScript 的作用域链（Scope Chain） 二、原型与继承3.原型链是什么？如何实现继承&a…...
成都鼎讯硬核科技！雷达目标与干扰模拟器，以卓越性能制胜电磁频谱战
在现代战争中，电磁频谱已成为继陆、海、空、天之后的 “第五维战场”，雷达作为电磁频谱领域的关键装备，其干扰与抗干扰能力的较量，直接影响着战争的胜负走向。由成都鼎讯科技匠心打造的雷达目标与干扰模拟器，凭借数字射…...
（转）什么是DockerCompose?它有什么作用？
一、什么是DockerCompose? DockerCompose可以基于Compose文件帮我们快速的部署分布式应用，而无需手动一个个创建和运行容器。 Compose文件是一个文本文件，通过指令定义集群中的每个容器如何运行。 DockerCompose就是把DockerFile转换成指令去运行。 …...
[Java恶补day16] 238.除自身以外数组的乘积
给你一个整数数组 nums，返回 数组 answer ，其中 answer[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积 。 题目数据 保证 数组 nums之中任意元素的全部前缀元素和后缀的乘积都在 32 位 整数范围内。 请 不要使用除法，且在 O(n) 时间复杂度…...
select、poll、epoll 与 Reactor 模式
在高并发网络编程领域，高效处理大量连接和 I/O 事件是系统性能的关键。select、poll、epoll 作为 I/O 多路复用技术的代表，以及基于它们实现的 Reactor 模式，为开发者提供了强大的工具。本文将深入探讨这些技术的底层原理、优缺点。 一、I…...
安宝特方案丨船舶智造的“AR+AI+作业标准化管理解决方案”（装配）
船舶制造装配管理现状：装配工作依赖人工经验，装配工人凭借长期实践积累的操作技巧完成零部件组装。企业通常制定了装配作业指导书，但在实际执行中，工人对指导书的理解和遵循程度参差不齐。 船舶装配过程中的挑战与需求 挑战 (1…...
NXP S32K146 T-Box 携手 SD NAND（贴片式TF卡）：驱动汽车智能革新的黄金组合
在汽车智能化的汹涌浪潮中，车辆不再仅仅是传统的交通工具，而是逐步演变为高度智能的移动终端。这一转变的核心支撑，来自于车内关键技术的深度融合与协同创新。车载远程信息处理盒（T-Box）方案：NXP S32K146 与…...
Windows安装Miniconda
一、下载 https://www.anaconda.com/download/success 二、安装 三、配置镜像源 Anaconda/Miniconda pip 配置清华镜像源_anaconda配置清华源-CSDN博客 四、常用操作命令 Anaconda/Miniconda 基本操作命令_miniconda创建环境命令-CSDN博客...