HTML 教程

HTML 属性

HTML 标签列表

HTML API

HTML 案例

HTML 颜色

HTML5 进阶

HTML 其它

HTML 面试问题

HTML CSS样式

假设我们已经使用简单的 HTML 代码创建了我们的网页，并且我们想要一些可以以正确的格式呈现我们的页面并且具有明显吸引力的东西。为此，我们可以使用 CSS（级联样式表）属性设置网页样式。

CSS 用于在由 HTML 元素组成的网页中应用样式。它描述了网页的外观。

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

CSS 中的每个属性都有一个名称-值对，每个属性之间用分号 (;) 分隔。

注意：在本章中，我们简要介绍了 CSS。您将在我们的 CSS 教程中深入了解有关 CSS 的所有内容。

例子：

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body style="text-align: center;">
      <h2 style="color: red;">Welcome to javaTpoint</h2>
      <p style="color: blue; font-size: 25px; font-style: italic;">This is a great website to learn technologies in very simple way.</p>
</body>
</html>


在上面的例子中，我们使用了一个 style 属性来为我们的代码提供一些样式格式。

输出：

欢迎来到 javaTpoint

这是一个很棒的网站，可以以非常简单的方式学习技术。

CSS的三种应用方式

要在 HTML 文档中使用 CSS，有以下三种方式：

  • 内联 CSS：使用 HTML 元素中的 style 属性定义 CSS 属性。

  • 内部或嵌入式 CSS：使用 <head> 部分中的 <style> 标签定义 CSS。

  • 外部 CSS：在单独的 .css 文件中定义所有 CSS 属性，然后在部分中使用标签将文件包含在 HTML 文件中。

内联 CSS：

内联 CSS 用于在单个元素中应用 CSS。它可以在每个元素中唯一地应用样式。

要应用内联 CSS，您需要在 HTML 元素中使用 style 属性。我们可以使用任意数量的属性，但每个属性应该用分号 (;) 分隔。

例子：

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
    <body>
        <h3 style="color: red;
            font-style: italic;
            text-align: center;
            font-size: 50px;
            padding-top: 25px;">Learning HTML using Inline CSS</h3>
   </body>
</html>

输出：

使用内联 CSS 学习 HTML

内部 CSS：

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

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

例子：

<!DOCTYPE html>  
<html>  
<head>  
                  <style>  
      /*Internal CSS using element name*/  
            body{background-color:lavender;  
             text-align: center;}  
             h2{font-style: italic;  
              font-size: 30px;  
              color: #f08080;}  
            p{font-size: 20px;}  
        /*Internal CSS using class name*/  
            .blue{color: blue;}  
            .red{color: red;}  
            .green{color: green;}  
      </style>  
    </head>  
  <body>  
   <h2>Learning HTML with internal CSS</h2>  
    <p class="blue">This is a blue color paragraph</p>  
    <p class="red">This is a red color paragraph</p>  
    <p class="green">This is a green color paragraph</p>  
  </body>  
</html>

注意：在上面的例子中，我们使用了一个类属性，你将在下一章中学习。

外部 CSS：

外部 CSS 包含一个单独的 CSS 文件，该文件仅包含使用类名、id 名、标签名等的样式代码。我们可以在任何 HTML 文件中使用此 CSS 文件，方法是使用 <link> 标签将其包含在 HTML 文件中。

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

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

  • 首先，创建HTML文件

  • 创建一个 CSS 文件并使用 .css 扩展名保存它（此文件仅包含样式代码。）

  • 使用HTML 文档标题部分中的标记链接 HTML 文件中的 CSS 文件。

例子：

<!DOCTYPE html>  
<html>  
<head>  
    <link rel="stylesheet" type="text/css" href="style.css">  
    </head>  
  <body>  
   <h2>Learning HTML with External CSS</h2>  
    <p class="blue">This is a blue color paragraph</p>  
    <p class="red">This is a red color paragraph</p>  
    <p class="green">This is a green color paragraph</p>  
  </body>  
</html>

CSS文件：

body{
background-color:lavender;
text-align: center;
}
h2{
font-style: italic;
size: 30px;
color: #f08080;
}
p{
font-size: 20px;
}

.blue{
color: blue;
}
.red{
color: red;
}
.green{
color: green;
}

常用的CSS属性：

属性名称句法描述
background-colorbackground-color:red；它定义了该元素的背景颜色。
colorcolor: lightgreen;它定义了元素文本的颜色
paddingpadding: 20px;它定义了内容和边框之间的空间。
marginmargin: 30px; margin-left:它在元素周围创建空间。
font-familyfont-family: cursive;Font-family 定义特定元素的字体。
Font-sizefont-size: 50px;Font-size 定义特定元素的字体大小。
text-aligntext-align: left;它用于在选定位置对齐文本。


上一主题 HTML 表单属性 下一主题 HTML 类
  • 使用社交账号登录,本站支持
全部评论(0)

便捷工具