web实验使用css美化设计页面,第3章 Web应用网页美化——CSS3.pptx

人民邮电出版社;CSS基础CSS语法;3.1.1 了解CSS3.1.2 创建CSS;1．CSS简介：“层叠”是指对同一元素或页面应用多个样式，CSS中的样式形成一个层次结构，规则的优先级由该层次结构决定。2．CSS的优势(1)语法简单、编写容易(2)增加网页设计弹性，网页易于维护(3)网页加载速度提高(4)统一网站风格;3．CSS3的新功能;1．CSS基本格式：由选择器和样式规则组成，规则由属性和设置值组成，语法格式是： 选择器{属性:设置值;} (1)选择器(selector)：指定对文档中的哪个对象进行定义。 (2)全局选择器(*)：用“*”符号来选择所有标记，语法格式是： *{属性:设置值;} (3)标记选择器(标记名称)：用HTML标记名称作为选择器，语法格式是： 标记名{属性:设置值;}; (4)类选择器(.类名)：用自定义类名作为选择器，语法格式是： .类名{属性:设置值;} (5)id选择器(#id)：根据DOM文档对象模型原理设计的选择器。使用自定义的id作为选择器，语法格式是： #id{属性:设置值;} (6)属性选择器([属性])：用于根据元素的属性及属性值来选择元素，语法格式是： [属性]{属性:设置值;}; (7)伪类和伪对象选择器：是一种特殊的类和对象，由CSS自动支持，属于CSS的一种扩展类型和对象。语法格式是： 选择器:伪类或选择器:伪对象;3.1.2 创建CSS;3.1.2 创建CSS;2．应用CSS(1)行内声明(Inline)：直接把CSS写在HTML标记中，可以简单直观地对某个元素单独定义样式。(2)内嵌声明(Embedding)：把CSS写在HTML文件头部

…标记中，并用标记进行声明。;(3)链接外部样式文件(Linking)：先将CSS存储为独立的外部文件(*.css)，再在HTML文件的…标记中用以链接的方式声明，语法格式如下： 也可用@import命令导入外部样式文件。是HTML标记，@import是CSS语法。导入外部样式文件的语法格式如下： ;3.2.1 CSS语法——类型3.2.2 CSS语法——背景3.2.3 CSS语法——区块3.2.4 CSS语法——方框3.2.5 CSS语法——边框3.2.6 CSS语法——列表3.2.7 CSS语法——定位3.2.8 CSS语法——扩展3.2.9 CSS语法——过渡; 类型主要用来控制文字样式。;1．设置字体——font-family：设置字体。语法格式是： font-family: 字体名称1, 字体名称2, 字体名称3,…;2．设置字号——font-size：设置字号大小，可以是绝对大小或相对大小。语法格式是： font-size:属性值; 或font-size:字号+单位;3．设置字体粗细——font-weight：设置字体粗细。语法格式是： font-weight:属性值;;4．设置字体样式——font-style：设置字体的风格，普通(normal)、斜体(italic)和偏斜体(oblique)。语法格式是： font-style:normal | italic | oblique;5．设置字体样式——font-variant：设置以小型大写字母显示文本，正常(normal)和小型大写(small-caps)。语法格式是： font-variant:normal |small-caps;6．设置行高——line-height：设置行高，单位可以是px、pt、%或自动调整(normal)，不允许使用负值。语法格式是： line-height:数值(+单位);;7．设置英文大小写转换——text-transform：设置英文的大小写，capitalize(首字母大写，其他字母不变)、uppercase(全部大写)、lowercase(全部小写)3种。语法格式是： text-transform:转换方式的属性值;8．设置文字修饰——text-decoration：文字的装饰样式，设置值有none(无)、underline(下画线)、line-through(删除线)、overline(上画线)、bl