第二章CSS技术

不倒翁学习笔记第二章CSS技术由于HTML语言将美化和代码写在一起不利于后期的维护，因此使用CSS技术进行美化您的页面。一、CSS的简CSS即CascadeStyleSheet级联【层叠】样式表。主要负责是页面的美化，因此该技术不能脱离页面进行独立使用。CSS的注释/**/1、CSS引入的页面样式的几种方式方式一行内样式方式HTML中给所有的标记元素提供了一个style属性专门用于美化该元素举例h1style=color:blue;我的第一个页面/h1缺点不能复用，方式二内部样式方式HTML中提供了一个style标签【一般放在head标签中】来集中的编写该页面的样式举例styleh2{color:red;}/style缺点：页面之间不能复用优点：将一页页面的样式集中起来便于操作。方式三外部连接方式HTML中提供了一个link元素可以引入外部的样式文件独立的建立一个后缀为.css的样式文件demo1.css举例linkrel=stylesheethref=css/demo1.csstype=text/css/缺点：效率很低、优点：复用性很强rel属性指定的是引入的文件和该文本本身的关系type属性指定引入的文件的类型是什么百度、Google页面样式是怎么写的?【行内样式】方式四导入引入方式CSS2.1中提供了一个独立的元素@import来引入指定的样式文件，但是该元素必须写在style标签中举例style吧简化@importurl('css/demo1.css')/stylestyle@import'css/demo1.css'/style【面试题】：在引入外部样式的时候link和@import有什么区别?共同点【都可以引入外部的独立的样式文件、实际使用的时候都需要HTML标签环境】不同点1.link属于HTML@import属于CSS22.@import引入的css文件的个数有限制30~403.执行顺序不同link在页面加载执行到的时候就直接加载css样式文件【饿汉式】@import页面元素加载完毕后才加载样式【懒汉式】4.JavaScript操作样式的时候不同linkDOM操作修改样式@import进来的不支持修改【换肤】推荐使用link元素进行外部的引入.2、CSS由于多种引入方式带来的问题以及处理方案?问题1优先级问题?行内样式内部样式外部样式【前提是内部样式在外部引入样式的下面】提高自己样式的优先级。使用!important原则：就近原则。问题3一个页面中可以使用多个style和link标记引入多个样式3、CSS的样式的基本语法3.1.什么是选择器?选择器的目的是为了更好的找到页面需要修饰的元素。3.2.常见选择器元素选择器举例h1我的一级标题/h1h1{color:red;}ID选择器举例divid=one我的div块元素One/div#one{background-color:gray;}类选择器举例pclass=clazz1clazz2我的段落2/p.clazz1{color:blue;}交集选择器举例p我的段落中包含了一个超链接:ahref=#我的超链接2/a/ppa{color:red;}并集选择器举例font我的字体我做主/fontbr/b我的粗体我做主/bbr/font,b{border:1pxsolidred;}通用选择器举例*{background-color:gray;}伪类选择器a:link{color:red;}a:visited{color:gray;}a:hover{color:blue;}默认必须按照这样的顺序出现注意：避免出现id滥用的情况?注意：所有的常见的选择器都可以进行相互恰套。3.3.常见的CSS属性/*复合的背景属性*/background:url('imgs/img1.ico')centerno-repeat;/*文本缩进*/text-indent:20px;不倒翁学习笔记/*字体大小和风格*/font-size:1.5em;font-weight:bolder;/*内容溢出处理属性auto超过显示滚动条hidden超过直接隐藏scroll使得横向和纵向都滚动*/overflow:scroll;/*列表的图标属性*/list-style-type:square;/*取消超链接下面的下划线*/text-decoration:none;3.4.CSS的三大核心技术(盒子模型)3.4.1.盒子模型HTML页面中充斥这大量的HTML标记元素，浏览器厂商在解析每一个HTML页面元素的时候都会按照盒子模型的结构进行解析。p我的文本/p----------------------|margin||----------------|-------border||padding||||-----------|||||||||||content|||||||||||-----------|||||||----------------|||----------------------pandding和margin如果写两个值如padding:1px5px;表示上下值均为1px左右值均为5px。如果写四个值则按顺时针方向赋值。6.浮动技术行内元素【不能自动换行】和块级元素【可以自动的换行div】,布局技术DIV+CSS。6.1是否有CSS属性可以在行内元素和块元素之间转换?YESdisplay=block块级|inline行内，但是div元素的高度和宽度是无效的，因此使用div布局的时候不能转换div为行内元素，需要采用浮动技术进行布局。display:none;释放自己的位置visibility:hidden;div块隐藏但不会释放自己的位置,divstyle=visibility:hidden;class=clazz1One/div6.2浮动的核心所有的浮动的元素会脱离文档流，然后在页面的上层形成一个立体的层结构。总结：#如果一个页面中具有浮动和和非浮动元素，那么在浮动元素之前的非浮动元素会先占据文档的位置。且默认情况下浮动层的该位置也被占用。#浮动的元素在遇到障碍的时候停止浮动#如果都是浮动元素,空间够大，那么浮动元素会在一起，如果需要在另一行显示那么必须在浮动的同时使用clear属性left|right|both。扩展在div的样式中设置position:fixed;可以起到网页中的广告效果。固定在网页的左右两侧案例：使用div+CSS浮动技术实现框架页效果【参考如下demo8】style.top,.foot{width:970px;height:110px;}不倒翁学习笔记.left,.right{height:430px;}.left{width:170px;}.right{width:797px;}div{border:1pxsolidred;float:left;}/style/headbody!--1.定义四个div块--divclass=topstyle=border-bottom:none;Top/divdivclass=leftul系统菜单liahref=#onclick=openView(this);学生信息管理/a/liliahref=#onclick=openView(this);教师信息管理/a/li/ul/divdivclass=right!--必须编写一个iframe框架--iframeid=myiframewidth=790pxheight=420pxsrc=demo1.html/iframe/divdivclass=footCopyright/div/body!--体验一段javascript脚本--scriptfunctionopenView(ele){//alert(ele.innerHTML);if(ele.innerHTML=='学生信息管理'){//需要获取页面中的iframe元素variframe=window.document.getElementById(myiframe);//alert(iframe.src);//修改框架对象显示的页面iframe.src=demo2.html;}elseif(ele.innerHTML=='教师信息管理'){alert(ele.innerHTML);}}/script/html扩展Ul(unorderlist)无需裂变,li(list)是列表的一个项，比如“本书作者（排名不分先后）：张三，李四，王五”就可以这样写ol是有序列表ul本书作者（排名不分先后）li张三/lili李四/lili王五/li/ul7.定位技术定位技术主要的任务就是将页面中的元素放置到指定的位置。常见的定位有三种：#绝对定位position:absolute;指定定位元素的坐标【topleftrightbottom】是以整个页面的(0,0)左上角的位置开始计算。不倒翁学习笔记#相对定位position:relative;指定定位元素的坐标【topleftrightbottom】是相对的该元素在页面中原有的位置#固定定位position:fixed;在写框架的时候由于top的下边框以及center的上边框重叠导致重叠部分线很粗，用下面属性解决Eg：divclass=topstyle=border-bottom:none;Top/divborder-bottom-width规定下边框的宽度。参阅：border-bottom-width中可能的值。border-bottom-style规定下边框的样式。参阅：border-bottom-style中可能的值。border-bottom-color规定下边框的颜色。参阅：border-bottom-color中可能的值。广告位案例headmetahttp-equiv=Content-Typecontent=text/html;charset=utf-8/title出售广告位/titlestylediv{width:150px;height:350px;border:1pxsolid#FFFF00;margin-top:10%;}.left{float:left;position:fixed;top:10%;left:10px;}.right{float:right;position:fixed;top:10%;right:10px;}/style/headbodyh1卖广告啦....../h1divclass=left广告位(左)divstyle=background-color:yellow;text-align:right;width:150px;height:20px;position:absolute;left:0px;bottom:0px;spanonclick=closeWindow(this);【X】/span/div/divdivclass=right广告位(右)divstyle=background-color:yellow;text-align:right;width:150px;height:20px;position:absolute;right:0px;bottom:0px;spanonclick=closeWindow(this);【X】/span/div/div/bodyscriptfunctioncloseWindow(ele){//alert('哈哈');//获取当前广告位对象divvargf=ele.parentNode.parentNode;/