HTML CSS 样式


CSS = 样式 + 颜色

位置
字体
颜色  盒子模型


使用CSS设置HTML样式

CSS代表Cascading Style Sheets。

CSS定义如何显示 HTML 元素,用于控制Web页面的外观

CSS 重复引用 ,可以在多个页面调用一个css文件。

CSS可以通过3种方式添加到HTML元素:

  • 内联 - 在HTML元素中使用"style" 属性
  • 内部 - 在HTML文档头部 <head> 区域使用 <style> 元素 来包含CSS 。
  • 外部 - 使用外部CSS文件

添加CSS的最常用方法是将样式保存在单独的CSS文件中。但是,在这里我们将使用内联和内部样式,因为这更容易演示,并且您更容易自己尝试。

提示:您可以在我们的CSS教程中学习更多关于CSS的知识。


内联CSS

当特殊的样式需要应用到个别标签时,就可以使用内联样式。

内联CSS使用HTML标签的style属性。

此示例将<h1>元素的文本颜色设置为蓝色:

实例

<h1 style="color:blue;">这是一个蓝色的标题</h1>
运行 »


内部CSS

内部CSS用于为单个HTML页面定义样式。

内部CSS在HTML文档头部<head>区域使用<style>标签来包含CSS:

实例

<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1   {color: blue;}
p    {color: red;}
</style>
</head>
<body>

<h1>这是标题</h1>
<p>这是一个段落.</p>

</body>
</html>
运行 »

外部CSS

外部样式表用于定义许多HTML页面的样式。

使用外部样式表,您可以通过更改一个文件来更改整个网站的外观!

要使用外部样式表,请在HTML页面的<head>部分中添加指向它的链接:

实例

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

<h1>这是标题</h1>
<p>这是一个段落.</p>

</body>
</html>
运行 »

可以在任何文本编辑器中编写外部样式表。该文件不得包含任何HTML代码,并且必须以.css扩展名保存。

以下是“styles.css”的外观:

body {
    background-color: powderblue;
}
h1 {
    color: blue;
}
p {
    color: red;
}

CSS字体

CSS color属性来定义文本颜色。

CSS font-family属性定义文本字体。

CSS font-size属性定义文本大小。

实例

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
    color: blue;
    font-family: verdana;
    font-size: 300%;
}
p  {
    color: red;
    font-family: courier;
    font-size: 160%;
}
</style>
</head>
<body>

<h1>这是标题</h1>
<p>这是段落.</p>

</body>
</html>
运行 »

CSS边框

CSS border属性定义HTML标签的边框:

实例

p {
    border: 1px solid powderblue;
}
运行 »

CSS内边距

CSS padding区域指一个元素的内容和其边界之间的空间:

实例

p {
    border: 1px solid powderblue;
    padding: 30px;
}
运行 »

CSS外边距

CSS margin属性可以为给定元素设置所有四个(上下左右)方向的外边距属性:

实例

p {
    border: 1px solid powderblue;
    margin: 50px;
}
运行 »

id属性

id给文档元素指定样式(唯一)

<p id="p01">你是我是唯一</p>

然后为具有特定id的元素定义样式:

实例

#p01 {
    color: blue;
}
运行 »

注意:ID用于标识页面上的特定元素(比如站点导航),而且必须是唯一的!


class属性

class给文档元素指定样式(多次引用)

<p class="error">你可以给我不一样的改变</p>

然后为具有特定类的元素定义样式:

实例

p.error {
    color: red;
}
运行 »

外部参考

可以使用完整URL或相对于当前网页的路径引用外部样式表。

此示例使用完整URL链接到样式表:

实例

<link rel="stylesheet" href="http://www.uihtml.com/static/css/style.css">

此示例链接到位于当前网站的css文件夹中的样式表:

实例

<link rel="stylesheet" href="/css/styles.css">

此示例链接到与当前页面位于同一文件夹中的样式表:

实例

<link rel="stylesheet" href="styles.css">

您可以在HTML文件路径一章中阅读有关文件路径的更多信息。


章节总结

  • style属性进行内联样式设置
  • <style>标签定义内部CSS
  • <link>标签引用外部CSS文件
  • <head>标签包含<style>和<link>标签
  • color属性设置文本颜色
  • font-family属性设置文本字体
  • font-size属性设置文本大小
  • border属性设置标签边框
  • padding属性设置内边距
  • margin属性设置外边距


HTML样式标签

标签 描述
<style> 定义HTML文档的样式
<link> 最常见的用途是链接外部样式表,外部资源