CSS技术基本概述ppt课件

《CSS技术基本概述ppt课件》由会员分享，可在线阅读，更多相关《CSS技术基本概述ppt课件（86页珍藏版）》请在金锄头文库上搜索。

1、CSSCSS1;.HTMLHTML总结总结& &回顾回顾HTML标记的组合就是HTML语言，浏览器根据HTML标记的含义进行解析和显示HTML标记及标记属性的规范写法：所有开始标记都有结束标记标记名和属性名小写属性值加双引号或单引号掌握常用HTML标记：文字、标题、段落 、层 、列表 和、超链接、 图像、换行等2HTMLHTML回顾回顾重点理解：表格与、()的使用利用表格进行布局重点理解：表单标记及表单控件标记（、等）的用法理解表单提交数据的过程数据如何打包（表单元素名称=表单元素值）数据发送至何处（action属性）数据发送的形式（method属性：GETPOST）3本篇内容本篇内容CSS概

2、述CSS细节4说明说明本篇教学目的在于css入门，能够运用css的几种基本用法，能够看懂和理解比较复杂一些的css用法5一、一、CSSCSS概述概述CSS定义CSS的产生第一个CSS示例CSS的好处61.1 CSS1.1 CSS定义定义CSS（Cascade Style Sheet）级联（层叠）样式表是由W3C组织制定的一种用来定义样式规则（如字体、颜色和位置）的语言能让网页制作者有效地定制、改善网页的显示效果71.2 CSS1.2 CSS的产生的产生HTML中，文本的格式化（样式设置）可以使用一些特定的标记，比如粗体标记，标记等样式标记散落于HTML语言中，使得内容和格式化的代码混杂一起，难

3、以区分。解决方法是改用独立的技术CSS 示例81.3 1.3 第一个第一个CSSCSS示例示例示例91.3.1 1.3.1 第一个第一个CSSCSS说明说明CSSCSS语句语句CSS语句的构成：样式样式应用样式的场所场所10CSS语句的构成：样式样式应用样式的场所场所 pcolor : red; 在这里，页面中的 元素是应用样式的场所，CSS中，元素名称两边不加属性名color代表字体颜色属性值red一条样式样式属性名和值之间用冒号（：）分隔，每条样式最后加一个分号（；）应用于 元素的所有样式放置在一对大括号之间样式包括：样式属性名样式属性值11CSS语句的构成：样式样式（属性名、属性值）应用

4、样式的场所场所 pcolor : red; 这条CSS语句的作用：选择页面上的所有元素，将内容的字体颜色设置为red称之为p选择符也叫做“选择符选择符”12CSS语句里添加更多样式：可以添加若干条样式（属性名、属性值） pcolor : red;font-size:32px; 这条CSS语句的作用：将页面上元素的内容的字体颜色设置为red，大小设置为32像素;131.3.2 1.3.2 第一个第一个CSSCSS说明说明CSSCSS的引入的引入CSS的引入有多种方式，第一个示例采用在页面文件中直接引入CSS样式，方法如下：14 css pcolor:red; 第一段文字 在HTML页面中直接引入

5、CSS，需要在元素里增加一对样式开始和结束标记（）标记属性type值为text/csscss语句置于标记之间15 css pcolor:red; 第一段文字 内容的样式采用独立的CSS原始内容样式 应用p选择符选择页面中的元素161.3.3 1.3.3 第一个第一个CSSCSS说明说明写法写法以下写法都可以：CSS不区分大小写，推荐全部小写 pcolor : red;font-size : 32px; p color : red; font-size : 32px; 包含多条样式时，习惯第一种写法171.3.4 1.3.4 第一个第一个CSSCSS说明说明术语总结术语总结CSS语句的构成：（若

