当前位置:首页>>软件教程>>网页制作>>新闻内容
技巧:如何将 CSS 加诸于网页
作者: 发布时间:2005-5-6 13:19:59 文章来源:


参考范例:

H4 {font-style: italic}
P {font-style: oblique}



{font: 12pt/14pt}

此属性用来指定字体的大小与每行行距的高度。上例中,12pt 指的是字体的大小,14pt 指的是行距的高度。

事实上,{font: … } 可以集结所有跟 font 有关的扩充属性在此标签内,所以您除了在 {font: … } 内指定字体大小与行 距高度外,还可以在此标签内加入所有上述介绍过的属性。

参考范例:

P {font: italic bold 12pt/14pt}
STRONG {font: 14pt/18pt bolder italic Times, serif}

CSS 中 Color 的扩充属性
{color: red}

此属性用来指定字体的颜色。画底线的部分可以用各式各样的颜色来替换之。您可以使用16 进位颜色码表示(如:#00ff77)或利用浏览器既定的英文单字表示颜色(如:gray, blue..... 详细请见: Table 的扩充属性 )。

如果您指定的颜色如同 #00ff77 一般,是两位数字、两位数字重覆组成的话 (00, ff,77 而非 03, 8f,7e ) ,您可以直接使用 #0f7简化表示之。

参考范例:

BLOCKQUOTE {color: navy}
LI {color: #eedd44}
LI {color: #ed4}
P {color: #007f3a}



{background-color: red}

此属性用来指定整个网页的背景颜色,或某一段落,某一区块的背景颜色。画底线的部分可以用各式各样的颜色来替换之。您可以使用16 进位颜色码表示(如:#00ff77)或利用浏览器既定的英文单字表示颜色(如:gray, blue..... 详细请见: Table 的扩充属性 )。

如果您指定的颜色如同 #00ff77 一般,是两位数字、两位数字重覆组成的话 (00, ff,77 而非 03, 8f,7e ) ,您可以直接使用 #0f7简化表示之。

参考范例:

BODY {background-color: #ed4}
BLOCKQUOTE {background-color: navy}
H2 {background-color: #007f3a}



{background-image: url (/images/xyz.gif)}

此属性用来指定网页或某一区块的背景图案。画底线的部分可以使用图档的绝对位置或相对位置来表示之。

使用此标签时,最好同时也指定一个类似的颜色做背景颜色。

参考范例:

BODY {
background-image: url (/images/2T_logo.gif);
background-color: #ededff
}
LI {
background-image: url http://www.2T.com/2T_logo.gif);
background-color: #cef
}




{background: (…)}

此标签可以集结所有跟 background 有关的扩充属性在此一标签内,所以您可以将所有上述介绍过的 background 属性一起加进来。

参考范例:

BODY {background: white url (/images/2T_logo.gif) repeat-y}
LI {background: #cc88ff url http://www.2T.com/2T_logo.gif) no-repeat}


CSS 中 Text 的扩充属性
{text-decoration: none}

此属性用来指定文字是否画有底线或被线条杠掉(如:被线条杠掉此例)。画底线的部分可以用 none, underline, line-through 来替换之。

此属性的内定值为 none。

参考范例:

P {
color: navy;
text-decoration: none
}
A:link, A:visited, A:active {
text-decoration: underline
}




{text-align: left}

此属性用来指定文字是向左、向中、或向右对齐。画底线的部分可以用 left, right, center, justify 来替换之。

参考范例:

P {text-align: left}
H1 {text-align: center}



{text-indent: 2cm}

此属性用来指定文字向右凹进去多少公分、厘米、英寸、点数(point)、图素(pixel)、或多少 % 。测量单位可以用 cm, mm, in, pt, px, %来表示之。 % 是以母标签来相对比。

参考范例:

P {text-indent: 3cm}
LI {text-indent: 60px}
BLOCKQUOTE {text-indent: 20%}



{line-height: 14pt}

此属性用来指定每行行距的高度。line-height 常与字体大小 font-size 一起并用,写成 12pt/14pt (12pt 指的是字体的大小,14pt 指的是行距的高度)。line-height也可以用 % 表示之。 % 是以母标签来相对比。

参考范例:

BODY {
font-size: 12pt;
line-height:14pt
}
H1 {
font-size: 150%;
line-height: 200%
}

H4 {font: 16pt/20pt bold italic}


CSS 中 Margin, Padding 的扩充属性
{margin: 3cm}

此属性用来指定网页的上下左右边缘,各需留白多少公分、厘米、英寸、点数(point)、图素(pixel)、或多少 % 。测量单位可以用 cm, mm, in, pt, px, %来表示之。 % 是以母标签来相对比。

margin 可以用 margin-top, margin-bottom, margin-left, margin-right来替换之。

此属性的内定值为 0。

参考范例:

BODY {
margin-top: 44px;
margin-bottom: 2cm;
margin-left: 66px;
margin-right: 1.5in
}
P {margin: 15pt}



{padding: 14px}

此属性用来指定各段落或各区块间,上下左右边缘各需留白多少公分、厘米、英寸、点数(point)、图素(pixel)、或多少 % 。测量单位可以用 cm, mm, in, pt, px, %来表示之。 % 是以母标签来相对比。

padding 可以用 padding-top, padding-bottom, padding-left, padding-right来替换之。

此属性的内定值为 0。IE3 不支援所有与 padding 相关的标签。

参考范例:
BODY {margin: 15pt}
DL {
padding-top: 22px;
padding-left: 20%;
}


[首页]    [上一页]    [下一页]    [末页]    
最新更新
·如何去掉ECShop2.7中的Powered by ECSh
·在IE7下生成高质量CSS缩略图
·解决Dreamweaver打开和关闭时出现JavaS
·影响搜索引擎排名的因素2009版
·IE6/IE7/IE8/Firefox/Chrome/Safari的C
·Flash对联广告及关闭按钮制作方法
·Discuz! 7中如果设置帖子中显示图片而不
·5种方法立刻写出更好的CSS代码
·兼容IE和Firefox的按图片宽度缩放的CSS
·兼容Firefox和IE浏览器的“加入收藏”代
相关信息
·IE6/IE7/IE8/Firefox/Chrome/Safari的CSS hack兼容表
·5种方法立刻写出更好的CSS代码
·兼容IE和Firefox的按图片宽度缩放的CSS代码
·XHTML+CSS兼容性解决方案小集
·让CSS兼容IE和Firefox的技巧集合
·解决用CSS控制DIV居中失效的问题
·让PNG图片在IE浏览器下显示透明背景
·CSS在编写中最常见的10个错误
·解决CSS样式表失效的问题
·用CSS和DIV实现圆角表格(矩形)
画心
愚爱
偏爱
火苗
白狐
画沙
犯错
歌曲
传奇
稻香
小酒窝
狮子座
小情歌
全是爱
棉花糖
海豚音
我相信
甩葱歌
这叫爱
shero
走天涯
琉璃月
Nobody
我爱他
套马杆
爱是你我
最后一次
少女时代
灰色头像
断桥残雪
美了美了
狼的诱惑
我很快乐
星月神话
心痛2009
爱丫爱丫
半城烟沙
旗开得胜
郎的诱惑
爱情买卖
2010等你来
我叫小沈阳
i miss you
姑娘我爱你
我们都一样
其实很寂寞
我爱雨夜花
变心的玫瑰
犀利哥之歌
你是我的眼
你是我的OK绷
贝多芬的悲伤
哥只是个传说
丢了幸福的猪
找个人来爱我
要嫁就嫁灰太狼
如果这就是爱情
我们没有在一起
寂寞在唱什么歌
斯琴高丽的伤心
别在我离开之前离开
不是因为寂寞才想你
爱上你等于爱上了错
在心里从此永远有个你
一个人的寂寞两个人的错