<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文字</title>
<style media="screen">
p{
/*font-style: italic;
font-weight: bold;
font-size:30px;
*/
/*font-family: "楷体";*/
/*font-family: "ajfdkajld", "Time New Rowan", "微软雅黑";*/
font: italic bold 30px "微软雅黑";
text-decoration: line-through;
text-align: left;
text-indent:2em;
color: rgb(100, 100, 100);
}
a{
text-decoration: none;
color: rgb(200, 200, 200);
}
</style>
</head>
<body>
<p>
I am a text of the page.我是段落中的字体 I am a text of the page.I am a text of the page.我是段落中的字体 I am a text of the page.I am a text of the page.我是段落中的字体 I am a text of the page.I am a text of the page.我是段落中的字体 I am a text of the page.I am a text of the page.我是段落中的字体 I am a text of the page.I am a text of the page.我是段落中的字体 I am a text of the page.I am a text of the page.我是段落中的字体 I am a text of the page.I am a text of the page.我是段落中的字体 I am a text of the page.I am a text of the page.我是段落中的字体
</p>
<a href="#">我是链接</a>
</body>
</html>
第五十九课 文字相关属性
1、规定文字样式的属性
格式:font-style:italic;
取值:
normal:正常的,默认就是正常的
italic:倾斜的
快捷键:
fs font-style:italic;
fsn font-style:normal;
2、规定文字粗细的属性
格式:font-weight:bold;
单词取值:
bold:加粗
bolder比加粗更粗
lighter细线,默认就是细线
数字取值:100-900之间整百的数字
快捷键
fw font-weight:;
fwb font-weight:bold;
fwbr font-weight:bolder;
3、规定文字大小的属性
格式:font-size:30px;
单位:px(像素 pixel)
注意点:通过font-size设置大小一定要带单位,也就是一定要写px
快捷键
fz font-size:;
fz30 font-size:30px;
4、规定文字字体属性
格式:font-family:“楷体”;
注意点:
1、如果取值是中文,需要用双引号或者单引号括起来
2、设置的字体必须是用户电脑里面已经安装的字体
快捷键:
ff font-family
第六十课 字体属性补充
1、如果设置的字体不存在,那么系统就会使用默认的字体来显示
宋体
2、可以给字体设置备选方案
格式:font-family:"字体1",“备选方案1”,。。。;
3、给英文中文中单独设置字体
中文字体里面都包含英文
但是英文字体中都不包含中文 (判断是否中文/英文字体的依据)
也就是说中文字体可以处理英文,但是英文字体中不可以处理中文
注意点:如果想给界面中的英文单独设置字体,那么英文字体必须写在中文字体前面
补充在企业可发中最常见的字体
中文:宋体(Simsun) 黑体SimHei 微软雅黑Microsoft YaHei
英文:“Time New Rowan” Arial
第六十一课 文字属性的简写
/* css 注释代码 */
缩写格式:
font: style weight size family
例如:
font:italic bold 10px "楷体"
快捷键:
f+
注意点:
1、style weight可以省略,两者位置可以交换
2、size family 不可以省略,并且两者位置不可以交换,同时两者必须在所有属性的后面
第六十二课 文本属性
1、文本装饰的属性
格式:text-decoration:underline;
取值:
underline 下划线
line-through 删除线
overline 上划线
none 什么都没有,常用语去掉超链接的下划线
快捷键
td text-decoration:none;
tdu text-decoration:underline;
tdl text-decoration:line-through;
tdo text-decoration:overline;
2、文本水平对齐属性
格式:text-align:right;
取值:
left 左
right 右
center 中
快捷键
ta text-align:left;
tar text-align:right;
tac text-align:center;
3、文本缩进的属性
格式:text-indent:2em
取值:
2em, em是单位,一个em代表缩进一个文字的宽度
快捷键
ti text-indent:;
ti2e text-indent:2em;
第六十三课 颜色控制属性上
CSS通过调节color属性来修改文字的颜色
格式:color:值;
取值:
1、英文单词 color:red; 单词有限
2、rgb 三原色 red green blue
格式:rgb(0,0,0)
三原色的光源元件显示的亮度:0-255之间,0代表不发光,255代表发光,值越大就越亮
前端开发中其实并不常见黑色
只要三原色的值都一样就是灰色,而且值越小就越便黑色,越大越便白色
3、rgba a代表透明度,取值是0-1,取值越小就越透明
color:rgba(255,0,0,0.2)
4、十六进制
color:#FF00EE; RGB:FF-R 00-G EE-B
5、十六进制缩写
在CSS中只要十六进制中,表示一个颜色的两位数两两相等,那么就可以简写,否则不可以简写
color:#FF00EE;
color:#F0E;
点击颜色点可以打开取色板