文章目录

CSS尺寸（Dimention）
- 行高line-height属性
- 尺寸的其他属性
- - heigh、width属性
  - max-height、max-width属性
  - min-height、min-width属性
文本
- text-transform属性
- text-docoration属性
- letter-spacing属性
- world-spacing属性
- text-align属性
- text-indent属性
回顾一下之前的

上次主要说了HTML列表、长度单位、颜色单位还有字体样式，内容还是比较详细的，这次我们继续说点别的！！！CSS尺寸和文本！！

CSS尺寸（Dimention）

行高line-height属性

在CSS中，并没有为我们提供一个直接设置行间距的方式，我们只能通过设置行高间接设置行间距，行高越大行间距越大。
使用line-height设置行高。
行高类似我们小时候上课用的单线本，单线本是一行一行的，线与线之间的距离就是行高。网页上的字就是处在看不见的线中，而文字会默认在我们的行高中垂直居中显示。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>行间距</title><style>p.small {line-height:70%;}p.big {line-height:40px;}</style></head><body><p>这是一个标准行高的段落。<br>这是一个标准行高的段落。<br>大多数浏览器的默认行高约为110%至120%。<br></p><p class="small">这是一个更小行高的段落。<br>这是一个更小行高的段落。<br>这是一个更小行高的段落。<br>这是一个更小行高的段落。<br></p><p class="big">这是一个更大行高的段落。<br>这是一个更大行高的段落。<br>这是一个更大行高的段落。<br>这是一个更大行高的段落。<br></p></body>
</html>

通过line-height可以间接设置行间距，可能的值：

