CSS基础属性大全

简介: CSS基础属性大全

文字属性

字体:font;


文本字体:font-family;


文本字号:font-size;


文本字体样式:font-style;


文本字体粗细:font-weight;


文本字体行高:line-height;


内容水平对齐:text=align;


文本缩进:text-index;


文本大小写:text-transform;


文本不换行:white-space;


文本溢出裁切:text-overflow;


文本下划线:text-decoration;


文本阴影:text-shadow;


颜色:color;


边框属性

边框:border


上下左右边框:border-top/right/bottom/left;


圆角边框:border-radius;


阴影:box-shadow;


尺寸属性

固定宽度:width;


最小宽度:min-width;


最大宽度:max-width;


固定高度:height;


最小高度:min-height;


最大高度:max-height;


溢出方式:overflow;


横向溢出:overflow-x;


纵向溢出:overflow-y;


背景属性

背景:background;


背景颜色:background-color;


背景图像:background-image;


铺排填充:background-repeat;


滚动固定:background-attachment;


背景图像位置:background-position;


背景尺寸大小:background-size;


盒子属性

外边距:margin;


外上右下左边距:margin-top/right/bottom/left;


内边距:padding;


内上右下左边距:padding-top/right/bottom/left;


浮动:float;


清除浮动:clear;


显示方式:display;


伪类属性

默认链接状态::link(a:link);


访问过的链接::visited(a:visited);


正在活动链接::active(a:active);


触发的状态:;hover(a:hover);


输入框焦点::focus(input:focus);


CSS3新增

前插入内容:::before(p::before);


后插入内容: ::after(p:after);


首个子元素::first-child;


该类型首个子元素::first-of-type;


父级第N哥子元素: :nth-child;


该类型第N个子元素:   :nth-of-type;


最后子元素:   :last-child;


该类型最后子元素: :last-of-type;


定位属性

定位方式:position;


层叠顺序:z-index


其他属性

列表样式:list-style;


表格:table;


鼠标手势:cursor;


不透明度:opacity;


轮廓:outline;


滚动条:scrollbar;


相关文章
|
8天前
|
前端开发
了解 css中 backface-visibility 属性
了解 css中 backface-visibility 属性
15 0
|
9天前
|
前端开发
CSS常用滤镜属性讲解
本文介绍了CSS滤镜的几种常用效果,包括高斯模糊、亮度和对比度调整、灰度化、图像反转、透明度调整、饱和度调整及复古滤镜等。例如,使用`blur(10px)`可使图像产生模糊效果,包裹层设置`overflow: hidden`可避免边缘模糊;`brightness(150%)`和`contrast(150%)`分别增强图像亮度和对比度;`grayscale(1)`将图像转为灰度;`invert(1)`实现图像颜色完全反转;`opacity(0.5)`调整图像半透明;`saturate(350%)`增加饱和度;`sepia(100%)`营造复古深褐色调;`hue-rotate(180deg)`改变
18 4
CSS常用滤镜属性讲解
|
9天前
|
前端开发
了解 css中 backface-visibility 属性
`backface-visibility` 是一个CSS属性,用于3D转换时控制元素背面的可见性,以优化渲染性能。默认情况下,背面被隐藏以减少不必要的渲染。此属性有两值:`visible` 表示背面可见;`hidden`(默认值)则隐藏背面。 通过双面卡片案例演示了其用法:两个重叠盒子,一个显示图片,另一个显示文字且初始状态为背面朝外。鼠标悬停时,图片盒子翻转显示背面,文字盒子翻转显示正面,同时设置 `backface-visibility: hidden` 以确保背面不被渲染。 兼容性良好,广泛支持现代浏览器。
20 2
了解 css中 backface-visibility 属性
|
2月前
|
前端开发
CSS中的边框属性:border、border-width、border-color、border-style 详解
CSS中的边框属性:border、border-width、border-color、border-style 详解
139 44
|
2月前
|
前端开发
CSS中的display属性:布局控制的关键
CSS中的display属性:布局控制的关键
135 42
|
2月前
|
前端开发 开发者
CSS列表属性:list-style系列属性详解
CSS列表属性:list-style系列属性详解
134 40
|
1月前
|
前端开发 容器
你不知道的css——1. 外在盒子、内在盒子,宽度和高度的计算,box-sizing属性
你不知道的css——1. 外在盒子、内在盒子,宽度和高度的计算,box-sizing属性
20 3
你不知道的css——1. 外在盒子、内在盒子,宽度和高度的计算,box-sizing属性
|
6天前
|
前端开发 UED 开发者
使用 CSS 的 line-height 属性来提高可读性
使用 CSS 的 line-height 属性来提高可读性
6 0
|
8天前
|
前端开发
CSS常用滤镜属性讲解
CSS常用滤镜属性讲解
17 0
|
1月前
|
前端开发
学习css的clip-path属性
【7月更文挑战第1天】了解CSS `clip-path`属性,用于定义元素显示区域的裁剪形状,如圆形、椭圆、多边形、矩形及SVG路径。通过配合过渡和动画,可创建动态交互效果。例如,`clip-path: circle(radius at center);`用于创建圆形裁剪,`polygon`用于自定义多边形。还可以使用`path()`引用SVG路径数据。[资源推荐:bennettfeely.com/clippy/](https://bennettfeely.com/clippy/),提供交互式工具测试不同形状。
39 0
学习css的clip-path属性