css随笔2_html/css_WEB-ITnose

生命如江河，奔流不息！

再说说边框

边框是有形状的，因为平时边框都很细，所以我们看不出来，需要放大一点才能看的到。我们顺便复习下在随笔1中讲到的内容

#dv {    width: 100px;    height: 100px;    border-top: 20px solid green;    border-right: 20px solid blue;    border-bottom: 20px solid orange;    border-left: 20px solid tan;}

我们给div设置宽和高，然后将四条边框设置成不同的颜色，并且将边框的宽度设为10px，效果如下：

1458571840365.png-2.1kB

我们可以明显的看到，边框与边框相交的地方是一条斜线，所以边框并不是一个长方形哦。

还有一点需要注意，边框的宽度是不占用div的宽度的，假如说div的宽度是100px，边框的宽度是2px，那么这个div总的宽度就是div内部宽度+两条边框的宽度，即104px。为了验证我们的这一想法，我们使用ps来做一个长度测量，看看到底是不是这么回事。

1458572432136.png-18.9kB

1458572377818.png-20.6kB

如上图所示，边框的宽度是不占用div的宽度的，这一点要在平时的练习中注意

补充背景样式

除了随笔1中记录的那些样式，background还有一些比较重要的样式：

1. 背景图位置固定,这个不太好截图，自己试试吧。

   background-attachment:fixed;

   如果设置这个属性，再设置background-position为百分比时，背景图会相对于浏览器来定位，不知道这是为什么，还请各位高手指教

2. background的复合样式，background复合样式中可填写如下值

样式	说明
color red	颜色
url()	背景图片
x-repeat	背景图片平铺方式
position 20px 20px	背景图片位置

字体样式的设置

字体基本样式

下面看字体样式相关的部分，我们先放一个空的div,并在这个div中写入若干文字

 <div id="box">        据法广新闻网16日报道，起初，比利时和法国警方只是在布鲁塞尔南区的福尔斯特（Forst）一栋房屋内检查证件，屋内人员在警方搜查时开了枪， 打伤3名警察。随后，比利时与法国警方联合与屋内人员展开枪战，枪战中1名警察受伤，1名嫌疑人被打死，但死者并非被通缉的巴黎恐袭主嫌犯。</div>

显示效果如下：

1458622470299.png-8kB

字体比较重要的样式有：font-size（更改文字大小）,font-family（更改字体）以及font-style（更改字体的样式，如斜体）和font-weight（字体粗细），如果我们想要显示18像素大小的宋体倾斜文字，那么，我们应该给div加上如下的样式：

font-size:18px;font-family: "宋体";font-style:italic;

1458622841975.png-14.4kB

文本缩进

按照我们中文的习惯，我们首段的首行会有缩进两个字符，css中表示缩进的样式是text-indent，因为上文中的字体大小是18px，所以缩进两个字符就应该是 text-indent:36px;，这个时候，就有问题了。我们每次改变字符的大小，都要去修改文本缩进的大小。有没有简单的方法呢？答案是有的，就是用em这个单位，那么我们可以这么做

text-indent:2em;

这样的话，首行缩进就永远是2个字体所占的像素大小了。

文本中的各种间距

首先，我们要清楚两个概念。什么是字间距，什么又是词间距？由于html、css这些都是老外发明的，所以字间距其实是指的字母间的间距，css中用word-spacing来设置；词间距则是单词之间的间距，css中用letter-spacing来表示。那么如果是中文有事怎么样呢？中文的字间距就是指两个汉字的间距，那么怎么划分汉字中间的单词呢？你想一下英语是怎么区分单词的，对，是用空格来区分的，如果汉字与汉字之间有空格，空格两边的汉字就是词了，词间距即两个汉字词语的间距。我们实际来使用下吧,我在上面的样式中，继续设置如下样式：

letter-spacing: 25px;word-spacing: 20px;

我们上面还设置了文本缩进，我们来看一看效果

1458707551438.png-6.5kB

看上图就知道，文本缩进了两个字体大小，字母间的间距是20px，但是从这里没法看到词间距，我们在“法广”和“新闻”之间来一个空格，再看效果

1458707682124.png-5.8kB

这次就先到这里了，下次有时间继续写o(^▽^)o