CSS新手入门笔记整理:CSS常用属性表

字体样式

属性

属性值

说明

font-family

微软雅黑/苹方

字体类型

font-size

数值

字体大小

font-weight

数值/关键字

字体粗细(字重)

font-style

  • normal(正常(默认值))
  • italic(斜体)
  • oblique(斜体)

字体风格

color

色值

字体颜色

文本样式

属性

属性值

说明

text-indent

数值/2em

首行缩进

text-align

  • left(左对齐(默认值))
  • center(居中对齐)
  • right(右对齐)
  • justify(两端对齐)

水平对齐

text-decoration

  • none(去除所有的划线效果(默认值))
  • underline(下划线)
  • line-through(中划线)
  • overline(顶划线)

文本修饰

text-transform

  • none(无转换 (默认值))
  • uppercase(转换为大写)
  • lowercase(转换为小写)
  • capitalize(只将每个英文单词首字母转换为大写)

大小写转换

line-height

数值

行高

letter-spacing

数值

字间距

word-spacing

数值

词间距(只针对英文单词)

vertical-align

  • top(顶部对齐)
  • middle(中部对齐)
  • baseline(基线对齐)
  • bottom(底部对齐)

垂直对齐


边框样式

属性

属性值

说明

border

  • 宽度值 样式 颜色值

边框的整体样式

border-width

  • 数值

边框的宽度

border-style

  • none(无样式)
  • dashed(虚线)
  • solid(实线)

边框的外观

border-color

  • 颜色名称
  • 色值
  • transparent(透明)

边框的颜色

border-radius

  • 数值

边框圆角

列表样式

属性

属性值

说明

list-style-type

  • none(去除列表项符号)

列表项符号

list-style-image

url(图片路径)

列表项图片


表格样式

属性

属性值

说明

caption-side

  • top(标题在顶部(默认值))
  • bottom(标题在底部)

标题位置

border-collapse

  • separate(边框分开,有空隙(默认值))
  • collapse(边框合并,无空隙)

边框合并

border-spacing

  • 数值

边框间距


图片样式

属性

属性值

说明

width

数值

宽度

height

数值

高度

border

数值

边框

text-align

  • left(左对齐(默认值))
  • center(居中对齐)
  • right(右对齐)

水平对齐

vertical-align

  • top(顶部对齐)
  • middle(中部对齐)
  • baseline(基线对齐)
  • bottom(底部对齐)

垂直对齐

float

left(元素向左浮动)

right(元素向右浮动)

文字环绕方式

背景样式

属性

属性值

说明

background-color

  • 色值

背景颜色

background-image

  • url(图片路径)

背景图片地址

background-repeat

  • repeat(在水平方向和垂直方向上同时平铺)
  • repeat-x(只在水平方向(x轴)上平铺)
  • repeat-y(只在垂直方向(y轴)上平铺)
  • no-repeat(不平铺)

背景图片平铺方式

background-position

  • 像素值/关键字;

背景图片位置

background-attachment

  • scroll(随元素一起滚动)
  • fixed(固定不动)

背景图片固定


超链接样式

属性

说明

a:link0

超链接“未访问”的样式

a:visited

超链接“访问后”的样式

a:hover

鼠标“经过”超链接的样式

a:active

鼠标“单击”超链接时的样式

cursor

鼠标外观


盒子模型

属性

属性值

说明

width

数值

宽度

height

数值

高度

border

数值

边框

margin

数值

外边距

padding

数值

内边距

浮动布局

属性

属性值

说明

float

left

左浮动

right

右浮动

clear

both

清除浮动

定位布局

属性

属性值

说明

position

fixed

固定定位

relative

相对定位

absolute

绝对定位

static

静态定位

溢出声名

属性

属性值

说明

overflow

visible

若内容溢出,则溢出内容可见(默认值)

hidden

若内容溢出,则溢出内容隐藏

scroll

若内容溢出,则显示滚动条

