XHTML第四节之CSS样式第二节

常见的CSS属性:
一、文本属性:
1、font-size:12px;       字号大小
2、color:#000000;        文字颜色
3、font-family:宋体;     字体
4、font-style:normal/italic(倾斜)   文字的倾斜样式
5、font-weight:normal(常规)/bold(加粗) 文本的加粗样式
6、text-decoration:none(无)/underline(下划线)/overline(上划线)/line-through(删除线)   文本的修饰线
二、常见的段落属性:
1、行高:line-height:140%;或者line-height:24px;
2、首行缩进:text-indent:2em;
3、对齐方式:text-align:left/center/right;
4、字符与字符之间的间隔:letter-spacing:12px;
说明:以上属性可以在DW中自己练习,实现效果。在此不再举例。
三、单位:
像素:px(pixel)
倍数:em

下面讲一下链接的标记。
一、链接的标记:
<a href="目标文件的路径" target="打开目标的窗口形式[_self(自身)/_blank(新标签中打开)[在此只介绍常用 的两种链接形式]]" title="提示文本">链接元素</a>
例:
<a href="abc/default.html" target="_blank" title="这是一个默认的页面">点击即链接</a>
二、链接的分类:
1、内部链接:路径应该用相对路径。
2、外部链接:当前文件和目标不在同一个站点中,一般用于友情或广告链接。路径应该用:网络绝对路径。
注意:http://不可省略。
例:
<a href="http://zhaoqingbei.blog.51cto.com" target="_blank" title="赵庆贝博客">欢迎光临赵庆贝博客</a>
3、局部链接:链接到页面的某一部分。(主要指锚点链接,下面详细介绍)
三、链接目标的表现形式:
1、目标为网页或web支持的格式,直接链接到目标文件即可。
      A、目标为网页格式:html,htm,xhtm,xhtml,asp,php,jsp,aspx,jxpx等。
      B、目标为web支持的格式:jpg,jpeg,gif,png,txt,swf等。
无需做成网页,直接链接即可。
2、目标为下载资源:
      A、目标为web不支持的格式,直接链接即为下载。
常见的web不支持的格式(常见的下载文件格式):rar,zip,exe,doc,mp3,mp4,rmvb,avi等。
      B、目标为web支持的格式,想单击进行文件保存下载的话:把它转化为压缩文件格式:rar,zip等。
3、电子邮箱链接(E-mail链接)
<a href="mailto:邮箱地址">邮箱地址</a>
4、局部链接中的锚点链接。
(1)插入锚点的标记:(在链接的目标处插入)
锚点的标记是:<a name="锚点名称"></a>
注意:锚点名称必须以字母开头,可以由英文字母、数字、下划线组成。
(2)链接到锚点:
给链接元素添加链接:
<a href="#锚点名称">链接元素</a>
一定注意:不要忘记"#"号,锚点名称一定要保持一致。
例:它的书写格式如下:
<div id="wrapper">
            <ul>
                <li><a href="#image1" id="tab1"><img src=\'#\'" alt="" title="" /></a></li>
                <li><a href="#image2" id="tab2"><img src=\'#\'" alt="" title="" /></a></li>
                <li><a href="#image3" id="tab3"><img src=\'#\'" alt="" title="" /></a></li>
                <li><a href="#image4" id="tab4"><img src=\'#\'" alt="" title="" /></a></li>
            </ul>
            <div id="images">
                <div><a name="image1"></a><img src=\'#\'" alt="" title="" /></div>
                <div><a name="image2"></a><img src=\'#\'" alt="" title="" /></div>
                <div><a name="image3"></a><img src=\'#\'" alt="" title="" /></div>
                <div><a name="image4"></a><img src=\'#\'" alt="" title="" /></div>
            </div>
        </div>
5、链接到javascript脚本(代码):
语法:<a href="javascript:代码名称;">链接元素</a>
例:
<div onclick="window.close();">关闭窗口</div>
实现的效果即是关闭窗口。
<div onclick="self.print();">打印</div>
实现的效果即是打印本页。
6、空链接:统一样式。
没有目标文档:<a href="#">链接元素</a>

