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

2023-12-15 12:03:27

字体样式

属性

属性值

说明

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

隐藏元素


文章来源:https://blog.csdn.net/weixin_55576134/article/details/135009165
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。