二.2 页面化妆师CSS之CSS字体和文本样式

于 2020-02-12 19:32:23 发布
阅读量200 收藏
点赞数
分类专栏： 五、前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44891948/article/details/104269412
版权
  • 文字：文字、字体大小、颜色、加粗等
  • 行高、对齐方式、文本装饰等

1.CSS文字属性样式

  • 字体：font-family--字体属性

    • 定义元素内以什么字体来显示
    • 语法：font-family:[字体1][,字体1][,...]
    • 说明：
      • 含空格字体名和中文，用英文引号(")括起
      • 多个字体，用英文逗号“,”隔开
      • 引号嵌套，外使用双引号，内使用单引号
    • font-family属性值：具有字体名，字体集
    • 字体集：
      • Serif
        • Serif和Sans-serif区别：
      • Sans-serif
      • Monospace
      • Cursive
      • Fantasy

  • font-size--文字大小

    • 定义元素内文字大小
    • 语法：font-size:绝对单位|相对单位
      • font-size：绝对单位|相对单位
      • font-size:绝对单位|相对单位
        • px 像素----受显示器分辨率影响
        • em / % ----针对父元素

  • font-color---文字颜色

    • 定义元素内文字颜色
    • 语法：font-color：颜色名|十六进制|RGB

  • font-weight---文字粗细

    • 定义元素内文字设置粗细
    • 语法：font-weight：normal | bold |bolder | ligher| 100~900
    • 说明
      • 默认值：normal
      • 400等同于 normal，而70等同于bold

  • font-style---文字样式

    • 定义元素内文字设置样式
    • 语法：font-style：normal | italic | voblique

  • font-variant---字体变形

    • 设置元素中文本为小型大写字母
    • 语法：font-variant：normal | small-caps

  • font属性

    • 语法：
    • 说明
      • 值之间空格隔开
      • 注意书写顺序
      • 同时设置font-size和font-family，属性才起作用

2.CSS文本样式

  • text-align--水平对齐

    • 设置元素内文本的水平对齐方式
    • 语法：text-align：left | right | cener | justify
    • 注意：该属性对块级元素设置有效

  • line-height属性--文本行高

    • 设置元素中文本行高
    • 语法：line-height：长度值 | 百分比
    • 说明：一行文字的高度。
               行高指文本行的基线间的距离。
    • 注意;浏览器有默认行高，不同浏览器行高不一样。

  • 文字基线

  • 行高和行距

  • 行框和行内框

  • vertical-align垂直对齐

    • 设置元素内容的垂直方式
    • 语法：

3.CSS文本样式属性

  • word-spacing：设置元素内单词之间间距
  • letter-spacing：设置元素内字母之间间距
  • text-transform：设置元素内文本的大小写  
  • text-decoration：设置元素内文本的装饰 

4.CSS文本样式应用

  1. 网页制作从整体到布局
  2. 借助手册和网络

5.代码示例

  • 5.1文字属性样式

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文字属性样式</title>
    <style type="text/css">
        /*字体属性*/
		h1{font-family:"黑体","微软雅黑","宋体",sans-serif;}
        /*文字大小*/
        p{font-size: 20px;}
		.larger{font-size:larger;}
		.smaller{font-size:smaller;}
		.em{font-size:2em;}
		.percent{font-size: 150%;}
		#fontSize{font-size: 20px;}
		.percent{font-size: 150%;}
        /*文字颜色*/
        h1{color:red;}/*具体颜色名称*/
		p{color:rgb(0%,50%,0%);}/*数字：0~255；百分比：0%~100%*/
		div{color:#800000;}/*十六进制：#开头，六位，0~F*/
        /*文字粗细*/
        p{font-family: "黑体";}
		.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;}
        /*文字样式*/
        .normal{font-style:normal;}
   		.italic{font-style:italic;}
		.oblique{font-style:oblique;}
        /*字体变形*/
        .fontVariant{font-variant:small-caps;}
        /*font属性*/
        /*P{*/
		/*	font:italic bold small-caps 50px/1.5em "黑体","宋体";*/
		/*}*/
    </style>
</head>
<body>
     <!--family--字体属性  引号嵌套，外使用双引号，内使用单引号-->
    <h1 style="font-family:'宋体';">font-family--字体属性</h1>
    <!-- size--文字大小    相对单位-->
	<p>文字大小px,受显示器分辨率影响</p>
	<p>文字大小<span class="larger">相对父元素的文字大小变大</span></p>
	<p>文字大小<span class="smaller">相对父元素的文字大小变小</span></p>
	<div id="fontSize">
		<p>文字大小<span class="em">相对值em</span></p>
		<p class="percent">文字大小<span class="percent">相对值%</span></p>
	</div>
  <hr>
    <!-- HTML中加粗 -->
    <p>正常的字体</p>
	<p>字体粗细<b>font-weight</b></p>
	<p>字体粗细<strong>font-weight</strong></p>
    <!-- CSS样式加粗 -->
	<p class="normal">字体粗细font-weight：normal</p>
	<p class="bolder">字体粗细font-weight：bolder</p>
	<p class="bold">字体粗细font-weight：bold</p>
	<p class="lighter">字体粗细font-weight：lighter</p>
	<!-- 数值 -->
	<p class="f100">字体粗细font-weight：100</p>
	<p class="f200">字体粗细font-weight：200</p>
	<p class="f300">字体粗细font-weight：900</p>
  <hr>
    <!-- HTMl中斜体 -->
	<p>正常的字体</p>
	<p><em>斜体</em></p>
	<p><i>斜体</i></p>
    <!-- CSS样式中斜体 -->
    <p class="normal">正常的字体</p>
	<p class="italic">斜体</p>
	<p class="oblique">倾斜</p>
  <hr>
    <p>小型大写字母:CSS层叠样式表（Cascading Style Sheets）</p>
	<p class="fontVariant">小型大写字母:CSS层叠样式表（Cascading Style Sheets）</p>
  <hr>  <!-- font属性 -->
    <p>CSS层叠样式表（Cascading Style Sheets）</p>
</body>
</html>
  • 5.2 CSS文本样式 
    <!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>文本属性</title>
  <style type="text/css">
     .text1{text-align:left;}
     .text2{text-align:center;}
     .text3{font-size:20px;text-align:right;line-height:120%;}  /* 行高值=20*100% */
     .text4{font-size:30px;text-align:justify;line-height:1.3em;} /* 行高值=30*1.3 */
     div{text-align:center;}
     /*body{text-align:right;}*/   /* 继承*/
     .textAlign{text-align:center;}
     .textAlign p{width:50%;margin:0 auto;}
  </style>
</head>
<body>
    <div class="textAlign">
        <P>指定宽度</P>
    </div>
    <div><img src="img/logo.png"/></div>
    <P class="text1">文本左对齐</P>
    <P class="text2">文本居中对齐</P>
    <P class="text3">文本右对齐</P>
    <P class="text4">文本两端对齐</P>

</body>
</html>

     

 

 

测试小弟
关注
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值