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

网页中内容元素主要有文字、图片、视频所构成。
作为主要内容之一的文字,我们如何设置网页中文字的展示效果,让网页更加美观,让读者对网页的信息更加关注和易于阅读,这就是需要使用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-small9px
x-small11px
small13px,相对父元素的文字大小变小
mediumCSS2缩放系数1.2,以16px为例
large19px,相对父元素的文字大小变大
x-large23px
xx-large28px
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.文本样式

对于大段文字,除了设置相应的字体、字号、颜色之外,我们还需要设置它的缩紧,行间距等相关属性,这样我们的文字内容既美观又易读。

2.1 text-align 水平对齐

text-align:设置元素内文本的水平对齐方式
属性值:left right center justify
注意:text-align只对块级元素设置有效

2.2 line-height行间距

text-height:设置元素中文本行高。语法:长度值|百分比

.one{line-height:25px}
.two{line-height:2em}
.three{line-height:120%}

2.3 vertical-align垂直对齐

注意:text-align只对行级元素设置有效
属性值:baseline, sub, super, top, text-top, middle, bottom, text-bottom, 长度,百分比。
垂直居中,不仅可以适用于行内元素,还可用于单元格。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <!-- 补充代码 -->
    <style type="text/css">
        p{background-color: #ececec;height: 80px;font-size: 20px;}
        span{color:red;font-size: 14px;}
        .sub{vertical-align: sub;}
        .super{vertical-align: super;}
        img{width:139px;height: 40px;border-style: solid;
  border-color: red;}

        .baseline{vertical-align: baseline;}
        .top{vertical-align: top;}
        .textTop{vertical-align: text-top;}
        .middle{vertical-align: middle;}
        .bottom{vertical-align: bottom;}
        .textBottom{vertical-align: text-bottom;}
        td{height: 80px;widows: 100px;}
    </style>
</head>
<body>
    <p>
        CSS层叠样式表
        <span>默认baseline</span>
        <img src="https://www.imooc.com/static/img/index/logo.png">
    </p>
    <p>
        CSS层叠样式表
        <span class="baseline">baseline文字底部和基线对齐</span>
        <img src="https://www.imooc.com/static/img/index/logo.png" />
    </p>
    <p>
        CSS层叠样式表
        <span class="sub">sup文字下标</span>
        <img src="https://www.imooc.com/static/img/index/logo.png">
    </p>
    <p>
        CSS层叠样式表
        <span class="super">super文字上标</span>
        <img src="https://www.imooc.com/static/img/index/logo.png">
    </p>
    <p>
        CSS层叠样式表
        <span class="top">top文字和行顶部对齐</span>
        <img src="https://www.imooc.com/static/img/index/logo.png" />
    </p>
    <p>
        CSS层叠样式表
        <span class="textTop">textTop文本顶端对齐</span>
        <img src="https://www.imooc.com/static/img/index/logo.png" />
    </p>
 
    <p>
        CSS层叠样式表
        <span class="middle">middle中部对齐</span>
        <img src="https://www.imooc.com/static/img/index/logo.png" />
    </p>
    <p>
        CSS层叠样式表
        <span class="bottom">botom文字底端对齐</span>
        <img src="https://www.imooc.com/static/img/index/logo.png" />
    </p>
    <p>
        CSS层叠样式表
        <span class="textBottom">text-bottom文本底端对齐</span>
        <img src="https://www.imooc.com/static/img/index/logo.png" />
    </p>
    <p>
        CSS层叠样式表
        <span class="bottom">bottom底端对齐</span>
        <img src="https://www.imooc.com/static/img/index/logo.png" class="bottom" />
    </p>
    <b>---长度和百分比的值---</b>
    <p>
        CSS层叠样式表
        <span style="vertical-align: 15px">正上负下</span>
        <img src="https://www.imooc.com/static/img/index/logo.png" class="bottom" />
    </p>
    <p>
        CSS层叠样式表
        <span style="vertical-align: -100%">正上负下</span>
        <img src="https://www.imooc.com/static/img/index/logo.png" class="bottom" />
    </p>
    <b>---用于单元格元素---</b>
    <table border="1" class="one" cellspacing="0">
        <tr>
            <td class="top"><span>top</span></td>
            <td class="middle"><span>middle</span></td>
            <td class="bottom"><span>bottom</span></td>
        </tr>
    </table>
</body>
</html>

多行文字垂直居中,现将父元素的展示设置table,再将子元素的展示设置为单元格,即可解决垂直居中的问题。

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        *{padding: 0px;margin: 0px;}
        .wrap{
            height: 400px;
            width: 100%;
            border: 1px blue solid;
            display: table;
        }
        .content{
            display: table-cell;
            text-align: center;
            vertical-align: middle;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="content">
            <img src="https://www.imooc.com/static/img/index/logo.png" />
            <h1>welcom to Website</h1>
            <h2>CSS层叠样式,用于网页样式设置,使网页更美观。</h2>
        </div>
    </div>
</body>
</html>

2.4 文本样式其他属性

word-spacing 设置元素间单词之间的间距。
英文每个单词是由空格来区分的,中文没有。
如果中文之间添加空格,就可以像单词一样添加间距。
单位:em,px,值:正负均可
letter-spacing 设置元素内字母之间的间距
text-transform 设置元素内文本的大小写
capitalize 首字母大写
uppercase 全部大写
lowercase 全部小写
none 没有任何效果,默认
text-decoration 设置元素内文本的装饰
overline 上滑县
underline 下划线
line-through 贯穿线/删除线
blink 闪烁效果,可能没效果
none 没有效果,默认值

word-spacing letter-spacing

<!DOCTYPE HTML>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<style type="text/css">
		.one{word-spacing: 10px;}/* 单位可以是em,px,值可以负数*/
		.two{letter-spacing: -1em;}
	</style>
</head>
<body>
<p>CSS层叠样式表(Cascading Style Sheets)</p>
<p class="one">CSS层叠样式表(Cascading Style Sheets)</p>
<p class="one">CSS 层 叠 样 式 表(Cascading Style Sheets)</p>
<p class="two">CSS层叠样式表(Cascading Style Sheets)</p>
</body>
</html>

text-transform

<!DOCTYPE HTML>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<style type="text/css">
		.one{text-transform: capitalize;}
		.two{text-transform: uppercase;}
		.three{text-transform: lowercase;}
		.four{text-transform: none;}
	</style>
</head>
<body>
<p class="one">CSS层叠样式表(Cascading Style Sheets)</p>
<p class="two">CSS层叠样式表(Cascading Style Sheets)</p>
<p class="three">CSS层叠样式表(Cascading Style Sheets)</p>
<p class="four">CSS层叠样式表(Cascading Style Sheets)</p>
</body>
</html>

text-decoration

<!DOCTYPE HTML>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<style type="text/css">
		.one{text-decoration: overline underline;color: blue}
		.two{text-decoration: underline;}
		.three{text-decoration: line-through;}
		.four{text-decoration: blink;}
		.five{text-decoration: none}
		span{color:red;text-decoration: line-through;}
	</style>
</head>
<body>
<p class="one">CSS层叠样式表(Cascading Style Sheets)</p>
<p class="two">CSS层叠样式表(<span>Cascading Style Sheets</span>)</p>
<p class="three">CSS层叠样式表(Cascading Style Sheets)</p>
<p class="four">CSS层叠样式表(Cascading Style Sheets)</p>
<p class="five">CSS层叠样式表(Cascading Style Sheets)</p>
</body>
</html>

3. 练习

<!DOCTYPE html>
<html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>文本样式</title>
        <style type="text/css">
           /*补充代码*/
           p{background-color: #ececec;height: 150px;text-align: center;line-height: 150px;font-family: "宋体-简";}
           .one{font-size: 80px;color:#c9394a;font-weight: bold;}
           .two{font-size: 40px;color:gray;text-decoration: underline;letter-spacing: 5px;vertical-align: 15px}
           .three{font-size:80px;color:gray;font-style: oblique;font-family: "楷体-简"}
         </style>
    </head>
    <body>
          <p><span class="one">慕课网</span><span class="two">只学有用的</span><span class="three">!</span></style></p>
    </body>
</html>
posted on 2020-05-24 18:56  singleSpace  阅读(297)  评论(0编辑  收藏  举报