CSS技术基本概述学习教案

会计学1CSS技术基本概述技术基本概述第一页，编辑于星期六：三点 九分。第1页/共86页第二页，编辑于星期六：三点 九分。n第2页/共86页第三页，编辑于星期六：三点 九分。第3页/共86页第四页，编辑于星期六：三点 九分。第4页/共86页第五页，编辑于星期六：三点 九分。第5页/共86页第六页，编辑于星期六：三点 九分。第6页/共86页第七页，编辑于星期六：三点 九分。示例第7页/共86页第八页，编辑于星期六：三点 九分。第8页/共86页第九页，编辑于星期六：三点 九分。第9页/共86页第十页，编辑于星期六：三点 九分。 pcolor : red; 在这里，页面中的 元素是应用样式的场所，CSS中，元素名称两边不加属性名color代表字体颜色属性值red一条样式样式属性名和值之间用冒号（：）分隔，每条样式最后加一个分号（；）应用于 元素的所有样式放置在一对大括号之间样式包括：样式属性名样式属性值第10页/共86页第十一页，编辑于星期六：三点 九分。 pcolor : red; 这条CSS语句的作用：选择页面上的所有元素，将内容的字体颜色设置为red称之为p选择符也叫做“选择符选择符”第11页/共86页第十二页，编辑于星期六：三点 九分。 pcolor : red;font-size:32px; 这条CSS语句的作用：将页面上元素的内容的字体颜色设置为red，大小设置为32像素;第12页/共86页第十三页，编辑于星期六：三点 九分。第13页/共86页第十四页，编辑于星期六：三点 九分。 css pcolor:red; 第一段文字 在HTML页面中直接引入CSS，需要在元素里增加一对样式开始和结束标记（）标记属性type值为text/csscss语句置于标记之间第14页/共86页第十五页，编辑于星期六：三点 九分。 css pcolor:red; 第一段文字 内容的样式采用独立的CSS原始内容样式 应用p选择符选择页面中的元素第15页/共86页第十六页，编辑于星期六：三点 九分。 pcolor : red;font-size : 32px; p color : red; font-size : 32px; 包含多条样式时，习惯第一种写法第16页/共86页第十七页，编辑于星期六：三点 九分。 pcolor : red; p选择符一条样式样式属性名样式属性值第17页/共86页第十八页，编辑于星期六：三点 九分。不采用CSS示例采用CSS示例第18页/共86页第十九页，编辑于星期六：三点 九分。第19页/共86页第二十页，编辑于星期六：三点 九分。第20页/共86页第二十一页，编辑于星期六：三点 九分。示例向雷锋同志学习！仅通过HTML如何实现该效果第21页/共86页第二十二页，编辑于星期六：三点 九分。font-family:微软雅黑,楷体,宋体;第22页/共86页第二十三页，编辑于星期六：三点 九分。 font-size: 40px; 第23页/共86页第二十四页，编辑于星期六：三点 九分。 color:red; color:#ff0000; 第24页/共86页第二十五页，编辑于星期六：三点 九分。 font-weight: bold; font-style:italic; text-decoration:underline; 示例第25页/共86页第二十六页，编辑于星期六：三点 九分。属性含义属性值font-family字体各种字体font-style字体样式italic、oblique、normalfont-variant小体大写small-capsfont-weight字体粗细normal、bold、bolder、lighterfont-size字体大小absolute、relative、%color字体颜色颜色值第26页/共86页第二十七页，编辑于星期六：三点 九分。示例 background-color: silver;第27页/共86页第二十八页，编辑于星期六：三点 九分。 background-image: url( “” ) ; 示例可以用相对地址或绝对地址示例第28页/共86页第二十九页，编辑于星期六：三点 九分。属性含义属性值background-color背景色颜色值background-image背景图案图片路径(相对，绝对)background-repeat背景图案重复方式repeat-x | repeat-y | no-repeat| repeat第29页/共86页第三十页，编辑于星期六：三点 九分。示例 text-align: center;第30页/共86页第三十一页，编辑于星期六：三点 九分。荐使用，推荐采用CSS来实现n相比HTML格式化标记，CSS提供的样式功能更加丰富第31页/共86页第三十二页，编辑于星期六：三点 九分。示例 p font-family:微软雅黑,楷体,宋体; color:red; font-size:32px; font-weight:bold; font-style:italic; text-decoration:underline; 第一段文字第二段文字第32页/共86页第三十三页，编辑于星期六：三点 九分。第33页/共86页第三十四页，编辑于星期六：三点 九分。示例第34页/共86页第三十五页，编辑于星期六：三点 九分。 border: 5px solid green;多个值之间以空格空格分隔，多个值的顺序随意示例第35页/共86页第三十六页，编辑于星期六：三点 九分。border-top-style: dashed;border-top-width:5px;border-top-color:green; border-top: 10px dashed navy;示例第36页/共86页第三十七页，编辑于星期六：三点 九分。 div border:5px solid blue;border-top:10px dashed navy; 对于边框上侧：border-top样式覆盖了border样式第37页/共86页第三十八页，编辑于星期六：三点 九分。属性含义属性值border-width边框宽度（四边） 通常采用像素单位border-color边框颜色（四边） 颜色值border-style边框样式（四边） dotted | dash | solid | double | groove | ridge | inset | outsetborder边框所有属性border-top-width上边框宽度border-top-color上边框颜色border-top-style上边框样式border-top 上边框所有属性第38页/共86页第三十九页，编辑于星期六：三点 九分。示例width:200px;height:200px;第39页/共86页第四十页，编辑于星期六：三点 九分。补白补白元素内容区边框补白补白补白补白补白补白第40页/共86页第四十一页，编辑于星期六：三点 九分。属性含义属性值padding-left内容与左边框的补白通常采用像素单位padding-top内容与上边框的补白padding-right内容与右边框的补白padding-bottom内容与下边框的补白padding同时设置四侧的补白示例第41页/共86页第四十二页，编辑于星期六：三点 九分。元素内容区补白补白补白补白补白补白补白补白元素内容区元素B边框元素A边框边边 界界第42页/共86页第四十三页，编辑于星期六：三点 九分。示例属性含义属性值margin-top上边界常用单位像素margin-right右margin-bottom下margin-left左margin同时设置第43页/共86页第四十四页，编辑于星期六：三点 九分。第44页/共86页第四十五页，编辑于星期六：三点 九分。第45页/共86页第四十六页，编辑于星期六：三点 九分。absolute示例1absolute示例2第46页/共86页第四十七页，编辑于星期六：三点 九分。示例第47页/共86页第四十八页，编辑于星期六：三点 九分。示例 body font-family:微软雅黑,楷体,宋体; 你好，欢迎光临饮料铺!卡布奇诺，15元来自意大利的咖啡，口味香浓绿茶，10元来自中国的茶饮，清凉爽口里嵌套的元素继承了body的字体样式第48页/共86页第四十九页，编辑于星期六：三点 九分。 body font-family:微软雅黑,楷体,宋体; p font-family: 华文行楷,微软雅黑; 你好，欢迎光临饮料铺!卡布奇诺，15元来自意大利的咖啡，口味香浓绿茶，10元来自中国的茶饮，清凉爽口p的字体样式覆盖从body继承的字体样式示例第49页/共86页第五十页，编辑于星期六：三点 九分。 body font-family:微软雅黑,楷体,宋体; p font-family: 华文行楷,微软雅黑; 第50页/共86页第五十一页，编辑于星期六：三点 九分。n根据理解，动手验证，不用死记硬背示例第51页/共86页第五十二页，编辑于星期六：三点 九分。第52页/共86页第五十三页，编辑于星期六：三点 九分。理解理解第53页/共86页第五十四页，编辑于星期六：三点 九分。示例第54页/共86页第五十五页，编辑于星期六：三点 九分。第55页/共86页第五十六页，编辑于星期六：三点 九分。 .类名 样式1；样式2； 选择class属性为“类名”的任何元素第56页/共86页第五十七页，编辑于星期六：三点 九分。 .style1 样式 .style2 样式 段落内容1段落内容2示例class = “style1”class = “style2”选择class为“style1”的元素选择class为“style2”的元素第57页/共86页第五十八页，编辑于星期六：三点 九分。 .style 样式; 段落内容选择class为“style”的任何元素示例 层内容类选择符选择类选择符选择class属性等于该类名的属性等于该类名的任何元素任何元素第58页/共86页第五十九页，编辑于星期六：三点 九分。 段落内容 段落内容第59页/共86页第六十页，编辑于星期六：三点 九分。 第60页/共86页第六十一页，编辑于星期六：三点 九分。第61页/共86页第六十二页，编辑于星期六：三点 九分。 #style 样式; 段落内容HTML标志可以有id属性，值为任意合法名称示例选择id为“style”的任意一个元素第62页/共86页第六十三页，编辑于星期六：三点 九分。示例第63页/共86页第六十四页，编辑于星期六：三点 九分。第64页/共86页第六十五页，编辑于星期六：三点 九分。 table 样式 td .td #TitlePanel 第65页/共86页第六十六页，编辑于星期六：三点 九分。 p,h1,h2color:red; font-weight:bold; 元素的文本内容都为红色，粗体示例第66页/共86页第六十七页，编辑于星期六：三点 九分。 div pcolor:red; font-weight:bold; 只选择嵌套在div元素里的p元素两者之间以空格空格进行分隔第67页/共86页第六十八页，编辑于星期六：三点 九分。htmlheadbodytitledivpp div p color:red; font-weight:bold; 选择不不选择示例第68页/共86页第六十九页，编辑于星期六：三点 九分。htmlbodypp .style p color:red; font-weight:bold; 选择选择class为”style”的元素内嵌套的p元素不不选择第69页/共86页第七十页，编辑于星期六：三点 九分。htmlbodypp #style p color:red; font-weight:bold; 选择id为”style“的元素内嵌套的p元素第70页/共86页第七十一页，编辑于星期六：三点 九分。 .grid .grid table #grid table 新浪首页源文件中的CSS .grid,table 要求要求 .grid table td 第71页/共86页第七十二页，编辑于星期六：三点 九分。示例第72页/共86页第七十三页，编辑于星期六：三点 九分。第73页/共86页第七十四页，编辑于星期六：三点 九分。第74页/共86页第七十五页，编辑于星期六：三点 九分。 css pcolor:red; 第一段文字 只在该页面内有效第75页/共86页第七十六页，编辑于星期六：三点 九分。bodybackground-color:#d2b48c;border:10px solid gray;padding:20px;font-family:微软雅黑;蓝色部分写在单独的样式文件（后缀名为css)文件里不需要标记一个样式文件可被多个文档引入样式文件示例第76页/共86页第七十七页，编辑于星期六：三点 九分。 css . 之间的标记链接外部样式文件相对或绝对地址链接示例1链接示例2第77页/共86页第七十八页，编辑于星期六：三点 九分。import url(样式文件名.css)；相对或绝对地址示例第78页/共86页第七十九页，编辑于星期六：三点 九分。 css 段落文字 HTML标记的style属性style属性值 ：（若干条）css样式内联样式只针对该元素有效第79页/共86页第八十页，编辑于星期六：三点 九分。第80页/共86页第八十一页，编辑于星期六：三点 九分。第81页/共86页第八十二页，编辑于星期六：三点 九分。 body font-family:微软雅黑,楷体,宋体; p font-family: 华文行楷,微软雅黑; 你好，欢迎光临饮料铺!卡布奇诺，15元来自意大利的咖啡，口味香浓绿茶，10元来自中国的茶饮，清凉爽口p元素被body和p选择符同时选中对于同一条样式font-family,应用最具体的第82页/共86页第八十三页，编辑于星期六：三点 九分。htmlbodypp pcolor:green; font-size:24px; .style p color:red; font-size:40px; 被p选择符选中字体绿颜色,24像素被p和.style p同时选中应用最具体规则：字体红色,大小40px示例第83页/共86页第八十四页，编辑于星期六：三点 九分。htmlbodypp pcolor:green; font-size:24px; font-style:italic; .style p color:red; font-size:30px; font-weight:bold; 示例被p和.style p同时选中应用最具体规则：字体红色，大小40px斜体和粗体显示第84页/共86页第八十五页，编辑于星期六：三点 九分。第85页/共86页第八十六页，编辑于星期六：三点 九分。