建站你的第一个CSS层叠样式表

使用CSS层叠样式表
 

  • 为HTML成为越来越多的网页内容的描述和较少的外观和感觉,你需要一个建站工具来形容您的网页看起来应该如何 。这就是层叠样式表(CSS)。

  • CSS是不难的,在某些方面它几乎比HTML更容易。最棘手的部分是要记住你有选择的许多不同的选择。让我们先从一个简单的样式表,其中包括一些较为常见的款式。

字体和CSS

  • 最常见的调整网页页面上的字体。您可以更改您的字体,颜色,款式,大小和面部,使用CSS,你可以做这一切。

创建一个样式表

  • 写一个样式表的第一个关键是要决定你想要你的文字看起来像。你应该决定的颜色,字体,风格等。您还需要决定什么不​​同的风格应该是不同的标签,标题,等等。

易雅达所提出的风格

  • 标准段文本应该是黑色,宋体,中型
  • 顶层(H1)标题应该是红色,粗体和小型股
  • 第二级标题(H2)应该是蓝色和斜体
  • 符号应该是标准的文本有一个黄色的背景
这些都是可以更改字体的CSS元素。以斜体如何使用CSS属性的例子包括:

字体家庭
改变字体的实际面貌。您可以使用特定的字体名称或通用术语,如衬线字体,sans - serif字体,等宽
font-family : arial, geneva, helvetica;

字体大小
更改字体大小 。定义为绝对规模,相对大小,百分比,或长度的大小。
font-size : small

字体风格的
变化,从正常的斜体或斜的风格。
font-style : italic

字体变形
,从正常的文本的外观,以小型大写字母
font-variant : small-caps

字体重量
改变字体为粗体
font-weight : bold

颜色
改变文字的颜色。使用命名的颜色或十六进制代码
color : #ff0000

背景颜色
改变后面的文本的颜色 。使用无论是已命名的颜色或十六进制代码。
background-color : yellow;

一旦你决定你想要的样式,你需要写你的样式表。放置在下面的头,你的HTML文档:

<style>
p {
  color : #000000;
  font-family : 'Arial narrow';
  font-size : medium;
}
h1 {
  color : #ff0000;
  font-weight : bold;
  font-variant : small-caps;
}
h2 {
  color : #0000ff;
  font-style : italics;
}
.note {
  background-color : #ffff00;
}
</style>

上述样式前三将被设置使用的元素:P,H1和H2。最后风格的符号是用类的属性 。将在段落文本上,但不是一个单独的段落,因为它是一个符号,它通常会被用来与SPAN 元素 。

到与上述CSS文件粘贴下面的HTML:

<p>
该段将在P的风格。<span class="note">注意:继承意味着该文本将作为该段本身的同一款式</span>
</p>
第一个标记设置的样式将继承任何标记内。这就是为什么我们没有重新定义字体颜色或大小的注意。