网页设计与制作第12章
- 格式：doc
- 大小：281.50 KB
- 文档页数：9
第12章 CSS的基本语法
一、CSS与HTML的区别是什么？为什么要使用CSS呢？
原因主要有如下4点：
1、弥补HTML对网页格式化功能的不足，比如段落间距、行距等。
2、字体变化和大小。
3、页面格式的动态更新。
4、排版定位等。
注意： HTML是一种标记语言，而CSS是这种标记的一种重要的扩展，可以进一步美化我们的页面。换句话说，CSS是一种来装饰HTML的一种标记集合。下面我们就开始学习CSS的格式。
CSS样式表的特别之处：
1、可以将格式和结构分离。
2、可以以前所未有的能力控制页面布局。
3、可以制作体积更小、下载更快的网页。
4、可以将许多网页同时更新，比以前更快、更容易。
5、浏览器将成为更友好的界面。
二、CSS的格式
选择符{属性：值 }
选择符{属性1：值1；属性2：值2 „„ }
案例名称：CSS初次 l1-1.htm
CSS初次
(使用链接的样式表时，可无须使用注释标签。)
三、CSS的结构和规则
1、选择符
所谓的选择符号就是如何才能让HTML认识CSS格式的一种标记。
任何HTML元素都可以是一个CSS的选择符。选择符仅仅是指向特别样式的元素。例如语句P{text-indent:3em}中的选择符是P。 案例名称：利用选择符 l1-2.htm
利用选择符
利用选择符
上面段落的效果是P标记的首行自动缩进
在上面的案例中，
就是将
CSS
加在网页中这些Style的设置需要在<BODY>标记之前
案例名称：使用类选择符 l1-4.htm
使用类选择符
寒风吹起，细雨迷离
风雨揭开我的回忆
注：本例code类对div标记选择符无效，只对p标记选择符有效。 3、ID选择符
ID选择符用于个别地定义每个元素的成分。这种选择符应该尽量少用，因为它具有一定的局限。指定一个ID选择符要有指示符“#"在名字前面。
案例名称：ID选择符 l1-5.htm
ID选择符
本书主要是对网页编程作了系统的介绍，本书的特色是以案例为主。
4、CSS组合与注解
为了减少样式表的重复声明，组合的选择符声明是允许的。
案例名称：使用组合和注释 l1-6.htm
使用组合
5、使用上下文关联选择符
可将标记选择符放在标记选择符里建立更多的样式，如：P B { color: red }
只有在
标记的里面具有标记的文本才会显示红色。
案例名称：使用上下文关联选择符 l1-7.htm
使用上下文关联选择符
Dramatic actor, inspired comedienne. Is there nothingshe can't do?
6、CSS的继承
实际上，所有在标记选择符中嵌套的标记选择符都会继承外层选择符指定的属性值，除非另外更改；换句话说，在子标记没有被定义样式的情况下，它将继承上级元素的样式。
案例名称：使用继承l1-8.htm
使用继承
注：
四、CSS的伪类与伪元素
伪类和伪元素是特殊的类和元素，能自动地被支持CSS的浏览器所识别。伪类可以区别开不同种类的元素，例如，visited links（已访问的链接）和active links（可激活链接）描述两个定位锚（anchors）的类型。
伪类或伪元素规则的形式如下：
选择符：伪类{属性：值}
或
选择符：伪元素{属性：值}
伪类和伪元素不应使用HTML的CLASS属性来指定。一般的类可以与伪类和伪元素一起使用，形式如下：
选择符.类：伪类{属性：值}
或
选择符.类：伪元素{属性：值}
锚伪类的应用
伪类可以指定元素以不同的方式显示链接（links）、已访问链接（visited links）、可激活链接（active
links）和鼠标悬停时的链接（hover links）。定位锚元素可给出伪类link、visited、active、hover。
案例名称：使用锚伪类 l1-9.htm
上左图：超链接末被访问时的状态，文本“Embedded CSS”与“CSS”显示效果9pt没有下划线
上右图：超链接鼠标悬停时的状态，文本“Embedded CSS”与“CSS”显示效果15pt有下划线
没有下划线的超级链接
Embedded CSS就是将CSS加在网页中
这些Style的设置需要在<body>；标记之前
