CSS教程(一)

一、CSS概述

1. CSS是Cascading Styles Sheets的缩写,中文译名为层叠样式表,是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

2. 由HTML组织网页的结构和内容,而通过CSS来决定页面的表现形式。

二、为什么需要CSS

1. 由于html的主要功能是描述网页的结构,所以控制网页外观和表现的能力很差。

  •    无法精确到像素级调整文字大小,行间距等。
  •    不能对多个网页元素进行统一的样式设置,只能一个一个元素的设置

2. 学习CSS可实现对网页的外观和排版进行更灵活的控制,使网页更美观。

3. HTML只能对元素逐一设置样式,代码如下:

<body>

  <h2><font color="#FF0000" face="黑体">CSS标记1</font></h2>

  <p>CSS标记的正文内容1</p>

  <h2><font color="#FF0000" face="黑体">CSS标记2</font></h2>

  <p>CSS标记的正文内容2</p>

  <h2><font color="#FF0000" face="黑体">CSS标记3</font></h2>

  <p>CSS标记的正文内容3</p>

  <h2><font color="#FF0000" face="黑体">CSS标记4</font></h2>

  <p>CSS标记的正文内容4</p>

</body>

产生的问题:代码冗余

如果要修改元素的样式,也要一个个的改,修改工作量大

4. 使用CSS控制

       h2{  font-family:黑体;  color:red;}

<h2>CSS标记1</h2>

  <p>CSS标记的正文内容1</p>

  <h2>CSS标记2</h2>

  <p>CSS标记的正文内容2</p>

  <h2>CSS标记3</font></h2>

  <p>CSS标记的正文内容3</p>

  <h2>CSS标记4</font></h2>

  <p>CSS标记的正文内容4</p>

 

总结:使用CSS没有冗余代码,如果想修改样式,只需修改选择器中的内容即可本页全部生效。