1-1
今天开始第一课。
1CSS的概念
对于一个网页设计者来说,HTML语言一定不会感到陌生,因为它是所有网页制作的基础。但是如果希望网页能够美观、大方,并且升级方便,维护轻松,那么仅仅HTML是不够的,CSS在这中间扮演着重要的角。本课从CSS的基本概念出发,介绍CSS语言的特点,以及如何在网页中引入CSS,并对CSS进行初步的体验。
CSSCascading Style Sheet),中文译为层叠样式表,是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。CSS1996年由W3C审核通过,并且推荐使用的。简单的说CSS的引入就是为了使得HTML能够更好的适应页面的美工设计。它以HTML为基础,提供了丰富的格式化功能,如字体、颜、背景、整体排版等等,并且网页设计者可以针对各种可视化浏览器设置不同的样式风格,包括显示器、打印机、打字机、投影仪、PDA等等。CSS的引入随即引发了网页设计的一个又一个新高潮,使用CSS设计的优秀页面层出不穷。
CSS对标记的控制入手,讲解CSS的初步知识以及编辑方法。希望大家能够掌握下一面几个方面的内容:
标记的概念
传统HTML的缺点
CSS的引入
如何编辑CSS
浏览器与CSS
2.使用CSS控制页面
在对CSS有了大致的了解后,便希望使用CSS对页面进行全方位的控制。我们在这里主要介绍如何使用CSS控制页面,以及其控制页面的各种方法,包括行内样式、内嵌式、链接式、导入式等。并最后探讨各种方式的优先级问题。希望大家能够掌握以下几个方面的内容:
行内样式
内嵌式
链接式
导入样式
各种方式的优先级问题如何制作网页版调查问卷
3.体验CSS
我们在这里通过一个简单的实例,初步体验CSS是如何控制页面的,对页面从无到有,并使用CSS实现一些效果有一个初步的了解。对于我们在这里中的很多细节读者不必深究,在以后的课程中都将一一讲解。希望大家能够掌握以下几个方面的内容:
从零开始
加入CSS控制
控制图片
CSS的注释
好了,今天就到这里,下面的内容我们明天再谈。
1-2
上一课对CSS如何引入HTML页面进行了介绍,本课重点介绍CSS如何控制页面中的各个标记。从控制HTML标记的不同方法入手,介绍各种选择器的概念,以及选择器的声明等,最后介绍CSS继承在实际设计中的运用。
CSS选择器
选择器(selector)是CSS中很重要的概念,所有HTML语言中的标记都是通过不同的CSS选择器进行控制的。用户只需要通过选择器对不同的HTML标签进行控制,并赋予各种样式声明,即可实现各种效果。希望大家能够掌握以下几个方面的内容:
标记选择器
类别选择器
ID选择器
选择器声明
在利用CSS选择器控制HTML标记时,除了每个选择器的属性可以一次声明多个,选择器本身也可以同时声明多个,并且任何形式的选择器包括标记选择器、class类别选择器、ID选择器等都是合法的。我们在这里主要介绍选择器集体声明的各种方法,以及选择器之间的嵌套关系。希望大家能够掌握以下两个方面的内容:
集体声明
选择器的嵌套
的继承
学习过面向对象语言的用户,对于继承(Inheritance)的概念一定不会陌生。在CSS语言中继承并没有C++Java等语言中的那么复杂,简单的说就是将各个HTML标记看作一个个容器,其中被包含的小容器会继承所包含它的大容器的风格样式。我们在这里从页面各个标记的父子关系出发,详细的讲解CSS的继承。希望大家能够掌握以下两个方面的内容:
父子关系
CSS继承的运用
1-3
文字是网页设计种永远不可缺少的元素,各种各样的文字效果遍布在整个英特网中。本课从基础的文字设置出发,详细讲解CSS设置各种文字效果的方法,然后再进一步讲解段落排版的相关内容。
CSS文字样式
使用过Word编辑文档的用户一定对会注意到,Word可以对文字的字体、大小、颜等各种属性进行设置。CSS同样可以对HTML页面中的文字进行全方位的设置。我们在这里在上两章的基础上主要介绍CSS设置文字各种属性的基本方法。希望大家能够掌握以下几个方面的内容:
字体
文字大小
文字颜
文字粗细
斜体
文字的下划线、顶划线、删除线
英文字母大小写
 
文字实例一:模拟Google公司logo
前面对CSS设置文字的各种单独效果进行了详细的介绍,我们在这里通过一个简单的实例,将各种效果综合运用,达到基本模拟Google公司logo的效果。
文字实例二:制作页面的五彩标题
对于任何文章,标题的作用是显而易见的。在页面中标题的设计往往也决定着整个页面的风格样式。我们在这里以CSS设计标题为例,进一步介绍CSS在控制文字时的各种方法和技巧。对于我们在这里中使用的一些CSS属性,前面课程可能还没有涉及,读者不必深究,在以后的课程都将详细介绍。
CSS段落文字
段落是由一个个文字组合而成的,同样是网页中最最重要的组成部分,因此前面提到的文字属性,对于段落同样适用。但CSS针对段落也提供了很多样式属性,我们在这里将通过实例进行详细介绍。希望大家能够掌握以下几个方面的内容:
段落的水平对齐方式
段落的垂直对齐方式
行间距和字间距
首字放大
段落实例:百度搜索
搜索引擎一直都是在网上冲浪必不可少的工具,而搜索引擎在显示搜索结果时如何能让用户一目了然的到关键字,是每一个搜索网站在排版时都必须认真对待的,而各种搜索结果恰恰都只是文字段落为主。作为国内搜索引擎霸主之一的百度一直保持着友好的用户界面。我们在这里通过具体实例,模拟Baidu搜索的显示结果,进一步巩固CSS文字、段落的排版方法。
2-1
在五彩缤纷的网络世界中,各种各样的图片组成了丰富多彩的页面,能够让人更直观的感受网页所要传达给用户的信息。本课介绍CSS设置图片风格样式的方法,包括图片的边框、对齐方式、图文混排等,并通过实例综合文字、图片的各种运用。
1.图片样式
作为单独的图片本身,它的很多属性可以直接在HTML中进行调整,但是通过CSS统一管理,不但可以更加精确的调整图片的各种属性,还可以实现很多特殊的效果。我们在这里主要讲解CSS设置图片基本属性的方法,为进一步深入探讨打下基础。希望大家能够掌握以下两个方面的内容:

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。