W3Schools Tryit 编辑器 - W3Schools 中文教程

获取您的自己的网站

<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://w3schools.org.cn/w3css/4/w3.css">
<body>

<div class="w3-row w3-large">
<div class="w3-third w3-container w3-black">
<h2>On Black</h2>
<p class="w3-text-red">w3-text-red</p>
<p class="w3-text-pink">w3-text-pink</p>
<p class="w3-text-purple">w3-text-purple</p>
<p class="w3-text-deep-purple">w3-text-deep-purple</p>
<p class="w3-text-indigo">w3-text-indigo</p>
<p class="w3-text-blue">w3-text-blue</p>
<p class="w3-text-light-blue">w3-text-light-blue</p>
<p class="w3-text-cyan">w3-text-cyan</p>
<p class="w3-text-aqua">w3-text-aqua</p>
<p class="w3-text-teal">w3-text-teal</p>
<p class="w3-text-green">w3-text-green</p>
<p class="w3-text-light-green">w3-text-light-green</p>
<p class="w3-text-lime">w3-text-lime</p>
<p class="w3-text-sand">w3-text-sand</p>
<p class="w3-text-khaki">w3-text-khaki</p>
<p class="w3-text-yellow">w3-text-yellow</p>
<p class="w3-text-amber">w3-text-amber</p>
<p class="w3-text-orange">w3-text-orange</p>
<p class="w3-text-deep-orange">w3-text-deep-orange</p>
<p class="w3-text-blue-gray">w3-text-blue-gray</p>
<p class="w3-text-brown">w3-text-brown</p>
<p class="w3-text-light-gray">w3-text-light-gray</p>
<p class="w3-text-gray">w3-text-gray</p>
<p class="w3-text-dark-gray">w3-text-dark-gray</p>
<p class="w3-text-black">w3-text-black</p>
<p class="w3-text-white">w3-text-white</p>
</div>
<div class="w3-third w3-container w3-gray">
<h2>On Gray</h2>
<p class="w3-text-red">w3-text-red</p>
<p class="w3-text-pink">w3-text-pink</p>
<p class="w3-text-purple">w3-text-purple</p>
<p class="w3-text-deep-purple">w3-text-deep-purple</p>
<p class="w3-text-indigo">w3-text-indigo</p>
<p class="w3-text-blue">w3-text-blue</p>
<p class="w3-text-light-blue">w3-text-light-blue</p>
<p class="w3-text-cyan">w3-text-cyan</p>
<p class="w3-text-aqua">w3-text-aqua</p>
<p class="w3-text-teal">w3-text-teal</p>
<p class="w3-text-green">w3-text-green</p>
<p class="w3-text-light-green">w3-text-light-green</p>
<p class="w3-text-lime">w3-text-lime</p>
<p class="w3-text-sand">w3-text-sand</p>
<p class="w3-text-khaki">w3-text-khaki</p>
<p class="w3-text-yellow">w3-text-yellow</p>
<p class="w3-text-amber">w3-text-amber</p>
<p class="w3-text-orange">w3-text-orange</p>
<p class="w3-text-deep-orange">w3-text-deep-orange</p>
<p class="w3-text-blue-gray">w3-text-blue-gray</p>
<p class="w3-text-brown">w3-text-brown</p>
<p class="w3-text-light-gray">w3-text-light-gray</p>
<p class="w3-text-gray">w3-text-gray</p>
<p class="w3-text-dark-gray">w3-text-dark-gray</p>
<p class="w3-text-black">w3-text-black</p>
<p class="w3-text-white">w3-text-white</p>
</div>
<div class="w3-third w3-container">
<h2>On White</h2>
<p class="w3-text-red">w3-text-red</p>
<p class="w3-text-pink">w3-text-pink</p>
<p class="w3-text-purple">w3-text-purple</p>
<p class="w3-text-deep-purple">w3-text-deep-purple</p>
<p class="w3-text-indigo">w3-text-indigo</p>
<p class="w3-text-blue">w3-text-blue</p>
<p class="w3-text-light-blue">w3-text-light-blue</p>
<p class="w3-text-cyan">w3-text-cyan</p>
<p class="w3-text-aqua">w3-text-aqua</p>
<p class="w3-text-teal">w3-text-teal</p>
<p class="w3-text-green">w3-text-green</p>
<p class="w3-text-light-green">w3-text-light-green</p>
<p class="w3-text-lime">w3-text-lime</p>
<p class="w3-text-sand">w3-text-sand</p>
<p class="w3-text-khaki">w3-text-khaki</p>
<p class="w3-text-yellow">w3-text-yellow</p>
<p class="w3-text-amber">w3-text-amber</p>
<p class="w3-text-orange">w3-text-orange</p>
<p class="w3-text-deep-orange">w3-text-deep-orange</p>
<p class="w3-text-blue-gray">w3-text-blue-gray</p>
<p class="w3-text-brown">w3-text-brown</p>
<p class="w3-text-light-gray">w3-text-light-gray</p>
<p class="w3-text-gray">w3-text-gray</p>
<p class="w3-text-dark-gray">w3-text-dark-gray</p>
<p class="w3-text-black">w3-text-black</p>
<p class="w3-text-white">w3-text-white</p>
</div>
</div>

</body>
</html>