6、干条）样式样式样式的属性名样式的属性值应用样式的场所场所选择符选择符 pcolor : red; p选择符一条样式样式属性名样式属性值181.4 CSS1.4 CSS的好处的好处CSS将HTML格式与内容分离，有利于对内容进行统一的格式设置和修改CSS样式相比HTML格式化标记的功能更加丰富和强大不采用CSS示例采用CSS示例19二、二、CSSCSS细节细节CSS样式CSS选择符CSS的引入方式CSS样式的级联202.1 CSS2.1 CSS样式样式HTML中的格式化标记（如等）功能有限，CSS样式的功能更加强大CSS包括各种样式属性，用于控制字体、颜色、对齐方式和边距以及位置等CSS样式种类

7、繁多，无须一一记忆212.1.1 CSS2.1.1 CSS样式样式字体字体字体的样式属性主要包括文字的字体、大小、颜色、显示效果等示例向雷锋同志学习！仅通过HTML如何实现该效果22字体样式的说明字体样式的说明font-family：指定字体可以指定多个字体，字体之间以逗号（,)分隔按顺序依次查找计算机中有无指定的字体，有则显示，无则查找下一个，如果都没有查到，采用默认字体font-family:微软雅黑,楷体,宋体;23字体样式的说明字体样式的说明font-size：字体大小常用单位：px（像素），pt（点）40px：px代表像素单位，单位通常不要省略 font-size: 40px; 24

8、字体样式的说明字体样式的说明color：字体颜色可以用预定义的颜色名称可以用十六进制代码颜色拾取 color:red; color:#ff0000; 25字体样式的说明字体样式的说明font-weight：控制字体的粗细取值：normal, bold, lighter, bolder，默认normalfont-style：控制文字倾斜取值：italic，normal，默认normaltext-decoration：控制下划线等取值：underline（下划线），line-through（中划线），overline（上划线） font-weight: bold; font-style:itali

9、c; text-decoration:underline; 示例26CSSCSS字体样式字体样式属性含义属性值font-family字体各种字体font-style字体样式italic、oblique、normalfont-variant小体大写small-capsfont-weight字体粗细normal、bold、bolder、lighterfont-size字体大小absolute、relative、%color字体颜色颜色值272.1.2 CSS2.1.2 CSS样式样式背景背景背景属性包括背景颜色、背景图像以及背景图像的控制background-color：设置元素的背景色示例 ba

10、ckground-color: silver;28CSSCSS样式样式背景背景background-image：设置元素的背景图像background-repeat：设置背景图像的重复取值：no-repeat（不重复），repeat（在水平和垂直方向上重复），repeat-x和repeat-y（分别在水平和垂直方向上重复），默认repeat background-image: url( “bg.jpg” ) ; 示例可以用相对地址或绝对地址示例29CSSCSS背景样式背景样式属性含义属性值background-color背景色颜色值background-image背景图案图片路径(相对，绝对)

11、background-repeat背景图案重复方式repeat-x | repeat-y | no-repeat| repeat302.1.3 CSS2.1.3 CSS样式样式文本文本文本属性包括对齐方式、文字间距、行距等text-align：设置文本的水平对齐方式取值：left，center，right，默认left示例 text-align: center;31HTMLHTML的格式化用法的格式化用法 VS CSS VS CSSCSS样式属性和HTML属性很多写法不完全一致，比如：text-align（CSS中），align（HTML标记属性）HTML中一些格式化标记，比如（粗体）（斜体）

12、等，在CSS中，通过新的样式属性来展现传统HTML中用于格式化的标记（，等）不再推荐使用，推荐采用CSS来实现相比HTML格式化标记，CSS提供的样式功能更加丰富32对比对比示例 p font-family:微软雅黑,楷体,宋体; color:red; font-size:32px; font-weight:bold; font-style:italic; text-decoration:underline; 第一段文字第二段文字332.1.4 CSS2.1.4 CSS样式样式边框边框在CSS看来，HTML元素都有一个边框CSS边框属性设置元素边框的颜色、宽度、样式等34border-styl

