html+css+js系列之三 css的入门

最新推荐文章于 2024-09-22 11:28:47 发布

12小白

最新推荐文章于 2024-09-22 11:28:47 发布

阅读量765

点赞数 1

分类专栏： html+css+js 文章标签： css 网页设计

本文链接：https://blog.csdn.net/u012270113/article/details/41205969

版权

html+css+js 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

参考：韩顺平轻松搞定网页设计

1.在没有css之前，先看一个效果图

背后的css1.html是这样实现的：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>css1</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

  </head>
  
  <body>
	<span style="font-size:30px;color: blue;">栏目一</span><br/>
	<span style="font-size:10px;color: blue;font-style:italic;">栏目二</span><br/>
	<span style="font-size:40px;color: green;font-weight: bold;">栏目三</span><br/>
	<span style="font-size:20px;color: pink;font-weight:lighter">栏目四</span><br/>
	<span style="font-size:30px;color: black;font-weight:lighter"">栏目五</span><br/>
  </body>
</html>

所有的样式都写在html页面中，看起来比较啰嗦，不利索。

2.为html添加css

效果图

test.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>test.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

  <link rel="stylesheet" href="test.css" type="text/css"></link></head>
  
  <body>
  <font class = "style0">梁山英雄排行榜</font><br/>
  <span class = "style1">宋江</span><br/>
  <span class = "style2">卢员外</span><br/>
  <span class = "style3">吴用</span><br/>
  <span class = "style2">豹子头</span><br/>
  <span class = "style2">大刀关胜</span><br/>
  
  <br/>
  <a href="#">goto sohu1中文</a><br/>
  <a href="#">goto sohu2换句话</a><br/>
  <a href="#">goto sohu3各位高</a><br/>
  <a href="#">goto sohu4阿文哥</a><br/>
  <a href="#">goto sohu5问题</a><br/>
     
  </body>
</html>

引入的test.css如下

@CHARSET "UTF-8";
.style0{
	color:yellow;
	font-size: 30px;
	}
.style1{	
	color: red;
	font-style: italic;
	}

.style3{
	font-style: italic;
	text-decoration: underline;
	}

.style1,.style2,.style3{
	background-color: gray;
	font-weight: bold;
	}
	

a:link{
	color:red;
	font-size:24px;
	font-family: 华文新魏;
	text-decoration: none;	
	}
a:hover{
	color:green;
	font-size:40px;
	font-family: 宋体;
	text-decoration: underline;	
	}
a:visited{
	color: gray;
	}