《HTML5与ASP.NET程序设计教程 第2版 教学课件 ppt 作者 马骏 第03章 CSS样式控制》由会员分享，可在线阅读，更多相关《HTML5与ASP.NET程序设计教程 第2版 教学课件 ppt 作者 马骏 第03章 CSS样式控制（72页珍藏版）》请在金锄头文库上搜索。
1、第3章 CSS样式控制,2019年5月24日星期五,2,Ch3 CSS样式控制,3.1 基本概念 3.2 CSS选择器 3.3 CSS的盒模型 3.4 定位与布局控制 3.5 边框控制 3.6 字体和文本控制 3.7 背景控制,2019年5月24日星期五,3,3.1 基本概念,CSS的定义与作用 CSS是Cascading Style Sheets的缩写，称为级联样式表，也叫层叠式样式表。 CSS的作用是控制HTML元素在浏览器中呈现的样式，比如字体大小、颜色、背景色以及背景图像等。 CSS的级联控制 内联式（Inline Styles） 嵌入式（Embedding a Style Block
2、） 外部链接式（Linking to a Style Sheet）,3.1.1 CSS的级联控制内联式,内联式是指直接在HTML元素内通过style属性设置元素的样式 每个style内可以包含一个或多个样式属性，其一般形式为： style=“属性名1: 值1; 属性名2: 值2; “ 属性名与属性值之间用冒号“:”分隔，如果一个样式中有多个属性，各属性之间用分号“;”隔开。 例如：定义了带样式的层 内联式适用于单独控制某个元素样式的情况。 优点是设置样式直观、方便 ； 缺点是无法一次性设置所有相同元素的样式 。 一般情况下，如果某个元素的样式与其他元素的样式不同，或者具有相同样式的元素比较少，
3、可以采用内联式。,3.1.1 CSS的级联控制嵌入式,嵌入式是指在与之间定义的样式。 例如： h1 font-size:30pt; color:Red; h2 font-size:20pt; color:Blue; 嵌入式适用于控制一个网页内具有相同样式的多个元素。 优点：当修改某些元素的样式时，只需要修改head部分style的属性。 缺点：这种方式仅仅适用于修改当前网页内具有相同样式的元素，如果多个网页内的很多元素均采用相同的样式，仍然需要分别在各个网页内重复定义。,3.1.1 CSS的级联控制外部链接式,外部链接式是指在扩展名为.css的文件中单独保存样式的定义。 将样式分类后放在单独的
4、CSS文件中，然后在网页中添加所引用的CSS文件 。 当需要修改元素的样式时，只需要修改.css文件中的样式即可。 一旦修改了.css文件中的某个样式，则凡是引用了该.css文件的网页，都会自动应用新的样式。 CSS文件中每个样式定义的一般格式为 ：选择符 属性1:值1; 属性2:值2; 引用方式：直接拖放CSS文件到要引用样式表的文件。,3.1.1 CSS的级联控制级联控制,如果某个元素既使用了外部链接式，又使用了嵌入式，同时也定义了内联式，而这些样式的定义又发生了冲突，元素最终呈现的效果会是什么呢？ 实际上浏览器会按照文档解析的顺序，依次应用样式。,3.1.2 CSS的单位表示形式,1.长
5、度单位 CSS的长度单位分为绝对长度单位和相对长度单位两种。 绝对长度单位有px（像素）、cm（厘米）、mm（毫米）、in（英寸）、pt（点，1pt=1/72英寸）、pc（1pc=12点）。 一般来说，使用“px”以及“%”作为长度单位的网页比较多。 相对长度单位常用有两种，一种是（百分比）； 例如50%，另一种是em，例如0.1em。 em指相对于父元素的字体大小比例， 一般用来表示一行文字的高度。 控制字间距和行间距时，多数情况下都是使用“em”作为长度单位。,3.1.2 CSS的单位表示形式,2.颜色单位 CSS 3.0中，有HEX、RGB、RGBA、HSL、HSLA以及transpar
6、ent等颜色表示形式。 HEX：使用两位十六进制数表示RGB颜色，每个颜色通道的取值范围均为00-FF ； 例如“#3B04C5” RGB ：使用十进制数表示颜色，格式为rgb(R, G, B)，其中R、G、B三个值都是0255的整数或者范围为0%-100%的百分数。 .foregroundcolor:rgb(255,0,0); RGBA ：格式为rgba(R，G，B，A)。它和rgb(R,G,B)的区别是多了一个alpha通道（即透明度）； background-color:rgba(255,0,0,0.5);,3.1.2 CSS的单位表示形式,2. 颜色单位 HSL ：使用CSS 3.0支
7、持的色调（Hue）、饱和度（Saturation）和亮度（Lightness）来表示颜色，格式为HSL(H,S,L) 。 background-color:hsl(0,100%,50%); HSLA ：前三个值的含义与HSL相同，最后一个A表示透明度（Alpha），取值为0-1之间 。 background-color:hsla(0,100%,50%,0.5); transparent ：transparent是全透明黑色（black）的速记法，即一个类似rgba(0,0,0,0)这样的值。 在CSS 3.0中，transparent被延伸到任何一个有color值的属性上。例如： .testc
8、olor:transparent;border:1px solid transparent;background:transparent;,3.1.2 CSS的单位表示形式,3、角度、时间和频率单位 CSS 3.0新增了表示各种角度变换的单位，这些单位有deg（度）、rad（弧度）、turn（旋转圈数）、grad（梯度，一圈为400grad） 。 “30deg”表示顺时针旋转30度，“-30deg”表示逆时针旋转30度 时间单位主要用于控制动画显示，表示时间的单位有ms（毫秒）、s（秒） 。 频率主要用于表示语音阅读文本的音调。频率越小音调越低，频率越大音调越高。表示频率的单位有Hz（赫兹）、
9、kHz（千赫）等。,3.1.3 设计和引用CSS,1. 利用辅助窗口使用CSS 利用可视化辅助窗口设置CSS样式的最简单的办法是先利用拖放方式，将网页开发界面变为如图3-1所示的形式。 【应用样式】、【管理样式】以及【CSS属性】窗口如图3-2所示。,图3-1 主菜单【视图】下的子菜单项,图3-2 CSS辅助设计窗口,3.1.3 设计和引用CSS,1. 利用辅助窗口使用CSS 利用【属性】窗口的“style”设置标记的CSS样式 联合使用【管理样式】、【应用样式】和【CSS属性】窗口设置CSS样式； 2. 直接编辑CSS代码设置CSS 【例3-1】演示CSS样式的基本用法。 运行效果：,3.2
10、 CSS选择器,CSS选择器是指网页中元素的样式定义规则，也称为CSS样式规则。 一般格式为：选择器属性1:值1; 属性2:值2; 格式中的“选择器”用来指定样式定义的符号。 例如：h1 color:red; font-size:14px; CSS 3.0提供的选择器分为基本选择器、关系选择器、特性选择器、伪元素选择器以及伪类选择器等。,3.2.1 基本选择器,基本选择器是CSS中最常用的选择器，包括通配符选择器、元素选择器、类选择器、id选择器以及群组选择器等。如表3-1所示。,3.2.1 基本选择器,1.通配符选择器（*） 通配符选择器是指选择HTML文档内的所有元素。 例如：*color
11、:Red; 这行代码的含义是设置HTML文档中的所有元素颜色为红色。 2.元素选择器（E） 元素选择器是指以HTML文档的元素名作为选择器，此处的E表示任何一个HTML元素，如html、body、p、div等。 例如：p font-size: 14px; 这行代码表示所有p元素的字体大小全部为14像素。,3.2.1 基本选择器,3.类选择器（.classname、E.classname） 类选择器指自定义的CSS类。 一般形式为：.自定义类名属性1:值1; 属性2:值2; 注意，自定义类名的左边有一个点“.”。 在HTML文档中，使用class=“classname”设置“.classname
12、”定义的样式 。引用时自定义类名的左边不包含点“.”。 类选择器还可以结合元素选择器来使用， 一般形式为：E.类名属性1:值1; 属性2:值2; 其中，E表示元素名（Element），myclass指自定义类名。,3.2.1 基本选择器,4. id选择器（#idname） id选择器的定义和用法与类选择器的定义和用法从形式上来看非常相似，但是这两者之间在概念上有明显的区别，在同一个HTML网页中，多个元素可以使用同一个自定义类，但不能有相同的id特性名。 例如在CCS中定义：#customId1 color:red 在HTML文档中，用id=“myid”设置id选择器定义的样式（不包含“#”前
13、缀）。 利用CSS定义样式时，如果在一个元素的样式定义中，既有HTML元素，又有自定义类和自定义ID，则自定义ID的优先级最高，其次是自定义类，HTML元素的优先级最低。,3.2.1 基本选择器,5.群组选择器（s1,s2,.,sN） 如果有多个选择器定义的样式相同，则可以使用群组选择器来简化定义，这样就可以一次性地设置所选元素的样式。 例如：div1, div2, div3 color:red 【例3-2】演示基本选择器的用法。 该例子的完整源程序见S02文件夹下的BasicSelector.css和BasicSelector.htm 。 运行效果：,3.2.2 关系选择器,关系选择器也叫层
14、次选择器。如表3-2所示。,3.2.2 关系选择器,1.后代选择器（E F） 后代选择器也称为包含选择器，用于选择某元素的一个或多个后代元素，包括具有多层次包含关系的元素。 一般格式为：选择符1 选择符2 选择符n 属性1:值1; 属性2:值2; 属性n:值n; 注意，各选择符之间用空格分隔。 例如：p b color:red 在这行代码中，如果b为p的后代元素，则选中它 。 后代选择器定义的样式规则并不是仅仅适用于选择HTML元素，也可以将其应用到自定义类、自定义id以及任何样式选择器中。,3.2.2 关系选择器,【例3-3】演示后代选择器的用法。将ul的后代ul中的li全部显示为红色背景
15、。,3.2.2 关系选择器,2.子选择器（EF） 子元素选择器只能选择某元素的子元素，其中E为父元素，而F为子元素，EF表示选择E元素下的所有子元素F，但不包括孙元素等更深层次的元素。 【例3-4】演示子选择器的用法。当选择绿色背景、文字为“04”的元素时，将其子元素全部用红色背景显示出来 。,3.2.2 关系选择器,3.相邻兄弟选择器（E+F） 相邻兄弟选择器选择E元素和F元素相邻，而且F和E具有相同的父元素的所有元素。 【例3-5】演示相邻兄弟选择器的用法,3.2.2 关系选择器,4.兄弟选择器（EF） 兄弟选择器是CSS 3.0新增加的一种选择器，用于选择某元素后面的所有兄弟元素。换句话
16、说，选择的条件是F元素和E元素属于同一父元素，并且F元素在E元素之后。 【例3-6】演示兄弟选择器的用法,3.2.3 特性选择器,特性选择器（Attribute Selectors）用于在标记内匹配某些特性名，从而得到对应的元素。 特性选择器的格式是元素后跟中括号，中括号内为所选的特性名。 表3-3列出了CSS 3.0支持的特性选择器。,3.2.3 特性选择器,1. Eatt 选择所有具有att特性的E元素，而不考虑特性的值。 下面代码的含义是选择所有声明了class特性的a元素，并将选中元素的颜色设置为红色： aclasscolor:#f00; 下面的代码将所有带有alt特性的img元素的颜色设置为红色： imgalt color:#f00; 下面是稍微复杂一点的例子，用于选择同时带href和title特性的a元素： ahreftitle font-weight: bold;,3.2.3 特性选择器,2. Eatt=“va
