CSS属性
规定文字样式的属性
格式:font-style: normal(正常,默认),italic(倾斜);
规定文字粗细的属性
文字取值:font-weight:lighter(细线,默认),bold(粗体),bolder(更粗);
数字取值:100-900之间整百的数字来规定粗细;
规定文字大小的属性
格式:font-size: 30px;
单位:px(像素 pixel);
注意:通过font-size设置大小一定要带单位px;
规定文字字体的属性
font-family:"楷体";
注意:若取值是中文,需要用双引号或单引号引起;
注意:设置的字体必须是用户电脑中已有的字体;
注意:若设置的字体不存在又不想用系统默认字体,可以给字体设置备选方案
格式:font-family:"字体1","备选字体2",···
注意:凡是中文字体,里面都包含了英文;凡是英文字体,里面都不包含中文;
若想给页面中的英文单独设置字体,一定要把英文的字体写在前面,中文字体写在后面作为备选字体;
常见字体:
中文:宋体、黑体、微软雅黑;
英文:Times New Roman、Arial
并不是名称是英文就一定是英文字体,看是不是英文字体在于看能不能处理中文,英文字体不能处理中文;
文字属性的缩写
格式:font: style(可省略) weight(可省略) size family;
注意:style可省略,weight可省略,且style和weight位置可以交换;
注意:size不能省略,family不能省略,
且size和family的位置不可交换,
且size和family必须写在所有属性之后;
示例:font: italic bold 10px "楷体";
文本装饰的属性
格式:text-decoration: underline;
取值:underline(下划线),line-through(删除线),overline(上画线),none(重要!去掉以上线,如去掉超链接的下划线);
文本对齐的属性
格式:text-align: center;
取值:left,right,center;
文本缩进的属性
格式:text-indent: 2em;
取值:em(1em:1个文字的宽度;2em:2个文字的宽度);
代码汇总:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css</title>
<style type="text/css">
h1{
font-style:normal;
font-weight:bold;
font-size: 30px;
font-family:"楷体";
text-decoration: underline;
text-align: center;
text-indent: 2em;
}
h2{
font-weight:lighter;
}
p{
font-style:italic;
font-weight:bolder;
}
div{
font: italic bold 10px "楷体";
}
</style>
</head>
<body>
<h1>CSS基本属性123讲</h1>
<p>CSS基本属性123讲</p>
1,规定文字样式的属性
格式:font-style: normal(正常,默认),italic(倾斜);
2,规定文字粗细的属性
文字取值:font-weight:lighter(细线,默认),bold(粗体),bolder(更粗);
数字取值:100-900之间整百的数字来规定粗细;
3,规定文字大小的属性
格式:font-size: 30px;
单位:px(像素 pixel);
注意:通过font-size设置大小一定要带单位px;
4,规定文字字体的属性
font-family:"楷体";
注意:若取值是中文,需要用双引号或单引号引起;
注意:设置的字体必须是用户电脑中已有的字体;
注意:若设置的字体不存在又不想用系统默认字体,可以给字体设置备选方案
格式:font-family:"字体1","备选字体2",···
注意:凡是中文字体,里面都包含了英文;凡是英文字体,里面都不包含中文;
若想给页面中的英文单独设置字体,一定要把英文的字体写在前面,中文字体写在后面作为备选字体;
常见字体:
中文:宋体、黑体、微软雅黑;
英文:Times New Roman、Arial
并不是名称是英文就一定是英文字体,看是不是英文字体在于看能不能处理中文,英文字体不能处理中文;
5,文字属性的缩写
格式:font: style(可省略) weight(可省略) size family;
注意:style可省略,weight可省略,且style和weight位置可以交换;
注意:size不能省略,family不能省略,
且size和family的位置不可交换,
且size和family必须写在所有属性之后;
示例:font: italic bold 10px "楷体";
6,文本装饰的属性
格式:text-decoration: underline;
取值:underline(下划线),line-through(删除线),overline(上画线),none(重要!去掉以上线,如去掉超链接的下划线);
7,文本对齐的属性
格式:text-align: center;
取值:left,right,center;
8,文本缩进的属性
格式:text-indent: 2em;
取值:em(1em:1个文字的宽度;2em:2个文字的宽度);
</body>
</html>