《网页设计制作》课件——项目3.pptxVIP

《网页设计制作》项目3

3.1引入CSS3.2CSS选择器3.3CSS字体样式属性3.4CSS文本外观属性3.5CSS背景属性3.6CSS边框属性目录

【任务目标】1.了解CSS基本概念2.掌握CSS的作用3.掌握CSS规则4.掌握CSS引入方法3.1引入CSS

3.1引入CSS什么是CSS什么是CSS？

什么是CSSCSS英文全称为“CascadingStyleSheet”，中文译为“层叠样式表”。CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。3.1引入CSS

CSS3是CSS技术的升级版本，于1999年开始制订，2001年5月23日W3C完成了CSS3的工作草案。CSS3的语法是建立在CSS原始版本基础上的，因此旧版本的CSS属性在CSS3版本中依然适用。什么是CSS33.1引入CSS

3.1引入CSSCSS样式规则CSS样式的书写规则是什么？CSS样式修饰的网页大家随处可见网上购物热门游戏热点新闻

3.1引入CSSCSS样式规则选择器{属性1:属性值1;属性2:属性值2;属性3:属性值3;}在上面的样式规则中，选择器用于指定CSS样式作用的HTML对象，花括号内是对该对象设置的具体样式。其中，属性和属性值以“键值对”的形式出现，用英文“:”连接，多个“键值对”之间用英文“;”进行区分。

3.1引入CSS引入CSS样式表引入CSS样式表的方式有哪些？

3.1引入CSS行内式也称为内联样式，是通过标签的style属性来设置元素的样式，其基本语法格式如下:行内式行内式内嵌式链入式标签名style=属性1:属性值1;属性2:属性值2;属性3:属性值3;内容/标签名

3.1引入CSS内嵌式是将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义，其基本语法格式如下:内嵌式行内式内嵌式链入式headstyletype=text/css选择器{属性1:属性值1;属性2:属性值2;属性3:属性值3;}/style/head

3.1引入CSS链入式是将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中，通过link/标签将外部样式表文件链接到HTML文档中，其基本语法格式如下:链入式行内式内嵌式链入式headlinkhref=CSS文件的路径type=text/cssrel=stylesheet//head

3.1引入CSS3.2CSS选择器3.3CSS字体样式属性3.4CSS文本外观属性3.5CSS背景属性3.6CSS边框属性目录

【任务目标】1.了解CSS选择器的含义2.掌握CSS选择器的类别3.掌握CSS选择器的用法3.2CSS选择器

3.2CSS选择器标签选择器是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。其基本语法格式如下：标签名{属性1:属性值1;属性2:属性值2;属性3:属性值3;}标签选择器标签选择器通配符选择器类选择器id选择器

3.2CSS选择器类选择器使用“.”（英文点号）进行标识，后面紧跟类名，其基本语法格式如下：类选择器标签选择器类选择器通配符选择器id选择器.类名{属性1:属性值1;属性2:属性值2;属性3:属性值3;}

3.2CSS选择器通配符选择器id选择器使用“#”进行标识，后面紧跟id名，其基本语法格式如下：#id名{属性1:属性值1;属性2:属性值2;属性3:属性值3;}id选择器标签选择器类选择器id选择器

3.2CSS选择器通配符选择器通配符选择器用“*”号表示，它是所有选择器中作用范围最广的，能匹配页面中所有的元素。其基本语法格式如下：通配符选择器标签选择器类选择器id选择器*{属性1:属性值1;属性2:属性值2;属性3:属性值3;}

3.1引入CSS3.2CSS选择器3.3CSS字体样式属性3.4CSS文本外观属性3.5CSS背景属性3.6CSS边框属性目录

学习HTML时，可以使用文本样式标签及其属性控制文本的显示样式，但是这种方式繁琐且不利于代码的共享和移植。为此，CSS提供了相应的文本设置属性。为什么使用CSS文本样式属性？3.3CSS字体样式属性

字体样式属性3.3CSS字体样式属性1font-size属性用于设置字号。2font-family属性用于设置字体。3font-weight属性用于定义字体的粗细。4font-style属性用于定义字体风格。5font综合属性用于综合设置字体样式。6@font-face属性是CSS3的新增属性，用于定义服务器字体。7