幕客前端基础入门-css文本样式

2020-05-24 19:02:59 阅读：288 来源： 互联网

标签：幕客入门 weight 文字大小明月光 small font css size

网页中内容元素主要有文字、图片、视频所构成。
作为主要内容之一的文字，我们如何设置网页中文字的展示效果，让网页更加美观，让读者对网页的信息更加关注和易于阅读，这就是需要使用css字体和文本样式属性进行文字的样式设置。
网页中有独立的的文字，也有成段的文字段落。
针对文字内容，如何使用css样式去设置文字的颜色、大小、字体、加粗等效果。
针对段落文字，使用css样式设置行距、对其方式、文本修饰等效果。

1. 字体样式

1.1 font-family字体属性

定义元素内文字以什么字体显示。
字体集是一类字体的统称，不同的字体集，说明了不同装饰的效果。常用的字体集是sans-serif。

font-family: "字体1", "字体集" ... ;
<!-- 说明：
1.含空格字体名和中文，用英文引号括起
2.多个字体，用英文逗号 ' 隔开
3.引号嵌套，外使用双引号，内使用单引号 
-->

p{font-family:"微软雅黑", "宋体", "黑体";}
<!-- 浏览器依次查找微软雅黑、宋体、黑体。如果都未找到，就使用默认的。-->
<font style="font-family:'微软雅黑', '宋体', '黑体';">哈哈</font>

1.2 字体大小

font-size用于定义元素内文字大小，有绝对单位和相对单位。
绝对单位在任何分辨率的显示下，显示出来的都是绝对的大小，不会随浏览器分辨率或副元素的大小的改变而改变。

属性值		说明
绝对单位	in	英寸，1英寸=2.54cm，1in=6pc=72pt
	pc	派卡
	pt	点
	cm	厘米
	mm	毫米
相对单位	xx-small	9px
	x-small	11px
	small	13px，相对父元素的文字大小变小
	medium	CSS2缩放系数1.2，以16px为例
	large	19px，相对父元素的文字大小变大
	x-large	23px
	xx-large	28px
	px	受显示器分辨率影响
	em, %	相对父元素的倍数大小

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS运用</title>
    <style type="text/css">
       .in{font-size: 1in;}
       .cm{font-size: 1cm;}
       .mm{font-size: 1mm;}
       .pt{font-size: 1pt;}
       .pc{font-size: 1pc;}
       .xx_small{font-size: xx-small;}
       .x_small{font-size: x-small;}
       .small{font-size: small;}
       .medium{font-size: medium;}
       .x_large{font-size: x-large;}
       .xx_large{font-size: xx-large;}
    </style>
</head>
<body>
<p class="in">文字大小是1in。</p>
<p class="pc">文字大小是1pc。</p>
<p class="pt">文字大小是1pt。</p>
<p class="cm">文字大小是1cm。</p>
<p class="mm">文字大小是1mm。</p>
<p class="xx_small">文字大小是xx_small。</p>
<p class="x_small">文字大小是x_small。</p>
<p class="medium">文字大小是medium。</p>
<p class="x_large">文字大小是x_large。</p>
<p class="xx_large">文字大小是xx_large。</p>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS运用</title>
    <style type="text/css">
       p{font-size: 20px;}
       .em{font-size: 2em;}
       .percent{font-size: 150%;}
    </style>
</head>
<body>
<p>这是20px的文字<span class="em">这是2倍的文字</span><span class="percent">这是1.5倍的文字</span></p>
</body>
</html>

1.3 字体颜色

使用color定义元素内文字颜色。

color:颜色名|十六进制|RGB

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS运用</title>
    <style type="text/css">
       p{color: purple}
       .green{color: #458B00}
       .percent{color: rgb(0%,0%,100%);}
       .num{color:rgb(0,0,255);}
    </style>
</head>
<body>
<p>这是紫色的文字</p>
<p class="green">这是绿色的文字</p>
<p class="percent">这是使用百分比的蓝色的文字</p>
<p class="num">这是使用数值的蓝色的文字</p>
</body>
</html>

1.4 文字粗细

font-weight 文字粗细
属性值：normal，bold，bolder，lighter，100-900
400等同于normal，700等同于bold。
部分浏览器bold和bolder，而600-900基本看不出差别，因此常用的是bold，其他的了解即可

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS运用</title>
    <style type="text/css">
       .normal{font-weight: normal;}
       .bold{font-weight: bold;}
       .bolder{font-weight: bolder;}
       .lighter{font-weight: lighter;}
       #f100{font-weight: 100}
       #f200{font-weight: 200}
       #f300{font-weight: 300}
       #f400{font-weight: 400}
       #f500{font-weight: 500}
       #f600{font-weight: 600}
       #f700{font-weight: 700}
       #f800{font-weight: 800}
       #f900{font-weight: 900}
    </style>
</head>
<body>
<p class="normal">窗前明月光</p>
<p class="bolder">窗前明月光</p>
<p class="bolder">窗前明月光</p>
<p class="lighter">窗前明月光</p>
<p id="f100">窗前明月光</p>
<p id="f200">窗前明月光</p>
<p id="f300">窗前明月光</p>
<p id="f400">窗前明月光</p>
<p id="f500">窗前明月光</p>
<p id="f600">窗前明月光</p>
<p id="f700">窗前明月光</p>
<p id="f800">窗前明月光</p>
<p id="f900">窗前明月光</p>
</body>
</html>

1.5 斜体设置

font-style:属性值;
<!-- 属性值有normal/italic/oblique -->

属性值	说明
normal	正常
italic	斜体
oblique	倾斜，和italic差别不大

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS运用</title>
    <style type="text/css">
       .fontVariant{font-style: italic;}
    </style>
</head>
<body>
<p class="fontVariant">Cascading Style Sheets</p>
</body>
</html>

1.6 字体变形

font-variant字体变形：设置元素中文本为小型大写字母

属性值	说明
normal	正常
small-caps	设置为小型大写字母

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS运用</title>
    <style type="text/css">
       .fontVariant{font-variant: small-caps;}
    </style>
</head>
<body>
<p>Cascading Style Sheets</p>
<p class="fontVariant">Cascading Style Sheets</p>
</body>
</html>

1.7 font属性简写

font: font-style font-variant font-weight font-size/line-height font-family
<!--说明：
前3个书写顺序任意
值之间用空格隔开
只有同时使用font-size和font-family属性才起作用-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS运用</title>
    <style type="text/css">
       .font{font:italic small-caps bold 50px/1.5em "黑体","宋体";}
    </style>
</head>
<body>
<p class="font">Cascading Style Sheets</p>
</body>
</html>

2.文本样式

标签：幕客,入门,weight,文字大小,明月光,small,font,css,size
来源： https://www.cnblogs.com/csj2018/p/12952180.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9