auto

auto 跟 scroll 很相似,不同的是 auto 值在盒子需要的时候会给它一个滚动条

元素类型转换

属性值

说明

display

inline

行内元素

block

块元素

inline-block

行内块元素

table

以表格形式显示,类似于 table 元素

table-row

以表格行形式显示,类似于 tr 元素

table-cell

以表格单元格形式显示,类似于 td 元素

none

隐藏元素


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

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

相关文章

云原生向量计算引擎 PieCloudVector:为大模型提供独特记忆

拓数派大模型数据计算系统(PieDataComputingSystem,缩写:πDataCS)在10月24日程序员节「大模型数据计算系统」2023拓数派年度技术论坛正式发布。πDataCS 以云原生技术重构数据存储和计算,「一份存储,多引擎…

我的NPI项目之Android 安全系列 -- 先认识一下ST33Jxxx

目前接触过的高通平台都没有集成单独的SE,安全运行环境都是高通自家的TEE,又言Trustzone。高通Keystore功能也是依赖TEE来实现的。那么,如果另外集成SE,那么高通的Keystore如何集成?TEE部分要如何配置? 最近…

Ubuntu Shutdown while other user logged on

1. sudo vim /etc/systemd/logind.conf 修改代码KillUserProcessesyes 2. sudo touch /etc/polkit-1/localauthority/50-local.d/multi-user-inhibit-shutdown-restart.pkla 3. 打开修改配置文件 sudo vim /etc/polkit-1/localauthority/50-local.d/multi-user-inhibit-shut…

TrustZone之总线请求

接下来,我们将查看系统中的总线请求者,如下图所示: 系统中的A型处理器具有TrustZone感知,并在每个总线访问中发送正确的安全状态。然而,大多数现代SoC还包含非处理器总线请求者,例如GPU和DMA控制器。 与完成…

MC-30A (32.768 kHz用于汽车应用的晶体单元)

MC-30A 32.768 kHz用于汽车应用的晶体,车规晶振中的热销型号之一。该款石英晶体谐振器,可以在-40 to 85 C的温度内稳定工作,能满足起动振动的要求。同时满足AEC-Q200无源元件质量标准认证,满足汽车仪表系统的所有要求。 频率范围…

蓝桥杯专题-真题版含答案-【基因牛的繁殖】【黄金分割数】【振兴中华】【圆周率与级数】

Unity3D特效百例案例项目实战源码Android-Unity实战问题汇总游戏脚本-辅助自动化Android控件全解手册再战Android系列Scratch编程案例软考全系列Unity3D学习专栏蓝桥系列ChatGPT和AIGC 👉关于作者 专注于Android/Unity和各种游戏开发技巧,以及各种资源分…

Apache Flume(4):日志文件监控

1 案例说明 企业中应用程序部署后会将日志写入到文件中,可以使用Flume从各个日志文件将日志收集到日志中心以便于查找和分析。 2 使用Exec Soucre Exec Source Exec Source通过指定命令监控文件的变化,加粗属性为必须设置的。 属性名默认值说明chan…

ida脚本环境开发配置idapythonidacpp三端环境(win,mac,linux)

ida脚本也有一段时间了,一直有个痛点是找不到比较好的方法热重载脚本来实时改动生效,导致开发效率老慢了。固总结下比较友好的环境搭配 使用ida热加载插件让你开发脚本更高效 github地址: GitHub - 0xeb/ida-qscripts: An IDA plugin to increase productivity when developi…

【Spark精讲】Spark与MapReduce对比

目录 对比总结 MapReduce流程 ​编辑 MapTask流程 ReduceTask流程 MapReduce原理 阶段划分 Map shuffle Partition Collector Sort Spill Merge Reduce shuffle Copy Merge Sort 对比总结 Map端读取文件:都是需要通过split概念来进行逻辑切片&…

CVE-2023-50164 Apache Struts2漏洞复现

