第4章 CSS入门-【好程序员成长】HTML5从入门到精通

第4章 CSS入门 CSS简介 文字样式 背景样式 段落样式 边框样式 复合样式 CSS简介 背景样式 边框样式 文字样式 段落样式 复合样式 目 录 CATALOUGUE 01 02 04 05 03 06 初心至善 匠心育人 锋云智慧官网 www.fengyunedu.cn 了解CSS历史 掌握CSS常用属性 了解CSS简介 掌握CSS的基本结构 学 习 目 标 LEARNING OBJECTIVES 初心至善 匠心育人 锋云智慧官网 www.fengyunedu.cn 4.1 HTML表格 4.1.1 CSS的历史版本 4.1.2 CSS的基本结构 初心至善 匠心育人 锋云智慧官网 www.fengyunedu.cn 4.1 CSS简介 随着HTML的发展，为了满足页面设计者的要求，HTML添加了很多显示功能。但是随着这些功能的增加，使得 HTML变的越来越杂乱，HTML页面也越来越臃肿。CSS便诞生了。CSS是用于简化HTML标签，把关于样式部分的内容提取出来，进行单独地控制，使结构与样式分离式开发。 CSS全称为“Cascading Style Sheet”，中文解释为“层叠样式表”，它是以HTML为基础，设置网页的外观显示样式，如字体、颜色、背景的控制及整体的布局等，还可以针对不同的浏览器设置不同的样式。和学习HTML语言一样，首先来了解下CSS的历史。 初心至善 匠心育人 锋云智慧官网 www.fengyunedu.cn 4.1 CSS简介 4.1.1 CSS的历史版本 CSS这门语言是由W3C组织创建和维护的，也是W3C组织推荐的web相关标准。下面列出了CSS在不同时期所对应的一些重要版本。  CSS1.0--1996年12月，W3C推荐标准。  CSS2.0--1998年5月，W3C推荐标准。  CSS2.1--2004年6月，W3C推荐标准。  CSS3.0--还没有发布正式版本（日期到本教材结稿时） 1996年末发布了CSS1.0，这个版本只提供一些简单的功能，并没有得到广泛的应用。直到CSS2.0的诞生才真正地把结构跟样式进行分离，从而得到快速的发展。CSS2.1版本是CSS2.0版本的修正版，也是目前最稳定的一个版本。 初心至善 匠心育人 锋云智慧官网 www.fengyunedu.cn 4.1 CSS简介 4.1.1 CSS的历史版本 随着互联网的高速发展，网页样式也有更多的需求，CSS3在CSS2.1的基础上提供了更多实用且强大的功能。目前CSS3还没有发布正式版本，但是它的很多功能已经可以得到很好的支持与展示。会在后面章节中专门对CSS3进行详细讲解。 初心至善 匠心育人 锋云智慧官网 www.fengyunedu.cn 4.1 CSS简介 4.1.2 CSS的基本结构 给HTML标签添加CSS样式总共有行间样式、内部样式和外部样式三种方式。 为了让大家更好的理解和掌握CSS，本章只介绍如何通过行间样式来添加CSS。内部样式和外部样式两种引入方式会在下一章中进行讲解。 行间样式是在HTML标签中添加style属性来设置CSS。其基本格式如下： CSS样式由属性和值两部分组成，通过冒号的方式进行链接。多组CSS样式之间用分号（；）进行分割。一般在分号后面加一个空格，这样可使代码更易阅读。 初心至善 匠心育人 锋云智慧官网 www.fengyunedu.cn 4.1 CSS简介 4.1.2 CSS的基本结构 例中，为<div>标签设置width、height、background-color这三个CSS属性。下面就讲解这三个基本属性。 1. 宽、高 CSS中通过width、height这两个属性来设置HTML标签的尺寸大小，即元素的宽、高。CSS中的尺寸单位有很多，比较重要的两个单位是像素单位和百分比单位，后面还会介绍其他的尺寸单位。 初心至善 匠心育人 锋云智慧官网 www.fengyunedu.cn 4.1 CSS简介 4.1.2 CSS的基本结构 （1）像素单位 像素单位用px表示，全称“pixel”（像素）。px就是一张图片中最小的点，或者是计算机屏幕最小的点。如将新浪图标（左图）放大n倍（右图）。 观察两图可以发现，一张图片是由很多的小方点组成的，每一个小方点其实就是一个像素（px）。 初心至善 匠心育人 锋云智慧官网 www.fengyunedu.cn 4.1 CSS简介 4.1.2 CSS的基本结构 一台计算机的分辨率是1366px×768px指的就是“计算机宽是1366个小方点，高是768个小方点”。具体示例如下。 第2行为<div>标签设置宽100像素，高100像素。但是当在浏览器上进行预览效果时，会发现并没有什么特殊变化。其原