第3讲 css规则.ppt

指在内部样式表的style里导入一个外部样式表，导入时用@import head …… style type=”text/css” !-- @import “mystyle.css” -- /style …… /head link与import区别： import：在浏览器下载HTML文件时就将样式表文件的全部内容复制到@import位置处，替换该关键字 link：不进行替换，当HTML文件需要引用CSS样式文件中的某个样式时，浏览器才链接到样式表文件，读取需要的内容 内嵌样式是混合在HTML标记里使用的，可以很简单的对某个元素单独定义样式。 内嵌样式的使用是直接将在HTML标记里加入style参数。 而style参数的内容就是CSS的属性和值，如下例： p style=color: sienna; margin-left: 20px 这是一个段落 /p 1.字体属性 2.颜色和背景属性 3.文本属性 4.“容器”属性 5.鼠标属性 6.滤镜属性 属性 属性含义 属性值 Font-family 使用什么字体 所有字体 Font-style 字体是否斜体 normal、italic、oblique font-weight 定义字体的粗细 Normal、bold、bolder、lighter Font-size 定义字体大小 例10：10.htm 例11：11.htm 例12：12.htm p style=“letter-spacing:1em;text-align:justify；text-indent:4em;line-height:17pt”……/p letter-spacing设置了字间距为1em，其中1em为一个长度单位；text-align设置了对齐方式为两端对齐；indent设置了缩进格为4em；line-height设置了行高为17pt em：相对单位，相对于实际字体的磅值来定义长度：如果现在的字体大小为12pt，那么1.5em=18pt。 CSS的容器属性包括边距、填充距、边框和宽度、高度、浮动等属性。 例13：13.htm （1）边距属性 Margin 设置四周边距 填充距指的是边框与填充内容之间的距离。 例13：13.htm Padding 设置四周填充距 例14.htm 如： .style1 { cursor:hand } Alpha：透明的层次效果 Blur：快速移动的模糊效果 Fliph：水平翻转效果 Flipv：垂直翻转效果 Gray：灰度效果 Wave：波纹效果 基本语法： Filter:alpha(opacity=#,style=#) Opacity：透明度，0~100，0完全透明，100不透明 Style：透明区域的形状，0统一形状，1线状，2放射状，3长方形 如： img { filter:alpha(opacity=50,style=2) } 例15：15.htm 基本语法： Filter:blur(direction=#,strength=#) Direction：模糊方向，0向上，90向右，180向下，270向左 strength：模糊强度，默认5 例16：16.htm 基本语法：filter:fliph 水平翻转 例17：17.htm 基本语法：filter:flipv 垂直翻转 例18：18.htm 基本语法：filter:gray 例19：19.htm 基本语法： filter:wave(add=#,freq=#,lightstrength=#, phase=#,strength=#) Add：是否要把对象按照波纹样式打乱 Freq：波纹的频率 lightstrength：对波纹增强光影的效果，范围0~100 Phase：设置正弦波的偏移量 Strength：振幅大小 例如： img { filter:wave(add=add,freq=5,lightstrength=50,phase=90,strength=10) } 例20：20.htm 用CSS精确的控制页面里每一个元素的字体样式、背景、排列方式、区域尺寸、四周加入边框等。 使用CSS能够简化网页的格式代码，加快下载显示的速度，外部链接样式可以同时定义多个页面，大大减少了重复劳动的工作量。 1.CSS的定义是由三个部分构成： 选择符（selector） 属性（properties） 属性的取值（va