文章目录
本篇文章主要介绍CSS设计中的文本属性、边框边距、列表标签、display的几种用法,还有一个最容易被忽视的点,就是内外边距的设定,在网页设计中,边距的控制是极为重要的。(在“二、边框边距”中有各种边框样式总结)
一、文本属性
1、属性
- 文本大小:
font-size: 10px;
- 对齐方式:
text-align: center;
- 文本行高:
line-height: 200px;
- 垂直对齐方式:
vertical-align:-4px
(只对行内元素有效,对块级元素无效) - 首行缩进:
text-indent: 150px;
- 字母间距:
letter-spacing: 10px;
- 单词间距:
word-spacing: 20px;
- 首字母大写:
text-transform: capitalize;
2、测试代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
height:100px;
background-color: chartreuse;
text-align:center;
line-height:100px;
}
</style>
</head>
<body>
<div>一个文本属性
<p>一个P标签</p>
</div>
</body>
</html>
二、边框属性
1、属性
- 边框粗细:
border-width:5px;
- 边框样式:
border-style:dashed;
- 边框颜色:
border-color: red;
- 简便写法:
border:5px dashed red;
2、边框样式总结
<p style=border-style:none>无边框</p>
<p style=border-style:dotted>点线式边框</p>
<p style=border-style:groove>槽线式边框</p>
<p style=border-style:ridge>脊线式边框</p>
<p style=border-style:inset>内嵌效果的边框</p>
<p style=border-style:outset>突起效果的边框</p>
<p style=border-style:dashed>破折线式边框</p>
<p style=border-style:solid>直线式边框</p>
<p style=border-style:double>双线式边框</p>
3、测试代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.div1{
width