网页设想与造造教程 | 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规划手艺；每章最初均供给形式多样的根究与操练题。

本书构想清晰、构造合理、内容丰富、循序渐进，兼顾进门和进步两个条理，存眷开发环节最重要和最适用的部门，特殊重视理论才能的培育提拔，适用性、可操做性和可模仿性较强，同时融进课程思政元素。此外，本书配套的多媒体教学课件能够搀扶帮助读者在较短的时间内学会网页设想的相关常识，掌握造造网站的技能，创建本身喜欢的网站。

本书可做为高档院校网页设想类课程的教材或网站开发培训班的教材，也可做为网页设想与造造喜好者的自学参考书。

扫码京东优惠购书