CSS的起源
- 在web最开开始(1990-1993),html只有描述段落,超链接,列表和标题等基本元素。随着万维网的出现(用户交互体验的加强),对html的要求越来越大,人们需要更好的使用体验,于是出现了一些表现化的标签如<u></u>、<i></i>以及一些体现表现的属性与属性值如align="center"等。
- 随着时间的推移,html既要体现结构,又要用于表现,导致3个问题:1.html变得越来越臃肿;2.页面缺乏结构性,降低了网页的可访问性。3。页面维护越来越困难。
- 在1995年,W3C组织(World WideWeb Consortium)成立,CSS(Cascading Style Sheets)的创作成员全部成为了W3C的工作小组并且全力以赴负责研发CSS标准,并于12月份推出了第一份CSS(CSS1.0)。
CSS体验
<head>
<meta charset="utf-8">
<style type="text/css"> /* type="text/css" 常省略,因为这是默认值。*/
h2{
text-align: center; /*设置文本水平居中对齐*/
color: red; /*文本颜色:红色*/
font-family: "微软雅黑"; /* 字体族:微软雅黑 */
}
p{
text-align: center;
color: blue;
font-size: 20px; /* 字体大小:20像素 */
}
small{
color: orange;
}
</style>
</head>
<body>
<h2>静夜思游子吟</h2>
<p><small>作者:孟郊</small></p>
<p>慈母手中线,游子身上衣。</p>
<p>临行密密缝,意恐迟迟归。</p>
<p>谁言寸草心,报得三春晖。</p>
<h2>江城子·乙卯正月二十日夜记梦</h2>
<p><small>作者:苏轼</small></p>
<p>十年生死两茫茫,不思量,自难忘。</p>
<p>千里孤坟,无处话凄凉。</p>
<p>纵使相逢应不识,尘满面,鬓如霜。</p>
<p>夜来幽梦忽还乡,小轩窗,正梳妆。</p>
<p>相顾无言,惟有泪千行。</p>
<p>料得年年肠断处,明月夜,短松冈。</p>
</body>
注:
- <style></style>其实在HTML任意部分都可以,只是习惯在</head>上方。
- <style></style>遵循HTML规范,有开始和结束标签。
- <style></style>里面的语句则遵循的是CSS语句规范,基本为:选择器 { 属性1:属性值1;属性2:属性值2; }
- CSS语句的注释格式为:/* 注释的内容 */
CSS和HTML的关系
- HTML负责结构
- CSS负责表现
本节课来看,CSS的优点
- 结构和表现分离
- 代码简洁统一
CSS还有很多优点,随着学习的深入,大家将会深刻体会到。
练习
1.自行完成本文的HTML部分和CSS部分。
2.思考,如何仅仅让 “夜来幽梦忽还乡,小轩窗,正梳妆。” 字体颜色变成粉红色(pink)