01-认识CSS
2017-12-18 本文已影响0人
MeWill
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）