13、e（边框样式）：控制边框的外观取值：none(无边框)，solid(实线)，dashed（虚线)，dotted（点线），double（双线），groove(凹槽)，inset（凹边），ridge（凸槽），outset（凸边）border-color（边框颜色）：取值：颜色名，或十六进制border-width（边框宽度）：通常采用像素单位示例35border属性：通过该属性同时设置边框样式、宽度、颜色 border: 5px solid green;多个值之间以空格空格分隔，多个值的顺序随意示例36定义边框的一侧：可以定义任何一侧(上、下、左、右）的边框的样式、宽度或颜色border-top

14、border-bottom border-left border-right比如：定义边框上侧border-top-style: dashed;border-top-width:5px;border-top-color:green; border-top: 10px dashed navy;示例37 div border:5px solid blue;border-top:10px dashed navy; 对于边框上侧：border-top样式覆盖了border样式38CSSCSS边框样式边框样式属性含义属性值border-width边框宽度（四边）通常采用像素单位border-color边

15、框颜色（四边）颜色值border-style边框样式（四边）dotted | dash | solid | double | groove | ridge | inset | outsetborder边框所有属性border-top-width上边框宽度border-top-color上边框颜色border-top-style上边框样式border-top 上边框所有属性392.1.5 CSS2.1.5 CSS样式样式高度和宽度高度和宽度height和width属性控制元素矩形区域的大小常用单位：px（像素），pt（点）示例width:200px;height:200px;40补白补白2.1.

16、6 CSS2.1.6 CSS样式样式补白补白元素内容与边框之间有一层“补白补白”（也叫“填充”）元素内容区边框补白补白补白补白补白补白41CSSCSS样式样式补白补白padding属性控制元素内容与边框之间的补白属性含义属性值padding-left内容与左边框的补白通常采用像素单位padding-top内容与上边框的补白padding-right内容与右边框的补白padding-bottom内容与下边框的补白padding同时设置四侧的补白示例422.1.7 CSS2.1.7 CSS样式样式边界边界元素与元素之间有一层边界边界元素内容区补白补白补白补白补白补白补白补白元素内容区元素B边框元素

17、A边框边边 界界43CSSCSS样式样式边界边界margin属性控制元素之间的边界示例属性含义属性值margin-top上边界常用单位像素margin-right右margin-bottom下margin-left左margin同时设置44“盒模式盒模式”：CSS中，每个元素被看待成一个“盒子盒子”box，这个盒子有“边框边框”，盒子内容与边框之间有“补白补白”，盒子与盒子之间有“边界边界”452.1.8 CSS2.1.8 CSS样式样式定位定位定位类型由position属性指定position取值：absolute和relative指定定位类型后，可用下列属性来提供具体位置left：左边的位

18、置偏移right: 右边的位置偏移top：顶部的位置偏移bottom：底部的位置偏移46定位说明定位说明positon取值absolute时，表示相对于父元素；position取值relative时，表示相对于自身left取值25px，absolute下，元素左边将偏离父元素25像素；relative下，元素左边距离自身原始位置偏移25像素absolute示例1absolute示例2472.1.9 CSS2.1.9 CSS样式样式displaydisplay样式属性display，描述元素如何显示取值：block，inline，list-item，none理解：元素在网页上的显示占据一块矩形区

19、域（盒模式），display属性控制该矩形区域如何显示block：使元素显示在下一行none：使得元素隐藏不显示示例482.1.10 CSS2.1.10 CSS样式的继承样式的继承示例 body font-family:微软雅黑,楷体,宋体; 你好，欢迎光临饮料铺!卡布奇诺，15元来自意大利的咖啡，口味香浓绿茶，10元来自中国的茶饮，清凉爽口里嵌套的元素继承了body的字体样式49继承的覆盖 body font-family:微软雅黑,楷体,宋体; p font-family: 华文行楷,微软雅黑; 你好，欢迎光临饮料铺!卡布奇诺，15元来自意大利的咖啡，口味香浓绿茶，10元来自中国的茶饮，清

20、凉爽口p的字体样式覆盖从body继承的字体样式示例50在CSS里，被应用的样式规则总是最具体的比如，如果有一个样式，定义了一个更具体的，则浏览器会执行更具体的那条样式 body font-family:微软雅黑,楷体,宋体; p font-family: 华文行楷,微软雅黑; 51CSSCSS样式继承的说明样式继承的说明一个元素的CSS样式属性，（部分地）会被嵌套在其内的元素（子孙元素）所继承继承的样式可以被子孙元素重新定义的相同样式所覆盖哪些属性可以继承？主要是字体相关的样式（如字体、颜色、大小、粗斜体等）其它大部分属性不被继承如边框、位置等根据理解，动手验证，不用死记硬背示例52二、二、C

21、SSCSS细节细节CSS样式CSS选择符CSS的引入方式CSS样式的级联532.2 CSS2.2 CSS选择符选择符CSS语句中的选择符选择符（selector)定义了样式应用的场所（对象），即受样式影响的是哪些HTML元素三种主要类型的选择符：HTML标记标记选择符class（类）选择符ID选择符理解理解54HTML标记选择符标记选择符就是HTML标记（不加），如：p，div，body如果在CSS中将某个HTML标记定义成选择符，则在CSS所应用的网页中，所有的这种HTML标记都按照相应的样式进行显示示例2.2.1 HTML2.2.1 HTML标记选择符标记选择符552.2.2 2.2.2

