下载此文档

《web技术原理及应用》课件第3章css基础.ppt

文档分类：IT计算机 | 页数：约41页举报非法文档有奖

1/41

下载提示

1.该资料是网友上传的，本站提供全文预览，预览什么样，下载就什么样。
2.下载该文档所得收入归上传者、原创者。
3.下载的文档，不会出现我们的网址水印。

同意并开始全文预览

(约 1-6 秒)

1/41 下载此文档

文档列表 文档介绍

第三章CSS基础内容01CSS简介02CSS样式表引用方法03CSS选择器04常用CSS样式属性05CSS定位06利用CSS实现常见功能第一节CSS简介一、概述CSS是CascadingStyleSheets的缩写,译为层叠样式表或则级联样式表,使用样式表可以修饰美化网页内容。CSS样式CSS样式表的优点丰富的修饰样式各种修饰属性,实现所想即所得内容与修饰分离,利于团队开发标签组织内容,CSS修饰元素内容实现样式复用,提高开发效率CSS样式可以同时作用于多个元素实现页面的精确控制使用选择器对页面元素进行控制与修饰二、CSS属性单位CSS长度单位像素(px)是相对于显示器屏幕分辨率而言的;点(pt)是印刷业中一个标准的长度单位em指字体高,任意浏览器的默认字体高都是16px。em指字体高,任意浏览器的默认字体高都是16px。CSS颜色表示颜色名,比如“red”、“yellow”、pink”等。#RRGGBB,比如“#FF0000”。#RGB,比如“#00F”。rgb(rrr,ggg,bbb),比如“rgb(0,255,0)”。rgb(rrr%,ggg%,bbb%),比如“rgb(30%,40%,30%)”。三、CSS基本语法<styletype="text/css">选择器{属性1:属性值1;属性2:属性值2;……}</style>选择器属性值属性名<head><styletype="text/css">li{color:red;font-size:30px;font-family:微软雅黑;}</style></head>四、CSS盒子模型发在HTML中的所有元素均可看作盒子盒子由内容(content)、内边距(padding)、边框(border)和外边距(margin)组成边框(border)元素的边框是围绕元素内容和内边距的一条或多条线。border属性可以设置元素边框的样式、宽度和颜色。<styletype="text/css">/*设置层的样式*/#top{border-style:dashed;/*设置层边框样式为虚线*/border-color:#CCC;/*设置层的边框的颜色为灰色*/border-width:3px;/*设置层的边框的宽度为3px*/}/*设置搜索输入框的样式*/.SearchBox{width:300px;height:23px;/*同时设置上、右、下、左边框的宽度、样式、颜色*/border:1pxsolidblack;}</style>……<divid="top">宝贝搜索:<inputtype="text"name="search"class="SearchBox"/> <inputtype="button"value="搜索"/></div><div>边框为虚线,灰色,宽度为3px文本输入框宽度为300px,高度为23px,边框为黑色的实线填充(padding)元素的填充也称为内空、内边距,指元素内容与边框的距离。填充分为上、下、左、右四个方向。<styletype="text/css">/*设置层的样式*/#top{border-style:dashed;border-color:#CCC;border-width:3px;padding-top:50px;/*设置层的上边距为50px*/padding-left:200px;/*设置层的左边距为200px*/}/*设置搜索输入框的样式*/.SearchBox{width:300px;height:23px; /*同时设置上、右、下、左边框的宽度、样式、颜色*/border:1pxsolidblack; }</style><div>边框为虚线,灰色,宽度为3px文本输入框宽度为300px,高度为23px,边框为黑色的实线上边距为50px左边距为200px

《web技术原理及应用》课件第3章css基础来自淘豆网www.taodocs.com转载请标明出处.

《web技术原理及应用》课件第3章css基础.ppt

Web技术应用基础第六章课件

Web技术应用基础第五章课件

Web技术应用基础第四章课件

Web技术应用基础第五章课件

《Web技术原理与应用》课件第2章 HTML基础

《web技术原理及应用》课件第3章css基础

《Web技术原理与应用》课件第3章CSS基础

《web技术原理与应用》课件第3章 css基础

Web技术应用基础css

Web技术应用基础css