CSS3.3

Posted 2020-06-17

为文本添加样式

在开始就提及，也是为了方便省事——依稀还记得一些关于可继承属性的内容，而这个随笔里提到的大多数的属性都是可继承的

选择字体：

关于这个呢，我们只是一般编辑一些普通的文本时，只要宋体什么的可能就可以了。但是在很多实际的创建时，对字体也是有很多的要求的。

对于字体呢，我到现在的认识也是不多的，只知道一般情况（没用使用样式定义）下，文本使用的字体都是系统默认的。

在接下来要说到的字体的格式化中，如果对于定义的字体都是计算机中没有的，那么就只能显示系统默认的了。

在选择定义字体时要先知道一个小提示，那些字体是形成一个系列的，即一般有一个首选的（一般情况下的第一选择或者web字体），一个以上的备用字体（两个左右就可以了），最后一个必须要是表示类属的字体（其他都不能用了，那就选这个的意思，所以一般也是默认字体《书》P175）。    

同时要注意，在选择备用的字体时要尽量满足跟首选字体相近的原则。

例子：

body{

　　font-family:首选，备用，备用，类属字体;

}

使用字体格式化的另一个原因是，有时对于不同的语言我们需要用不同的字体去显示和区分。

创建斜体：

虽然html中有很多的元素提供了斜体显示的功能，但是我们应该记得这些元素都拥有自身要表达的含义或者情境（比如cite em等）

所以对文本进行格式化也是有必要的。

例子：

body{

　　font-style:italic;/*也可以是oblique，但是绝大多数的情况下使用的是italic*/

}

要取消斜体的话就是将属性值定义为normal。还有什么假斜体什么的，讲的太深了，感觉也没什么实际的意义。《书》P177

创建粗体：

关于粗体的使用，大多数都是为了突出显示一些关键或者指示性的文本（如标题）。

关于粗体的属性值有多种的选择，比如可以是bold(粗体)，一个范围在100~900的数字（数字只能是100的倍数，越大则字体越粗，400为正常），或者是bolder（更粗）和lighter（更细）。

至于粗体的取消也和斜体大同小异，都是讲属性值定义为normal。

跟假斜体相似，有的文本因为本来就没有粗体这种格式，所以即使定义了粗体也只能是一种计算机模拟出来的。

例子：

body{

　　font-weight:属性值；

}

字体大小：

接下来要说的是对于文本大小的格式化，大小由数字来定义，但是涉及到这些数字的单位问题（px或者em）。

px就是普通的像素单位（需要直接定义字体的大小时使用像素单位），而em是伴随像素而成的一种大小。

为什么这么说呢？因为em需要当前文本包含的元素的父元素被格式化大小（一般是16像素，也可以定义成100%，都是一个意思）,然后就是em数值的计算了，它等于我们希望的像素大小除以父元素的大小。也可以表示成相除结果的百分比数。

另外还有一个单位rem，原理都是相同的，只是将父元素换成根元素罢了。

之所以具体地说明em单位，是因为它是最经常被使用的单位（应该没有之一吧）。

例子：

body{

　　font-size:XXXem;

}

PS:因为这个属性是可以被继承的，所以要记住，设置了相对字体大小的元素的子元素继承的是大小而不是相对值。

设置行高：

当一段文本密密麻麻的时候，我们会希望行与行之间存在一定的间距，这样格式化的结果就是文本被浏览的时候读者会舒服很多。

在这里，行高的数字也是有多种选择的，比如一个单纯的数字（这样的结果是行高等于这个数字和字体大小的乘积），比如一个百分比数字（字体大小的百分比），比如一个单位为像素或者em的值。

恩，又是em。它在这里的计算方法跟之前提过得一样，只是除数变成了字体的大小。

例子：

body{

　　font-height:1.5em；

}

一次性设置所有跟字体有关的属性：

在初初看到这个章节里一个又一个属性都是以font开头的时候我就在想，能不能一次性全都解决了它们。很显然，CSS没有让我失望。

但是简洁的编辑方法也是有限定的，那就是对于字体大小的定义和字体系列的定义是必须的，并且大小的定义一定要在字体系列之前，其他的随意。