22、类（类（classclass）选择符）选择符用HTML标记比如段落作为HTML选择符定义的样式规则，将影响所有段落，如果想采用不同样式，可以创建不同的样式类，通过类选择符应用不同样式类56定义：选择符直接以点（.）开头，后跟类名(任意合法名称)，即“.类名”应用：类选择符根据HTML标记的class属性进行选择，选择class属性等于该“类名”的任何HTML标记 .类名 样式1；样式2； 选择class属性为“类名”的任何元素类选择符的定义和应用类选择符的定义和应用57类选择符的应用：使用HTML标记的class属性 .style1 样式 .style2 样式 段落内容1段落内容2示例clas

23、s = “style1”class = “style2”选择class为“style1”的元素选择class为“style2”的元素58 .style 样式; 段落内容选择class为“style”的任何元素示例 层内容类选择符选择类选择符选择class属性等于该类名的任何元素属性等于该类名的任何元素592.2.3 ID2.2.3 ID选择符选择符id：HTML标记（元素）的可选属性，一个HTML元素可以设置id属性值，标识该HTML元素HTML标记（元素）的name属性在一个页面中，id值是唯一的，name属性值可以重复 段落内容 段落内容60IDID和和NAMENAME 61IDID选择符

24、选择符如果一个HTML标记设置了id属性，可以通过“id选择符”设置该HTML标记的样式ID选择符定义和应用定义：以（#）开头后跟ID值，即“#ID值”应用：ID选择符根据HTML标记的id属性进行选择，选择id属性值等于该“ID值”的任意一个元素62 #style 样式; 段落内容HTML标志可以有id属性，值为任意合法名称示例选择id为“style”的任意一个元素63选择符小结选择符小结类选择符和ID选择符:一个页面，类选择符可以重复使用，多个HTML标记的class属性值是可以相同的一个页面中，HTML标记的ID值是唯一的，ID选择符通常用于为某一个特定的HTML元素设置样式示例64选择

