CSS简介信息技术.pptxVIP

网站规划与设计CSS简介 CSS简介 在HTML中，用<p>、<table>这样的标签来表达“这里是段落”、“这里是表格”之类的信息，并可以通过浏览器来显示出这些元素。为了使HTML标签在浏览器中显示时能有不同的表现形式，就需要不断地将新的HTML标签和属性（如字体标签和颜色属性）添加到HTML规范中。给HTML增加很多的属性，并通过这些添加的属性来控制网页的显示效果，这导致了网页中的HTML代码变得很臃肿。 CSS简介 CSS解决了利用HTML进行网页排版和显示不同效果时代码臃肿的问题。CSS是一种定义样式（如字体、颜色和位置）的语言，用于描述如何格式化和显示网页中的信息。CSS样式可直接存储在HTML网页中，也可存储为独立的样式表文件。不管以哪种方式保存，样式表都包含将样式应用于特定类型元素的样式规则。在外部使用时，样式规则放在外部样式表文档中，文件扩展名为.css。 CSS简介 样式规则可应用于网页中的各种元素，如文本段落或链接的格式化指令。样式规则由一个或多个样式属性及其值组成。CSS中的“层叠（cascading）”表示样式规则应用于HTML文档元素的方式。具体地说，CSS中的样式形成一个层次结构，用更具体的样式覆盖通用样式。样式规则的优先级由CSS根据这个层次结构决定，从而实现层叠效果。可将CSS的层叠机制看成一种类似继承的关系，在这种继承关系中，父亲的特征传递给子女，但子女有更特殊的特征。基本样式规则适用于整个样式表，但可被更具体的样式规则覆盖。 1.1 CSS的语法格式 要想使用CSS对网页的布局、字体、颜色、背景和其他显示效果进行精确地控制，需要先掌握CSS的基本语法。 CSS语法由selector（选择符）、property（属性）和value（值）3部分构成，语法格式如下： selector{property:value} selector通常是希望定义的HTML元素或标签，property是希望改变的属性，每个属性都有一个值。属性和值用冒号分开，由花括号括起来，这样就组成了一个完整的样式声明（declaration）。例如，body{color:blue}表示将body元素内的前景色（文字颜色）定义为蓝色。其中，body是选择符，花括号内的部分是样式声明，color为属性，blue为值。 1.2 选择符 CSS语法中的选择符包括以下几种类型，这里除了基本的HTML元素或标签之外，还有一些其他类型。1.类型选择符 2.类选择符3.ID选择符 4.包含选择符 5.选择符分组 1.3 属性 通过CSS的属性可以设置网页中文字的字体、文本样式、对象的颜色和背景颜色等。下面介绍CSS中的主要属性。1.字体属性 CSS的字体属性可以用于设置字体系列（font-family）、字体大小（font-size）、字体加粗（font-weight）、字体风格（font-style）和字体变形（font-variant）等。1）设置字体系列 2）设置字体大小 3）设置粗体、斜体1.3 属性 2.文本样式属性 通过设置文本样式属性，可以改变文本缩进、文本对齐、字间隔、文本装饰，行间距等。通常这些外观样式很难通过HTML进行控制，而CSS的文本样式解决了相应的问题。1）设置文本段落缩进2）设置文本对齐方式 3）设置文本字间距 4）设置文本修饰效果 1.3 属性 3.行间距属性 行间距属性line-height属性用于设置文本的行间距，其语法格式如下： line-height: normal | 数字 | 长度 | 百分比 其中，normal表示使用浏览器默认的行间距，一般由字体大小属性来决定；数字表示行高为该元素字体大小与该数字相乘的结果；长度表示行距由长度单位和长度值确定；百分比表示行距是该元素字体大小的百分比。 1.3 属性 4.颜色属性 在CSS中直接使用color属性设置网页中每个元素的前景色。用color属性设置的颜色一般都标签为内容的前景色。设置前景色的语法格式如下： color:关键字|RGB值1.3 属性 5.背景属性背景属性包括背景颜色和背景图像属性。1）设置背景颜色 2）设置背景图像 1.3 属性 6.边框属性 边框属性包括边框样式、边框宽度和边框颜色，主要用来设置网页中各个元素的边框。这里的元素可以是一个段落、一张图片或一个表格等。1）设置边框样式 2）设置边框的宽度 3）设置边框的颜色 1.4 注释 可以在CSS中插入注释来说明代码的意思，注释有利于以后编辑和更改代码时理解代码的含义。在浏览器中，注释是不显示的。CSS注释以“/*”开头，以“*/”结尾。 1.5 样式表的层叠性 层叠性就是继承性，CSS的继承规则是外部的元素样式会保留下来给这个元素所包含的其他元素继承。事实上，所有在元