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>
