第七章 CSS文字样式

时间 2019-11-12

标签第七 css 文字样式栏目 CSS 繁體版

原文原文链接

对HTML页面中的文字进行全方位的设置css

一、字体html

在HTML语言中，文字的字体是经过来设置的api

在CSS中字体则是经过font-family属性来控制的，该属性典型语句：浏览器

p{
    font-family:黑体，Arial，宋体，sans-serif；
}

整句代码告诉浏览器首先在浏览者的计算机中寻找黑体，若是该用户计算机中没有黑体，则接着寻找Arial字体，若是黑体与Arial都没有，再寻找宋体。若是font-family中所声明的全部字体都没有，则使用浏览器的默认字体显示。字体

font- family属性能够同时声明任意中字体，字体之间用逗号分隔开ui

一些字体的名称中间会出现空格，这须要用双引号将其引发来，如“Times New Roman”。spa

常见的“sans-serif”和“serif”不是单个字体的名称，而是一类字体的统称。按照W3C的规则，在font-family的最后都须要指定一个这样的字体集，当客户端没有指定字体时可使用本机上的默认字体。设计

一般文章的正文使用的是易读性较强的serif字体，用户长时间阅读下不容易疲劳，而标题和表格则采用较醒目的sans-serif字体，它们须要显著和醒目，但没必要长时间盯着这些文字来阅读。WEB设计及浏览器设置中推荐遵循此原则。code

不少设计者喜欢使用各类各样的字体来给页面添彩，但这些字体在多数用户的机器上都没有安装，所以必定要设置多个备选字体，避免浏览器直接替换成默认的字体。最直接的方式是将使用了生僻字体的部分，用图形软件制做成小的图片，在加载到页面上。orm

<html>
<head>
<title>文字字体</title>
<style type="text/css">
<!--
h2{
    font-family:黑体，幼圆；
}
p{
    font-family:Arial, Helvetica, sans-serif;
}
p.kaiti{
    font-family:楷体_GB2312,"Times New Roman";
}
-->
</style>
</head>
<body>
    <h2>立春</h2>
    <p>自秦代以来，我国就一直以立春做为春季的开始。立春是从天文上来划分的，而在天然界、在人们的心目中，春是温暖，鸟语花香；春是生长，耕耘播种。在气候学中，春季是指候（5天为一候）平均气温10度至22度的时段。</p>
    <p class="kaiti">做者：isaac</p>
</body>
</html>

二、文字大小

在网页中经过文字的大小来突出主题是最日常的方法之一，CSS对于文字大小是经过font-size属性来具体控制的，而该属性的值能够是相对大小也能够是绝对大小。

例中一共设置了5种文字大小，使用的都是绝对单位，在任何分辨率的显示器下，显示出来的都是绝对的大小不会发生改变。

绝对单位	说明
in	inch，英寸
cm	centimeter，厘米
mm	millimeter，毫米
pt	point，印刷的点数，在通常的显示器中1pt至关于1/72inch
pc	Pica，1pc=12pt

除了利用物理单位设定文字绝对大小的方法，CSS还提供了一些绝对大小的关键字，可做为font-size的值，关键字一共有7个。但这种方法在不一样的浏览器中的显示效果却不同，所以并不推荐使用。

<html>
<head>
<title>文字大小（绝对）</title>
<style type="text/css">
<!--
    p.inch{ font-size:0.5in;}     /*物理单位*/
    p.cm{ font-size:0.5cm; }
    p.mm{ font-size:4mm;}
    p.pt{ font-size:12pt;}
    p.pc{ font-size:2pc;}
    
    p.one{ font-size:xx-small;}  /*关键字*/
    p.two{ font-size:x-small;}
    p.three{ font-size:small;}
    p.four{ font-size:medium;}
    p.five{ font-size:large;}
    p.six{ font-size:x-large;}
    p.seven{ font-size:xx-large;}
    
-->
</style>
</head>
<body>
    <p class="inch">文字大小0.5in</p>
    <p class="cm">文字大小0.5cm</p>
    <p class="mm">文字大小4mm</p>
    <p class="pt">文字大小12pt</p>
    <p class="pc">文字大小2pc</p>
    
    <p class="one">文字大小xx-small</p>
    <p class="two">文字大小x-small</p>
    <p class="three">文字大小small</p>
    <p class="four">文字大小medium</p>
    <p class="five">文字大小large</p>
    <p class="six">文字大小x-large</p>
    <p class="seven">文字大小xx-large</p>    
</body>
</html>

相对文字大小不像前面提到的绝对大小那样固定，绝对大小不随显示器和父标记的改变而改变。相对大小的设置比较灵活，所以一直受到不少网页制做者的青睐。

px：表示具体的像素，所以其显示大小与显示器的大小及其分辨率有关。

%或者em：都是相对于父标记而言的比例，若是没有设定父标记的字体大小，则相对于浏览器的默认值。

<html>
<head>
<title>文字大小（相对）</title>
<style type="text/css">
<!--
p.one{ font-size:15px;}    /*像素，所以实际显示大小与分辨率有关，很经常使用的方式*/
p.one span{ font-size:200%; }    /*在父标记的基础上乘以200%*/
p.two{ font-size:30px;}
p.two span{ font-size:0.5em;}      /*在父标记的基础上乘以0.5*/
-->
</style>
</head>
<body>
    <p class="one">文字大小<span>相对值</span>,15px。</p>
    <p class="two">文字大小<span>相对值</span>,30px。</p>
