• 技术文章 >web前端 >html教程

    css随笔2_html/css_WEB-ITnose

    2016-06-21 08:53:21原创639

    生命如江河,奔流不息!

    再说说边框

    边框是有形状的,因为平时边框都很细,所以我们看不出来,需要放大一点才能看的到。我们顺便复习下在随笔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中写入若干文字

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

    显示效果如下:

    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

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:css随笔2
    上一篇:sass 指令学习_html/css_WEB-ITnose 下一篇:自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • 如何考评一名前端工程师?_html/css_WEB-ITnose• 为什么是这样的?_html/css_WEB-ITnose• 初识CSS_html/css_WEB-ITnose• 糟糕的css用法 1_html/css_WEB-ITnose• 各位高手,为什么我的网站打开的速度那么慢,到底是什么原因导致的?_html/css_WEB-ITnose
    1/1

    PHP中文网