CSS3.3

为文本添加样式

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

选择字体：

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

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

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

在选择定义字体时要先知道一个小提示，那些字体是形成一个系列的，即一般有一个首选的（一般情况下的第一选择或者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布局：

在开始本块内容的前，先简略地提几点注意事项：

1.充分地遵从内容和表现分离的原则（之前已经说过大概两三遍了）。

2.网页的设计主要分成固定布局（主要是宽度被固定了）和响应式布局（宽度被格式化为百分比，会随着页面大小的变化而变化）。

3.在正式地将制作出来的页面发布到Web上前，应该要在不同的浏览器上进行测试。

默认样式的重置或标准化：

我们知道，一般各种浏览器都有属于自己的默认样式。大多数时候那可能不是我们需要的样式。

这个时候我们就需要对默认的样式进行覆盖了（重置/标准化）。

1.我们也知道，使用样式表（外部样式表）可以对样式进行格式化，具体的原理就那回事。

2.使用那谁和谁创建的normalize.css开始主样式表（《书》P208）。

前一种的方法是对样式表的覆盖，即意味着原本的我不要了，现在我要换上我喜欢的那一款样式（从外部加载）。后者不是对默认的重置，而是一种微调（？），使得它们在不同的浏览器中具有相似的外观。当然，两种方式都不选，而是自己进行所需样式的编写也是可以的（我觉得是最好的，不论及样式的重复利用的话）。

盒模型：

CSS认为每一个元素都是包含在一个或大或小的盒子里的，这就是盒模型的意义。

需要重点说明的是，这个盒子不是我们现实生活中认为的那种盒子，而是分成了四层的一个平面模型，由外及里是外边距（margin），边框（border），内边距（padding），元素内容组成。其中外边框充当将这个元素与其他元素间隔开的功能。

盒模型外面几层的边框（边距）受我们定义的宽度的影响而改变变现。CSS中的宽度指的是内边距的宽度（所以有的时候我们会觉得，诶，怎们比我们想象的要宽）。也因此，元素在浏览器页面中显示的宽度是元素内容+内边距+边框的总和。而相对的，高度影响的是上下内边距和边框值。

那么如果我们希望元素在页面中表现出的宽度就是我们设置的width值怎么办？这里有一个解决的方法：使用样式，将元素的属性box-sizing设置为border-box。这个时候，相当于外层只留下一个外边距了，它只是起到隔开相邻元素的作用。

宽度的具体设置（这里指的是上下左右四个方向）在后头说。

元素的显示类型和可见性：

显示类型是什么呢？元素在默认的情况下要么是在单独的一行显示，要么是在行内显示（跟别个元素在统一行）。这就是所谓的块级元素和行内元素。

而之所以它们会有不同的显示属性，是因为它们都具有的属性display的值对不同。块级的是bolck，而行内元素的是inline。（其它的元素自然也有属于自己的值对，这里略过）

既然知道了表现的本质原因，那么修改元素的显示属性也就成为了可能，将元素的display设置成block（块级）或者inline-block（行内显示但是用块级的性质）以使其适应自己的一些需要。（设置为inline的元素会忽视width,height,margin这类的设置《书》P212）

同样的，display属性能赋予的值对不仅仅是上述这些，它还能控制元素的隐藏与否。

具体的做法是将display值设置为none值。很简单的说。这么做的话，被忽视的元素原本应该出现的位置会被之后的元素占据，也就是说它的存在会被完全地忽视，就好像没有一样。

另一种让元素“消失”的方式是控制元素的可见性，做法是将属性visibility设置为hidden。（visibility在后头还会说到）

这种忽视元素的方式和display：none；不同，它不会显示本应出现的元素，但是会在文档流中留下该元素的位置（就像有人缺席一样，但是但是位子还是在的）。

PS：只要元素是被忽视了，不管是设置成display:none; 还是visibility:hidden; 这些元素中的所有内容都会被影响，而且它们的后代一样会被影响。

高度和宽度：

最开始我学会设置这两个属性值得时候，是在元素内部进行设置（图像的width和height），这个时候它们都是没有单位的。后来知道了像素单位，又知道了更加先进的em（根据父元素相应属性值大小或者自身的字体大小）和rem（根据祖元素）来设置宽度、高度等属性值。

后来又接触了更棒的百分比设置方式（不过需要知道参照的大小，一般是父元素或者祖元素）。（例子：300px（我们希望的大小）/960px（参照大小）=一个百分比值）

换成百分比的好处是随着网页的变化（拉大拉小），里头的内容也会随着他们之间百分比大小关系而产生变化（前提是要设置为百分比，即制作成一个响应式的网页）。

当然，如果不设置的话也是没有关系的。因为想宽度和高度这样的属性是有一个默认的属性值（auto）存在的。

