CSS基础属性

news/发布时间2024/5/15 19:09:29

【三】基础属性

【1】高度和宽度

（1）参数

  • width（宽度）：用于设置元素的宽度。可以使用具体的数值（如像素值）或百分比来指定宽度。

  • height（高度）：用于设置元素的高度，使用方式与 width 属性类似。

  • max-width（最大宽度）：用于设置元素的最大宽度，防止元素的宽度超过指定的值。

  • max-height（最大高度）：用于设置元素的最大高度，防止元素的高度超过指定的值。

  • min-width（最小宽度）：用于设置元素的最小宽度，确保元素的宽度不会小于指定的值。

  • min-height（最小高度）：用于设置元素的最小高度，确保元素的高度不会小于指定的值。

  • 单位：像素（px）、百分比（%）

（2）注意事项
  • 行内标签无法设置高度和宽度，写了也无法生效
  • 行内标签的高度是由其内容决定的，并且会根据内容的大小自动调整
<!DOCTYPE html>
<html>
<head><title>页面标题</title><meta charset="UTF8"><style>div, span{background-color: green;height: 50px;width: 50px;}</style>
</head>
<div>块级标签</div>
<br>
<span>行内标签</span>
</html>

请添加图片描述

【2】字体属性

  • 字体属性用于控制文本的字体样式和外观
（1）参数
  • font-family（字体系列）：用于指定文本的字体系列。您可以通过指定多个字体名称来创建字体回退机制，以确保在用户计算机上找不到第一个字体时能够使用备用字体。
  • font-size（字体大小）：用于设置文本的字体大小。可以使用像素（px）、百分比（%）或其他单位来指定字体大小。
  • font-weight（字体粗细）：用于设置文本的字体粗细。常用的取值包括 normal（普通）、bold（粗体）、bolder（更粗）和 lighter（更细）。
  • font-style（字体样式）：用于设置文本的字体样式，常用的取值包括 normal（普通）、italic（斜体）和 oblique（倾斜）
  • color （颜色）：可以使用预定义的颜色名称（如 red、blue、green 等），也可以使用十六进制值（如 #ff0000 表示红色）或 RGB 值（如 rgb(255, 0, 0) 也表示红色）来指定颜色。
（2）示例
  • 如果用户计算机上安装了 Arial 字体，则使用 Arial 字体显示文本；如果没有 Arial 字体，则使用 Helvetica 字体；如果连 Helvetica 字体也没有，则使用 sans-serif 字体作为备选
p {font-family: Arial, Helvetica, sans-serif;
}
  • 字体：大小24像素、加粗、斜体
p {font-size: 24px;font-weight: bold;font-style: italic;
}

【3】文字属性

  • 文字属性用于控制文本的布局、间距和装饰等
（1）参数

  • text-align（文本对齐）：用于设置文本在容器中的对齐方式。常用的取值包括 left（左对齐）、right（右对齐）、center（居中对齐）和 justify（两端对齐）。

  • text-decoration（文本装饰）：用于设置文本的装饰效果，如下划线、删除线等。常用的取值包括 none（无装饰）、underline（下划线）、overline（上划线）和 line-through（删除线）。

  • text-transform（文本转换）：用于控制文本的大小写转换。常用的取值包括 none（不转换）、uppercase（转换为大写字母）和 lowercase（转换为小写字母）。

  • letter-spacing（字间距）：用于设置字母之间的间距。可以使用像素（px）或其他单位来指定间距值

  • text-indent （首行缩进）：该属性用于指定文本块中首行相对于其余行的缩进量。可以使用像素（px）、百分比（%）或其他单位来指定缩进值。

（2）示例
  • 文本上划线、转换为大写、字间距5个像素
  • 首行缩进两个字符、居中（比缩进优先级高）
p {text-align: center;text-decoration: overline;text-transform: uppercase;letter-spacing: 5px;text-indent: 2em;
}

【4】背景属性

  • 背景属性用于设置元素的背景样式，包括背景颜色、背景图片、背景重复等
