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

CSS常用的样式

字体和文本样式

font-family: 定义文本字体。

font-size: 设置字体大小。

color: 设置文本颜色。

text-align: 水平对齐文本(左对齐、右对齐、居中、两端对齐)。

line-height: 设置行间距。

text-decoration: 控制文本装饰线(如下划线、删除线等)。

font-weight: 设置字体的粗细。

盒模型属性

width 和 height: 设置元素的宽度和高度。

padding: 在元素内容与边框之间添加空间(内边距)。

margin: 在元素外部添加空间(外边距)。

border: 设置元素边框的样式、宽度和颜色。

背景属性

background-color: 设置元素背景颜色。

background-image: 设置元素的背景图片。

background-repeat: 控制背景图片是否及如何重复。

background-position: 设置背景图片的位置。

background-size: 控制背景图片的尺寸。

显示和定位

display: 控制元素的显示类型,如块级元素 (block)、内联元素 (inline)、内联块级元素 (inline-block) 等。

position: 设置元素的定位类型,如静态定位 (static)、相对定位 (relative)、绝对定位 (absolute)、固定定位 (fixed)。 

toprightbottomleft: 当元素的 position 不是 static 时,用于精确定位元素。

浮动和清除

float: 使元素浮动,常用于布局中创建多列或环绕效果。

clear: 清除浮动,避免元素受到之前浮动元素的影响。

其他常用样式

opacity: 设置元素的不透明度。

visibility: 控制元素的可见性(可见、隐藏)。

overflow: 管理内容溢出的方式(如滚动、隐藏)。

cursor: 改变鼠标悬停时的光标形状。

z-index: 控制元素的堆叠顺序,尤其在使用定位时很重要。

CSS新特性

flexbox 和 grid: 弹性盒子布局和网格布局,用于构建响应式和复杂的页面布局。

clip-path: 用于裁剪元素为特定形状。

transition 和 animation: 实现元素的过渡效果和动画。

filter: 应用视觉效果,如模糊、灰度等。

@media: 媒体查询,用于实现响应式设计,根据屏幕尺寸、分辨率等条件应用样式。

http://www.lryc.cn/news/400961.html

相关文章:

  • 结合实体类型信息(2)——基于本体的知识图谱补全深度学习方法
  • 如何在电脑上演示手机上APP,远程排查移动端app问题
  • SQL Server 创建用户并授权
  • 网关设备BL122实现Modbus RTU/TCP转Profinet协议
  • 采购管理软件:改善初创企业的采购流程
  • Python 是一种用途广泛的编程语言,应用于各个领域
  • 【VUE】9、VUE项目中使用VUEX完成状态管理
  • 【eNSP模拟实验】单臂路由实现VLAN间通信
  • 哪些点权衡素材优秀与否
  • 服务器数据恢复—2块硬盘离线且热备盘未完全激活的raid5数据恢复案例
  • Excel 学习手册 - 精进版(包括各类复杂函数及其嵌套使用)
  • 【CUDA】thrust进行前缀和的操作
  • Qt-QPainter的使用总结
  • 轻松搞定GIS场景编辑,这款免费工具你一定要试试
  • 【笔记】一起齿轮箱的故障和相应的数学模拟实验
  • 官宣:百数低代码平台已顺利通过国家信息安全等级保护三级认证
  • Spring源码注解篇二:手写@Component注解
  • 云备份服务端
  • Jupyter Notebook 使用教程
  • Leetcode 100361100367.切割蛋糕的最小总开销
  • 单网口设备的IP地址识别-还原-自组网
  • 太速科技-FMC207-基于FMC 两路QSFP+光纤收发子卡
  • 昇思25天学习打卡营第13天|munger85
  • Python - Word转TXT文本,或TXT文本转Word
  • 链接追踪系列-00.es设置日志保存7天-番外篇
  • Vant Ui 最新访问地址
  • 【学习笔记】无人机(UAV)在3GPP系统中的增强支持(八)-通过无人机进行无线接入
  • PTrade量化交易终端常见问题11
  • 被动的机器人非线性MPC控制
  • 什么样的服务器是合乎直销网站标准