CSS+DIV入门

来源：互联网发布：及时雨淘宝软件好用吗编辑：程序博客网时间：2024/06/02 04:28

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>使用内嵌样式</title> </head> <body style="background-color:#ccffee" mce_style="background-color:#ccffee"> <p style="font-size:16px;color:red" mce_style="font-size:16px;color:red">第一段文字</p> <p style="font-stytle:italic;font-size:20px;color:" mce_style="font-stytle:italic;font-size:20px;color:"#bb22cc">第二段文字</p> </body></html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><title>内部样式表</title><mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1">body {background-color: "#ccffee"}h2 {text-align =center;color: red}p.mystyle1 {font-size: 20px;color: blue}p.mystyle2 {font-size: 40px;color: "#dd44aa";text-align: center}</style></head><body><h2>文字标题</h2><p class="mystyle1">第一段文字</p><p class="mystyle2">第二段文字</p><p class="mystyle1">第三段文字</p><p>第四段文字</p><p class="mystyle2">第五段文字</p></body></html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>外部样式表</title> <link rel="stylesheet" type="text/css" href="m1.css" mce_href="m1.css"> </head> <body> <p class="mystyle1">第一段文字</p> <p class="mystyle2">第二段文字</p> </body></html>

body {background-color: "#ccffee"}h2 {text-align =center;color: red}p.mystyle1 {font-size: 20px;color: blue}p.mystyle2 {font-size: 40px;color: "#dd44aa";text-align: center}

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>CSS基本语法</title><mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1">p{color:#aa66cc}h2{text-align:center;color:red}h1,h3,h4,h5,h6,mystyle3{text-align:center;color:green}.mystyle{text-align:right;color:ff00ff}body {background-color: "#ccffee"}h2 {text-align =center;color: red}p.mystyle1 {font-size: 20px;color: blue}p.mystyle2 {font-size: 40px;color: "#dd44aa";text-align: center}</style> </head> <body> <h2>文字标题</h2><h5>标题文字</h5><p class="mystyle1">第一段文字</p><p class="mystyle2">第二段文字</p><p class="mystyle3">第三段文字</p><p>第四段文字</p><p class="mystyle">第五段文字</p><h4 class="mystyle">h4标题文字</h4><div class="mystyle">DIV块内文字</div> </body></html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>Css字体属性</title> <mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1"> p.mt1{font-family:courier;font-size:20px} p.mt2{font-style:italic;font-weight:bold;font-size:20pt;font-family:宋体} </style> </head> <body> <p class="mt1">The first parapha</p> <p class="mt2">第二段文字</p> </body></html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>CSS常用文本属性</title><mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1">.t1{text-align:left;text-indent=lcm;line-height=20px;letter-spacing=150%;color=red}.t2{text-align:center;text-indent=0;line-height=20pt;letter-spacing=0.2em;color=blue;font-weight:bold}</style> </head> <body> <p class="t1">春眠不觉晓，处处闻啼鸟，夜来风雨声，花落知多少。</p> <p class="t2">锄禾日当午，汗滴禾下土，谁知盘中餐，粒粒皆辛苦。</p> </body></html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><title>CSS+DIV实现简单页面布局</title><mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1">* {margin: 0px;padding: 0px;}body {font-size: 20px;}.main {width: 800px;background: blue;}.mail.top1 {width: 800px;height: 40px;background: #ffaaff;border: 1px solid #dddddd;}.main.nav {float: left;width: 100px;height: 300px;background: #bbeeff;border: 1px solid #dddddd;}.main.content {float: left;width: 700px;height: 300px;background: #ffccaa;border: 1px solid #dddddd;}</style></head><body><div class="main"><div class="top1">页面标题内容</div><div class="nav">导航内容</div><div class="content">主题内容</div></div></body></html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>使用span标记</title> </head> <body> <p>段文字中的<span style="font-size:40px;color:red" mce_style="font-size:40px;color:red">部分显示效果有所不同,使用span元素不换行</span>，可以采用span元素实现</p> </body></html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>使用CSS的display属性</title> </head> <body> <p>段文字中的<span style="display:inline;font-size:40px;color:red" mce_style="display:inline;font-size:40px;color:red">部分显示效果有所不同,使用span元素不换行</span>，可以采用span元素实现</p> <hr> <p>段文字中的<span style="display:block;font-size:40px;color:red" mce_style="display:block;font-size:40px;color:red">部分显示效果有所不同,使用span元素不换行</span>，可以采用span元素实现</p> <hr> <p>段文字中的<span style="display:none;font-size:40px;color:red" mce_style="display:none;font-size:40px;color:red">部分显示效果有所不同,使用span元素不换行</span>，可以采用span元素实现</p> <hr> DIV之前的文字--<div style="display:inline;font-size:40px;color:blue" mce_style="display:inline;font-size:40px;color:blue">DIV块内的文字</div>--DIV之后的文字 <hr> DIV之前的文字--<div style="block:inline;font-size:40px;color:blue" mce_style="block:inline;font-size:40px;color:blue">DIV块内的文字</div>--DIV之后的文字 <hr> DIV之前的文字--<div style="display:none;font-size:40px;color:blue" mce_style="display:none;font-size:40px;color:blue">DIV块内的文字</div>--DIV之后的文字 <hr> </body></html>