1与2（CSS与HTML）.1—— 一个比较通用的网站主页面

主要介绍html、css及其三种引用方式。  

最终效果如图：

一、HTML

html是一群标签的集合，每个标签可以定义属性，和写android页面差不多，android是xml文件格式，html是.html后缀。不同的是，html可以在标签中定义响应的js函数，但是android不行，得在类中获得该标签对象，然后添加时间响应函数。

html没什么好说的，有什么属性不会设置或者不记得了可以直接在网上查，和android一样不必把所有属性都记下来，但是基本的结构与基本的几个属性要知道。

二、CSS及其三种引用方式

css是页面的一种布局方式，css使得布局与样式分离，代码更清楚了，而且也更利于维护迭代。

它定义各种样式，在写html时，可以调用样式，这样当改变一个样式时，引用该样式的所有标签都会统一改变。css不但可以自定义样式，还可以更改html自带的标签样式，比如设置所有的<h1>为绿色等。

定义的样式就像类一样，可以定义继承该样式的子样式，如：

.father{

}

.father a{

}

.father a.son{

}

第一个是我们自定义的样式；

第二个是我们自定义样式中链接应该有的样式；

第三个是自定义样式中有些链接应该有的样式。

引用 方式如下：

<div class="father">自定的样式

<a href="#">链接1</a>

<a class="son" href="#">链接2</a>

</div>

样式的嵌套如类的继承与重写。

它不仅可以设置标签的默认样式，还可以定义标签的事件响应时的样式，如

/* 鼠标移动到链接的颜色，定义该标签的行为响应样式 */
.navbar a:hover {
    background-color: #ddd;
    color: black;
}

注意这里是":"，而不是"."，感觉像是该类中定义了一个函数，在一定时候会触发。

选择未访问、已访问、悬浮和活动链接，并设置它们的样式：

a:link    {color:blue;}
a:visited {color:blue;}
a:hover   {color:red;}
a:active  {color:yellow;}

其中hover可用于所有元素。

 

下面介绍html中嵌入css的三种方式：

1. 内部样式

在head中定义样式，在body中直接使用。

2. 内嵌样式

在style中写的样式是内联样式。比如 style="height:60px;"

3. 外部样式

为了使布局与样式进一步分离，将css定义的样式集会单独写在另一个.css文件夹中，然后在布局文件的head中使用link进行引用，如：

<link rel="stylesheet" href="style.css">

style.css文件内容：

 p{ 
     background: yellow;
  }

在一个.css文件中引用另一个.css文件：

@import "style.css";

 body{

 background: red;

 }

 

4. 其他

标有important标记的样式会有最高的优先级：

background: yellow !important;

在head中不能使用<!-- -->作为注释，否则接下来一个标签（样式）会不起作用，应该使用/**/

在样式中可以定义宽占页面多少比例：width:30%;如果想要定义高占页面的多少，则需要在html与body标签中写height:100%，以先指定整个页面占窗口的大小。

在样式中background表示背景（颜色或者是图片），color表示文字的颜色。

如果需要在一个界面中同时使用css与js，则

<script>
function test(){
	alert("hello,world");
	}
</script>

可以写在
<style type="text/css">

</style>

前面，但是不能写在它里面，否则函数不能被识别。

 

具体项目已上传：https://download.csdn.net/download/michaelia_hu/11107454