css随笔2_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-21 08:53:21
Original
1150 Leute haben es durchsucht

生命如江河,奔流不息!

再说说边框

边框是有形状的,因为平时边框都很细,所以我们看不出来,需要放大一点才能看的到。我们顺便复习下在随笔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;}
Nach dem Login kopieren

我们给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;
    Nach dem Login kopieren

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

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

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

字体样式的设置

字体基本样式

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

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

显示效果如下:

1458622470299.png-8kB

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

font-size:18px;font-family: "宋体";font-style:italic;
Nach dem Login kopieren

1458622841975.png-14.4kB

文本缩进

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

text-indent:2em;
Nach dem Login kopieren

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

文本中的各种间距

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

letter-spacing: 25px;word-spacing: 20px;
Nach dem Login kopieren

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

1458707551438.png-6.5kB

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

1458707682124.png-5.8kB

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

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage