CSS学习、Day03

来源：互联网发布：mac 删除旺旺编辑：程序博客网时间：2024/06/07 03:02

One day for one day。

字体相关

设置文本字体

<html><head><style type="text/css">p.serif{ font-family:"MicrosoftJhengHei",华文细黑,MingLiu}</style></head><body><h1>CSS font-family</h1><p class="serif">这是一段话。这是一段话。这是一段话。这是一段话。</p></body></html>

Ps：按照浏览器默认规则，如果浏览器不认识第一种字体，就切换到第二种，如果不认识第二种，就切换到第三种，以此类推。

设置字体大小

<html><head><style type="text/css">h1 {font-size: 300%}h2 {font-size: 200%}p {font-size: 100%}</style></head><body><h1>这是第一行</h1><h2>这是第二行</h2><p>这是第三行</p></body></html>

与之前设置行间距相似，设置字体大小也有多个单位可以选择，包括%，em，px等。

设置字体风格

<html><head><style type="text/css">p.normal {font-style:normal}p.italic {font-style:italic}p.oblique {font-style:oblique}</style></head><body><p class="normal">这是第一行</p><p class="italic">这是第二行</p><p class="oblique">这是第三行</p></body></html>

其实该属性就是设置不同的倾斜角度。

设置文本粗细

<html><head><style type="text/css">p.normal {font-weight: normal}p.thick {font-weight: bold}p.thicker {font-weight: 900}</style></head><body><p class="normal">这是第一行</p><p class="thick">这是第二行</p><p class="thicker">这是第三行</p></body></html>

该属性设置了文本的粗细。

设置文本属性集合

如果嫌一个一个写太麻烦，可以像之前设置背景图片一样，将所有的属性都设置到一个声明内，这样写有利于页面的整洁。

具体设置如下：

p.ft { font: italic bold 12px/30px arial;}
具体属性排列是：风格粗体文本大小文本间隔字体

0 0