CSS实例编(一)

最新推荐文章于 2024-08-21 11:04:16 发布

kenwyn

最新推荐文章于 2024-08-21 11:04:16 发布

阅读量586

点赞数

分类专栏： CSS教程文章标签： css class border url div image

本文链接：https://blog.csdn.net/kenwyn/article/details/1571023

版权

CSS教程专栏收录该内容

7 篇文章 0 订阅

订阅专栏

字体属性实例

1.font-family参数

用法实例如下：点击这里看运行效果

源代码已在下面文本框列出，以供参考：

<HEAD><META http-equiv="Content-Type" content="text/html; charset=gb2312"><TITLE>font-family参数</TITLE><STYLE>.MS {font-family:"MS Serif"}.Impact {font-family:"楷体","Impact"}.serif {font-family:serif}</STYLE></HEAD><H3 class="MS">这里所显示的是 "MS Serif"字体</H3> <P class="Impact">因为我没有"楷体"，所以显示的字体是"Impact"字体<p><p><p></P> <P class="serif">这里所显示的字体是serif字体<p><p><p></P>

2.font-size参数

用法实例如下：点击这里看运行效果

源代码已在下面文本框列出，以供参考：

<HEAD><META http-equiv="Content-Type" content="text/html; charset=gb2312"><TITLE>font-size</TITLE><STYLE>.x-large {font-size:x-large}.font-size {font-size:16px}.larger {font-size:larger}</STYLE></HEAD><DIV>这个区域的字体是一般的字体</DIV><DIV class="x-large">绝对字体</DIV><DIV class="font-size">指定字体大小为16px</DIV><DIV class="larger">相对字体大小</DIV>

3.font-style参数

用法实例如下：点击这里看运行效果

源代码已在下面文本框列出，以供参考：

4.font-variant参数

用法实例如下：点击这里看运行效果

源代码已在下面文本框列出，以供参考：

5.font-weight参数

用法实例如下：点击这里看运行效果

源代码已在下面文本框列出，以供参考：

6.font参数

用法实例如下：点击这里看运行效果

源代码已在下面文本框列出，以供参考：

颜色和图像属性实例

1.background-color参数

用法实例如下：点击这里看运行效果

源代码已在下面文本框列出，以供参考：

2.background-image参数

用法实例如下：点击这里看运行效果

源代码已在下面文本框列出，以供参考：

<HEAD><META http-equiv="Content-Type" content="text/html; charset=gb2312"><TITLE>background-image参数</TITLE><STYLE>.image {background-color:EEFFCC;background-image:url("back.png")}</STYLE></HEAD><DIV class="image">这是一个DIV方块。<BR><BR><BR></DIV>

3.background-repeat参数

用法实例如下：点击这里看运行效果

源代码已在下面文本框列出，以供参考：

4.background-attachment参数

用法实例如下：点击这里看运行效果

源代码已在下面文本框列出，以供参考：

5.background-positiont参数

用法实例如下：点击这里看运行效果

源代码已在下面文本框列出，以供参考：

6.backgroundt参数

用法实例如下：点击这里看运行效果

源代码已在下面文本框列出，以供参考：

边框属性实例（一）

1.border-top-width参数

用法实例如下：点击这里看运行效果

源代码已在下面文本框列出，以供参考：

2.border-right-width参数

用法实例如下：点击这里看运行效果

源代码已在下面文本框列出，以供参考：

<HEAD><META http-equiv="Content-Type" content="text/html; charset=gb2312"><TITLE>border-right-width参数</TITLE><STYLE>DIV {border:solid}.border-right-width {border-right-width:10px}</STYLE></HEAD><DIV class="border-right-width">边框区的右边的大小是10px，其他边是默认值。</DIV>

3.border-bottom-width参数

用法实例如下：点击这里看运行效果

源代码已在下面文本框列出，以供参考：

4.border-left-width参数

用法实例如下：点击这里看运行效果

源代码已在下面文本框列出，以供参考：

5.border-width参数

用法实例如下：点击这里看运行效果

源代码已在下面文本框列出，以供参考：

6.border-top-color参数

用法实例如下：点击这里看运行效果

源代码已在下面文本框列出，以供参考：

7.border-right-color参数

用法实例如下：点击这里看运行效果

源代码已在下面文本框列出，以供参考：

8.border-bottom-color参数

用法实例如下：点击这里看运行效果

源代码已在下面文本框列出，以供参考：

<HEAD><META http-equiv="Content-Type" content="text/html; charset=gb2312"><TITLE>border-bottom-color参数</TITLE><STYLE>DIV {border:solid 10px}.border-bottom-color {border-bottom-color:red}</STYLE></HEAD><DIV class="border-bottom-color">边框区的底部是红色的，其他边是默认值(黑色的)。</DIV>