（1）参数
  • background-color（背景颜色）：用于设置元素的背景颜色。可以使用颜色名称、十六进制值或 RGB 值来指定颜色。
  • background-image（背景图片）：用于设置元素的背景图片。可以使用图片的 URL 来指定背景图片。
  • background-repeat（背景重复）：用于设置背景图片的重复方式。常用的取值包括 repeat（默认，水平和垂直重复）、repeat-x（水平重复）、repeat-y（垂直重复）和 no-repeat（不重复）
  • background-position（背景位置）：用于设置背景图片的位置。可以使用关键词（如 top、bottom、left、right）或像素（px）来指定位置。第一个参数控制左边的距离，第二个参数是上距离。
  • background-attachment （背景附着）：该属性用于指定背景图片是否随元素的滚动而滚动，或者固定在视口中的位置不动。
    • scroll（默认值）：背景图片会随元素的滚动而滚动。
    • fixed：背景图片会固定在视口中的位置，不随元素的滚动而滚动。
    • local：背景图片会随元素内部内容的滚动而滚动，即背景图片不会超出元素的边界。
    • inherit：从父元素继承 background-attachment 的值。
    • 注意：在移动设备上，fixed 值可能会导致背景图片无法正常显示
  • background-size 控制背景图片的缩放比例和大小，属性接受两个参数，分别用于指定背景图片的宽度和高度。常用的取值包括：
    • auto（默认值）：保持背景图片的原始大小。
    • cover：将背景图片等比例缩放，使其完全覆盖背景区域。可能会裁剪图片。
    • contain：将背景图片等比例缩放，使其完全适应背景区域。可能会在背景区域内留有空白。
    • <length>：使用具体的长度值（如像素或百分比）来指定背景图片的宽度和高度。
    • <percentage>：使用百分比值来指定背景图片的宽度和高度，相对于背景区域的大小。
（2）示例
  • 背景图片image、背景图片重复（默认）
  • 背景附着固定、图片大小等比例缩放完全适应
div {width: 400px;height: 400px;background-image: url("image.jpg");background-attachment: fixed;background-size: contain;
}

【5】边框属性

  • 设置元素的边框样式、宽度和颜色
（1）参数
  • border-width（边框宽度）：可以使用具体的长度值（如像素）或预定义的关键字来指定边框的宽度。常用的关键字包括 thin、medium 和 thick，分别代表细、中等和粗的边框宽度。
  • border-style（边框样式）：可以使用预定义的样式关键字或具体的样式值来指定边框的样式。常用的样式关键字包括 solid（实线）、dashed（虚线）、dotted（点线）、double（双线）等。
  • border-color（边框颜色）：可以使用颜色名称、十六进制值、RGB 值或 HSL 值来指定边框的颜色。
  • border-radius （边框圆角）：
    • 单个长度值：指定所有四个角的圆角半径，例如 border-radius: 10px;。
    • 两个长度值：第一个值指定左上角和右下角的圆角半径，第二个值指定右上角和左下角的圆角半径，例如 border-radius: 10px 20px;。
    • 四个长度值：分别指定左上角、右上角、右下角和左下角的圆角半径，顺序为顺时针方向，例如 border-radius: 10px 20px 30px 40px;。
（2）示例
  • 四周边框
  • 宽2个像素、虚线、红色、圆角10像素
/*两种方式等价，参数顺序无所谓*/
div{border-width: 2px;border-style: dashed;border-color: red;border-radius: 10px;
}
div {border: 2px dashed red;border-radius: 10px;
}

  • 仅左边有边框

  • 宽4个像素、实线、蓝色

div{border-left: 4px solid blue;
}

【6】显示属性display

  • 控制元素在页面中的显示方式
（1）参数
  • block：将元素显示为块级元素，会独占一行，并且默认情况下会在上下方向上产生一定的间距。块级元素可以设置宽度、高度、内边距和外边距。
  • inline：将元素显示为内联元素，不会独占一行，会在同一行内尽可能占据所需的空间。内联元素不能设置宽度、高度、上下内边距和上下外边距。
  • inline-block：将元素显示为内联块级元素，不会独占一行，但可以设置宽度、高度、内边距和外边距。内联块级元素会在同一行内尽可能占据所需的空间。
  • none：将元素隐藏，不会在页面中显示。隐藏的元素不会占据空间，并且对页面布局没有影响。
  • table：用于设置元素的显示类型为表格。该元素将按照表格的方式进行布局和显示，类似于HTML中的<table>元素
（2）示例
  • 行内标签也可以设置宽度和高度
<!DOCTYPE html>
<html>
<head><title>页面标题</title><meta charset="UTF8"><style>
div, span {background-color: aqua;height: 50px;width: 50px;
}
span{display: block;
}</style>
</head>
<div>块级标签</div>
<br>
<span>行内标签</span>
</html>

请添加图片描述

  • 隐藏

  • display:none    隐藏标签(重点)  页面上不会保留位置也不显示
visibility:hidde  也是隐藏标签 但是位置会保留

