数据基础编程应用8

css简介与基本语法1234css简介css语法选择器css数值和单位01css简介01

1、CSS概述CSS指层叠样式表(CascadingStyleSheets)样式定义如何显示HTML元素样式通常存储在样式表中把样式添加到HTML4.0中，是为了解决内容与表现分离的问题外部样式表可以极大提高工作效率外部样式表通常存储在CSS文件中多个样式定义可层叠为一个CSS简介01CSS简介2、语言特点CSS为HTML标记语言提供了一种样式描述，定义了其中元素的显示方式。css具有以下特点：1丰富的样式定义2易于使用和修改3多页面应用4层叠5页面压缩02CSS语法02CSS语法1、基础语法CSS规则由两个主要的部分构成：选择器，以及一条或多条声明。1）选择器通常是您需要改变样式的HTML元素。2）每条声明由一个属性和一个值组成。图02-0102CSS语法2、声明从最基本的层次来看，CSS的声明是由两块内容组合而成的： 2.1属性（Property）：一些人类可理解的标识符，这些标识符指出你想修改哪一些样式。 2.2属性值（Value）：每个指定的属性都需要给定一个值，这个值表示你想把那些样式特征修改成什么样。图02-023、实例在深入那些原理和书面解释之前，让我们先看一个具体的例子：对应的css文件：两者结合效果图02-05图02-03图02-0402CSS语法4、CSS注释注释是用来解释你的代码，并且可以随意编辑它，浏览器会忽略它CSS注释以"/*"开始,以"*/"结束,实例如下:图02-0602CSS语法5、值的不同写法和单位5.1

除了英文单词，我们还可以使用十六进制：5.2为了节约字节，我们可以使用CSS的缩写形式：5.3颜色的另一种表示：注意：当使用RGB百分比时，即使当值为0时也要写百分比符号。但是在其他的情况下就不需要这么做了。比如说，当尺寸为0像素时，0之后不需要使用px单位，因为0就是0，无论单位是什么。图02-07图02-08图02-0902CSS语法6、多重声明6.1

如果要定义不止一个声明，则需要用分号将每个声明分开。6.2一般每行只描述一个属性，这样可以增强样式定义的可读性，如下：图02-10图02-1102CSS语法03选择器03

选择器1、选择器分类 1.1简单选择器（Simpleselectors）：通过元素类型、class或id匹配一个或多个元素。

1.2属性选择器（Attributeselectors）：通过属性/属性值匹配一个或多个元素。

1.3伪类（Pseudo-classes）：匹配处于确定状态的一个或多个元素。

1.4伪元素（Pseudo-elements）:匹配处于相关的确定位置的一个或多个元素。

1.5组合器（Combinators）：这里不仅仅是选择器本身，还有以有效的方式组合两个或更多的选择器用于非常特定的选择的方法。

1.6多重选择器（Multipleselectors）：这些也不是单独的选择器；这个思路是将以逗号分隔开的多个选择器放在一个CSS规则下面，以将一组声明应用于由这些选择器选择的所有元素。

03

选择器1.1简单选择器

简单选择器主要通过元素、class和id匹配元素

①通过标签名选择元素图03-02图03-0103

选择器2、ID选择器