CVE-2023-50164 简介: 从本质上讲,该漏洞允许攻击者利用 Apache Struts 文件上传系统中的缺陷。它允许他们操纵文件上传参数并执行路径遍历。这种利用可能会导致在服务器上执行任意代码,从而导致各种后果,例如未经授权的数据访问…

DS冲刺整理做题定理(四)查找与排序

最后一期更新,考试之前应该不会再出该专题了,之后有时间会出一些有关链表的代码题,其他章节只挑选重点的总结~ 一.查找 1.顺序查找 又被称为线性查找,对顺序表和链表都使用~基本思想是从某一端开始,逐个检查关键字是否…

GZ015 机器人系统集成应用技术样题1-学生赛

2023年全国职业院校技能大赛 高职组“机器人系统集成应用技术”赛项 竞赛任务书(学生赛) 样题1 选手须知: 本任务书共 25页,如出现任务书缺页、字迹不清等问题,请及时向裁判示意,并进行任务书的更换。参赛队…

idea__SpringBoot微服务12——整合Mybatis框架(新依赖)(新注解)

整合Mybatis框架 完整项目地址:一、创建一个新的项目,导入mybatis依赖,lombok依赖。二、idea内置数据库管理工具连接数据库。三、编写实体类。四、编写Mapper接口。(新注解)五、编写Mapper.XML。六、编写数据库连接文件…

OpenCV中的格式转换

目录 1. 前言2. 采集到播放数据流的走向3. OpenCV中的格式转换3.1 RGB3.2 YUV3.2.1 YUV420{P}3.2.2 YUV420SP 4 简单应用5. 关联文章 1. 前言 实际音视频开发过程芯片是做了硬件加速的,主要涉及到视频编解码。二次开发过程中需要对SDK做一定的封装使用才行。 写这…

JMeter安装RabbitMQ测试插件

整体流程如下:先下载AMQP插件源码,可以通过antivy在本地编译成jar包,再将jar包导入JMeter目录下,重启JMeter生效。 Apache Ant 是一个基于 Java 的构建工具。Ant 可用于自动化构建和部署 Java 应用程序,使开发人员更轻…

MYSQl基础操作命令合集与详解

MySQL入门 先来个总结 SQL语言分类 DDL(Data Definition Language) - 数据定义语言: 用于定义和管理数据库结构,包括创建、修改和删除数据库对象。 示例:CREATE, ALTER, DROP等语句。 DML(Data Manipulation Lan…

常见箱包五金ERP有哪些?箱包五金ERP哪个好用

不同的箱包五金有不同的营销渠道和经营模式,而每一个营销渠道的商品信息维护流程和方式也不尽相同。另外,箱包五金价格制定、品质检验、产品种类、物料编码、批号追踪等环节的管理也比较繁琐。 近些年数字科技也被广泛的应用于箱包五金领域,…

Module ‘app‘: platform ‘android-33‘ not found.

目录 一、报错信息 二、解决方法 一、报错信息 Module app: platform android-33 not found. 检查你的应用程序的build.gradle文件中的targetSdkVersion和compileSdkVersion是否正确设置为已安装的Android SDK版本。 确保你的Android Studio已正确安装并配置了所需的Android …

TCP为什么可靠之“拥塞控制”

拥塞控制是对网络层面的控制,主要是为了避免发送方发送过多的数据导致网络阻塞,以及出现网络阻塞时能够调整数据发送速率,达到对网络阻塞的一个控制。 拥塞窗口 拥塞窗口cwnd,是发送方维护的一个状态变量,会根据网络…

Windows 11上边两个空格导致我多熬了1个多小时

将图中的文件路径复制,然后到文件管理器里边去搜索。 发现找不到,可是明明就在这里啊。 我百思不得其解,还以为是IDEA出了问题,我只能是重新启动项目,结果还是告诉我找不到文件。 要是同一个目录下已经有一个名为a…