1. 颜色(Color):用于设置元素的前景色(文字颜色)或背景色。 ```css color: red; / 文字颜色 / backgroundcolor: blue; / 背景颜色 / ```
2. 字体(Font):用于设置元素的字体样式。 ```css fontfamily: Arial sansserif; / 字体族 / fontsize: 16px; / 字体大小 / fontweight: bold; / 字体粗细 / fontstyle: italic; / 字体样式(斜体) / ```
3. 文本(Text):用于设置文本的布局和格式。 ```css textalign: center; / 文本对齐方式 / textdecoration: underline; / 文本装饰(下划线) / textindent: 2em; / 首行缩进 / lineheight: 1.5; / 行高 / ```
4. 边框(Border):用于设置元素的边框样式。 ```css border: 1px solid black; / 边框宽度、样式和颜色 / bordertop: 2px dashed red; / 上边框 / ```
5. 填充(Padding):用于设置元素内容与边框之间的空间。 ```css padding: 10px; / 四个方向的内边距 / paddingtop: 20px; / 上内边距 / ```
6. 外边距(Margin):用于设置元素与周围其他元素之间的空间。 ```css margin: 15px; / 四个方向的外边距 / marginleft: 30px; / 左外边距 / ```
7. 尺寸(Dimensions):用于设置元素的宽度和高度。 ```css width: 300px; / 宽度 / height: 200px; / 高度 / ```
8. 定位(Positioning):用于设置元素的位置。 ```css position: absolute; / 绝对定位 / top: 50px; / 距离顶部 / left: 100px; / 距离左边 / ```
9. 浮动(Float):用于设置元素的浮动。 ```css float: left; / 向左浮动 / ```
10. 显示(Display):用于设置元素的显示类型。 ```css display: block; / 块级元素 / display: inline; / 行内元素 / display: none; / 隐藏元素 / ```
11. 背景(Background):用于设置元素的背景图像或颜色。 ```css backgroundimage: url; / 背景图像 / backgroundcolor: f0f0f0; / 背景颜色 / ```
12. 列表(List):用于设置列表的样式。 ```css liststyletype: disc; / 列表项标记类型 / liststyleimage: url; / 列表项标记图像 / ```
13. 表格(Table):用于设置表格的样式。 ```css bordercollapse: collapse; / 边框合并 / borderspacing: 10px; / 边框间距 / ```
14. 过渡(Transition):用于设置元素的过渡效果。 ```css transition: backgroundcolor 0.5s ease; / 背景颜色过渡效果 / ```
15. 动画(Animation):用于设置元素的动画效果。 ```css @keyframes example { from {backgroundcolor: red;} to {backgroundcolor: yellow;} } animationname: example; / 动画名称 / animationduration: 4s; / 动画持续时间 / ```
这些只是CSS常用属性中的一部分。CSS属性非常多,涵盖了从文本和布局到动画和过渡的各个方面。根据不同的设计需求,可能还会使用到其他CSS属性。
CSS常用属性详解
文本属性
文本属性主要用来控制网页中文本的样式,包括字体、颜色、大小、行高等。
color
`color` 属性用于设置文本的颜色。其值可以是英文单词,如 `red`、`blue` 等,也可以是颜色的十六进制代码,如 `ff0000`。
```css
color: red; / 红色 /
font-size
`font-size` 属性用于设置文本的字体大小。其值可以是绝对值,如 `px`、`em` 等,也可以是相对值,如 `small`、`large` 等。
```css
font-size: 16px; / 16像素 /
line-height
`line-height` 属性用于设置文本的行高。其值可以是数值、单位或百分比。
```css
line-height: 1.5; / 1.5倍行高 /
布局属性
布局属性主要用来控制网页中元素的位置、大小和间距。
margin
`margin` 属性用于设置元素的外边距。其值可以是数值、单位或百分比。
```css
div {
margin: 10px; / 上下左右各10像素 /
padding
`padding` 属性用于设置元素的内边距。其值可以是数值、单位或百分比。
```css
div {
padding: 5px; / 上下左右各5像素 /
width
`width` 属性用于设置元素的宽度。其值可以是数值、单位或百分比。
```css
div {
width: 200px; / 宽度为200像素 /
height
`height` 属性用于设置元素的高度。其值可以是数值、单位或百分比。
```css
div {
height: 100px; / 高度为100像素 /
盒子模型属性
盒子模型是CSS布局的基础,它包括内容(content)、内边距(padding)、边框(border)和外边距(margin)。
content
`content` 属性用于设置元素的内部内容。通常用于伪元素,如 `::before` 和 `::after`。
```css
div::before {
content: \