当前位置: 首页 > Web前端 > CSS

啦咯ill图

时间:2023-03-30 17:58:53 CSS

根据CSS继承理论,我们没有在“div#wrap”的内容容器中显式设置字体大小,这样整个“div#wrap”都会继承其父元素“body”的字体——“16px””。1.设置段落样式:——“12px”字体,“18px”行高和边距值从CSS继承我们可以知道,我们所有的段落都继承了其父元素“div#wrap”的“font-”size:16px”。同时,我们从前面的介绍中知道1px=1÷16=0.0625em,这样我们就很容易知道“12px”等于多少个“em”。0.0625em×12=0.750em,所以我们可以设置段落pStyle:p{font-size:0.75em;/*0.0625em×12=0.750em*/}来计算需要的行高和段落的“margin”为“18px”,满足RichardRutter说的基本行距,那么我们需要计算如下:18÷12=1.5em用需要的行高值“18px”直接除以“字体大小12px”,这样我们得到“行-段落“p”的“高度”值。本例中行高等于字体的“1.5”倍,那么我们给段落“p”加上“line-height”和“margin”样式p{font-size:0.75em;/*0.625em×12=0.750em*/line-height:1.5em;/*18px(line-height)÷12(font-size)=1.5em*/margin:1.5em;/*18px(margin)÷12(font-size))=1.5em*/}2.设置标题字体大小为18px。标题“h1”与段落“p”相同。它也继承了它的父元素“div#wrap”的“16px”font-size,所以我们可以用同样的方法计算出他的“em”0.0625em×18=1.125em我们可以将得到的值写到CSS样式表中h1{font-size:1.125em;/*0.625em×18=1.125em*/}同样为了保留RichardRutter提到的垂直韵律,我们还设置了标题的“line-height”和“margin”“h1”到“18px”,使用前面介绍的方法。很容易将它们的“em”值设为“1em”:h1{font-size:1.125em;/*0.625em×18=1.125em*/line-height:1em;/*18px(line-height)÷18px(font-size)=1em*/margin:1em;/*18px(边距)÷18px(字体大小)=1em*/}