值	描述
normal	默认。设置合理的行间距。
number	设置数字，此数字会与当前的字体尺寸相乘来设置行间距。（比百分号常用）
length	设置固定的行间距。
%	基于当前字体尺寸的百分比行间距。
inherit	规定应该从父元素继承 line-height 属性的值。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>行间距</title><style>div.box{width: 200px;height:200px;background-color: #bfa;}</style></head><body><div class="box" ><a href="#">我是一个超链接</a></div></body>
</html>

这段代码的效果是这样的：

如何运用刚才我们学的将这一行文本放到居中位置呢？

/*
* 对于单行文字来说，可以将行高设置为和父元素的高度一致，
*   这样可以使单行文本在父元素中垂直居中。
*/
line-height: 200px;

注意：这适用于单行文本在父元素中居中！！！

在上次说的font简写属性中可以将多个设置字体的属性结合起来。

而这时我们也可以直接同时设置行高。在字体大小后可添加行高字体大小/行高。将上面的代码写成font:italic samll-caps bold 50px/60px "微软雅黑"这样就等同于将行高设置为60px了。当然这个值是可选的，如果时指定则会使用默认值。

使用font简写属性的陷阱(当使用font不设置行高时，会指定默认值)：

.p2{line-height：150px;font:italic small-caps bold 50px "微软雅黑";
}

大家说这样能起到效果么？不行！！我们写font的时候line-height被指定默认值了，所以我们最好把行高写在字体大小后面。

尺寸的其他属性

heigh、width属性

height属性:

值	描述
auto	默认。浏览器会计算出实际的高度。
length	使用 px、cm 等单位定义高度。
%	基于包含它的块级对象的百分比高度。
inherit	规定应该从父元素继承 height 属性的值。

width属性：

值	描述
auto	默认值。浏览器可计算出实际的宽度。
length	使用 px、cm 等单位定义宽度。
%	定义基于包含块（父元素）宽度的百分比宽度。
inherit	规定应该从父元素继承 width 属性的值。

max-height、max-width属性

max-height属性：

值	描述
none	默认。定义对元素被允许的最大高度没有限制。
length	定义元素的最大高度值。
%	定义基于包含它的块级对象的百分比最大高度。
inherit	规定应该从父元素继承 max-height 属性的值。

max-width属性：

值	描述
none	默认。定义对元素的最大宽度没有限制。
length	定义元素的最大宽度值。
%	定义基于包含它的块级对象的百分比最大宽度。
inherit	规定应该从父元素继承 max-width 属性的值。

min-height、min-width属性

min-height属性：

值	描述
length	定义元素的最小高度。默认值是 0。
%	定义基于包含它的块级对象的百分比最小高度。
inherit	规定应该从父元素继承 min-height 属性的值。

min-width属性：

值	描述
length	定义元素的最小宽度值。默认值：取决于浏览器。
%	定义基于包含它的块级对象的百分比最小宽度。
inherit	规定应该从父元素继承 min-width 属性的值。

其实都差不多，属性值是length或者是一个百分数，我们就不一一赘述了。

文本

text-transform属性

<!DOCTYPE html>
<html><head><meta charset="utf-8"> <title>transform</title> <style>p.uppercase {text-transform:uppercase;}p.lowercase {text-transform:lowercase;}p.capitalize {text-transform:capitalize;}</style>
</head><body><p class="uppercase">This is some text.</p><p class="lowercase">This is some text.</p><p class="capitalize">This is some text.</p></body>
</html>

一共有以下可能的值：

值	描述
none	默认。定义带有小写字母和大写字母的标准的文本。
capitalize	文本中的每个单词以大写字母开头。
uppercase	定义仅有大写字母。
lowercase	定义无大写字母，仅有小写字母。
inherit	规定应该从父元素继承 text-transform 属性的值。

其中capitalize是根据空格区分每个单词的。

当然，这玩意对中文没啥卵用。。。

text-docoration属性

text-decoration 属性规定添加到文本的修饰，下划线、上划线、删除线等。可能的值：

值	描述
none	默认。定义标准的文本。
underline	定义文本下的一条线。
overline	定义文本上的一条线。
line-through	定义穿过文本下的一条线。
blink	定义闪烁的文本。
inherit	规定应该从父元素继承 text-decoration 属性的值。

<!DOCTYPE html>
<html><head><meta charset="utf-8"> <title>decoration</title> <style>h1 {text-decoration:overline;}h2 {text-decoration:line-through;}h3 {text-decoration:underline;}</style></head><body><a href="#">我是超链接</a><h1>This is heading 1</h1><h2>This is heading 2</h2><h3>This is heading 3</h3></body>
</html>

注意超链接默认添加下划线，也就是超链接的text-decoration的默认值是underline。

letter-spacing属性

letter-spacing属性可以指定字符间距。可能的值：

值	描述
normal	默认。规定字符间没有额外的空间。
length	定义字符间的固定空间（允许使用负值）。
inherit	规定应该从父元素继承 letter-spacing 属性的值。

<!DOCTYPE html>
<html><head><meta charset="utf-8"> <title>letter-spacing</title> <style>h1 {letter-spacing:2px;}h2 {letter-spacing:-3px;}</style></head><body><h1>This is heading 1</h1><h2>This is heading 2</h2></body>
</html>

world-spacing属性

worl-spacing属性可以设置单词之间的间距。可能的值：

值	描述
normal	默认。定义单词间的标准空间。
length	定义单词间的固定空间。
inherit	规定应该从父元素继承 word-spacing 属性的值。

<!DOCTYPE html>
<html><head><meta charset="utf-8"> <title>word-spacing</title> <style>p{ word-spacing:30px;}</style></head><body><p>This is some text. This is some text.</p></body>
</html>

这个wold-spacing实际上就是设置词与词之间空格的大小。这东西也是有点弱智，对中文也没啥卵用。。。

text-align属性

text-align属性指定元素文本的水平对齐方式。可能的值：

值	描述
left	把文本排列到左边。默认值：由浏览器决定。
right	把文本排列到右边。
center	把文本排列到中间。
justify	实现两端对齐文本效果。
inherit	规定应该从父元素继承 text-align 属性的值。

<!DOCTYPE html>
<html><head><meta charset="utf-8"> <title>text-align</title> <style>h1 {text-align:center}h2 {text-align:left}h3 {text-align:right}</style></head><body>       <h1>This is heading 1</h1><h2>This is heading 2</h2><h3>This is heading 3</h3></body>
</html>

这个对齐的方式text-align属性我们用的比较多。是通过调整文本之间的空格的大小来达到效果的。

text-indent属性

text-indent 属性规定文本块中首行文本的缩进。可能的值：

值	描述
length	定义固定的缩进。默认值：0。
%	定义基于父元素宽度的百分比的缩进。
inherit	规定应该从父元素继承 text-indent 属性的值。

注意： 负值是允许的。如果值是负数，将第一行左缩进。负值可以将一些不想显示的文字隐藏起来，这样可以让用户看不见，但是搜索引擎能看见。

<!DOCTYPE html>
<html><head><meta charset="utf-8"> <title>text-indent</title> <style>p {text-indent:50px;}</style></head><body><p>In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'</p></body>
</html>

但是一般我们写中文文章开头都是缩进两个字体大小，如果采用默认值还好，可以直接将text-indent的值设置为32px但是如果我们将字体大小做了调整呢？

<!DOCTYPE html>
<html><head><meta charset="utf-8"> <title>text-indent</title> <style>p {text-indent:2em;font-size: 20px;}</style></head><body><p>在我更年轻，更脆弱的岁月中，父亲给了我一些建议，从那以后我就一直在思考。他对我说：“只要您想批评任何人，只要记住，这个世界上的所有人都没有拥有您所拥有的优势。”</p></body>
</html>

这就成了！！！

好了就说这么多了。下一次笔记会说一个比较重要的知识点——盒子模型。

回顾一下之前的

HTML列表的简单使用以及在我们网页编程中的单位你了解多少？？CSS中的字体样式你又了解多少，进来康康！！HTML、CSS（三）
CSS选择器优先级怎么分？？html中的文本标签都有哪些？？CSS（二）

CSS尺寸与文本讲解。HTML、CSS笔记（四）。相关推荐

css禁用选中文本_使用CSS禁用文本选择突出显示
css禁用选中文本 Introduction: 介绍: Texts are the most fundamental elements of any websites or web pages, th ...
css如何设置文本垂直居中显示,css中怎么设置文本居中？css文本垂直居中的设置方法...
在网页设计的过程中,有时候可能为了布局美观可能需要让文本居中,那么,怎么设置文本居中呢?本篇文章将给大家介绍关于css设置文本垂直居中的方法. 首先我们要知道通过css实现元素的水平居中较为简单:对文 ...
CSS字体、文本属性、CSS 盒模型
1.css字体 1.1 font-family 作用:设置文本的字体系列语法:font-family:字体名称: 常用值一个字体名称或系列名称(介绍常用字体名称.字体系列) 1.楷体 KaiTi ...
html怎么限制标题字数,CSS怎么限制文本字数
CSS怎么限制文本字数? css限制字数,超出部分显示点点点的实现方法使用css限制字数的显示,主要使用width宽度来设置,超出的部分显示点点点,主要通过设置text-overflow属性来实现. ...
高颜值数据库项目实战MySQL+JavaFX+Fxml+CSS（完整精讲解版+源代码）(六）
6:高颜值JavaFX数据库-九讲之六项目效果图功能点实现内部优化类结构示例创建数据库连接类 1.创建类 2.数据库连接步骤 3.一百个注意事项 4.类的具体实现 5.错误显示的类后记高 ...
前端：CSS/09/行内框架，CSS简介，CSS选择器，组合选择器，CSS注释，CSS尺寸属性，CSS字体属性，CSS文本属性
内嵌框架(行内框架,浮动框架) 语法格式:<iframe 属性="值">不支持时的提示信息</iframe> 描述:内嵌框架,相当于在现有的网页中,挖了一个 ...
转载一篇比较详细的讲解html,css的一篇文章，很长
转载自这里, 转载请注明出处. DIV+CSS系统学习笔记回顾第一部分 HTML 第一章职业规划和前景职业方向规划定位: web前端开发工程师 web网站架构师自己创业转岗管理或其他 web ...
CSS 单行溢出文本显示省略号...的方法（兼容IE FF）（转）
CSS 单行溢出文本显示省略号...的方法(兼容IE FF)(转) html代码: <div> <p><span>CSS Web Design 我爱CSS-Web标 ...
day12-HTML、CSS与blog页面讲解
第1章前端之HTML介绍 1.1 课堂笔记总览 day12前端内容:1. HTML2. CSS3. JavaScript学习计划:1. HTML + CSS2. JavaScript3. jQuer ...

CSS尺寸与文本讲解。HTML、CSS笔记（四）。