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

news2024/10/6 12:35:58

字体样式

属性

属性值

说明

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.coloradmin.cn/o/1314287.html

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

相关文章

湖南财信:灰盒测试筑牢安全防线,保障差异化金融服务体系建设

湖南财信是国有独资公司,湖南省唯一的省级地方金融控股公司、省属国有大型骨干企业。湖南财信坚持金融科技战略,以数字化建设为驱动,创新融资服务手段,逐步打造出差异化产品与数字化服务体系,全方位、多维度推动金融服…

大语言模型:开启自然语言处理新纪元

导言 大语言模型,如GPT-3(Generative Pre-trained Transformer 3),标志着自然语言处理领域取得的一项重大突破。本文将深入研究大语言模型的基本原理、应用领域以及对未来的影响。 1. 简介 大语言模型是基于深度学习和变压器&…

WPF 基于TableControl的页面切换

文章目录 前言其它项目的UserControl切换TableControl添加按钮,隐去TableItem的Header 结论 前言 我想用WPF简单实现一个按钮视图切换的效果,但是我发现别人的实现效果非常的麻烦。 其它项目的UserControl切换 我网上找了个开源的项目,他是…

网络协议 - HTTP 协议详解

网络协议 - HTTP 协议详解 一 、基础概念URL请求和响应报文1. 请求报文2. 响应报文 二、HTTP 方法GETHEADPOSTPUTPATCHDELETEOPTIONSCONNECTTRACE 三、HTTP 状态码1XX 信息2XX 成功3XX 重定向4XX 客户端错误5XX 服务器错误 四、HTTP 首部通用首部字段请求首部字段响应首部字段实…

如何提升数据结构方面的算法能力?

谈及为什么需要花时间学算法,我至少可以列举出三个很好的理由。 (1)性能:选择正确的算法可以显著提升应用程序的速度。仅就搜索来说,用二分查找替 换线性搜索就能为我们帶来巨大的收益。 (2)安全性:如果你选用了错误的算法&…

软件供应链投毒 — NPM 恶意组件分析

聚焦源代码安全,网罗国内外最新资讯! 专栏供应链安全 数字化时代,软件无处不在。软件如同社会中的“虚拟人”,已经成为支撑社会正常运转的最基本元素之一,软件的安全性问题也正在成为当今社会的根本性、基础性问题。 随…

最新Redis7主从复制(保姆级教程)

前提准备:三台云服务器(吐血消费,点赞回血)也可以使用虚拟机创建三台,但是我搞了一天也连接不上,要是又可以连接上的大家可以教我一下,也可以参考一下或者大家可以参考一下这个大佬的配置&#…

【产品经理】产品增效项目落地,项目反哺产品成长

产品和项目是相辅相成的关系,产品的规范、成熟,为项目的快速落地提供支撑,项目的落地反哺产品,促进产品的成长成熟。 软件工程的初期是,我们需要什么,就立项项目,通过项目实现需要。 随着项目的…

hive的分区表和分桶表详解

分区表 Hive中的分区就是把一张大表的数据按照业务需要分散的存储到多个目录,每个目录就称为该表的一个分区。在查询时通过where子句中的表达式选择查询所需要的分区,这样的查询效率会提高很多。 静态分区表基本语法 创建分区表 create table dept_p…

k8s中pod监控数据在grafana中展示

实现目标:将kubesphere[K8S]中运行的pod监控数据在grafana平台进行展示。 前提说明:需要在k8s每个集群中内置的prometheus配置中将pod指标数据远程写入到victoriametrics持久化数据库中。 实现效果如下: CPU使用量: round(sum by (namespace, pod) (irate(container_cpu…

ControlNet Adding Conditional Control to Text-to-Image Diffusion Models

ControlNet: Adding Conditional Control to Text-to-Image Diffusion Models TL; DR:ControlNet 使得我们能通过输入额外的条件图(如 Canny 边缘、人体姿态、深度图等),对 SD 生成结果的空间位置有更准确的控制。它拷贝 SD 部分…

网络协议 - UDP 协议详解

网络协议 - UDP 协议详解 UDP概述UDP特点UDP的首部格式UDP校验 參考文章 基于TCP和UDP的协议非常广泛,所以也有必要对UDP协议进行详解。 UDP概述 UDP(User Datagram Protocol)即用户数据报协议,在网络中它与TCP协议一样用于处理数据包,是一种…

在前端开发中,什么是前端数据缓存(caching)?它有哪些应用场景?

聚沙成塔每天进步一点点 ⭐ 专栏简介 前端入门之旅:探索Web开发的奇妙世界 欢迎来到前端入门之旅!感兴趣的可以订阅本专栏哦!这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发…

C# WPF上位机开发(属性页面的设计)

【 声明:版权所有,欢迎转载,请勿用于商业用途。 联系信箱:feixiaoxing 163.com】 在软件开发中,属性或者参数设置是很重要的一个部分。这个时候如果不想通过动态添加控件的方法来处理的话,那么可以通过tab控…

解决Chrome同一账号在不同设备无法自动同步书签的问题

文章目录 一、问题与原因?2. 解决办法 一、问题与原因? 1.问题 使用谷歌Chrome浏览器比较头疼的问题就是:使用同一个Google账号,办公电脑与家用电脑的数据无法同步。比如:办公电脑中的书签、浏览记录等数据&#xff0…

Renyi散度:Renyi divergence

有关Renyi散度的基本介绍挺多博客已经写了。本文章主要介绍最基础的概念,以及近些年论文中为啥老喜欢引用这个概念。 一.基础概念 Renyi散度主要是描述两个分布之间的关系。对一个离散的概率分布X,其定义域记作,其实就是概率不为零的点的集…

Idea执行bat使用maven打包springboot项目成docker镜像并push到Harbor

如果执行以下命令失败,先把mvn的-q参数去掉,让错误输出到控制台。 《idea配置优化、Maven配置镜像、并行构建加速打包、解决maven打包时偶尔几个文件没权限的问题》下面的使用company-repo私有仓库和阿里云镜像仓库同时使用的配置参考。 bat echo off …

seleniumwire获取页面接口数据

selenium并不支持获取响应的数据,我们可以使用selenium-wire库,selenium-wire扩展了 Selenium 的 Python 绑定,可以访问浏览器发出的底层请求。 编写的代码与 Selenium 的方式相同。 1. 先安装seleniumwire的插件 pip install selenium-wir…

RS®SMM100A 矢量信号发生器具备毫米波测试功能的中档矢量信号发生器

R&SSMM100A 矢量信号发生器 具备毫米波测试功能的中档矢量信号发生器 R&SSMM100A 矢量信号发生器在 100 kHz 至 44 GHz 的频率范围内提供优越的射频特性。这款仪器覆盖现有无线标准所使用的 6 GHz 以下的频段、新定义的最高 7.125 GHz 的 5G NR FR1 和 Wi-Fi 6E 频段以…

基于轻量级yolov5-seg全系列【n/s/m/l/x】参数模型开发构建工业场景下不同参数量级的滚珠丝杠传动表面缺陷分割检测系统

工业场景下的滚珠丝杠传动表面缺陷分割检测系统在我们前面的博文中已经有了相关的开发实践了,感兴趣的话可以自行阅读即可: 《助力工业生产质检,基于轻量级yolov5-seg开发构建工业场景下滚珠丝杠传动表面缺陷分割检测系统》 前文主要是以se…