网页设计与制作教程 | CSS基础知

初识CSS。

CSS是Cascading Style Sheets的缩写，中文译名为层叠样式表，它是一种用于控制网页样式并允许将样式信息与网页内容分离的标记性语言。其中的样式指的就是格式，对网页来说，像文字的大小、颜色以及图片位置等都是网页显示信息的样式；层叠是指当在HTML文件中同时引用多个定义好的样式文件时，若多个样式文件间定义的样式发生了冲突，则依据优先的层次进行处理。

01

CSS与HTML的关系

CSS诞生于1996年，由W3C负责组织和制定。由于HTML的主要功能是描述网页结构，所以其控制网页外观和表现的能力比较差，如无法精确调整文字的大小、行间距等；而且不能对多个网页元素进行统一的样式设置，只能一个元素一个元素地设置。CSS可以对网页的外观和排版进行更灵活、精确的控制，使网页更美观。简单地讲，HTML和CSS的关系就是“内容”和“形式”，即由HTML组织网页的结构和内容，由CSS决定页面的表现形式。

02

CSS的优点

和传统的HTML相比，CSS除了具有强大的控制能力和排版能力之外，最主要的特征是实现了内容与样式的分离，这种做法带来了许多好处。

(1) 简化了网页的代码，提高了访问速度。外部的CSS文件会被浏览器保存在缓存里，加快了下载显示的速度，也减少了需要上传的代码数量。

(2) 可以构建公共样式库，便于重用样式。可以把一些好的样式写成CSS文件，构建优秀的公共样式库，以便于一个网站重复调用或不同的网站共享资源。

(3) 便于修改网站的样式。可以将站点上所有的网页风格都用一个或几个CSS文件控制，只要修改相应的CSS文件，就可以改变整个网站的风格特色，避免一个个网页地修改，大大减少了重复劳动。例如:

展开全文

上例中，一条CSS指令就可以设置文档中的所有h1标签，非常省事。如果已写好一个页面，根据新变化需要把h1的颜色全部改为黄色，只需要将上述CSS代码中h1的color值改为“color:yellow;”，而不需要逐个修改h1的color属性，这样便减少了代码数量，从而加快了网页的加载速度。

(4) 方便团队开发。开发一个网站往往需要美工和程序员相互配合。CSS把内容结构和格式控制相分离，美工做样式，程序员写内容，从而方便美工和程序员分工协作、各司其职，为开发出优秀的网站提供了有力保障。

03

一个CSS的应用实例

和学习HTML一样，在学习CSS的过程中只需要使用Windows平台自带的“记事本”程序就可以了。当然，如果使用Dreamweaver等专业软件为网页添加CSS将会更加简便。通过例4-1可以很容易地看出使用CSS前后两个网页的区别。

【例4-1】使用CSS前后的对比实例。

(1) 在记事本中输入下列没有加入CSS的代码，浏览器中的显示效果如图4-1所示。

■ 图4-1没有加入CSS的网页效果

(2) 在记事本中输入下列加入CSS的代码，浏览器中的显示效果如图4-2所示。

■ 图4-2加入CSS的网页效果

(3) 设置前后的变化。设置CSS后，统一了文字的大小和排列方式，并隐藏了部分文字。

实例讲解

网页设计与制作教程（第4版）

精彩回顾

Internet发展历程

内容：Internet简要介绍。

下期预告

网页评价指标

内容：网页赏析的评价方法。

CSS盒子模型的应用

内容：介绍CSS盒子模型的应用示例。

网页布局设计综合案例

内容：制作一个简单的企业网站首页。

04

参考书籍

《 网页设计与制作教程（第4版）》

作者：杨选辉

定价：69.90元

内容简介

本书是一本全面介绍网页设计与制作技术的教程，以目前流行的网页设计软件作为技术支持，系统介绍网页的构思、规划、制作和网站建设的全过程。

本书共10章。第1～7章面向入门层次，介绍网页制作基础知识、网站开发流程、HTML基础知识、CSS基础知识、网页可视化设计、主流的网页制作工具Dreamweaver CC 2019和网站赏析；第8～10章面向提高层次，介绍利用CSS修饰网页元素、CSS盒子模型和Div+CSS布局技术；每章最后均提供形式多样的思考与练习题。

本书构思清晰、结构合理、内容丰富、循序渐进，兼顾入门和提高两个层次，关注开发环节最重要和最实用的部分，特别注重实践能力的培养，实用性、可操作性和可模仿性较强，同时融入课程思政元素。此外，本书配套的多媒体教学课件可以帮助读者在较短的时间内学会网页设计的相关知识，掌握制作网站的技能，创建自己喜爱的网站。

本书可作为高等院校网页设计类课程的教材或网站开发培训班的教材，也可作为网页设计与制作爱好者的自学参考书。

扫码京东优惠购书

扫码加微信详细咨询太和智慧养老产品和平台服务！

扫码加微信详细咨询太和智慧养老产品和平台服务！

扫码加微信详细咨询太和智慧养老产品和平台服务！