25、符小结选择符小结三种选择符:HTML标记选择符(标记名不加)根据HTML标记名进行选择类选择符(用.定义)根据HTML标记的class属性进行选择ID选择符(用#定义)根据HTML标记的id属性进行选择65课堂练习，问以下选择符的含义： table 样式 td .td #TitlePanel 662.2.4 2.2.4 选择符的进一步学习选择符的进一步学习组合选择器可以在一条CSS语句中定义若干个选择器，每个选择器之间用逗号（，）分隔 p,h1,h2color:red; font-weight:bold; 元素的文本内容都为红色，粗体示例67选择符的进一步学习选择符的进一步学习关联选择器只选择

26、特定元素的子孙元素 div pcolor:red; font-weight:bold; 只选择嵌套在div元素里的p元素两者之间以空格空格进行分隔68htmlheadbodytitledivpp div p color:red; font-weight:bold; 选择不不选择示例69htmlbodypp .style p color:red; font-weight:bold; 选择选择class为”style”的元素内嵌套的p元素不不选择70htmlbodypp #style p color:red; font-weight:bold; 选择id为”style“的元素内嵌套的p元素71课堂

27、练习，问以下选择符的含义： ：学习网页源码时，能看懂各种选择符的含义 .grid .grid table #grid table 新浪首页源文件中的CSS .grid,table 要求要求 .grid table td 72选择符的进一步学习选择符的进一步学习伪类选择器：对同一个HTML元素的各种状态的一种定义方式比如：对于超链接（）的正常状态、访问过的状态、光标移动上去的状态常用伪类选择器：a:hover光标移动到超链接上时的状态a:visited超链接访问过后的状态示例73二、二、CSSCSS细节细节CSS样式CSS选择符CSS的引入方式CSS样式的级联742.3 2.3 应用应用CSSC

28、SS样式的不同方式样式的不同方式HTML文档内定义内部样式表链接外部样式表嵌入外部样式表直接定义HTML标记的style属性（内联样式）752.3.1 HTML2.3.1 HTML文档内定义内部样式表文档内定义内部样式表 css pcolor:red; 第一段文字 只在该页面内有效762.3.2 2.3.2 链接外部样式表链接外部样式表在文件里(后缀名为css)定义各种样式规则，页面中创建到该文件的外部链接bodybackground-color:#d2b48c;border:10px solid gray;padding:20px;font-family:微软雅黑;蓝色部分写在单独的样式文件

29、（后缀名为css)文件里不需要标记一个样式文件可被多个文档引入样式文件示例77 css . 之间的标记链接外部样式文件相对或绝对地址链接示例1链接示例2链接外部样式文件表链接外部样式文件表782.3.3 2.3.3 嵌入外部样式表嵌入外部样式表定义好的外部样式表还可以通过import命令嵌入在页面中，该命令通常放置在标记之间旧版浏览器不支持（IE6及以下）import url(样式文件名.css)；相对或绝对地址示例792.3.4 2.3.4 内联样式表内联样式表内联样式直接定义HTML标记的style属性 css 段落文字 HTML标记的style属性style属性值 ：（若干条）css样式

30、内联样式只针对该元素有效80二、二、CSSCSS细节细节CSS样式CSS选择符CSS的引入方式CSS样式的级联812.4 CSS2.4 CSS样式的级联（层叠）样式的级联（层叠）CSS（Cascade Style Sheet）级联（层叠）样式表同一个元素，可能会被多个“选择符”选中，即存在着多个级联（层叠）的样式表影响该元素的样式如果一个元素被多个选择符选择，对于同一条样式，在CSS里，被应用的样式规则总是最具体的82 body font-family:微软雅黑,楷体,宋体; p font-family: 华文行楷,微软雅黑; 你好，欢迎光临饮料铺!卡布奇诺，15元来自意大利的咖啡，口味香浓绿

31、茶，10元来自中国的茶饮，清凉爽口p元素被body和p选择符同时选中对于同一条样式font-family,应用最具体的83htmlbodypp pcolor:green; font-size:24px; .style p color:red; font-size:40px; 被p选择符选中字体绿颜色,24像素被p和.style p同时选中应用最具体规则：字体红色,大小40px示例84htmlbodypp pcolor:green; font-size:24px; font-style:italic; .style p color:red; font-size:30px; font-weight:bold; 示例被p和.style p同时选中应用最具体规则：字体红色，大小40px斜体和粗体显示85CSSCSS综合练习综合练习& &作业作业阅读所提供bookshop网站页面，描述CSS是如何修饰页面效果的，包括各选择符应用在哪些元素，以及应用的样式效果有不明白处，在作业中进行说明86