0
点赞
收藏
分享

微信扫一扫

CSS系列学习笔记(二)

font文字: 

font-size 可以控制文字的大小

后面可以放入像素 (比较精准)

如果未来去做网页的时候 那么就使用工具量一下像素 然后写上就可以了

medium 默认样式 中等的 合适的

相对大一点large 、x-large、xx-large

相对小一点samll、x-samll、xx-samll

font-weight:控制文字粗细

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>字体粗细</title>
<style>
.p1{
font-weight:100px;
}
/* 范围:100-1000 */
.p2{
font-weight:bold;
}
.p3{
font-weight:boler;
}
.p4{
font-weight:lighter;
}

</style>
</head>
<body>
<p class="p1">hahha </p>
<p class="p2">hahha </p>
<p class="p3">hahha </p>
<p class="p4">hahha </p>
</body>
</html>

CSS系列学习笔记(二)_开发人员

font-family:给予元素字体

注意:开发人员电脑上的字体,如果使用者没有的话那么是不会显示的

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>字体</title>
<style>
.p1{
font-family:"SimSun";
}
.p2{
font-family: "Microsoft Yahei";
}
.p3{
font-family: "STHeiti";
}
</style>
</head>
<body>
<p class="p1">字体111</p>
<p class="p2">字体222</p>
<p class="p3">字体333</p>
</body>
</html>

CSS系列学习笔记(二)_开发人员_02

font-height:可以设定内容在自己的内部的高度位置

​在html中 有些元素有一些默认的样式

line-height 如果大小为元素的大小时 内容会在中心

可以控制行内元素 但是控制不了 块状元素

% 继承父级的高度的来控制的,数字是支持的,px 使用最常规的,不支持负数


font-style样式:

​italic  <-> 是使用的字体斜体

oblique <-> 是让字体倾斜 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>font—style</title>
<style>
/* italic <-> 是使用的字体斜体*/
/*oblique <-> 是让字体倾斜 */
.p1{
font-style:italic;
}
.p2{
font-style:oblique;
}
</style>
<body>
<p class="p1">今天天气不是很好,下雨了,很冷,风很大</p>
<p class="p2">skajsxajlsk</p>
</body>
</html>

font-variant:把段落设置为小型大写字母字体

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
p{
font-variant: small-caps;
}
</style>
</head>
<body>
<p>hahhaha</p>
<p>hhahahahahahah</p>
<div>shdahskdas</div>
</body>
</html>

CSS系列学习笔记(二)_html_03

font 比较常用的缩写样式

p{
font: small-caps italic bold 15px/30px fantasy;
}

font包含六样

font-size: 15px;

line-height: 30px;

font-family: fantasy;

font-weight: bold;

font-style: italic;

font-variant: small-caps;

举报

相关推荐

0 条评论