###
常用CSS样式属性及示例
#### 局部
常用样式属性
局部
常用样式属性主要用于设置页面中的基本布局和外观效果。以下是几个常见的局部
样式属性及其用法：
- **宽度 (`width`) 和高度 (`height`)**
这两个属性用于定义元素的宽高尺寸。可以通过具体的像素值或百分比来指定。
```
css
div {
width: 200px;
height: 100px;
}
```
- **边距 (`margin`) 和内边距 (`padding`)**
`margin` 定义外部间距，而 `padding` 则定义内部间距。两者都可以接受单个值或多组值表示不同方向的距离。
```
css
.box {
margin: 10px; /* 上下左右均为10px */
padding: 5px 10px; /* 上下为5px，左右为10px */
}
```
- **定位 (`position`)**
CSS 提供了多种定位方式，包括静态定位 (`static`)、相对定位 (`relative`)、绝对定位 (`absolute`) 等[^4]。
```
css
.container {
position: relative;
}
.item {
position: absolute;
top: 20px;
left: 30px;
}
```
---
#### 文本
常用样式属性
文本
样式属性主要用来调整文字的表现形式，使内容更加美观易读。
- **字体大小 (`font-size`)**
设置字体大小可以使用具体单位（如 px 或 em），也可以采用预设关键字（如 `medium`, `large`）。支持继承父级
样式的特性[^5]。
```
css
p {
font-size: 16px;
}
```
- **颜色 (`color`)**
使用十六进制码、RGB函数或者命名的颜色值设定文字颜色。
```
css
h1 {
color: #ff5733; /* 十六进制 */
}
```
- **对齐方式 (`text-align`)**
控制文本水平排列的方式，可选值有 `left`, `right`, `center`, `justify` 等。
```
css
section {
text-align: center;
}
```
- **装饰线 (`text-decoration`)**
添加下划线、删除线或其他修饰效果到文本上。
```
css
a {
text-decoration: none; /* 移除默认链接下的下划线 */
}
```
- **行高 (`line-height`)**
调整行之间的垂直距离以改善阅读体验。
```
css
article {
line-height: 1.5;
}
```
---
#### 边框与背景
样式
除了以上提到的内容外，还有针对视觉表现力更强的设计需求所设计的一些特殊属性。
- **边框 (`border`)**
可单独配置每一边的具体参数，比如粗细程度、线条类型以及色调等。
```
css
img#t2 {
border: 5px solid black; /* 黑色实线边框 */
}
```
- **圆角半径 (`border-radius`)**
让矩形对象拥有弧度边缘从而显得柔和自然一些。
```
css
button {
border-radius: 8px;
}
```
- **背景图片/渐变填充 (`background-image / background-gradient`)**
实现复杂背景图案显示功能。
```
css
body {
background-image: url('example.jpg');
background-repeat: no-repeat;
background-position: center;
}
```
---
### 综合实例展示
下面给出一段综合运用多个常见
CSS属性的例子：
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>
CSS Example</title>
<style>
.card {
width: 300px;
height: 200px;
margin: 20px auto;
padding: 15px;
border: 2px dashed blue;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
background-color: lightgray;
text-align: center;
font-family: Arial, sans-serif;
font-size: 14px;
color: darkblue;
}
.card:hover {
transform: scale(1.1); /*
鼠标悬停放大效果 */
transition: all 0.3s ease-in-out;
}
</style>
</head>
<body>
<div class="card">这是一个带有阴影和动画效果的小卡片。</div>
</body>
</html>
```
扫一扫
1383
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