②ID选择器是由一个哈希/磅符号(#)，后面跟着给定元素的ID名称组成的。注：一个元素的id应该是唯一的，另一个元素不应该重复使用。图03-04图03-0303

选择器3、类选择器

③类选择器由一个点“.”以及类后面的类名组成。图03-06图03-0503

选择器1.2属性选择器

如果在选择有某个属性的元素，而不论属性值是什么，可以使用简单属性选择器。图03-08图03-0703

选择器1.3伪类

同一个标签，根据其不同的种状态，有不同的样式。这就叫做“伪类”。伪类用冒号来表示。图03-10图03-0903

选择器1.4组合器

组合使用不同的选择器可以匹配更特定的元素。有的复合选择器能将目标样式应用到更多元素，有的复合选择器则会锁定更少元素。以下子选择器为例：图03-12图03-1104CSS数值和单位04css数值和单位1、css值的类型

1.1数值:长度值，用于指定例如元素宽度、边框（border）宽度或字体大小；以及无单位整数。

1.2

百分比:可以用于指定尺寸或长度。

1.3

颜色:用于指定背景颜色，字体颜色等。

1.4

坐标位置:例如，以屏幕的左上角为坐标原点定位元素的位置。

1.5

函数:例如，用于指定背景图片或背景图片渐变。04css数值和单位2、数值 1.长度和尺寸图04-02

在这个例子中我们就实现了字体的长度和尺寸：运行效果：图04-01图04-0304css数值和单位2、数值 2.绝对长度

绝对长度单位是一个固定的值，它反应一个真实的物理尺寸。绝对长度单位视输出介质而定，不依赖于环境。单位描述cm厘米mm毫米in英寸(1in=96px=2.54cm)px*像素(1px=1/96thof1in)ptpoint，大约1/72英寸；(1pt=1/72in)pcpica，大约6pt，1/6英寸；(1pc=12pt)表04-0104css数值和单位2、数值 3.相对长度

相对长度单位指定了一个长度相对于另一个长度的属性。对于不同的设备相对长度更适用。表04-02单位描述em它是描述相对于应用在当前元素的字体尺寸，所以它也是相对长度单位。一般浏览器字体大小默认为16px，则2em==32px。ex依赖于英文字母小x的高度ch数字0的宽度rem根元素（html）的font-sizevwviewpointwidth，视窗宽度，1vw=视窗宽度的1%vhviewpointheight，视窗高度，1vh=视窗高度的1%vminvw和vh中较小的那个。vmaxvw和vh中较大的那个。04css数值和单位2、数值

4.无单位的值图04-04例：5.无单位的行高例：图04-0504css数值和单位3、百分比大部分使用特定数值指定的内容同样可以使用百分比来指定。图04-06图04-07图04-0804css数值和单位4、颜色4.1十六进制颜色所有浏览器都支持十六进制颜色值。十六进制颜色是这样规定的：#RRGGBB，其中的RR（红色）、GG（绿色）、BB（蓝色）十六进制整数规定了颜色的成分。所有值必须介于0与FF之间。举例说，#0000ff值显示为蓝色。图04-0904css数值和单位4、颜色4.2RGB颜色所有浏览器都支持RGB颜色值。RGB颜色值是这样规定的：rgb(red,green,blue)。每个参数(red、green以及blue)定义颜色的强度，可以是介于0与255之间的整数，或者是百分比值（从0%到100%）。举例说，rgb(0,0,255)值显示为蓝色。图04-1004css数值和单位4、颜色4.3RGBA颜色RGBA颜色值得到以下浏览器的支持：IE9+、Firefox3+、Chrome、Safari以及Opera10+。RGBA颜色值是这样规定的：rgba(red,green,blue,alpha)。alpha参数是介于0.0（完全透明）与1.0（完全不透明）的数字。图04-1104css数值和单位4、颜色4.4HSL颜色HSL颜色值得到以下浏览器的支持：IE9+、Firefox、Chrome、Safari以及Opera10+。HSL指的是hue（色调）、saturation（饱和度）、lightness（亮度）-表示颜色柱面坐标表示法。HSL颜色值是这样规定的：hsl(hue,saturation,lightness)。Hue是色盘上的度数（从0到360）-0(或360)是红色，120是绿色，240是蓝色。Saturation是百分比值；0%意味着灰色，而100%是全彩。Lightness同样是百分比值；0%是黑色，100%是白色。图04-1204css数值和单位4、颜色 4.5HSLA颜色HSLA颜色值得到以下浏览器的支持：IE9+、Firefox3+、Chrome、Safari以及Opera10+。HSLA颜色值是HSL颜色值的扩展，带有一个alpha通道-它规定了对象的不透明度。HSLA颜色值是这样规定的：hsla(hue,saturation,lightness,alpha)，其中的alpha参数定义不透明度。alpha参数是介于0.0（完全透明）与1.0（完全不透明）的数字。图04-1304css数值和单位5、坐标位置5.1css定位机制

CSS有三种基本的定位机制：普通流、浮动和定位,如下所示：

普通流：除非专门指定，否则所有框都在普通流中定位。

浮动：浮动的框可以在左右移动，直到它的外边框边缘碰到包含框或另一个浮动框的边缘

定位：定位又分为相对定位和绝对定位。

04css数值和单位5、坐标位置5.2cssposition属性

通过使用position属性，我们可以选择4种不同类型的定位。静态定位(static)：元素框正常生成。相对定位(relative)：元素框偏移某个距离。绝对定位(absolute)：元素框从文档流完全删除，并相对于其包含块定位。固定定位(fixed)：元素框的表现类似于将position设置为absolute，不过其包含块是视窗本身。提示：相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。04css数值和单位5、坐标位置5.3css定位属性

CSS定位属性允许你对元素进行定位。表04-03属性描述position把元素放置到一个静态的、相对的、绝对的、或固定的位置中。top定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。right定义了定位元素右外边距边界与其包含块右边界之间的偏移。bottom定义了定位元素下外边距边界与其包含块下边界之间的偏移。left定义了定位元素左外边距边界与其包含块左边界之间的偏移。overflow设置当元素的内容溢出其区域时发生的事情。vertical-align设置元素