使用CSS—轻松学习网站界面制作(一)

摘要

 CSS特点:实现一个网页内容与样式的分离。这是CSS非常有优势的一个特点,省去了我们很多的麻烦。我们来做一个简单的例子来看一下这个效果

CSS特点:实现一个网页内容与样式的分离。这是CSS非常有优势的一个特点,省去了我们很多的麻烦。我们来做一个简单的例子来看一下这个效果

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS测试</title>
</head>
<body>
<font color=“#0000ff”>栏目一</font>
<font color=“#0000ff”>栏目二</font>
<font color=“#0000ff”>栏目三</font>
</body>
</html>

没有CSS之前,我们是这样要是把这个颜色改为别的颜色,那么只能一个个颜色值的改,这个工作量很恐怖的。

之后我们使用CSS来进行优化,我们先来使用CSS选择器:

类选择器:这就是我们在HTML中查找类所设置的一个值。

我们使用span标签+类标志,我们把body里边的内容改成这样:

 <body>
<span class="menu">栏目一</span>
<span class="menu">栏目二</span>
<span class="menu">栏目三</span>
</body>

然后我们来创建我们的样式文件:

 .menu{ /* 栏目样式*/
color:#f00; /* 文字颜色 */
}

就这么一句话我们就搞定了之前的颜色设置,想改颜色只要打开这个样式文件,然后进行更改就行了。避免了很多的麻烦,然后我们再进行样式文件与这个内容的关联,很简单,我们只要拉进来就ok了,拉到这个地方:

 <head>
<title>CSS测试文件</title>
<link href="css/StyleSheet1.css" rel="stylesheet" type="text/css" />
</head>

这就产生了一个关联。样式里边就一个属性,一个冒号,一个属性值构成的。当我们不知道有什么属性值的时候,我们按一下空格,VS就会罗列出所有的属性值,这样我们就能选择我们需要的属性值了。

ID选择器:

id一般来说都是唯一的,我们来看一下操作:

 <body>
<span id="special" class="menu">栏目一</span>
<span class="menu">栏目二</span>
<span class="menu">栏目三</span>
</body>

然后我们在样式文件中,我们这样:

 #special
{
font-weight :bold ; /* 粗体 */
}

我们得到了两种效果的混合了。看看效果:

 

然而,当id选择器和类选择器的样式起冲突的时候,就这涉及到了一个优先级的问题了,在这里我就直接把优先级说一下,ID选择器>类选择器。

HTML标签选择器:

设置的是一个更大范围的,只要是这个标签里边的,就会应用这个样式,那么我们这段代码里边,有一个body,我们在样式中的body里边写入一个颜色值:

 
body
{
color :#f0f;
}

那么我们的HTMLPage里边的body中的:

 <body>
<span id="special" class="menu">栏目一</span>
<span class="menu">栏目二</span>
<span class="menu">栏目三</span>
123456
</body>

那么这个123456就会变色。效果:

  

我们也很容易的看的出来,栏目一 栏目二 栏目三 没有变色,这是为什么呢?很明显,这涉及到了一个优先级的问题了,ID优先级>类选择器>HTML标签选择器。

再说一个内容,就是一个父子关系的,我们在HTMLPage里边这样写:

 <body>
<span id="special" class="menu">栏目一</span>
<span class="menu">栏目二</span>
<span class="menu">栏目三</span>
<span class="title">这是<span>一</span>条新闻标题</span>
123456
</body>

然后我们在样式文件中这样:

 .title span
{
color:#000;
font-size :12px; /* 字体大小 */
}

记得title与span之间的空格,然后这个效果就是:

  

我们就能看的出来,这个“一”是明显的变了。

还有一个内容,并列的写法:我们在样式中这样写:

 .menu, .title
{
background-color :#ee00ff;
}

menu和title之间我们用逗号隔开,就能达到目的,我们看看效果:

  

我们接下来讲最后一个内容,就是class这个类是可以设置为多个的,那么我们看一下是什么个情况,我们在HTMLPage里边写:

 <body>
<span id="special" class="menu">栏目一</span>
<span class="menu niu">栏目二</span>
<span class="menu">栏目三</span>
<span class="title">这是<span>一</span>条新闻标题</span>
123456
</body>

然后我们在样式里边这么写:

 
.niu
{
text-decoration :underline;
color :#eeeedd;
}

.menu{ /* 栏目样式*/
color:#f00; /* 文字颜色 */
}

我们就能看到栏目二

  

已经与niu一样,加了下划线了,这就出现了一个问题,这个时候的颜色应该是menu的还是niu的呢?我们一看就知道是menu的,这与CSS的样式排列前后顺序有关。与后面的对应起来。

今天关于CSS我们就先讲这些入门的,希望对初学者有所帮助,后面继续完善博客。

 

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: