CSS基础1
日期：2014-05-17 浏览次数：20571 次
CSS基础一
<html> <head> <title>标题在这里</title> </head> <body> <h2>CSS的各种标记</h2> <p>从这里开始正文的内容</p> </body> </html>
<html> <head> <title>标题在这里</title> </head> <body> <h2><font color="#0033CC" face="幼圆">标记文字01</font></h2> <p>CSS标记正文内容01</p> <h2><font color="#0033CC" face="幼圆">标记文字02</font></h2> <p>CSS标记正文内容02</p> <h2><font color="#0033CC" face="幼圆">标记文字03</font></h2> <p>CSS标记正文内容03</p> <h2><font color="#0033CC" face="幼圆">标记文字04</font></h2> <p>CSS标记正文内容04</p> </body> </html>
<html>
<head>
<title>标题在这里</title>
<style>
<!--
h2{
font-family:黑体;
color:#FF0000;
}
-->
</style>
</head>
<body>
<h2>标记文字01</h2>
<p>CSS标记正文内容01</p>
<h2>标记文字02</h2>
<p>CSS标记正文内容02</p>
<h2>标记文字03</h2>
<p>CSS标记正文内容03</p>
<h2>标记文字04</h2>
<p>CSS标记正文内容04</p>
</body>
</html>
<html>
<head>
<title>页面标题</title>
<style>
<!--
ul{
list-style-type:none;
display:inline;
}
-->
</style>
</head>
<body>
<ul>
<li>浏览器区别1</li>
<li>浏览器区别2</li>
</ul>
</body>
</html>
<html> <head> <title>标题在这里</title> </head> <body> <p style="color:#0000FF; font-size:18px; font-weight:bold;">CSS内容1</p> <p style="color:#000000; text-decoration:underline; font-style:italic;">正文CSS2</p> <p style="color:#FF33CC; font-size:28px; font-weight:bold;">CSS正文内容3</p> </body> </html>
<html>
<head>
<title>页面标题</title>
<style type="text/css">
<!--
p{
color:#FF33CC;
text-decoration:underline;
font-style:italic;
font-size:28px;
}
-->
</style>
</head>
<body>
<p>紫红色、斜体、下划线、28px的效果1</p>
<p>紫红色、斜体、下划线、28px的效果2</p>
<p>紫红色、斜体、下划线、28px的效果3</p>
<p>紫红色、斜体、下划线、28px的效果4</p>
</body>
</html>
<html> <head> <title>标题在这里</title> <link href="1.css" type="text/css" rel="stylesheet"> </head> <body> <h2>第一行标题1</h2> <p>紫红色、斜体、下划线、28px的效果1</p> <h2>第二行标题2</h2> <p>紫红色、斜体、下划线、28px的效果2</p> </body> </html>
<html> <head> <title>标题在这里</title> <style type="text/css"> <!-- @import url(1.css); --> </style> </head> <body> <h2>第一行标题1</h2> <p>紫红色、斜体、下划线、28px的效果1</p> <h2>第二行标题2</h2> <p>紫红色、斜体、下划线、28px的效果2</p> <h3>第三行标题3</h3> <p>紫红色、斜体、下划线、28px的效果3</p> </body> </html>
<html>
<head>
<title>class选择器</title>
<style type="text/css">
<!--
.first{
color:blue; /* 蓝色 */
font-size:17px; /* 文字大小 */
}
.second{
color:red; /* 红色 */
font-size:20px; /* 文字大小 */
}
.third{
color:cyan; /* 青色 */
font-size:23px; /* 文字大小 */
}
-->
</style>
</head>
<body>
<p class="first">class类别选择器1</p>
<p class="second">class类别选择器2</p>
<p class="third">class类别选择器3</p>
<h3 class="second">h3同样适用</h3>
</body>
</html>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
