HTML 样式-CSS

减小字体

增大字体作者：本站来源：本站整理发布时间：2023-05-18 11:05:09

在HTML文档中，可以使用CSS（Cascading Style Sheets，层叠样式表）来渲染HTML元素的风格。

HTML可以有力的组织网页的内容，构建网页结构，但在网页布局、内容呈现样式方面的表现较弱或不够方便。而借助CSS，用户可以具有更强大的布局控制能力，并能够使网页更加具有美感。CSS还可以同时控制多个网页的布局和风格，使得修改和维护更加方便。

HTML Styles CSS

什么是CSS

CSS是Cascading Style Sheets（层叠样式表）的首字母缩写形式，主要用于格式化网页的布局。

层叠意味着对一个HTML元素运用一种样式之后，其子元素也会得到相同的样式，如对某个标签设置了字体颜色之后，其包含在该元素下的子元素标签中的内容也会以同样的颜色进行显示。

借助CSS，用户可以轻松的设置HTML元素的颜色、字体、文本大小、HTML元素间距、元素的位置与排列、元素的图片背景或颜色背景、根据设备和屏幕尺寸运用不同的风格等。

CSS使用的方式

在HTML文档中有三种使用CSS样式的方法：

（1）行内样式（内联样式）

在一个HTML标签内使用style属性为该标签设置样式。

（2）页内样式（内部样式）

在HTML文档<head>部分通过使用<style>元素标签定义样式，该样式只在当前页内起作用。

（3）外部样式

可以使用<link>元素将位于其它位置或网站外的样式文件引入到当前页面中来。这种方式也是比较常见的使用样式的方式。

行内样式的使用

在HTML元素中使用style属性来定义内联样式，即只对当前元素及被包含的子元素起作用的样式。

下面是使用行内样式的例子：

<h1 style="color:blue;font-size:20px;">翔宇亭IT乐园</h1>
<p style="color:red;line-height:35px;">翔宇亭IT乐园，专业、系统的IT知识学习平台。</p>
<p style="color:green;margin-top:50px;">再小的个体，也是品牌。</p>

在上面两行代码中，第1行中将一级标题的字体颜色(color)设置为蓝色，字体大小(font-size)设置为20个像素；第2行将该段落的字体颜色设置为红色，行高(line-height)设置为35个像素；第3行设置字体的颜色为绿色，段落之前留有50个像素的空白（margin-top）。

其在谷歌浏览器中的预览效果如下：

HTML行内样式

读者可以点击这里预览效果。

内部样式的使用

内部CSS只对定义样式的当前HTML页起作用。

内部CSS一般定义在HTML文档<head>部分中，并且样式的定义位于<style>和</style>之间。

下面例子为文档的<h1>、<p>和<body>指定了一定的样式。

内部样式-Examples

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>HTML内部样式</title>
<style>
body{background-color:gold;}
h1{color:red;font-size:30px;}
p{color:steelblue;text-indent:2em;}
</style>
</head>
<body>
<h1>翔宇亭IT乐园</h1>
<p>翔宇亭IT乐园提供HTML教程。</p>
<p>翔宇亭IT乐园欢迎您。</p>
<p style="color: darkgray;">也欢迎您的朋友</p>
</body>
</html>

以上在<style>元素内为网页内的三个元素定义了样式。其中，body指定网页的背景色(background-color)为金色；h1指定其字体颜色为红色，字体大小为30个像素；p指定段落中的文本颜色为铁青色，段落首行缩进（text-indent）2个字符。

其在谷歌浏览器中的预览效果如下：

HTML内部样式

读者可以点击这里预览效果。

外部CSS文件的使用

可以把网页中使用的样式统一定义在一个文件中，并在需要的网页中使用<link>标签将其链接到当前网页中。

下面的例子讲解了CSS文件定义及使用的方法。

外部样式-Examples

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>HTML外部样式</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>翔宇亭IT乐园</h1>
<p>翔宇亭IT乐园提供HTML教程。</p>
<p>翔宇亭IT乐园欢迎您。</p>
<p style="color: darkgray;">也欢迎您的朋友</p>
</body>
</html>

下面的内容也可以使用记事本进行编辑。在保存时，使用.css作为文件的扩展名。上面HTML代码中styles.css文件的内容如下：