一、字体属性
1.color:字体颜色
div{ color:red;}
div{ color:#ff0000;}
div{ color:rgb(255,0,0);}
div{ color:rgba(255,0,0,.5);}
2.font-size:字体大小
h1 {font-size:40px;}
h2 {font-size:30px;}
p {font-size:14px;}
3.font-weight:字体粗细
值 | 描述 |
---|---|
bold | 定义粗体字符 |
bolder | 定义更粗的字符 |
lighter | 定义更细的字符 |
100~900 | 定义由细到粗 400等同默认,而700等同于bold |
H1 {font-weight:normal;}
div{font-weight:bold;}
p{font-weight:900;}
4.font-style:字体样式
值 | 描述 |
---|---|
normal | 默认值 |
italic | 定义斜体字 |
5.font-family属性指定一个元素的字体(比如微软雅黑,宋体等)
font-family:"Microsoft YaHei","Simsun","SimHei";
温馨提示
每个值用逗号分开
如果字体名称包含空格,它必须加上引号
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p{
color: #fea234;
font-size: 25px;
font-weight: 600;
font-style: italic;
font-family: "Microsoft YaHei","Simsun","SimHei";
}
</style>
</head>
<body>
<!--
字体属性:
1.color:字体颜色
2.font-size:字体大小
3.font-weight:字体粗细
4.font-style:字体样式
5.font-family:字体
-->
<p class="text">欢迎来的华谊兄弟跨年</p>
</body>
</html>
二、背景属性
CSS背景属性主要有以下几个
属性 | 描述 |
---|---|
background-color | 设置背景颜色 |
background-image | 设置背景图片 |
background-attachment | 设置背景图片是随内容滚动还是固定 |
background-position | 设置背景图片显示位置 |
background-repeat | 设置背景图片如何填充 |
background | 复合属性 |
1.background-color:背景颜色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width: 300px;
height: 300px;
background-color: aquamarine;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
2.background-image:背景图像
元素的背景是元素的总大小,包括填充和边界(不包括外边距)。默认情况下background-image属性放置在元素的左上角,如果图像不够大的话会在垂直和水平方向平铺图像,如果图像大小超过元素大小从图像的左上角显示元素大小的那部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.content{
width: 1300px;
height: 1500px;
background-image: url("bg.webp");
}
</style>
</head>
<body>
<div class="content"></div>
</body>
</html>
3.background-repeat:如何平铺背景图像
值 | 说明 |
---|---|
repeat | 默认值 |
repeat-x | 只向水平方向平铺 |
repeat-y | 只向垂直方向平铺 |
no-repeat | 不平铺 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.content{
width: 1300px;
height: 1500px;
background-image: url("bg.webp");
background-repeat: repeat;
}
</style>
</head>
<body>
<div class="content"></div>
</body>
</html>
4.background-size:置背景图像的大小
值 | 说明 |
---|---|
length | 设置背景图片的宽度和高度,第一个值宽度,第二个值高度,如果只是设置一个,第二个值auto |
percentage | 计算相对位置区域的百分比,第一个值宽度,第二个值高度,如果只是设置一个,第二个值auto |
cover | 保持图片纵横比并将图片缩放成完全覆盖背景区域的最小大小 |
contain | 保持图片纵横比并将图像缩放成适合背景定位区域的最大大小 |
5.background-position:置背景图像的位置
该属性设置背景图像的起始位置,其默认值是:0% 0%
值 | 说明 |
---|---|
left top | 左上角 |
left center | 左 中 |
left bottom | 左 下 |
right top | 右上角 |
right center | 右 中 |
right bottom | 右 下 |
center top | 中 上 |
center center | 中 中 |
center bottom | 中 下 |
x% y% | 第一个值是水平位置,第二个值是垂直位置,左上角是0% 0%,右下角是100% 100% 。如果只指定了一个值,其他值默认是50%。默认是0% 0% |
xpos ypos | 单位是像素 |
6.background-attachment:该属性设置背景图像是否固定或者随页面滚动。简单来说就是一个页面有滚动条的话,滑动滚动条背景是固定的还是随页面滑动的
值 | 说明 |
---|---|
scroll | 背景图片随页面滚动而滚动 |
fixed | 背景图片固定 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.content{
width: 1300px;
height: 1500px;
background-image: url("bg.webp");
background-repeat: repeat;
background-size: contain;
background-position: 0;
background-attachment: scroll;
}
</style>
</head>
<body>
<div class="content"></div>
</body>
</html>
三、文本属性
1.text-align:文本对齐方式
值 | 描述 |
---|---|
left | 文本居左排列,默认值 |
right | 把文本排列到右边 |
center | 把文本排列到中间 |
2.text-decoration:属性规定添加到文本的修饰,下划线、上划线、删除线等
值 | 描述 |
---|---|
underline | 定义下划线 |
overline | 定义上划线 |
line-through | 定义删除线 |
3.text-transform:控制文本的大小写
值 | 描述 |
---|---|
captialize | 定义每个单词开头大写 |
uppercase | 定义全部大写字母 |
lowercase | 定义全部小写字母 |
4.text-indent: 属性规定文本块中首行文本的缩进
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.title1{
text-align: left;
text-decoration: overline;
}
.title2{
text-align: center;
text-decoration: underline;
}
.title3{
text-align: right;
text-decoration: line-through;
}
.text1{
text-transform: capitalize;
}
.text2{
text-transform: uppercase;
}
.text3{
text-transform: lowercase;
}
.target{
text-indent: 50px;
}
</style>
</head>
<body>
<h1 class="title1">标题一</h1>
<h1 class="title2">标题二</h1>
<h1 class="title3">标题三</h1>
<p class="text1">happy new year</p>
<p class="text2">happy new year</p>
<p class="text3">happy new year</p>
<p class="target">它被称为 JSX,是一个 JavaScript 的语法扩展。我们建议在 React 中配合使用 JSX,JSX 可以很好地描述 UI 应该呈现出它应有交互的本质形式。JSX 可能会使人联想到模版语言,但它具有 JavaScript 的全部功能。</p>
</body>
</html>
四、列表属性
1.list-style-type:设置列表项标记的类型
值 | 描述 |
---|---|
none | 无标记 |
disc | 标记是实心圆 |
circle | 标记是空心圆 |
square | 标记实心方块 |
decimal | 标记是数字 |
2.list-style-image:使用图像来替换列表项的标记
ul {
list-style-image: url('sqpurple.gif');
}
3.list-style-position:指示如何相对于对象的内容绘制列表项标记
值 | 描述 |
---|---|
inside | 列表项目标记放置在文本内 |
outside | 列表项目标记放置在文本外 |
4.list-style:简写属性,在一个声明中设置所有的列表属性
可以设置的属性(按顺序): list-style-type, list-style-position, list-style-image
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.list{
list-style-type: square;
}
.list-1{
list-style-image: url("logo.png");
}
.list-2{
list-style-position: inside;
}
.list-3{
list-style: none;
}
</style>
</head>
<body>
<ul class="list">
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
</ul>
<ul class="list-1">
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
</ul>
<ul class="list-2">
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
</ul>
<ul class="list-3">
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
</ul>
</body>
</html>
五、表格的属性
1.表格的边框:border
table, td {
border: 1px solid black;
}
2.折叠边框:border-collapse 属性设置表格的边框是否被折叠成一个单一的边框或隔开
table { border-collapse:collapse; }
table,td { border: 1px solid black; }
3.表格宽度和高度:width和height属性定义表格的宽度和高度
table { width:100%; }
td { height:50px; }
4.表格文字的对齐方式
text-align:水平对齐方式(左中右)
vertical-align:垂直对齐方式(上中下)
td { text-align:right; }
td { vertical-align:bottom; }
5.表格的填充:padding
td { padding:15px; }
6.表格的背景颜色:background-color
td { background-color:green; color:white; }
六、其他属性
1.letter-spacing:字符间距
h1 {letter-spacing:2px}
h2 {letter-spacing:-3px}
2.line-height:行高
p{
line-height: 30px;
}
3.overflow:定义超出边界的内容隐藏还是滚动显示
值 | 描述 |
---|---|
visible | 默认值 |
hidden | 超出容器内容被修剪 |
scroll | 内容会被修剪,但是可以滚动查看剩余内容 |
auto | 如果内容被修剪,可以滚动滚动查看剩余内容 |
div{
width:150px;
height:150px;
overflow:scroll;
}
4.white-space:属性指定元素内的空白怎样处理
值 | 描述 |
---|---|
pre | 空白会被浏览器保存 |
nowrap | 文本不会换行 |
p {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
5.verticle-align:属性设置一个元素的垂直对齐方式
该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐
值 | 描述 |
---|---|
text-top | 把元素的顶端与父元素字体的顶端对齐 |
middle | 把此元素放置在父元素的中部。 |
text-bottom | 把元素的底端与父元素字体的底端对齐。 |
img{
vertical-align:middle;
}
6.opacity:设置整个元素的透明度,取值0-1,0表示完全透明,1表示不透明