03_css的文本样式设置
一、css 的文字文本样式设置
- 1、设置文字的颜色: color
颜色设置的方式：
| red（红色） | 颜色名表示 |
|---|---|
| #RRGGBB | 十六进制法 |
| rgb(16, 78, 139) | rgb表示法（红-绿-蓝（red-green-blue ）） |
| rgba(16, 78, 139,0.5) | RGBa 扩展了 RGB 颜色模式，它包含了阿尔法通道，允许设定一个颜色的透明度。a 表示透明度：0=透明；1=不透明 |
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>设置文字的颜色</title>
<style type="text/css">
div {
/* 1.设置文字的颜色:color */
color: red;
color:#00ff00;
color:rgb(0,0,255);
color:rgba(0,0,255,0.6);
}
</style>
</head>
<body>
<div>这是设置了文本样式</div>
<h4>这是没有设置文本样式</h1>
</body>
</html>
- 2、设置文字的大小: font-size
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>设置文字的大小</title>
<style type="text/css">
div {
/* 2.设置文字的大小:font-size*/
font-size: 30px;
}
</style>
</head>
<body>
<div>这是设置了文本样式</div>
<h4>这是没有设置文本样式</h1>
</body>
</html>
- 3、设置文字是否加粗: font-weight(加粗/ 不加粗
属性值：
| normal | 默认值。定义标准的字符。 |
|---|---|
| bold | 定义粗体字符。 |
| bolder | 定义更粗的字符。 |
| lighter | 定义更细的字符。 |
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>设置文字是否加粗</title>
<style type="text/css">
div {
/* 3.设置文字是否加粗:font-weight(加粗/不加粗) */
font-weight:bold;
font-weight:normal;
font-weight:bolder;
font-weight:lighter;
}
</style>
</head>
<body>
<div>这是设置了文本样式</div>
<h4>这是没有设置文本样式</h1>
</body>
</html>
- 4、设置文字的字体: font-famil
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div {
/* 4.设置文字的字体:font-family */
font-family:"microsoft yahei";
}
</style>
</head>
<body>
<div>这是设置了文本样式</div>
<h4>这是没有设置文本样式</h1>
</body>
</html>
- 5、设置文字是否倾斜**: ** font-style(倾斜/不倾斜)
属性值：
| normal | 默认值。浏览器显示一个标准的字体样式。 |
|---|---|
| italic | 浏览器会显示一个斜体的字体样式。 |
| oblique | 浏览器会显示一个倾斜的字体样式。 |
| inherit | 规定应该从父元素继承字体样式。 |
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div {
/* 5.设置文字是否倾斜:font-style(倾斜/不倾斜) */
font-style: italic;
}
</style>
</head>
<body>
<div>这是设置了文本样式</div>
<h4>这是没有设置文本样式</h1>
</body>
</html>
- 6、设置文字的行高**: ** line-height
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div {
/* 6.设置文字的行高:line-height */
line-height: 50px;
}
</style>
</head>
<body>
<div>这是设置了文本样式</div>
<h4>这是没有设置文本样式</h1>
</body>
</html>
- 7、设置文字首行缩进**: text-indent**
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div {
/* 7.设置文字首行缩进:text-indent */
text-indent:40px;
}
</style>
</head>
<body>
<div>这是设置了文本样式</div>
<h4>这是没有设置文本样式</h1>
</body>
</html>
- 8、设置文字水平对齐方式**: ** text-align
属性值：
| left | 把文本排列到左边。默认值：由浏览器决定 |
|---|---|
| right | 把文本排列到右边。 |
| center | 把文本排列到中间。 |
| justify | 实现两端对齐文本效果。 |
| inherit | 规定应该从父元素继承 text-align 属性的值 |
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div {
/* 8.设置文字水平对齐方式:text-align */
/* 设置文字水平居中 */
text-align:center
}
</style>
</head>
<body>
<div>这是设置了文本样式</div>
<h4>这是没有设置文本样式</h1>
</body>
</html>
- 9、字体的组合设置**: font(是否加粗 字号/行高 字体)**
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
h4 {
/* 9.字体的组合设置:font(是否加粗 字号/行高 字体) */
font:bold 50px/50px "microsoft yahei"
}
</style>
</head>
<body>
<div>这是设置了文本样式</div>
<h4>这是没有设置文本样式</h1>
</body>
</html>