第三讲：样式表入门

发布时间： 2016年1月8日最后更正时间：2020年6月17日

本篇文章自发布已超过8年，
请自行评估文章价值。

样式表是一个很高级的东西。我们通常称它为CSS。
CSS是英文Cascading Style Sheets（层叠样式表）的缩写。
有了它，我们就可以给网页里的内容添加各种样式。
包括布局，颜色，投影，边框等等一切跟视觉相关的东西。

有三种方法可以在网页上使用样式表：

一、外联式Linking（也叫外部样式）：将网页链接到外部样式表。
二、嵌入式Embedding（也叫内页样式）：在网页上创建嵌入的样式表。
三、内联式Inline（也叫行内样式）：应用内嵌样式到各个网页元素。

我们先学习第二种，在以后的学习中我们将会全部涉及到。
当单个页面文件需要特别样式时，就可以使用内部样式表。
可以在head头部通过<style></style>标签定义内部样式表。
如下，要给页面的主体（body）设置样式，希望背景颜色是#893452，文字的颜色是#FFFFFF

<head>
...
<style type="text/css"> 
body {background-color: #893452;color:#FFFFFF} 
</style>
</head>

每个声明（属性:值）之间需要用分号隔开。并放在大括弧里。

样式表语法是：

选择器{属性:值;属性:值;属性:值;属性:值;…}

选择器通常是您需要改变样式的 HTML 元素。
上面的例子中的body就是选择器。background-color为属性，#893452为值。

再看看下面的例子：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>样式表</title>
<style type="text/css">
body{
	background-color:#E0E0E0;
	color:#333333;
	text-shadow:1px 1px 0 #FFFFFF;
	}
h1{
	font-size:36px;
	}
</style>
</head>

<body>
<h1>样式表</h1>
<p>样式表是一个很高级的东西。</p>
</body>
</html>

在这里：
<h1></h1>是一级标题的标签，在样式表里h1就是一个选择器。
<p></p>是个段落的标签。英文：paragraph。样式表里p也是一个选择器。
将这些选择器运用于页面内容之后，在head头部里的样式表定义区里添加样式。

下面的视频里使用两种方式为文章添加样式。一种是使用Dreamweaver的CSS选择器。很直观，适合看代码头晕的同学使用。一种是纯代码状态下，通过提示完成样式的设置。
第一种方法虽然很直观，也容易上手，但是不利于代码的学习。而且缺点是对于复杂的响应式网站，这种方法就力不从心了。因为视图模式下看到的东西并不是实际的效果。所以，几遍是很简单的页面，设置后的效果一定要通过浏览器来检查。

text-shadow语法是：

text-shadow{水平偏移量,垂直偏移量,模糊值,投影颜色}

水平偏移量和垂直偏移量可以是负值。投影颜色可以是透明颜色，可以使用rgba色值。具体用法，大家可以实践一下，不用不知道，记不住。

样式表是网页制作当中非常重要的一个部分。没有样式表就没有美。

评论区

发表新的留言

您可以留言提出您的疑问或建议。
您的留言得到回复时，会通过您填写的邮箱提醒您。