使用CSS的HTML样式

本文概述

应用CSS的三种方法
内联CSS
内部CSS
外部CSS
常用的CSS属性

假设我们已经使用简单的HTML代码创建了我们的网页, 并且我们想要一些能够以正确的格式显示我们的网页并吸引人的东西。因此, 我们可以使用CSS（级联样式表）属性来设置网页样式。

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

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

CSS中的每个属性都有一个“名称/值”对, 每个属性都用分号（;）分隔。

注意：在本章中, 我们对CSS进行了概述。你将在我们的CSS教程中深入了解CSS的所有内容。

例：

<body style="text-align: center;">
      <h2 style="color: red;">Welcome to srcmini</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>

立即测试

在上面的示例中, 我们使用了style属性为代码提供某种样式格式。

输出：





	


      Welcome to srcmini
      This is a great website to learn technologies in very simple way.

应用CSS的三种方法

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

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

内联CSS

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

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

例：

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

立即测试

输出：





	

    
        Learning HTML using Inline CSS

内部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>

立即测试

注意：在上面的示例中, 我们使用了class属性, 你将在下一章中学习它。

外部CSS

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

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

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

首先, 创建HTML文件
创建一个CSS文件并使用.css扩展名保存（此文件仅包含样式代码。）
使用HTML文档标题中的标记将HTML文件链接到HTML文件中。

例：

<!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-color	background-color:red;	它定义了该元素的背景色。
color	颜色：浅绿色；	它定义元素文本的颜色
padding	padding: 20px;	它定义了内容和边框之间的空间。
margin	边距：30px;左边距：	它在元素周围创建空间。
font-family	font-family: cursive;	字体家族为特定元素定义字体。
Font-size	font-size: 50px;	字体大小定义特定元素的字体大小。
text-align	text-align: left;	它用于在选定位置对齐文本。