CSS基础课件.ppt

4.2.2 常用的选择符 8．包含选择符 包含选择符能够简化代码，大范围的样式控制。其格式为： E1 E2 ｛ /*对子层控制规则*/ ｝ 其中E1指父层对象， E2指子层对象，即E1 对象包含E2对象。 4.2 样式表语法 示例代码如下： 4.2.2 常用的选择符 9．分组选择符 分组选择符指的是对多个标签设置同一样的样式，在不同的类型中，表示同一样的样式。格式为： E1,E2,E3 { /*CSS代码*/} 当多个对象定义了相同的样式时，用户可以把它们分为一组，这样能够简化代码读写。 4.2 样式表语法 示例代码如下： 4.2.2 常用的选择符 11．伪类选择符 伪类可以让用户在使用页面的过程中增加更多的互交效果，例如应用最为广泛锚点标签a的几种状态（未访问链接状态、已访问链接状态、鼠标指针悬停在链接上的状态以及被激活的链接状态）。具体代码如下： a:link{color:#FF0000;}/*未访问的链接状态*/ a:visited{color:#00FF00;} /*已访问的链接状态*/ a:hover{color:#FF00FF;} /*鼠标悬停到链接上的状态*/ a:active{color:#0000FF;} /*被激活的链接状态*/ 4.2 样式表语法 【演练4-1】伪类的应用。当鼠标悬停在超链接的时候背景色变为其他颜色，并且添加了边框线，待鼠标离开超链接时又恢复到默认状态，这种效果就可以通过伪类实现。本例文件在浏览器中的显示效果如图所示。 4.2 样式表语法 4.3.1 长度、百分比单位 1．长度单位 长度单位有相对长度单位和绝对长度单位两种类型。 相对长度单位是指，以该属性前一个属性的单位值为基础来完成目前的设置。 绝对长度单位将不会随着显示设备的不同而改变。换句话说，属性值使用绝对长度单位时，不论在哪种设备上，显示效果都是一样的，如屏幕上的1cm与打印机上的1cm是一样长的。 由于相对长度单位确定的是一个相对于另一个长度属性的长度，因而它能更好地适应不同的媒体，所以它是首选的。 4.3 CSS的属性单位 4.3.1 长度、百分比单位 2．百分比单位 百分比单位也是一种常用的相对类型。百分比值总是相对于另一个值来说的，该值可以是长度单位或其他单位。每一个可以使用百分比值单位指定的属性，同时也自定义了这个百分比值的参照值。在大多数情况下，这个参照值是该元素本身的字体尺寸。并非所有属性都支持百分比单位。 一个百分比值由可选的正号“+”或负号“-”，接着一个数字，后跟百分号“%”组成。如果百分比值是正的，正号可以不写。正负号、数字与百分号之间不能有空格。 4.3 CSS的属性单位 4.3.2 色彩单位 在HTML网页或者CSS样式的色彩定义里，设置色彩的方式是RGB方式。在RGB方式中，所有色彩均由红色（Red）、绿色（Green）、蓝色（B1ue）三种色彩混合而成。 在HTML标记中只提供了两种设置色彩的方法：十六进制数和色彩英文名称。CSS则提供了3种定义色彩的方法：十六进制数、色彩英文名称、rgb函数和rgba函数。 4.3 CSS的属性单位 4.4.1 内部样式表 内部样式表的格式为： style type=text/css !-- 选择符1{属性:属性值; 属性:属性值 …} /* 注释内容 */ 选择符2{属性:属性值; 属性:属性值 …} … 选择符n{属性:属性值; 属性:属性值 …} -- /style 4.4 CSS与HTML文档的结合方法 使用内部样式表制作网络鞋城新品上架页面 4.4.2 行内样式表 行内样式表也称内嵌样式表，是指在HTML标签中插入style属性，再定义要显示的样式表，而style属性的内容就是CSS的属性和值。用这种方法，可以很简单地对某个标签单独定义样式表。这种样式表只对所定义的标签起作用，并不对整个页面起作用。有时候这种方式却非常有效。其格式为： 标签 style=属性:属性值; 属性:属性值 … 4.4 CSS与HTML文档的结合方法 使用行内样式表制作网络鞋城新品上架页面 4.4.3 链入外部样式表 链入外部样式表就是当浏览器读取到HTML文档的样式表链接标签时，将向所链接的外部样式表文件索取样式。先将样式表保存为一个样式表文件（.css），然后在网页中用link标签链接这个样式表文件。link标签必须放到页面的head…/head标签对内。其格式为： head … link rel=stylesheet href=外部样式表文件名.css type=tex