第6章--创建网页样式—CSS.ppt

1、第6章创建网页样式CSS，将CSS(Cascading Style Sheets )对外汉语翻译为栈内存样式表单，简称为样式表，用于控制网页样式，使样式信息能够从web内容中分离的标记样式是一种格式，在网页上设定文字的大小、颜色、图像的位置等显示内容的样式。 所谓级联反应，是指在HTML文档中定义多个样式的样式文件(CSS文件)，在多个样式文件之间定义的样式被网络冲突时，按层次顺序进行处理。CSS概述、本章内容、如何使用6.1CSS6.2定义CSS样式属性6.3css样式6.4 CSS过滤器编辑集成应用程序：在网页上设置网络链接样式、6.1 CSS语法基础、 6.1.1基本使用方法6.1.2使

2、用class创建多个样式的6.1.3使用ID、6.1.1基本使用方法、css由标记和属性构成，基本语法由HTML标签属性1:属性值属性2:属性值属性：属性值HTML文档定义样式表时其格式可以是：6.1.2CLASS创建多个样式，class创建同一HTML标签的多个样式。 其语法是标签.类名属性1:属性值属性2:属性值属性：属性值引用方法可以在类选择符中将相同的标签分类定义为不同的样式。 格式使用：6.1.3和#id名称属性1:属性值的属性2:属性值属性：属性值id选择器用于为单个元素定义单独的样式。 定义id选择器时，在id名称前面加“#”符号。 与类选择器一样，有两种方法可以定义id选择器。

3、 id选择器中定义的样式格式为：6.2CSS样式的属性、6.2.1定义文本样式6.2.2定义背景样式6.2.3定义标签样式6.2.4定义框样式6.2.5定义边框样式6.2.6定义列表样式6.6 6.2定义css样式的属性6.2.8定义扩展样式6.2.9内置css样式6.2 .创建1.0网络链接外部样式表、6.2定义css样式的配置腻子粉、6.2.1定义文本样式、1 .字体语法： font-family :字体如果字体名称包含空格，则必须用引号引起来。 说明：使用font-family property控制显示字体。 字体名称因执行操作系统而异。 在Windows系统上，字体名称与Word的“字

4、体”列表中列出的字体名称相似。 示例：本体字体系列：三星、新基本颜色、serif h 2颜色：红色； margin: 10px； font-family:华文新魏，实体_GB2312，2 .尺寸(font-size )语法： font-size :绝对尺寸|相对尺寸|百分比残奥仪表：绝对尺寸根据目标字体调整。 可选的xx-small|x-small|medium|large|x-large|xx-large相对尺寸相对于父对象的字体大小进行调整。 百分比值基于父对象中字体的大小。 示例：中包含的所有文本的大小是的大小(20pt )的1.5倍，因此为3.0点。 pf字体大小：20 PTB字体大小

5、：1.5 em H3字体大小：20 px，3 .字体样式语法：字体样式：标准残奥表： I oblique适用于没有斜体变量的特殊字体。 normal是常规字体，声明该值将取消在先设置。 说明：将文本字体设置为斜体。 示例： h3 font-style: italic，4 .字重语法： font-weight : bold|normal残奥量表： bold为粗体，number相当于700，b标签的数字取值100|200|300|400|500|600|700|800|900。 normal是常规字体，number等于400，声明该值将取消在先设置。 说明：设定文字字体的粗细。 角色由客户端系统上

6、安装的字体的特定字体变量映射决定，系统选择最近的匹配。也就是说，用户可能看不到不同值的差异。 例如： pf字体小部件：金字体1字体小部件：800， 5 .文本变换语法：文本变换： uppercase|lowercase|capital ize|none残奥仪表： upper case以大写字母显示所有字符，lower case capitalize以大写字母显示每个单词的第一个字符，none忽略所有继承的文本变形残奥参数，文本以原始形式显示。 说明：设定文字的大小写。 例如： h 1文本变换3360上行文本变换3360功能大小， 6 .文字修饰语法：文字修饰： underline| overl

7、ine| line-through|none残奥仪表： underline为下划线，blink为闪烁说明：设置对象中文本的装饰。 对象a、u和ins的字符修饰的差异奥尔特值是underline。 对象strike、s和del的缺省关奥尔特字值是线性穿越。 如果要应用的对象不是文本，则此属性不起作用。 示例： div文本修饰：超线程； h 1文本修饰： underline； 7 .字体(font )语法：字体：字体样式|字体大小|字体残奥仪表：声明方法与每个残奥仪表相对应。 说明：设置对象的文本的属性。 此属性是复合属性。 声明类型残奥仪表必须按语法中的顺序指定。 每个残奥仪表中只行政许可一个值

