怎样建立一个CSS个人网站?拜托各位大神

html-css07

怎样建立一个CSS个人网站?拜托各位大神,第1张

一、申请自己的网站空间和域名二、制作自己的网站[可以用Dreamwever2008、PS配合,也可以在硅谷动力看视频教程 地址: http://www.enet.com.cn/eschool/video/cxz_dw8/三、把自己做好的站上传上去,FTP上传推荐工具flashFXP四、网站的后期维护与管理可以联系我Q275423182

CSS中文意思为层叠样式表。它的作用是用来规定所制作网页的样式,如字体颜色、大小,有链接字体的颜色等等。它的好处是页面只要调用它就可以直接形成CSS中所规定的样式,而不必每个页面都要一一设置那么麻烦。在页面很多或多个人合作制作一个大型网站的情况下,也保证了页面样式的统一性。还有就是便于修改。如果网页的样式需要进行修改,只要修改CSS文件即可,避免了一一修改每一个页面的麻烦。

方法/步骤

1

CSS是由选择器加声明组成的。

比如:

h1{color:red}

h1就是选择器,意思是只要遇到h1,就使用该CSS的规则

color:red:这个事声明

color:这个是属性

red:这个是值

2

OK,我们先来分析选择器。

END

一.选择器

1

选择器的种类很多,各有各的作用。我们来一一讲解。

标签选择器

class选择器

id选择器

全局选择器

组合选择器

伪类选择器

2

标签选择器

顾名思义,HTML中有许多标签,而标签选择器就是用来给标签直接申明样式的,简单、实用、常用。

举例:

p{color:red}

只要是p标签,其P标签内部的颜色,都是红色。

如图代码

<head><meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" /><title>无标题文档</title><style>p{ color:red}</style></head><body><p>嘿嘿哦嘿嘿呀哦嘿嘿哦</p></body>

其中,<style>标签是样式标签,请将CSS放在其中

(这部分内容后续会介绍,这里只是先提一下)

3

看网页效果

4

class选择器

也叫做类选择器,直接说概念估计你也不明白,直接上例子吧。

举例:

.alsp{color:red}

这就是一个class选择器,意思是有一种CSS的样式,其名字是alsp,谁想用谁用。

看代码:

<head><meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" /><title>无标题文档</title><style type="text/css">.alsp{color:red}</style></head><body><p class="alsp">嘿嘿哦嘿嘿呀哦嘿嘿哦</p><ol class="alsp"><li>嘿啥嘿</li><li>我想嘿嘿</li><li>专制各种不服</li></ol><p>世界为亡,死不投降</p></body>

5

看网页效果

通过.alsp定义一个class选择器。

在后面的代码中,哪个标签想用,就用class="alsp"去调用,就可以使用这件“衣服”来修饰自己了

6

ID选择器

ID和class很像,但是和class有一个区别。class像姓名,两个人是可以同名的,但是id像身份证,只有一个人可以使用。

例如:

#alsp{color:red}

OK,上代码:

#alsp{color:red}</style></head><body><p id="alsp">嘿嘿哦嘿嘿呀哦嘿嘿哦</p><ol><li>嘿啥嘿</li><li>我想嘿嘿</li><li>专制各种不服</li></ol><p>世界为亡,死不投降</p></body>

7

看网页效果

只能有一个标签使用该id,或者说该标签专属ID

8

全局选择器

*{margin:0padding:0}

这个很简单,前面用个*来表示,整个网页都会使用。这句话也是网页基本都要添加的,什么意思呢?自己试试看吧。

9

组合选择器

组合选择,小编是非常喜欢使用的,原因无他,懒而已。他可以减少代码量,并且方便、易读。

不过组合选择器的组合方式比较多,但也多很好理解。

1)群模式

比如:

h1{color:redfont-size:14px}

p{color:redfont-size:14px}

a{color:redfont-size:14px}

这三个虽然标签不同,但是样式是一模一样的,所以,可以这样写:

h1,p,a,{color:redfont-size:14px}

2)继承模式

比如:

.alsp li{color:red}

<ul class=".alsp">

<li>fdf</li>

</ul>

li是在ul之中的,算是ul的后代。通过.alsp li确定li是属于调用alsp类选择器里的li标签,其他的li标签并不会使用该样式。

3)群模式(多元素并列选择器)

其实也是一种特殊的群模式

p.alsp{color:red}

<p class="alsp">p.alsp</p>

<a class="alsp">a.alsp</p>

alsp仍然是一种class选择器,但是他只有在p的标签下被使用才生效。

所以,第一行生效,p.alsp字样变红,第二行不生效

10

伪类选择器

“伪”字暴露了他的本质,伪类选择器并不像其他选择器直接做用在标签上,但是他偏偏又是在标签上进行使用,所以称为“伪类选择器”。

伪类的作用,是作用在状态上。

一般情况正常运行,只有当达成条件的时候触发,才会执行伪类选择器所代表是css样式。

伪类选择器很多,但许多都是我们这辈子估计都用不到的。

OK,伪类选择器后续我会专门写一篇经验介绍,有点小多,这里也就不多说了。

END

二.在HTML中调用CSS

调用CSS的常用方法有3中

内样式

外样式

行间样式

内样式

直接看代码,如图所示

在<head></head>中,加入<style></style>,并将相关的CSS样式放在其中

外样式

直接看代码,如图所示:

<link rel="stylesheet" type="text/css" href="index.css">

这里,href为css的路径。

意思是,你专门创建一个index.css的文件,里面放上CSS样式,和内样式的语法一模一样,只是专门找了一个文件存放而已。

4

行间样式

行间样式直接写在元素里面

例如:<p style="color:#900">嘿嘿哦嘿嘿呀哦嘿嘿哦</p>

直接在标签后面加上style

一般不要用,不过可以用来调试使用