还有就是如果要定义行高的话，那么一定是在字体大小之后接一个斜杠 / 然后不按空格的接行高大小值。

哦，另外就是在这里提前说一下另一个有关部字体的属性——设置小大写，看起来很拗口，其实就是将大小的格式缩小罢了。属性值为 small-caps，如果希望取消的话，可以定义值为none。

例子：

body{

　　font:italic small-caps bold .875em/1.3

　　"Palatino Linotype",Palatino,serif;

}

更具体《书》P186

 

设置颜色：

这里就涉及之前说到过的多种的颜色的定义方式：直接颜色名，十六进制法，RGB,RGBA,HSL,HSLA。

因为之前在属性部分已经说到过了，所以这里就先psaa。详细的见《书》P187

 

设置背景：

类似font，这类的属性都以background-开头，然后也是可以将多个格式化背景的属性放在一起简洁的统一格式化。

需要了解的是，绝大多数的元素都是可以添加背景的（单个元素，整个页面或者两者的任意组合，很强大），即使图片也是可以的，恩，我没有看错。

在连字符的后头可以接上的是color,image,repeat,attachment，position等（这里写等是因为还有其它可选的属性，见《书》P194）

color很简单，需要结合之前一个的颜色的表达，过。

image，需要url路径，具体是url(路径)的形式。

然后之后的三个属性都是跟图片（image）有关的。

repeat大致是决定图片以什么形式进行重复，因为一般情况下图片都是会自动填满整个页面的，多以我们可以对它进行格式化。

repeat是默认值，然后是横向的重复repeat-x，纵向的repeat-y，不重复的no-repeat。

attachment是决定背景图片是否跟随页面滚动，定义为fixed时，图像会像讨厌的广告一样跟着跑，而定义为scroll时（也就是默认值）图像会跟着上下移动。

position则是需要添加另外两个参数xy，同时这两个参数也有两种选择方式——数字（可以是以像素文单位的数字或者是百分数可以是负数）或者是关键字（x可选的为left,center,right;y可选的为top,center,bottom）

这个属性的作用是决定图像的位置，xy具体的就是表示图像距离左上角的据对距离或者百分数。

因为跟font-的属性系列很像，所以单独的例子我就不写了。

例子：

body{

　　background:red url() no-repeat scroll

　　left center;

}

 

控制间距和添加缩进：

所谓的间距分成两种——单词间的距离：字间距和字母间的距离：字偶距。

字间距：word-spacing:带单位的数字（以像素或者em为单位）；

缩进简单说就是每段开头空两格这样的意思。以一个具体的值控制每一段第一行前空出的距离。

字偶距：letter-spacing：同上；

关于一些内联的元素改成能够格式化间距的方式，见《书》P196

 

文本对齐：

这个的话跟在html里的align属性非常得相像。

比如：text-align:left/right/center/justify(两端对齐);

没什么好说的。

 

文本的大小写：

按需要可以格式化为每个单词的首字母大写——capitalize

所有的字母大写——uppercase

所有的字母小写——lowercase

保持原来的格式——none

其实一开始我是认为既然我们的键盘上就有大小写这种东西，那为什么不直接在编辑的时候就搞定一切呢？

然后《书》告诉我，有的文本的来源是不允许我们进行编辑的，所以只能通过格式化这种方式处理。

 

小型大写字母：

之前说到过。

跟先将文本格式化成全部大写在更改文本大小不一样，直接格式化成小大写更方便。

例子：

font-variant:small-caps/none;

 

装饰文本：

具体表现为给指定的文本添加下划线、上划线或者删除字效果。恩，就想html里的效果那样。

例子：

text-decoration:underline(下划线)/overline（上划线）/line-through（删除线）;

 

设置空白属性：

我第一个想到的是元素pre。然后这里真的也有这个属性值。

其实这个属性主要是为了让网页显示会被忽略的空格（多个空格会被当做一个）。

例子：

white-space:pre(这个懂)/nowrap(文本全部显示在一行)；

然后就是下一章的内容了，还有就是我要睡觉了。

 

CSS布局：