width的auto值是盒模型的大小减去（外边距+边框+内边距），这的大小按书上的说法是“包含块”。

对于图像这样的元素，auto就是它们本来的大小了。

除此之外，还有一类属性是规定宽度之类属性的最值大小的，类似max-width，min-width这样子。

所以为什么要有这样的一类最值属性呢？讲道理啊，之前提到的盒模型啊，它其实有自己的大小的，如果只是将盒子里包含的手动元素设置width，height等属性的大小（也就是固定了它们的大小），它们有可能突破盒子的大小范围，超出到盒子外去。这个就不是我们希望看到的了。所以这个时候我们就可以设置内容元素的最大值防止它们过界，也可以设置最小值防止它们被看不到了（= =）。

所以讲道理，一般的情况下，min-height这样的一定好于height这样的。

padding：

内边距是元素内容周围，边框以内的空间的含义。

内边距的厚度（我更喜欢说成是宽度）可以被修改，但是它的颜色和纹理是不可以被改变的。（why？）->

因为这些内容时属于背景的范畴，所以需要通过background,background-color来设置和修改。

padding因为是包在元素的周围的，也就是说有上下左右的，所以它最多是可以设置四个数值的。

例子：padding：xx xx xx xx；（恩，至少设置成以em为单位）

但是，可以我就是不喜欢按道理来，可以吗？

当然是可以的。这么做的话需要遵守一些原则：

只设置一个数值的话，它被作用于上下左右（四边距都一样）。

设置两个数值：前一个作用于上下，后一个作用于左右。

设置三个数值：前一个作用于上内边距，中间一个作用于左右，后一个作用于下。

默认情况下，width和height是不包含padding的。

border：

边框是可以作用于所有的元素（对，所有，我没有看错），包括图像一类的。

边框风格：（决定边框的表现形式）

想要边框显示出来的话，就必须设置边框的样式，也就是style。

因为边框的默认样式是 border-style:none;

可以被设置的样式有：

none，dotted（点线）,dashed（虚线）,solid（实线）,double（双线）,groove（槽线）,ridge（脊线）,inset（凹边）,outset（凸边）

边框宽度设置：

border-xx;

边框颜色：

border-color:颜色表达形式（名称，十六进制等）

简记法;

类似于字体文本font，可以将边框的多个属性一次性设置。

例子：border(-top/left/right/bottom这是如果需要将效果固定到一条边上时)：style（风格） width（宽度） color（颜色）；更多的见《书》P220

margin:

很多的地方类似于padding，所以略过。

如果一个元素位于另一个的上方，对于属于它们的相接触的margin，只会使用其中较大的一个，另一个会被叠加（盖在上边）。左右则不会。

 浮动：

使用样式float，使得元素浮动到其他元素上（方向可以设定）。

让文本（文本也是元素啊）环绕元素：

float:left/right/none；

我们选择的方向是作用于需要进行浮动的元素上的，而不是环绕元素周围的元素。加入目标元素被设置为左浮动，那么其它的元素就会环绕在它的右边。

也可以使用float属性设置元素的宽度，使得有一定的空间放置环绕它的元素。

控制元素浮动位置：还是不大懂 《书》P226

相对定位：

既然都说是相对定位了，那一定就有一个位置作为定位的基准。对于相对定位而言，这个基准就是元素的原始位置。

例子：

position：relative；

top：xx；

left：xx；

right：xx；

bottom：xx；

除了position：relative；外，还需要设定偏移的具体距离。可以是正数，也可以是负数。

除了被设定相对定位的元素以外，其它元素依然要按照文档流的原则进行排列。

position的默认值对是static，这么设置可以覆盖定位。

绝对定位：

概念什么的类似于相对定位，但是它的基准是body元素或者离该元素最近的被定位过的祖元素。

进行绝对定位的元素跟浮动不同，因为它不会在元素原本的位置上留下空白，也不会有其它的元素环绕在它的四周。

实际上就相当于，被绝对定位的元素是从天而降一样，它不知道别人，别人也不知晓它。相对独立存在（这么说可以吗？）。

例子：

position：absolute；

top：xx；

right：xx；

（left：xx；

bottom：xx；

）

这里要注意啊，偏离的距离是相对于基准元素的。如果是top：150px； left：500px； 那么实际上就是相对于基准向下偏移150像素，向右偏移500px。

绝对定位一样可以使用position：static；来覆盖。

在栈中定位：

因为使用定位的原因，所以一些元素可能会重叠在一起，那么我们就需要来处理一下谁在上，谁在下的问题了。

这里需要使用样式z-index，注意，这只对设置成相对定位和绝对定位的元素有效，如果是默认值下的static的话，就不受影响。

例子：

z-index:xx;

为多个进行定位的元素加上这个样式，同时赋予不同的值对大小。一定要分出大小的原因是，最大的最上边。就是这样。

溢出：