岩石教程

css 样式属性大全

2024-07-23 18:18:08 229
这份列表包含了常用的 CSS 样式属性及其可能的值，并提供了简单的示例以帮助理解它们的使用方式。希望这些信息对你有所帮助！

字体样式属性

属性可能的值描述示例
fontfont-style font-variant font-weight font-size line-height font-family设置字体的综合属性font: italic small-caps bold 16px/2 sans-serif;
font-family'Arial', sans-serif定义文本的字体系列font-family: 'Arial', sans-serif;
font-sizepx, em, rem, %设置字体大小font-size: 16px;
font-stylenormal, italic, oblique设置字体的样式font-style: italic;
font-weightnormal, bold, 100-900设置字体的粗细font-weight: bold;
font-variantnormal, small-caps设置字体的特殊样式，如小型大写字母font-variant: small-caps;
line-heightnormal, number, length设置行高line-height: 1.5;
letter-spacingnormal, length设置字符间距letter-spacing: 2px;
word-spacingnormal, length设置单词间距word-spacing: 4px;

文本样式属性

属性可能的值描述示例
colorcolor设置文本颜色color: #000;
text-alignleft, right, center, justify设置文本的水平对齐方式text-align: center;
text-decorationnone, underline, overline, line-through设置文本的装饰text-decoration: underline;
text-transformnone, uppercase, lowercase, capitalize设置文本的大小写转换text-transform: uppercase;
text-shadowh-shadow v-shadow blur-radius color添加文本阴影效果text-shadow: 2px 2px 5px #000;
white-spacenormal, nowrap, pre, pre-wrap, pre-line设置如何处理空白字符white-space: nowrap;
text-overflowclip, ellipsis设置当文本溢出容器时的处理方式text-overflow: ellipsis;

背景样式属性

属性可能的值描述示例
backgroundcolor image position size repeat origin clip attachment设置背景的综合属性background: #fff url('image.jpg') no-repeat center;
background-colorcolor设置背景颜色background-color: #ff0;
background-imageurl(image), none设置背景图片background-image: url('image.jpg');
background-repeatrepeat, repeat-x, repeat-y, no-repeat设置背景图片的重复方式background-repeat: no-repeat;
background-sizeauto, length, percentage, cover, contain设置背景图片的大小background-size: cover;
background-positionleft, right, top, bottom, center, length, percentage设置背景图片的位置background-position: center;
background-attachmentscroll, fixed, local设置背景图片的附件background-attachment: fixed;

边框样式属性

属性可能的值描述示例
borderborder-width border-style border-color设置边框的综合属性border: 1px solid #000;
border-widththin, medium, thick, length设置边框的宽度border-width: 2px;
border-stylenone, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset设置边框的样式border-style: solid;
border-colorcolor设置边框的颜色border-color: #000;
border-topborder-width border-style border-color设置上边框的综合属性border-top: 1px solid #000;
border-rightborder-width border-style border-color设置右边框的综合属性border-right: 1px solid #000;
border-bottomborder-width border-style border-color设置下边框的综合属性border-bottom: 1px solid #000;
border-leftborder-width border-style border-color设置左边框的综合属性border-left: 1px solid #000;
border-radiuslength, percentage设置边框的圆角border-radius: 10px;

布局样式属性

属性可能的值描述示例
displaynone, inline, block, inline-block, flex, grid, table, inline-table, list-item, run-in, compact, marker, table-column, table-column-group, table-footer-group, table-header-group, table-row, table-row-group, table-cell, ruby, ruby-base, ruby-text, ruby-base-container, ruby-text-container, contents设置元素的显示类型display: block;
positionstatic, relative, absolute, fixed, sticky设置元素的定位方式position: absolute;
topauto, length, percentage设置元素顶部位置top: 10px;
rightauto, length, percentage设置元素右侧位置right: 10px;
bottomauto, length, percentage设置元素底部位置bottom: 10px;
leftauto, length, percentage设置元素左侧位置left: 10px;
z-indexauto, number设置元素的堆叠顺序z-index: 10;
floatnone, left, right设置元素的浮动float: left;
clearnone, left, right, both设置元素浮动清除clear: both;
overflowvisible, hidden, scroll, auto设置当内容溢出容器时的处理方式overflow: hidden;
visibilityvisible, hidden, collapse设置元素的可见性visibility: hidden;
opacitynumber (0-1)设置元素的不透明度opacity: 0.5;

对齐样式属性

属性可能的值描述示例
vertical-alignbaseline, sub, super, top, text-top, middle, bottom, text-bottom, length, percentage设置元素的垂直对齐方式vertical-align: middle;
text-align-lastauto, left, right, center, justify, start, end设置最后一行的对齐方式text-align-last: justify;
align-itemsstretch, center, flex-start, flex-end, baseline设置flex容器的子项在交叉轴上的对齐方式align-items: center;
justify-contentflex-start, flex-end, center, space-between, space-around, space-evenly设置flex容器的子项在主轴上的对齐方式justify-content: space-between;