<!DOCTYPE html>
<html>
<head><title>页面标题</title><meta charset="UTF8"><style>p, div, span{background-color: aqua;}p {display: none;}div {visibility: hidden;}</style>
</head>
<p>段落标签</p>
<div>块级标签</div>
<br>
<span>行内标签</span>
</html>

请添加图片描述

【7】溢出属性overflow

  • 溢出属性（overflow property）用于控制当内容超出容器尺寸时的处理方式。
  • 应用于具有限定尺寸的容器
（1）参数
  • visible：默认值。当内容超出容器尺寸时，会显示在容器外部，可能会覆盖其他元素。这意味着溢出的内容会在容器外部可见。
  • hidden：当内容超出容器尺寸时，会被裁剪隐藏，不会显示在容器外部。溢出的内容将被隐藏，无法通过滚动或其他方式查看。
  • scroll：当内容超出容器尺寸时，会显示滚动条，以便用户可以通过滚动来查看溢出的内容。即使内容没有超出容器尺寸，也会显示滚动条，但是处于禁用状态。
  • auto：当内容超出容器尺寸时，会根据需要显示滚动条。如果内容没有超出容器尺寸，不会显示滚动条。
（2）示例
<!DOCTYPE html>
<html>
<head><title>页面标题</title><meta charset="UTF8"><style>div {height: 100px;width: 100px;border: 5px solid red;float: left;margin: 20px;}.d1 {overflow: visible;}.d2 {overflow: hidden;}.d3 {overflow: scroll;}.d4 {overflow: auto;}</style>
</head>
<body>
<span><div class="d1">人类文明可能发生技术突变的领域有：物理学、生物学、计算机科学、寻找外星文明。其中寻找外星文明是所有技术领域中变数最大的，一旦发生，其影响力将超过另外三个领域的总和。</div><div class="d2">人类文明可能发生技术突变的领域有：物理学、生物学、计算机科学、寻找外星文明。其中寻找外星文明是所有技术领域中变数最大的，一旦发生，其影响力将超过另外三个领域的总和。</div><div class="d3">人类文明可能发生技术突变的领域有：物理学、生物学、计算机科学、寻找外星文明。其中寻找外星文明是所有技术领域中变数最大的，一旦发生，其影响力将超过另外三个领域的总和。</div><div class="d4">人类文明可能发生技术突变的领域有：物理学、生物学、计算机科学、寻找外星文明。其中寻找外星文明是所有技术领域中变数最大的，一旦发生，其影响力将超过另外三个领域的总和。</div>
</span></body>
</html>

请添加图片描述

  • 头像