</body>
</html>

三、文字颜色

在CSS种文字颜色是经过color属性设置的。以下

h3{ color:blue;}
h3{color:#00f;}
h3{color:#0000ff;}
h3{color:rgb(0,0,255);}
h3{color:rgb(0%,0%,100%);}

在设置某一个段落文字的颜色时，一般能够利用标记，将须要的部分进行单独标注，而后再设置标记的颜色属性。

<html>
<head>
<title>文字颜色</title>
<style type="text/css">
<!--
h2{
    color:rgb(%0,0%,80%);
}
p{
    color:#333333;
    font-size:13px;
}
p span{
    color:blue;
}
-->
</style>
</head>
<body>
   <h2> 冬至的由来 </h2>
   <p><span>冬至</span>过节源于汉代，盛于唐宋，相沿至今。《清嘉录》甚至有“<span>冬至</span>大如年”之说。这代表古人对<span>冬至</span>十分重视</p>
</body>
</html>

四、文字粗细

在HTML语言中能够经过添加标记或者标记将文字设置为粗体。在CSS中能够将文字的粗细进行细致的划分，更重要的是CSS还能够将自己是粗体的文字变为正常粗细。

文字的粗细在CSS中是经过属性font-weight来设置的

例中涵盖了全部的文字粗细值，而且在标题处经过设置标记的样式，使得自己是粗体的“粗”字变成了正常粗细。

<html>
<head>
<title>文字粗体</title>
<style type="text/css">
<!-- 
h1 span{ font-weight:lighter;}
span{ font-size:30px;}
span.one{ font-weight:100;}
span.two{ font-weight:200;}
span.three{ font-weight:300;}
span.four{ font-weight:400;}
span.five{ font-weight:500;}
span.six{ font-weight:600;}
span.seven{font-weight:700;}
span.eight{ font-weight:800;}
span.nine{ font-weight:900;}
span.ten{ font-weight:bold;}
span.eleven{ font-weight:normal;}
-->
</style>
</head>
<body>
<h1>文字<span>粗</span>体</h1>
<span class="one">文字粗细:100</span>
<span class="two">文字粗细:200</span>
<span class="threee">文字粗细:300</span>
<span class="four">文字粗细:400</span>
<span class="five">文字粗细:500</span>
<span class="six">文字粗细:600</span>
<span class="seven">文字粗细:700</span>
<span class="eight">文字粗细:800</span>
<span class="nine">文字粗细:900</span>
<span class="ten">文字粗细:bold</span>
<span class="eleven">文字粗细:normal</span>
</body>
</html>

五、斜体

在CSS中斜体字是经过设置font-style属性来实现的。

例设置文字的样式为斜体，并加入标记，将自己已经变成斜体的文字又设置成了标准风格。

<html>
<head>
<title>文字斜体</title>
<style type="text/css">
<!-- 
h1{ font-style:italic;}
h1 span{ font-style:normal;}
p{ font-size:18px;}
p.one{ font-style:italic;}
p.two{ font-style:oblique;}
-->
</style>
</head>
<body>
<h1>文字<span>斜</span>体</h1>
<p class="one">文字斜体</p>
<p class="two">文字斜体</p>
</body>
</html>

六、文字的下划线、顶划线和删除线

给文字加上下划线、顶划线和删除线在文档编辑中的使用频率是很高的，在网页中尤为的突出。CSS经过设置文字的text-decoration 属性来实现。

有时候若是但愿文字不只有下划线，同时还有顶划线或者删除线，这时能够将underline 和overline的值同时赋给text-decoration,并用空格分开。

<html>
<head>
<title>文字下划线、顶划线、删除线</title>
<style type="text/css">
<!-- 
p.one{ text-decoration:underline;}       /*下划线*/
p.two{ text-decoration:overline;}       /*顶划线*/
p.three{ text-decoration:line-through;}     /*删除线*/
p.four{ text-decoration:blink;}       /*闪烁*/
p.five{ text-decoration:underline overline line-through;}    /* 同时使用下划线 顶划线 删除线  */
-->
</style>
</head>
<body>
<p class="one">下划线文字</p>
<p class="two">顶划线文字</p>
<p class="three">删除线文字</p>
<p class="four">文字闪烁</p>
<p class="five">正常文字</p>
<p>正常文字对比</p>
</body>
</html>

七、英文字母大小写

英文字母大小写转换是CSS提供的很实用的功能之一，用户只须要设定英文段落的text-transform属性，就能很轻松地实现大小写的转换。

<html>
<head>
<title>英文字母大小写</title>
<style type="text/css">
<!-- 
p{ font-size:17px;}  
p.one{ text-transform:capitalize;}        /*单词首字大写*/
p.two{ text-transform:uppercase;}       /*所有大写*/
p.three{ text-transform:lowercase;}       /*所有小写*/
-->
</style>
</head>
<body>
<p class="one">quick brown fox jumps over the lazy dog.</p>
<p class="two">quick brown fox jumps over the lazy dog.</p>
<p class="three">QUICK BROWN FOX JUMPS OVER THE LAZY DOG.</p>

</body>
</html>