尺寸样式属性

属性可能的值描述示例
widthauto, length, percentage设置元素的宽度width: 100px;
heightauto, length, percentage设置元素的高度height: 100px;
max-widthnone, length, percentage设置元素的最大宽度max-width: 100%;
max-heightnone, length, percentage设置元素的最大高度max-height: 100%;
min-widthlength, percentage设置元素的最小宽度min-width: 50px;
min-heightlength, percentage设置元素的最小高度min-height: 50px;

边距和填充样式属性

| 属性 | 可能的值 | 描述 | 示例 | |-------------------|

--------------------------------------|----------------------------------------------------------------------|-----------------------------------------------------------| | margin | auto, length, percentage | 设置外边距的综合属性 | margin: 10px; | | margin-top | auto, length, percentage | 设置上外边距 | margin-top: 10px; | | margin-right | auto, length, percentage | 设置右外边距 | margin-right: 10px; | | margin-bottom | auto, length, percentage | 设置下外边距 | margin-bottom: 10px; | | margin-left | auto, length, percentage | 设置左外边距 | margin-left: 10px; | | padding | length, percentage | 设置内边距的综合属性 | padding: 10px; | | padding-top | length, percentage | 设置上内边距 | padding-top: 10px; | | padding-right | length, percentage | 设置右内边距 | padding-right: 10px; | | padding-bottom | length, percentage | 设置下内边距 | padding-bottom: 10px; | | padding-left | length, percentage | 设置左内边距 | padding-left: 10px; |

表格样式属性

属性可能的值描述示例
border-collapsecollapse, separate设置表格的边框是否合并border-collapse: collapse;
border-spacinglength设置单元格之间的边框间距border-spacing: 10px;
caption-sidetop, bottom设置表格标题的位置caption-side: top;
empty-cellsshow, hide设置是否显示空单元格empty-cells: show;
table-layoutauto, fixed设置表格的布局方式table-layout: fixed;

列表样式属性

属性可能的值描述示例
list-stylelist-style-type list-style-position list-style-image设置列表样式的综合属性list-style: disc inside none;
list-style-typedisc, circle, square, decimal, decimal-leading-zero, lower-roman, upper-roman, lower-greek, lower-alpha, upper-alpha, none设置列表项的标记类型list-style-type: circle;
list-style-positioninside, outside设置列表项标记的位置list-style-position: inside;
list-style-imageurl(image), none设置列表项标记的图像list-style-image: url('image.png');

动画样式属性

属性可能的值描述示例
@keyframesname, keyframe-selector, properties定义动画的关键帧@keyframes slide { 0% { left: 0; } 100% { left: 100px; } }
animationname duration timing-function delay iteration-count direction fill-mode play-state设置动画的综合属性animation: slide 2s linear 1s infinite alternate;
animation-namenone, keyframes设置动画的名称animation-name: slide;
animation-durationtime (e.g., 2s, 500ms)设置动画持续时间animation-duration: 2s;
animation-timing-functionease, linear, ease-in, ease-out, ease-in-out, step-start, step-end, `steps(int,startend), cubic-bezier(n,n,n,n)`设置动画的时间函数
animation-delaytime (e.g., 2s, 500ms)设置动画的延迟时间animation-delay: 1s;
animation-iteration-countinfinite, number设置动画的播放次数animation-iteration-count: infinite;
animation-directionnormal, reverse, alternate, alternate-reverse设置动画的播放方向animation-direction: alternate;
animation-fill-modenone, forwards, backwards, both设置动画的填充模式animation-fill-mode: both;
animation-play-staterunning, paused设置动画的播放状态animation-play-state: running;

变换样式属性

属性可能的值描述示例
transformnone, transform-functions设置元素的变换方式transform: rotate(45deg);
transform-originx-axis y-axis z-axis设置变换的基点transform-origin: 50% 50%;
transform-styleflat, preserve-3d设置变换样式transform-style: preserve-3d;
perspectivenone, length设置透视距离perspective: 1000px;
perspective-originx-axis y-axis设置透视基点perspective-origin: 50% 50%;
backface-visibilityvisible, hidden设置背面是否可见backface-visibility: hidden;

过渡样式属性

属性可能的值描述示例
transitionproperty duration timing-function delay设置过渡的综合属性transition: all 0.3s ease;
transition-propertynone, all, property设置应用过渡效果的属性transition-property: opacity;
transition-durationtime (e.g., 2s, 500ms)设置过渡效果的持续时间transition-duration: 0.3s;
transition-timing-functionease, linear, ease-in, ease-out, ease-in-out, step-start, step-end, `steps(int,startend), cubic-bezier(n,n,n,n)`设置过渡效果的时间函数
transition-delaytime (e.g., 2s, 500ms)设置过渡效果的延迟时间transition-delay: 0.1s;