第二章CSS技术.doc

不倒翁学习笔记第二章CSS技术由于HTML语言将美化和代码写在一起不利于后期的维护，因此使用CSS技术进行美化您的页面。 一、CSS的简 CSS即Cascade Style Sheet 级联【层叠】样式表。主要负责是页面的美化，因此该技术不能脱离页面进行独立使用。CSS的注释/*/ 1、CSS引入的页面样式的几种方式 方式一行内样式 方式 HTML中给所有的标记元素提供了一个style属性专门用于美化该元素 举例 我的第一个页面 缺点不能复用， 方式二内部样式 方式 HTML中提供了一个标签【一般放在标签中】来集中的编写该页面的样式 举例 h2color:red; 缺点：页面之间不能复用 优点：将一页页面的样式集中起来便于操作。 方式三外部连接方式 HTML中提供了一个元素可以引入外部的样式文件 独立的建立一个后缀为.css的样式文件 demo1.css 举例 缺点：效率很低、 优点：复用性很强 rel属性指定的是引入的文件和该文本本身的关系type属性指定引入的文件的类型是什么 百度、Google页面样式是怎么写的?【行内样式】 方式四导入引入方式 CSS2.1中提供了一个独立的元素import来引入指定的样式文件，但是该元素必须写在标签中 举例 吧 简化import url(css/demo1.css) import css/demo1.css 【面试题】： 在引入外部样式的时候link和import有什么区别? 共同点 【都可以引入外部的独立的样式文件、实际使用的时候都需要HTML标签环境】 不同点 1. link属于HTML import属于CSS2 2. import引入的css文件的个数有限制3040 3. 执行顺序不同 link在页面加载执行到的时候就直接加载css样式文件【饿汉式】import页面元素加载完毕后才加载样式【懒汉式】4. JavaScript操作样式的时候不同 link DOM操作修改样式 import进来的不支持修改 【换肤】 推荐使用link元素进行外部的引入. 2、CSS由于多种引入方式带来的问题以及处理方案? 问题1 优先级问题? 行内样式 内部样式 外部样式【前提是内部样式在外部引入样式的下面】 提高自己样式的优先级。使用!important 原则：就近原则。 问题3 一个页面中可以使用多个和标记引入多个样式 3、CSS的样式的基本语法 3.1. 什么是选择器? 选择器的目的是为了更好的找到页面需要修饰的元素。 3.2. 常见选择器 元素选择器 举例 我的一级标题 h1color:red; ID选择器 举例 我的div块元素One #onebackground-color: gray; 类选择器 举例 我的段落2 .clazz1color: blue; 交集选择器 举例 我的段落中包含了一个超链接:我的超链接2 p acolor: red; 并集选择器 举例 我的字体我做主我的粗体我做主 font,bborder: 1px solid red; 通用选择器 举例 *background-color: gray; 伪类选择器 a:linkcolor:red; a:visitedcolor:gray; a:hovercolor:blue; 默认必须按照这样的顺序出现注意：避免出现id滥用的情况?注意：所有的常见的选择器都可以进行相互恰套。 3.3. 常见的CSS属性 /* 复合的背景属性 */background: url(imgs/img1.ico) center no-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页面元素的时候都会按照盒子模型的结构进行解析。我的文本-| margin | - | - border| | padding | | | - | | | | | | | | | content | | | | | | | | | - | | | | | - | | |- pandding和margin如果写两个值如padding:1px 5px;表示上下值均为1px左右值均为5px。如果写四个值则按顺时针方向赋值。6. 浮动技术行内元素【不能自动换行】和块级元素【可以自动的换行div】,布局技术DIV+CSS。6.1 是否有CSS属性可以在行内元素和块元素之间转换? YES display = block 块级 | inline 行内，但是div元素的高度和宽度是无效的，因此使用div布局的 时候不能转换div为行内元素，需要采用浮动技术进行布局。 display:none; 释放自己的位置 visibility: hidden; div块隐藏但 不会释放自己的位置, One 6.2 浮动的核心所有的浮动的元素会脱离文档流，然后在页面的上层形成一个立体的层结构。总结： # 如果一个页面中具有浮动和和非浮动元素，那么在浮动元素之前的非浮动元素会先占据文档的位置。且默认情况下 浮动层的该位置也被占用。 # 浮动的元素在遇到障碍的时候停止浮动 # 如果都是浮动元素,空间够大，那么浮动元素会在一起，如果需要在另一行显示那么必须在浮动的同时使用 clear属性 left | right | both。 扩展 在div的样式中设置position: fixed;可以起到网页中的广告效果。固定在网页的 左右两侧 案例：使用div+CSS浮动技术实现框架页效果【参考如下demo8】 .top,.foot width: 970px; height: 110px; .left,.right height: 430px; .left width: 170px; .right width: 797px; div border:1px solid red; float:left; Top 系统菜单 学生信息管理 教师信息管理 Copyright function openView(ele) / alert(ele.innerHTML); if(ele.innerHTML = 学生信息管理) / 需要获取页面中的iframe元素 var iframe = window.document.getElementById(myiframe); / alert(iframe.src); / 修改框架对象显示的页面 iframe.src = demo2.html; else if(ele.innerHTML = 教师信息管理) alert(ele.innerHTML); 扩展Ul(unorder list)无需裂变,li(list)是列表的一个项，比如“本书作者（排名不分先后）：张三，李四，王五”就可以这样写ol是有序列表本书作者（排名不分先后）张三李四王五 7. 定位技术 定位技术主要的任务就是将页面中的元素放置到指定的位置。 常见的定位有三种： # 绝对定位 position: absolute; 指定定位元素的坐标 【top left right bottom】 是以整个页面的(0,0)左上角的位置开始计算。 # 相对定位 position: relative; 指定定位元素的坐标 【top left right bottom】 是相对的该元素在页面中原有的位置 # 固定定位 position: fixed; 在写框架的时候由于top的下边框以及center的上边框重叠导致重叠部分线很粗，用下面属性解决 Eg：Top border-bottom-width规定下边框的宽度。参阅：border-bottom-width 中可能的值。border-bottom-style规定下边框的样式。参阅：border-bottom-style 中可能的值。border-bottom-color规定下边框的颜色。参阅：border-bottom-color 中可能的值。广告位案例 出售广告位 div width: 150px; height: 350px; border: 1px solid #FFFF00; margin-top: 10%; .left float: left; position: fixed; top:10%; left: 10px; .right float: right; position: fixed; top:10%; right: 10px; 卖广告啦.