8、。 如果忽略，则使用与该残奥仪表对应的独立属性的差动奥尔特值。 /将文字设定为尺寸12points、行高16points以及字体设定为宋体。 使用字体属性时，必须设置字体大小和字体，但是是否设置行高是可选的。 设定的顺序必须严格按照语法顺序。 8 .单词间距语法： word-spacing : length | normal残奥仪表： length是由数值和单位标识符组成的长度值，行政许可负值。 normal返回到差动奥尔特的间隔。 说明：设置对象中单词之间插入的空格数。 示例： h3word-spacing :1 emdivword-spacing :10 px，长度是数值和单位标识符nor

9、mal返回到差动奥尔特的间隔。 说明：设置对象中文本的间距。 此属性在每个文本后面添加指定的间距，但排除最后一个单词。 示例： div letter-spacing :6 pxdivletter-spacing :0.5 pt h3letter-spacing :10 px，1.0定.行高语法：行高百分比值以字体的高度尺寸为基础。 normal是差动奥尔特的行的高度。 /用数字设定行距。 如果将行高设置为数值，则浏览器将使用大小来确定行距，并将设置的关残奥仪表值乘以大小。 因此，在本例中，行的高度为24points。 b字体大小： 12pt； line-height: 2可以按长度单位(em和

10、pt最常用的单位)设定行距，减小或扩大行距。 b字体大小： 12pt； line-height: 11pt，11.text-align语法：文本- align :左残奥仪表：左对齐，右对齐，中心对齐，justify 说明：设置对象中文本的对齐方式。 范例：您可以使用字元对齐属性来控制段落的水平对齐方式。 此属性仅用于整个子摇滾乐的内容，例如、和。 H4 text-align : centerdivtext-align : center，12.text-indent语法： text-indent : length残奥仪表： length由百分比或浮点数、单位标识符构成说明：设置对象中文本段落的缩

11、进。 此属性仅适用于整个封摇滾乐。示例： p text-indent: 2em /*此段落第一行的起始位置比正常位置缩进2个字符*/div text-indent :-5 px div text-indent : underline 1.0 %； 6.2.2定义背景样式，1 .颜色(color )语法：颜色：颜色残奥定仪：颜色指定颜色。 请参见颜色单位。 说明：设定对象的文本颜色，即对象的前景色。 有些浏览器不接受颜色名称指定的颜色。 示例： div color : # 345456 div color : RGB (100，1.4 ) 200 ) div color : menudiv co

12、lor : red bcolor : # 333399/*所有强调字符均以设置颜色显示*/bccolor 0). 2.背景颜色语法：背景颜色：颜色|透明关残奥字参数：使用颜色指定颜色。 请参阅颜色单位。 transparent使背景颜色透明。 说明：设定对象的背景色，即固定在对象后面的颜色。 例如： PS背景色彩： silverdivbackground -色彩： RGB (223， 7.1 177 )机身背景色： # 98ab 6机身背景色：透明p.yellow机身背景色： # ffff 6.6， 3 .背景图片语法：后台图像： url (URL )|none残奥仪表： URL使用绝对地址或

13、相对地址来指定背景图片地址。 没有none背景图。 说明：设定对象的背景图像。 如果要将图像添加到整个浏览器窗口，可以将图像添加到标签。 示例：代码背景图像： URL (comet.jpg )块四元背景图像3360 URL (c :互联网图像. jpg ) br背景影像3360 URL (http:/字体背景影像3360 nonebbackground-image : URL (背景. gif ).4.控制背景影像的property 背景重复(background-repeat )语法： background-repeat :重复| no-repeat|repeat-x|repeat-y关残奥

14、字计量器： repeat是背景图像在纵向和横向排列repeat-x的背景图像横向排列，repeat-y的背景图像纵向排列。 说明：设定对象的背景图片的配置和配置方法。 您必须首先指定对象的背景图片。 示例： PS background 3360 URL (图像/aardvark.gif )背景重复：否重复背景重复3360 URL (图像/aardvark.gif ) (2)固定背景(background-attachment )语法： background-attachment 3360 scroll|fixed残奥仪表： scroll根据对象的内容滚动背景图片，fixed省略文字说明：设定背景图像是按照对象的内容滚动还是固定。 此属性仅用于页面背景，即设置在标签中的背景图像。 例如：主体背景附件：固定； 后台图像3360 URL (后台. gif ) html后台图像3360 URL (ana sazi.TIF )后台附件： f