您的位置：首页 > Web前端 > CSS

一起学WEB（六） 打扮你的网页（一）

2017-02-04 08:20 141 查看

打扮你的网页（一）

    上一次我们终于把网页的主体结构搞定了，有标题、有内容、还有图片，感觉还不错，不过如果能让网页更加漂亮岂不更好。这就要靠CSS了。

    我们在最初的时候曾经介绍过CSS，不过也仅是介绍而已。这一次我们要正式把CSS应用到网页的制作当中。本次我们先从单个网页开始，下一次我们会讲如何将CSS应用到整个网站，保持整体风格一致。

    在网页中应用CSS共有两种方法：

        1.将CSS直接写入到网页的HTML中，这次我们就先讲这种方法。因为这种方法最直观、简单，只要在现有的HTML中加了一部分内容。但是他只能控制单个网页的样式，不利于保持网页整体风格，而且如果样式内容较多，也不利于保持代码的整洁。

        2.将CSS代码保存在专门的CSS文件中。有一定规模的网站都使用这种方式，有利于保持网站风格的一致，也减少了网页中的重复代码。他和第一种方法其实差别不大，我们先从基础的开始。

        还是直接上代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Head First Lounge</title>
<style>
h1,h2 {
font-family: sans-serif;
color: gray;
}
h1 {
border-bottom: 1px solid black;
}
p {
color: maroon;
}
</style>
</head>
<body>
<h1>Welcome to the New and Improved Head First Lounge</h1>
<p>
<img src="images/drinks.gif" alt="Drinks">
</p>
<p>
Join us any evening for refreshing <a href="beverages/elixir.html">elixirs</a>,
conversation and maybe a game or two of <em>Dance Dance Revolution</em>.
Wireless access is always provided;
BYOWS (Bring your own Web server).
</p>
<h2>Directions</h2>
<p>
You'll find us right in the center of downtown Webville.
If you need help finding us, check out
our <a href="about/directions.html">detailed directions</a>.
Come join us!
</p>
</body>
<html>
lounge.html代码

    再看一下网页效果，如图：



    好，我们把网页中与CSS有关的部分拿出来：

<style>
h1,h2 {
font-family: sans-serif;	//设置字体为sans-serif
color: gray;			//字体颜色为灰色
}
h1 {
border-bottom: 1px solid black;	//一级标题的下边框属性，1像素宽、视线、黑色
}
p {
color: maroon;		//段落内容字体为棕色
}
</style>

    嗯，在HTML的<head>元素中增加了一个<style>元素，其中的内容就是CSS，可以看到他的语法与HTML不同。

        先引进一个概念：选择器。这段代码中一共有3个选择器“h1,h2”、“h1”、“p”，他们分别与HTML文件中的元素对应，所有第一个选择器同时选择了一级标题与二级标题（元素之间用逗号隔开），第二个选择器选择了一级标题，第三个对应了段落元素。大括号内部是所指定的样式，他的语法是一种属性名与属性值相对应的形式，属性名与属性值通过冒号隔开，每个属性以分号结束。通过英文就可以知道每个属性是什么意思。

        这里提示一下，如果代码中下文的选择器与上文的选择器设置了相同的元素的属性，但值不相同，则下文的属性值会覆盖上文的属性值。例如：

<style>
h1,h2 {
font-family: sans-serif;
color: gray;
}
h1 {
border-bottom: 1px solid black;
color: red;
}
</style>
    代码中两次设置了h1元素的color属性，最终h1（一级标题）的字体颜色将为红色。

 

       另外，属性值在元素与形成嵌套关系的子元素之间是可以继承的。举个最简单的例子：

<style>
body {
color: red;
}
</style>
    以上文的代码为例，<body>的子元素有<h1>、<h2>、<p>，<p>的子元素又有<em>，这样网页中所有这些元素的字体都将变为红色（<a>元素除外，他有自身的特定颜色属性，需要专门的修改）。

 

    现在我们已经完成了通过HTML内嵌CSS代码的方式对单个网页风格的修改，下一次我们将用链接CSS文件的方式实现对网站整体风格的控制。

 

    下期：打扮你的网页（二）——通过CSS控制网站整体风格
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  一起学WEB 学习 html css WEB
相关文章推荐
新的分享
章节导航