在“使用HTML制作影城首页”的案例中,只是使用标签将内容放置到页面中显示,没有用到样式,所以看起来并不美观。本次案例将在之前HTML页面的基础上进行添加和修改,使用CSS样式,对其进行美化。这里将使用外部引入CSS样式表的形式应用到HTML文档中,实现页面结构与表现层的分离。在选择元素时要合理的使用选择器。
在项目CSS目录下新建一个.css文件,并命名为“index.css”,然后在“index.html”的head中使用link标签将此外部样式文件引进来。
<link rel="stylesheet" href="css/index.css" type="text/css"> 在头部写入这个代码,把index.css中的文件引到index.html中来。
【如下图所示!!!】
第一步就是因为我们的标签,虽然我们是没有强制给它加一些样式,但是这个标签在设计的时候呢,它本身默认的不同的浏览器去解析的时候呢,它是有一些默认的值的,通常情况下呢,这个默认的值在不同浏览器下是不一样的,那么这就要求我们在做Web开发的时候,我们就要考虑到统一性!!!毕竟我们在开发的时候我们并不知道用户将来要使用哪一款浏览器,但是我们希望它看到我们的产品肯定是统一的样式,所以我们就要解决掉这些差异性。
我们这种差异性的解决其实是有很多种办法的。比如说你有默认的差异,那我们就把这些都重置一下,把它们全部置为零。在重制的基础上,我们再把这些给它加上我们默认的像素,不就解决了差异性了吗。
我要使html上所有的标签所有的元素都统一化,我们就用到了 {} 这个选择器。如我要使外边距和内边距格式化【* 这选择器叫作 通配符】:
首先打开“index.css”文件,先重置页面的样式,因为页面中会大量的用到a标签和li,所以在重置时先去掉a标签的下划线和li标签的项目编号等默认样式。
【这样就可以使index.html中的id=“header”与index.css中的#header形成连接!!!】
我们要想改变新浪和QQ的图标怎么办呢?
其实也好办,我们只需要将新浪和QQ的图标由图片变成背景图片就可以了。然后我们用后带选择器就可以了。
【大家可以看看多了什么!!!】
{好吧!!!今天先进行到这!!!}