01-认识CSS

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体验

image.png

<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）

01-认识CSS

CSS的起源

CSS体验

CSS和HTML的关系

本节课来看，CSS的优点

练习

推荐阅读更多精彩内容