四、CSS常见属性
1、css属性之边框属性:
    A、四周边框都相同:
border:线条粗细 线条的样式 线条的颜色;
常见的线条的样式:solid实线,dashed虚线,dotted点状线。
    B、四周不一样的边框:
border-top:线条粗细 线条的样式 线条的颜色;
border-right:线条粗细 线条的样式 线条的颜色;
border-bottom:线条粗细 线条的样式 线条的颜色;
border-left:线条粗细 线条的样式 线条的颜色;
例:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
#yiyang
{
border:1px solid #FF0000;
}

#buyiyang
{
border-top:1px solid #FF0000;
border-right:1px solid #00FF00;
border-bottom:1px solid #0000FF;
border-left:1px solid #FFFF00;
}
</style>
</head>

<body>
<table width="300" height="300" border="1" cellpadding="0" cellspacing="0">
  <tr>
      <td id="yiyang">测试一下一样的边框颜色</td>
  </tr>
  <tr>     
    <td id="buyiyang">测试一下不一样的边框颜色</td>   
  </tr>
</table>
</body>
</html>
可以直接把以上代码copy到DW中测试效果,建议自己改变一下参数,以方便记忆。
2、CSS属性之背景颜色:
background-color:颜色值;
3、css属性之float属性:
float:left/right;
设置对象的浮动方式,让对象尽量靠父对象的左边或右边对齐,对象浮动起来后,不再支持父对象位置的高度和宽度。
例:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
.box
{
width:860px;
margin:0px auto;
}
.box #left
{
width:428px;
height:300px;
border:1px solid #FF0000;
}
.box #right
{
width:428px;
height:300px;
border:1px solid #0000FF;
}
</style>
</head>

<body>
<div class="box">
    <div id="left">aaaaaa</div>
    <div id="right">bbbbbb</div>
</div>
</body>
</html>
以上为没有float的效果。

下面为float效果:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
.box
{
width:860px;
margin:0px auto;
}
.box #left,.box #right
{
float:left;
}
.box #left
{
width:428px;
height:300px;
border:1px solid #FF0000;
}
.box #right
{
width:428px;
height:300px;
border:1px solid #0000FF;
}
</style>
</head>

<body>
<div class="box">
    <div id="left">aaaaaa</div>
    <div id="right">bbbbbb</div>
</div>
</body>
</html>

4、css样式之背景图像:
    A、背景图像:background-image:url("背景图片地址");    默认情况下是重复的。
    B、背景图像的平铺(重复)方式:
background-repeat:repeat/repeat-x/repeat-y/no-repeat;
    C、背景图像的位置:
background-position:水平位置 垂直位置;

水平方向特殊位置:left/right/center;
垂直方向特殊位置:top/middle/bottom;
    D、固定背景图像到屏幕的某一位置:
background-attachment:fixed;
当图像和背景同时实施时,那么图像会直接覆盖背景。
例:背景固定案例效果有意者请下载

5、CSS属性之padding属性:
padding:边距;它控制对象的内容和对象边框的距离。
    A、四周padding都相同:padding:值;
    B、四周padding不一样:
上边距:padding-tp:
;
右边距:padding-right:;
下边距:padding-bottom:;
左边距:padding-left:;
    C、padding的缩写方式:
padding:
1 值2 值3 值4; 它们的顺序是:上右下左。
在此不再举例。
6、CSS属性之margin属性:
margin:设置的是对象与对象之间距离,也就是对象的边框与对象的边框之间的距离。
    A、四周margin都相同:margin:值;
    B、四周margin不相同:
上边距:margin-top:值;
右边距:margin-right:值;
下边距:margin-bottom:值;
左边距:margin-left:值;
    C、padding的缩写方式:
margin:
1 值2 值3 值4; 它们的顺序是:上右下左。
在此不再举例。

 

本文出自 “赵庆贝” 博客,谢绝转载!

你可能感兴趣的:(css,职场,css样式,休闲)