css字体与文本
- 字体
css字体来源与3个地方,机器自带的字体,保存在第三方网站的字体和保存在服务器上的字体。
字体可以用font
属性描述,但字体大小和类型必须得写上,切在最后面,前面的属性顺序不限。font也可以分开来写,包括font-family
(字体类型),font-size
(em,px,%)字体大小,font-style
(字体类型,normal
,italic
,oblique
,inherit
),font-weight
(字体宽度),font-variant
(字体变化,没啥感觉)。
font-size
的em
单位是相对默认字体大小的倍数,浏览器一般默认字体大小为16px,h1
默认为2em
(也就是32px)。
空格也是字符的一种,可以通过设置父级元素font-size
等于0px来过滤掉空格,如果父元素内有字体则给其单独赋予大小。
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.p1{
font:small-caps 20 italic 14px 'Vivaldi';
}
.p2{
font-family:'微软雅黑';
font-size:20px;
font-style:oblique;
font-weight: 40;
font-variant:small-caps;
}
</style>
</head>
<body>
<p class="p1">hello world</p>
<p class="p2">德玛西亚。</p>
</body>
</html>
-
文本
文本css属性有
text-decoration
(包含none,underline,overline,line-through,blink,inhert),text-trnasform
(none,capitalize,uppercase,lowercase,inherit),text-indent
(缩进),text-align
(文本对齐方式,left,right,center,justify),letter-spacing
(字符间距),word-spacing
(单词间距),line-height
(行高),vertical-align
(垂直对齐,只对行内元素有效,不要再父级元素设置,没用啊)。<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> .dv1{ height: 60px; text-decoration: underline; text-indent:4em; text-shadow: 10px; text-align: center; text-transform:uppercase; letter-spacing: 10px; /*word-spacing是根据空格来判断单词的*/ word-spacing: 20px; /*行高,这里为了让文字居中*/ line-height: 60px; border:1px solid red; } .dv2{ font-size:0; } .dv2 input{ vertical-align:middle; } </style> </head> <body> <div class="dv1">hello world</div> <div class="dv2"> <input type="text" name=""> <input type="button" name=""> </div> </body> </html>