HTML HTML5 PHP Mysql Linux 缓存技术 工具 资讯 读书 其他

HTML 样式 - CSS


CSS (层叠样式表-Cascading Style Sheets) 用于定义页面样式.

样式和颜色

分离的文本
颜色,  盒子
更多...

亲自试一试


Examples

亲自试一试 - 例子

在HTML内部使用样式
示例演示了如何在<head> 内部添加样式信息

让链接地址没有下划线
示例演示了如何通过样式属性使链接没有下划线

链接一个外部样式表
示例演示了使用<link>标签链接一个外部样式表


Css样式

CSS和HTML4一起介绍,为了提供更好的方式定义HTML元素样式

CSS可以通过如下方式添加到HTML中:

  • 行内使用 - 在HTMl元素中使用样式 属性
  • 内部引用 - 在头部使用<style> 元素
  • 外部引用 - 使用外部样式 文件

添加样式的首选方式是将样式单独放到样式文件内

不过,在我们这套HTML手册中我们会使用样式属性向您介绍css.这是为了简化例子,也能让您容易编辑代码并且亲自试一试

你可以在CSS手册中学到关于CSS的一切内容


行内样式

在某个单一元素上添加某个样式,可以使用行内样式

在行内使用样式,可以在相关标签内使用style属性.style属性可以包含css的任何属性。下面的例子展示了如何改变文本演示和改变段落的左侧边距:

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

学习更多CSS内容,请查看CSS手册


样式的例子 - 背景色

背景色属性定义了元素的的背景颜色:

例子

<!DOCTYPE html>
<html>

<body style="background-color:yellow;">
<h2 style="background-color:red;">This is a heading</h2>
<p style="background-color:green;">This is a paragraph.</p>
</body>

</html>

亲自试一试 »

background-color属性废弃了过去的bgcolor属性。

亲自试一试: 原始的背景色方式


样式例子 - 字体、颜色、大小

字体,颜色,字体大小属性定义了元素中文本的字体,颜色,和大小:

例子

<!DOCTYPE html>
<html>

<body>
<h1 style="font-family:verdana;">A heading</h1>
<p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p>
</body>

</html>

亲自试一试 »

字体,颜色,和字体大小属性废弃了过去的<font>标签


样式元素 - 文本对齐方式

文本对齐属性是指一个元素的水平对齐方式:

例子

<!DOCTYPE html>
<html>

<body>
<h1 style="text-align:center;">Center-aligned heading</h1>
<p>This is a paragraph.</p>
</body>

</html>

亲自试一试 »

过去使用的<center>文本居中标签已被废弃

亲自试一试: 旧版本的标题居中


内联样式表

内联样式表被用于控制当前页面某个元素的样式。内联样式定义在<head>内部,使用<style> 标签,例如:

<head>
<style>
body {background-color:yellow;}
p {color:blue;}
</style>
</head>



弃用的标签和属性

在HTML4中,一些标签和属性被用于控制文档样式。这些便签将在新版本不被支持

避免使用的元素:<font>, <center>, and <strike>,属性:color和bgcolor



To Top