HTML-CSS样式

由 hcduguo

CSS (Cascading Style Sheets) 用于渲染HTML元素标签的样式。

 
 

Look! Styles and colors

Manipulate Text
Colors,
 Boxes
and more…

 

亲自试试

HTML-CSS样式说明

我们已经可以使用简单的HTML代码创建我们的网页了，但我们想要显示一些更有特色和吸引力的东西。我们可以使用CSS（级联样式表）属性来设置网页样式。

CSS用于在由HTML元素组成的网页中应用样式。它可以深入刻画网页的外观。

CSS提供了各种样式属性，例如背景颜色，填充，边距，边框颜色等，以为网页设置样式。

使用CSS的三种方法

要将CSS与HTML文档一起使用，有以下三种方法：

  • 内联CSS：使用HTML元素中的style属性定义CSS。
  • 内部或嵌入CSS：使用<head>部分中的<style>标签定义CSS。
  • 外部CSS：在一个单独的.css文件中定义所有CSS属性，然后使用<link>标签将该文件包含在HTML文件中。

CSS内联样式

内联CSS用于将CSS应用于单个元素，它可以在每个元素中应用不同的样式。

使用内联CSS，您需要在HTML元素内应用style属性。我们可以根据需要使用任意多个属性，但是每个属性都应以分号（;）分隔。

当特殊的样式需要应用到个别元素时，就可以使用内联样式。以下实例显示出如何改变段落的颜色和左外边距。

<p style="color:blue;margin-left:20px;">这是一个段落。</p>

效果展示：

这是一个段落。

HTML样式实例 – 背景颜色

背景色属性（background-color）定义一个元素的背景颜色：

<body style="background-color:yellow;">
    <h2 style="background-color:red;">这是一个标题</h2>
    <p style="background-color:green;">这是一个段落。</p>
</body>

效果展示：

这是一个标题

这是一个段落。

早期背景色属性（background-color）是使用 bgcolor 属性定义。

亲自试试: 旧版HTML来设置背景方式

HTML 样式实例 – 字体颜色和大小

我们可以使用font-family（字体），color（颜色），和font-size（字体大小）属性来定义字体的样式:

<h1 style="font-family:verdana;">一个标题</h1>
<p style="font-family:arial;color:red;font-size:20px;">一个段落。</p>

效果展示：

一个标题

一个段落。

亲自试试

现在通常使用font-family（字体），color（颜色），和font-size（字体大小）属性来定义文本样式，而不是使用<font>标签。

HTML 样式实例 – 文本对齐方式

使用 text-align（文字对齐）属性指定文本的水平与垂直对齐方式：

<h1 style="text-align:center;">居中对齐的标题</h1> <p>这是一个段落。</p>

效果展示：

居中对齐的标题

这是一个段落。

亲自试试

文本对齐属性 text-align取代了旧标签 <center> 。

亲自试试

CSS内部样式表

内部样式表在HTML文档的<head>部分定义网页的CSS属性，使用内部CSS，我们可以使用class和id属性。

我们可以使用内部CSS为单个HTML页面定义样式。

<head>
    <style type="text/css">
        body {background-color:yellow;}
        p {color:blue;}
    </style>
</head>

CSS外部样式表

外部CSS包含一个单独的CSS文件，该文件包含使用类名称，ID名称，标签名称等样式代码。我们可以通过使用<link>标签将其包含在HTML文件中，从而在任何HTML文件中使用此CSS文件。

如果我们有一个应用程序有多个HTML页面，并且使用相似的CSS，则可以使用外部CSS。

需要创建两个文件以应用外部CSS：

  • 首先，创建一个HTML文件
  • 创建一个CSS文件并使用.css扩展名保存（此文件仅包含样式代码。）
  • 使用HTML文档标题中的<link>标签将HTML文件链接到HTML文件中。
<head>
    <link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

HTML 样式标签

标签 描述
<style> 定义文本样式
<link> 定义资源引用地址

已弃用的标签和属性

在HTML 4, 原来支持定义HTML元素样式的标签和属性已被弃用。这些标签将不支持新版本的HTML标签。

不建议使用的标签有: <font>, <center>, <strike>

不建议使用的属性: color 和 bgcolor.

亲自试试- 示例

HTML使用样式
本例演示如何使用添加到 <head> 部分的样式信息对 HTML 进行格式化。

本例演示如何使用样式属性做一个没有下划线的链接。
如何使用 style 属性制作一个没有下划线的链接。

链接到一个外部样式表
本例演示如何 标签链接到一个外部样式表。

相关