当前位置：首页 > news >正文

css常用属性有哪些

news 来源：原创 2025/6/18 16:13:15

在上篇文章我们知道了利用css选择器来对HTML进行简单装饰，就像做word文档一样，需要对哪一段落修改格式，就需要先选中，css选择器就是这意思。这格式如何修改，怎么放大字体，怎么加粗，怎么修改背景色等等，就需要知道我们继续熟悉css有哪些常用的属性了。

css常用属性

1.文本属性

color 字体颜色 p { color :red; } 或者 p { color : #ff0000;} //属性值可以是英文单词，也可以是颜色的十六进制代码；
line-height：行高。取值为：数值、单位或百分比
text-align：文本行内文的本水平对齐方式。取值为：left、right 、 center、justify
vertical-align：文本行内的文本垂直对齐方式。取值为：baseline、top、middle、bottom
text-indent：文本的首行缩进。取值为：px、em 等
text-decoration：文本装饰线。

text-decoration：underline | line-through | overline | none下划线 | 删除线 | 上划线 | 无装饰线

word-spacing：单词间距。与letter-spacing类似，但作用于单词之间，所以只对英文有效
white-space：空白的处理方式。文本超出后是否换行。取值：nowrap以防止文本换行
font-size：字体大小。值为绝对单位（如px、pt）或相对单位（如em、rem、%）
font-weight：字体粗细。值为关键字（normal、bold等）或数值（100到900）
font-style：字体风格。值为 normal普通 | italic斜体
font-family：字体系列。可指定多个字体名称，以逗号分隔，浏览器将使用第一个可用的字体。如：微软雅黑，宋体…等（但需要系统已安装）
font：简写属性，font : font-style | font-weight | font-size | font-family。必需按顺序写

2.盒子模型属性

width:宽度 width：100px|80%|auto;
height:高度 height: 100px | 80% | auto;
margin:外边距： margin:上右下左；
padding:内边距： padding: 上右下左；

3.定位属性

static，默认定位。按照常规文档流进行显示
relative，相对定位。通过left,bottom…等来设置相对自己的偏移，但元素所占空间保留在原位，不会被挤占，不会影响正常文档流，通常用来用作包含元素。
absolute，绝对定位。通过left,bottom…等来设置相对包含元素(除static的父级元素)的偏移。元素所在空间会被挤占，而其本身则会覆盖在其他元素上方，会将元素移除正常的文档流。
fixed，固定定位。通过left,bottom…等来将元素相对于浏览器窗口（即包含元素为浏览器窗口）固定，会使元素脱离正常文档流。适合用来固定导航。
sticky，半固定定位。类似于fixed和relative的结合，通过left,bottom…等来相对于浏览器窗口固定，但无论怎么滑动窗口元素位置都会相对于视窗固定，而其他元素属于正常文档流
z-index，控制元素堆叠顺序。设置z轴偏移，取值为数字，值越大越靠近屏幕，默认为0。注意：只能给非static定位的元素设置z-index属性

4. 背景属性

background-color：设置元素背景颜色
background-image：设置元素背景图像，可以是URL或CSS渐变
background-repeat：控制背景图像的重复方式

 background-repeat: repeat | repeat-x | repeat-y | no-repeat;水平/垂直方向都重复（默认值） | 仅水平重复 | 仅垂直重复 |  不重复

background-position：设置背景图像的起始位置

 background-position: top | bottom | left | right | center | 精确的位置值px、可同时选两个值用以描述背景图的起始位置。如：left bottom 位于左下

background-attachment：控制背景图像是否随页面滚动

 background-attachment: scroll | fixed | local;scroll 背景图随页面的其余部分滚动（默认值）fixed  背景图相对视口固定，即使页面滚动它也不会移动local  背景图相对元素内容区域固定，当元素有滚动条并滚动时，背景图随内容一起滚动

background-size：指定背景图像的大小

background-size: cover | contain | 具体尺寸;cover   背景图完全覆盖，可能会被裁剪以适合contain 背景图像完全适应，可能会被拉伸或压缩以适合具体尺寸（如100px 100px）或百分比（如50% 50%）

background：简写属性，允许你在一个声明中设置上述所有背景属性。

5. 边框属性

border-style：定义边框样式

.box {border-style:;none：  无边框。solid： 实线边框。dashed：虚线边框，由一系列短线段组成。dotted：点线边框，由一系列点组成。double：双线边框，由两条并排的实线组成。groove：凹槽边框，带有3D凹槽效果。ridge： 凸起边框，带有3D凸起效果。inset： 内嵌边框，带有3D内嵌效果。outset：外凸边框，带有3D外凸效果。
}

border-width：设置边框的粗细。通常是具体的像素值（如2px）
border-color：设置边框的颜色。十六进制值，RGB值，RGBA值或transparent值等
border：简写属性，允许同时设置边框的宽度、样式和颜色。语法：“border: 宽度样式颜色;”

  border: 2px solid red;

单独设置各边边框。border-top、border-right、border-bottom和border-left。
border-radius：设置元素四角的圆角半径，创建出更加平滑和美观的边框效果

border-radius: length | %;length：定义圆角的大小，可以是像素（px）、em、rem等单位%：表示圆角的大小是相对于元素尺寸的百分比。

border-image：使用图像作为边框，可以指定边框图像的路径、切片、宽度、偏移量和重复方式。是border-image-source、border-image-slice、border-image-width、border-image-outset和border-image-repeat属性的简写形式。如下：

border-image: source slice / width / outset repeat;source：图像路径，URL | CSS渐变
slice： 图像开始分割的位置，分9个区域（上、右、下、左以及四个角），px | % | fill关键字
width： 图像宽度，数值 | % | auto。默认为1，图像宽度等于边框宽度
outset：图像外延尺寸，边框图像区域超出边框盒子的距离
repeat：图像平铺方式，stretch（拉伸） |repeat（重复）  |round（重复并尽可能完整地显示图像）|space（重复并均匀分布空白）

6. 列表属性

list-style-type：设置列表前的标记

/*此时不再区分有序列表还是无序列表，只要设置列表前的标记就可以了*/
ul {list-style: disc     实心圆点（无序列表默认）circle   空心圆square   方块none     无标记decimal       数字（有序列表默认）upper-roman   大写罗马数字lower-roman   小写罗马数字upper-alpha   大写字母lower-alpha   小写字母
}

list-style-image：用图像作为列表项的标记。值为URL
list-style-position：设置列表项标记的位置。
list-style：简写属性。如 { list-style: square inside url(‘bullet.png’);

7.其他属性

浮动
float :通过float属性来实现元素的浮动，可以让块级元素脱离常规的文档流，向左或向右移动，在同一行显示，如果一行显示不下，则会换行显示。

float属性主要用于布局设计，如创建多栏布局、导航菜单或实现文本环绕图像的效果。

div{float: left | right | none ;左浮动 | 右浮动 | 不浮动（默认）
}

浮动的坏处——父元素高度塌陷：

当容器内的子元素都设置为浮动时，这些子元素会脱离文档流，不再占据原本的空间。这会导致父容器无法被撑开，其高度可能会塌陷为0，除非显式地设置了父容器的高度。

清除浮动
由于高度塌可能会造成页面布局混乱，因此常常需要清除浮动。
伪元素（clearfix），为父元素上添加一个伪元素（如::after），并设置其样式来清除浮动，好用且无副作用。

父元素::after {content: '';display: block;clear: both;
}

table属性

table常用样式的属性

border在表格外围设置边框
border-collapse表格中相邻边框是否合并，取值：seprate、collapse
border-spacing设置单元格之间的距离。当相邻边框合并时，不起作用。
th/td常用样式属性：

border为单元格设置边框
padding设置单元格的内边距（相当于table标签中的cellpadding属性，边距）

内容/文本超出

overflow
处理元素超出指定大小时的内容。不可用于行内元素（其大小仅由内容决定）

visible：（默认值）内容不裁剪，会渲染在元素框之外。
hidden：超出部分的内容会被裁剪，并隐藏。
scroll：超出部分被裁剪，但有滚动条以便查看其内容。无论是否出现溢出始终出现滚动条
auto：和sroll作用相同，但auto只会在内容溢出时才会出现滚动条。

text-overflow
指定当文本溢出时应该做什么，但并不会改变文本的布局或溢出行为，通常与overflow: hidden;一起使用，且只对块级元素或设置了固定宽度的元素有效

clip：默认值，将溢出的文本裁剪掉，不显示任何内容
ellipsis：表示在溢出的文本末尾显示省略号（…）

先列这么多常用的属性吧，专栏后面的网页编程实战中用到更多的css属性可以边看边了解。若有帮助，愿一键三连，以表支持！若有错误或描述不当，烦请评论留言或私信指正！