9.border-left-color参数

用法实例如下：点击这里看运行效果

源代码已在下面文本框列出，以供参考：

10.border-color参数

用法实例如下：点击这里看运行效果

源代码已在下面文本框列出，以供参考：

边框属性实例（一）

1.border-top-style参数

用法实例如下：点击这里看运行效果

源代码已在下面文本框列出，以供参考：

2.border-right-style参数

用法实例如下：点击这里看运行效果

源代码已在下面文本框列出，以供参考：

<HEAD><META http-equiv="Content-Type" content="text/html; charset=gb2312"><TITLE>border-right-style参数</TITLE><STYLE>DIV {border:red 10px;height:100px}.border-right-style {border-right-style:dashed}</STYLE></HEAD><DIV class="border-right-style">边框区右边的边框样式是虚线。</DIV>

3.border-bottom-style参数

用法实例如下：点击这里看运行效果

源代码已在下面文本框列出，以供参考：

4.border-left-style参数

用法实例如下：点击这里看运行效果

源代码已在下面文本框列出，以供参考：

5.border-style参数

用法实例如下：点击这里看运行效果

源代码已在下面文本框列出，以供参考：

6.border-top参数

用法实例如下：点击这里看运行效果

源代码已在下面文本框列出，以供参考：

7.border-right参数

用法实例如下：点击这里看运行效果

源代码已在下面文本框列出，以供参考：

8.border-bottom参数

用法实例如下：点击这里看运行效果

源代码已在下面文本框列出，以供参考：

<HEAD><META http-equiv="Content-Type" content="text/html; charset=gb2312"><TITLE>border-bottom参数</TITLE><STYLE>DIV {border:solid 1px}.border-bottom {border-bottom:dashed 10px yellow}</STYLE></HEAD><DIV class="border-bottom">边框底部是黄色的虚线，宽度为10px。</DIV>

9.border-left参数

用法实例如下：点击这里看运行效果

源代码已在下面文本框列出，以供参考：

10.border参数

用法实例如下：点击这里看运行效果

源代码已在下面文本框列出，以供参考：

11.border-collapse参数

用法实例如下：点击这里看运行效果

源代码已在下面文本框列出，以供参考：

12.border-spacing参数

用法实例如下：点击这里看运行效果

源代码已在下面文本框列出，以供参考：

<HEAD><META http-equiv="Content-Type" content="text/html; charset=gb2312"><TITLE>border-spacing参数</TITLE><STYLE>TABLE {border-collapse:separate;border:solid red 5px;border-spacing:10px 20px}TD {border:solid blue 5px}TR {border:solid yellow 5px;color:green}</STYLE></HEAD><TABLE> <TR> <TD>参数border-spacing</TD> <TD>单元格间距</TD> </TR> <TR> <TD>水平间距为10px</TD> <TD>垂直间距为20px</TD> </TR></TABLE>

文本属性实例

1.letter-spacing参数

用法实例如下：点击这里看运行效果

源代码已在下面文本框列出，以供参考：

2.line-height参数

用法实例如下：点击这里看运行效果

源代码已在下面文本框列出，以供参考：

<HEAD><META http-equiv="Content-Type" content="text/html; charset=gb2312"><TITLE>line-height参数</TITLE><STYLE>B {border:solid red 1px}.block {line-height:100px;border:solid #332211 5px}.inline {line-height:100px;border:solid #66AAA1 5px}</STYLE></HEAD><DIV class="block"><B>区域方块包含行内方块</B></DIV><B class="inline">行内等级方块</B>

3.text-align参数

用法实例如下：点击这里看运行效果

源代码已在下面文本框列出，以供参考：

4.text-decoration参数

用法实例如下：点击这里看运行效果

源代码已在下面文本框列出，以供参考：

5.text-indent参数

用法实例如下：点击这里看运行效果

源代码已在下面文本框列出，以供参考：

6.text-transform参数

用法实例如下：点击这里看运行效果

源代码已在下面文本框列出，以供参考：

7.vertical-align参数

用法实例如下：点击这里看运行效果

源代码已在下面文本框列出，以供参考：

8.word-spacing参数

用法实例如下：点击这里看运行效果

源代码已在下面文本框列出，以供参考：

<HEAD><META http-equiv="Content-Type" content="text/html; charset=gb2312"><TITLE>word-spacing参数</TITLE><STYLE>.word-spacing { word-spacing:30px}</STYLE></HEAD><P class="word-spacing">字距 3 0 px<p></P>

kenwyn

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS实例编(一)

字体属性实例 1.font-family参数用法实例如下：点击这里看运行效果源代码已在下面文本框列出，以供参考： font-family参数.MS {font-family:"MS Serif"}.Impact
复制链接

扫一扫

专栏目录