HTML-CSS样式
Posted 摩登教程
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML-CSS样式相关的知识，希望对你有一定的参考价值。
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 样式实例 – 字体颜色和大小
我们可以使用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>效果展示：
居中对齐的标题
这是一个段落。
点击下方“阅读原文”可亲试效果
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-CSS样式的主要内容，如果未能解决你的问题，请参考以下文章