css + div1

来源:互联网 发布:微屏软件科技有限公司 编辑:程序博客网 时间:2024/05/22 08:09

<!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=utf-8" />
<title>页面标题</title>
</head>

<body>
    <h2>css标记</h2>
    <p>css标记的正文内容从这里开始</p>
</body>
</html>

<!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=utf-8" />
<title>页面标题</title>
</head>

<body>
  <h2><font color="FF0000" face="黑体">css标记1</font></h2>
  <p>css标记的正文内容1</p>
  <h2><font color="FF0000" face="黑体">css标记2</font></h2>
  <p>css标记的正文内容2</p>
  <h2><font color="FF0000" face="黑体">css标记3</font></h2>
  <p>css标记的正文内容3</p>
  <h2><font color="0000FF" face="黑体">css标记4</font></h2>
  <p>css标记的正文内容4</p>
</body>

</html>


<!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=utf-8" />
<title>页面标题</title>
<style>
h2{font-family: 幼圆; color:#0000FF;
}
</style>
</head>

<body>
  <h2>css标记1</h2>
  <p>css标记的正文内容1</p>
  <h2>css标记2</h2>
  <p>css标记的正文内容2</p>
  <h2>css标记3</h2>
  <p>css标记的正文内容3</p>
  <h2>css标记4</h2>
  <p>css标记的正文内容4</p>
</body>
</html>

行内样式:

text-decoration:underline" 文本能容有下划线

font-style:italic   斜体

font-weight:bold   字体加粗

<!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=utf-8" />
<title>页面标题</title>
</head>

<body>
  <p style="color:#0000FF; font-size:20px; text-decoration:underline">css标记的正文内容1</p>
  <p style="color:#000000; font-style:italic;">css标记的正文内容2</p>
  <p style="color:#FF00FF; font-size:25px; font-weight:bold;">css标记的正文内容3</p>
</body>
</html>

内嵌式:

    color:#FF00FF;
    text-decoration:underline;
    font-weight:bold;
    font-size:25px;

    紫色,下划线,粗体,25px的效果

<!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=utf-8" />
<title>页面标题</title>
<style type="text/css">
p{
    color:#FF00FF;
    text-decoration:underline;
    font-weight:bold;
    font-size:25px;
}
</style>
</head>

<body>
  <p>紫色,下划线,粗体,25px的效果1</p>
  <p>紫色,下划线,粗体,25px的效果2</p>
  <p>紫色,下划线,粗体,25px的效果3</p>
</body>
</html>

链接式:

1.css 中的内容

@charset "utf-8";
/* CSS Document */

h2{
    color:#0000FF;
}
p{
    color:#FF00FF;
    text-decoration:underline;
    font-weight:bold;
    font-size:20px;
}


<!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=utf-8" />
<title>页面标题</title>
<link href="1.css" type="text/css" rel="stylesheet" />
</head>

<body>
  <h2>css标题1</h2>
  <p>紫色,下划线,粗体,25px的效果1</p>
  <h2>css标题2</h2>
  <p>紫色,下划线,粗体,25px的效果2</p>
</body>
</html>

导入样式:

@import url(1.css);

1.css 中的内容

@charset "utf-8";
/* CSS Document */

h2{
    color:#0000FF;
}
p{
    color:#FF00FF;
    text-decoration:underline;
    font-weight:bold;
    font-size:20px;
}


<!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=utf-8" />
<title>页面标题</title>
<style>
@import url(1.css);
</style>
</head>

<body>
  <h2>css标题1</h2>
  <p>紫色,下划线,粗体,25px的效果1</p>
  <h2>css标题2</h2>
  <p>紫色,下划线,粗体,25px的效果2</p>
  <h2>css标题3</h2>
  <p>紫色,下划线,粗体,25px的效果3</p>
</body>
</html>





0 0
原创粉丝点击