<!DOCTYPE html>
<html>
<head><title>页面标题</title><meta charset="UTF8"><style>body {margin: 0;background-color: #4e4e4e;}#d1 {height: 200px;width: 200px;border-radius: 50%;border: 3px solid white;margin: 0 auto;overflow: hidden;}#d1 > img {width: 100%; /* 占标签100%比例 */}</style>
</head>
<body>
<div id="d1"><img src="image.jpg" alt="">
</div></body>
</html>

【8】透明度opacity

  • 指元素或颜色的可见程度
（1）参数
  • opacity 属性：
    • opacity 属性用于设置元素的整体透明度。
    • 它的取值范围是 0 到 1，其中 0 表示完全透明，1 表示完全不透明。
    • 透明度的值会影响元素及其内容的可见程度。
    • 例如，设置 opacity: 0.5; 将使元素半透明，即可见度为 50%。
  • rgba() 函数：
    • rgba() 函数用于设置颜色的透明度。
    • 它接受四个参数：红色值、绿色值、蓝色值和透明度值。
    • 透明度值的范围是 0 到 1，其中 0 表示完全透明，1 表示完全不透明。
    • 例如，background-color: rgba(255, 0, 0, 0.5); 将设置背景色为红色，并将透明度设置为 50%。
（2）示例
<!DOCTYPE html>
<html>
<head><title>页面标题</title><meta charset="UTF8"><style>#p1 {opacity: 0.5;}#p2 {background-color: rgba(255, 0, 0, 0.5);}</style>
</head>
<body>
<p id="p1">段落二</p>
<p id="p2">段落一</p>
</body>
</html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.bcls.cn/YKsV/2169.shtml

如若内容造成侵权/违法违规/事实不符，请联系编程老四网进行投诉反馈email:xxxxxxxx@qq.com，一经查实，立即删除！

相关文章

深信服技术认证“SCCA-C”划重点：深信服超融合HCI

深信服技术认证“SCCA-C”划重点：深信服超融合HCI

为帮助大家更加系统化地学习云计算知识&#xff0c;高效通过云计算工程师认证&#xff0c;深信服特推出“SCCA-C认证备考秘笈”&#xff0c;共十期内容。“考试重点”内容框架&#xff0c;帮助大家快速get重点知识 划重点来啦 *点击图片放大展示 深信服云计算认证&#xff08;S…
阅读更多...
Android 沉浸式状态栏

Android 沉浸式状态栏

过时的API //设置默认隐藏虚拟按键&#xff0c;虚拟按键显示后为半透明protected open fun hideNavigationBarAndFullScreen() {val flags: Int// This work only for android 4.4flags if (Build.VERSION.SDK_INT > Build.VERSION_CODES.KITKAT) {// This work only for a…
阅读更多...
用HTML5实现动画

用HTML5实现动画

用HTML5实现动画 要在HTML5中实现动画&#xff0c;可以使用以下几种方法&#xff1a;CSS动画、使用<canvas>元素和JavaScript来实现动画、使用JavaScript动画库。重点介绍前两种。 一、CSS动画 CSS3 动画&#xff1a;使用CSS3的动画属性和关键帧&#xff08;keyframes&…
阅读更多...
论文阅读_用模型模拟记忆过程

论文阅读_用模型模拟记忆过程

英文名称: A generative model of memory construction and consolidation 中文名称: 记忆构建和巩固的生成模型 文章: https://www.nature.com/articles/s41562-023-01799-z 代码: https://github.com/ellie-as/generative-memory 作者: Eleanor Spens, Neil Burgess&#xff…
阅读更多...
算法沉淀——多源 BFS（leetcode真题剖析）

算法沉淀——多源 BFS（leetcode真题剖析）

算法沉淀——多源 BFS&#xff08;leetcode真题剖析&#xff09; 01.矩阵02.飞地的数量03.地图中的最高点04.地图分析 多源 BFS 是指从多个源点同时进行广度优先搜索的算法。在传统的 BFS 中&#xff0c;我们通常从一个起始点开始&#xff0c;逐层遍历所有的相邻节点。而在多…
阅读更多...
Code Composer Studio (CCS) - 文件比较

Code Composer Studio (CCS) - 文件比较

Code Composer Studio [CCS] - 文件比较 References 鼠标单击选中一个文件&#xff0c;再同时按住 Ctrl 鼠标左键来选中第二个文件&#xff0c;在其中一个文件上鼠标右击选择 Compare With -> Each Other. References [1] Yongqiang Cheng, https://yongqiang.blog.csdn.n…
阅读更多...
遥感影像目标检测：从CNN（Faster-RCNN）到Transformer（DETR）

遥感影像目标检测：从CNN（Faster-RCNN）到Transformer（DETR）

我国高分辨率对地观测系统重大专项已全面启动&#xff0c;高空间、高光谱、高时间分辨率和宽地面覆盖于一体的全球天空地一体化立体对地观测网逐步形成&#xff0c;将成为保障国家安全的基础性和战略性资源。未来10年全球每天获取的观测数据将超过10PB&#xff0c;遥感大数据时…
阅读更多...
Swift Combine 使用调试器调试管道 从入门到精通二十六

Swift Combine 使用调试器调试管道 从入门到精通二十六

Combine 系列 Swift Combine 从入门到精通一Swift Combine 发布者订阅者操作者 从入门到精通二Swift Combine 管道 从入门到精通三Swift Combine 发布者publisher的生命周期 从入门到精通四Swift Combine 操作符operations和Subjects发布者的生命周期 从入门到精通五Swift Com…
阅读更多...
linux CentOs 安装docker 推荐生产环境使用

linux CentOs 安装docker 推荐生产环境使用

目录 1. 在CentOs上安装docker所需的系统环境 2. 卸载旧版本 2.1 查看是否已安装docker 2.2 卸载已安装的docker 3. 安装方式 3.1 使用rpm存储库安装(推荐使用该方法) 3.2 从包中安装 4. 开始docker 1. 在CentOs上安装docker所需的系统环境 需要以下CentOS版本之一的维…
阅读更多...
「Qt Widget中文示例指南」如何实现文档查看器？（一）

「Qt Widget中文示例指南」如何实现文档查看器？（一）

Qt 是目前最先进、最完整的跨平台C开发工具。它不仅完全实现了一次编写&#xff0c;所有平台无差别运行&#xff0c;更提供了几乎所有开发过程中需要用到的工具。如今&#xff0c;Qt已被运用于超过70个行业、数千家企业&#xff0c;支持数百万设备及应用。 文档查看器是一个显…
阅读更多...
Python 写网络监控

Python 写网络监控

大家好&#xff01;我是爱摸鱼的小鸿&#xff0c;关注我&#xff0c;收看每期的编程干货。 网络监控是保障网络可靠性的一项重要任务。通过实时监控网络性能&#xff0c;我们可以及时发现异常&#xff0c;迅速采取措施&#xff0c;保障网络畅通无阻。本文将以 Python为工具&…
阅读更多...
SQL注入：网鼎杯2018-unfinish

SQL注入：网鼎杯2018-unfinish

目录 使用dirmap扫描 使用dirsearch扫描 使用acunetix扫描 爆破后端过滤的字符 绕过限制获取数据 这次的进行SQL注入的靶机是&#xff1a;BUUCTF在线评测 进入到主页面后发现是可以进行登录的&#xff0c;那么我们作为一个安全人员&#xff0c;那肯定不会按照常规的方式来…
阅读更多...
【C++练级之路】【Lv.8】【STL】list类的模拟实现

【C++练级之路】【Lv.8】【STL】list类的模拟实现

快乐的流畅&#xff1a;个人主页 个人专栏&#xff1a;《C语言》《数据结构世界》《进击的C》 远方有一堆篝火&#xff0c;在为久候之人燃烧&#xff01; 文章目录 引言一、结点二、迭代器2.1 成员变量与默认成员函数2.2 operator*2.3 operator->2.4 operator2.5 operator- …
阅读更多...
Springcloud：LiteFlow

Springcloud：LiteFlow

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 目录 一、LiteFlow简介 二、规则编排关键字及语法 1、THEN&#xff1a; 2、WHEN&#xff1a; 3、AND&#xff1a; 4、OR&#xff1a; 5、IF&#xff1a; 6、ELSE&…
阅读更多...
flink如何利用checkpoint保证数据状态一致性

flink如何利用checkpoint保证数据状态一致性

flink数据状态一致性 1状态一致性级别1.1 AT-MOST-ONCE (最多一次)&#xff1a;1.2 AT-LEAST-ONCE (至少一次)&#xff1a;1.3 EXACTLY-ONCE (精确一次)&#xff1a;1.4 分布式快照与至少一次事件传递和重复数据删除的比较 2flink内部实现状态一致性3 端到端的一致性3.1 Source…
阅读更多...
OpenHarmony—UIAbility组件与UI的数据同步

OpenHarmony—UIAbility组件与UI的数据同步

基于HarmonyOS的应用模型&#xff0c;可以通过以下两种方式来实现UIAbility组件与UI之间的数据同步。 使用EventHub进行数据通信&#xff1a;基于发布订阅模式来实现&#xff0c;事件需要先订阅后发布&#xff0c;订阅者收到消息后进行处理。使用globalThis进行数据同步&#…
阅读更多...
【云原生】持续集成持续部署

【云原生】持续集成持续部署

本文主要总结CI/CD的流程&#xff0c;不会详细介绍每个知识点。 啥是集成&#xff1f;啥是部署&#xff1f; 集成&#xff0c;就是把应用程序、相关环境、配置全局打包放在一个容器中的操作。部署就不解释了。 CI/CD 如果是自己手动部署的话&#xff0c;流程应该是这样的&am…
阅读更多...
Git 关于SSH密钥的生成

Git 关于SSH密钥的生成

一&#xff1a;配置ssh 桌面右键鼠标打开 “Git Bash Here” 键入命令&#xff1a;ssh-keygen -t ed25519 -C "自己邮箱 " 接着就一路回车 打开 C:\Users\Administrator.ssh 目录&#xff0c; 复制 id_xxxxx.pub 内容 文件里面则是一些信息&#xff0c;如下 …
阅读更多...
防止员工办公终端文件数据\资料外泄

防止员工办公终端文件数据\资料外泄

为了防止员工办公终端的文件数据资料外泄&#xff0c;可以采取以下一系列措施&#xff1a; www.drhchina.com 制定明确的安全政策&#xff1a;首先&#xff0c;企业需要制定明确的信息安全政策&#xff0c;明确禁止员工将敏感数据泄露给外部人员或机构。政策应详细说明员工在处…
阅读更多...
WordPress后台自定义登录和管理页面插件Admin Customizer

WordPress后台自定义登录和管理页面插件Admin Customizer

WordPress默认的后台登录页面和管理员&#xff0c;很多站长都想去掉或修改一些自己不喜欢的功能&#xff0c;比如登录页和管理页的主题样式、后台左侧菜单栏的某些菜单、仪表盘的一些功能、后台页眉页脚某些小细节等等。这里boke112百科推荐这款可以让我们轻松自定义后台登录页…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站 尧图建网站 广利置业