CSS文本格式化属性

最新推荐文章于 2024-01-02 11:23:41 发布

老王笔记

最新推荐文章于 2024-01-02 11:23:41 发布

阅读量590

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/JSWANGCHANG/article/details/100825272

版权

CSS 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

1，字体属性
   1，指定字体
       属性：font-family
       取值：由，隔开的字体列表
       注意：如果字体中包含中文或空格的话要用引号引起来
       eg:
           font-family:"楷体";
           font-family:"Microsoft Yahei";
           font-family:"微软雅黑",Arial;
   2，指定字体大小
       属性：font-size
       取值： px 或pt
   3，字体加粗
       属性： font-weight
       取值： 1, normal 非加粗显示
               2, bold：加粗显示
               3，value: 数值越大越粗
                   取值为无单位数字
                   400：normal
                   900：bold
   4，字体样式
       属性：font-style
       取值：
           1, normal: 非斜体显示
           2，italic: 斜体显示
   5，字体属性-简写
       属性： font
       取值： sytle weight size family;
       使用简写时，必须使用family,否则无效
       eg:
           font:12px "微软雅黑"

2，文本属性
   1，文本颜色：
       属性： color
       取值：合法颜色
   2，文本排列方式：
       作用：控制某元素内的文本，图片，行内块元素的排列方式
       属性： text-align
       取值： left/Center/right/justify
               justify: 两端对齐
               注意： jutify对文本的最后一行无效。
   3，文字修饰
       作用：指定线条修饰效果
       属性： text-decoration
       取值：
           1，none: 无任何线条显示
           2，underline: 下划线，等同<u>
           3，overline: 上划线
           4， line-throgh：删除线，等同于<s>标记
   4，行高
       作用：指定一行文本数据的所占高度；不是指文字高度，是指该文本占用空间的高度；
       特点：如果行高高度大于文本高度，文本将在行高中垂直居中显示；
               如果行高高度小于文本高度，将会造成两行文字重叠的情况；
       使用场合：
           1，文本垂直居中
           2，行间距效果
       属性：line-height
       取值：
           1，以px为单位的数字
           2，没有单位的数字，表示当前字体大小的倍数
       练习：
           1，创建一个网页: 03-lineHeight.html
           2, 创建一个div， 200*200,编写一行文本
               通过css方式使得当前文本绝对居中（水平和垂直居中）
           3，创建一个div，编写多行文本，模拟1.5倍行距
       代码：

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
	/* 设置div1的文字属性 */
	#d1{
		background-color:pink;
		height:200px;
		width:200px;
		text-align:center;
		line-height:200px;
	}
	/* 设置div2的属性 */
	#d2{
		border:2px solid #00f;
		height:400px;
		width:500px;
		line-height:1.5;
	}
  </style>
 </head>
 <body>
	<div id="d1" >Lorem ipsum </div>
	<div id="d2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis, doloremque, tempore, odit accusamus quibusdam ipsa inventore quod praesentium sunt similique optio quae sint aliquam magni et sapiente sequi eligendi. Autem, blanditiis, quos, obcaecati molestias possimus consequatur neque corporis iusto animi nesciunt minima accusamus dolorum illum modi culpa ratione est! Modi, error dolore voluptatum optio reprehenderit eveniet doloremque quaerat unde porro minima aspernatur illum consequatur nobis quo ut commodi eaque. Quas, eius, quia, sint nostrum saepe porro odit autem fugit nobis omnis dolore illo unde alias sed suscipit. A, perspiciatis iste dolore libero totam! Rem, doloribus consequatur maxime cupiditate totam. Nostrum!Lorem ipsum dolor sit amet, consectetur adipisicing elit. .</div>
 </body>
</html>

老王笔记

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
CSS文本格式化属性

1，字体属性 1，指定字体属性：font-family 取值：由，隔开的字体列表注意：如果字体中包含中文或空格的话要用引号引起来 eg: font-family:"楷体"; font-family:"Microsoft Yahei"; font-fa...
复制链接

扫一扫

专栏目录