- 浏览: 167255 次
- 性别:
- 来自: 北京
文章分类
- 全部博客 (186)
- [网站分类]4.其他技术区 (93)
- [网站分类]6.转载区(Java技术文章转载, 请注明原文出处) (4)
- [网站分类]3.非技术区 (7)
- [网站分类]1.网站首页原创Java技术区(对首页文章的要求: 原创、高质量、经过认真思考并精心写作。BlogJava管理团队会对首页的文章进行管理。) (28)
- HTML&CSS (0)
- 感悟生活 (4)
- c#(.net) (1)
- [网站分类]2.Java新手区 (32)
- [网站分类]5.提问区(Java方面的技术提问) (1)
- java (6)
- web前端 (7)
- php (0)
- C++ (1)
- python (0)
- 互联网应用 (0)
最新评论
-
lliiqiang:
请求单线程资源只能等待结果.
Applet 与JS通信 -
feng2qin:
期待你的精彩回到。QQ:864479410
Applet 与JS通信 -
feng2qin:
我想问一句;哥们儿,applet程序中调用js,你真的成功了嘛 ...
Applet 与JS通信 -
lyaixsp:
...
ExtJS 入门学习之 window与panel篇 -
longzijian:
不知道 java-he 现在找到数组的这种特性 的原因在那里
和网友关于javascript数组的讨论
CSS 指层叠样式表 (Cascading Style Sheets) 。
我并没有单独的学习过,也没有买过书,只是在工作中用多了就会了。
首先推荐一个学习网址:http://www.w3school.com.cn/css/css_intro.asp
其次建议下载一份 CSS手册。
下面只总结初学者比较容易忽略的一些问题:
1.样式会根据下面的规则层叠于一个新的虚拟样式表中,其中数字 d 拥有最高的优先权。
a 浏览器缺省设置
b 外部样式表
c 内部样式表(位于 <head> 标签内部)
d 内联样式(在 HTML 元素内部)
2.盒模型
元素框的最内部分是实际的内容,直接包围内容的是内边距。
内边距呈现了元素的背景。
内边距的边缘是边框。
边框以外是外边距,外边距默认是透明的,因此不会遮挡其后的任何元素。
浏览器兼容:
一旦为页面设置了恰当的 DTD,大多数浏览器都会按照上面的图示来呈现内容。
然而 IE 5 和 6 的呈现却是不正确的。
根据 W3C 的规范,元素内容占据的空间是由 width 属性设置的,
而内容周围的 padding 和 border 值是另外计算的。不幸的是,
IE5.X 和 6 在怪异模式中使用自己的非标准模型。
这些浏览器的 width 属性不是内容的宽度,而是内容、填充和边框的宽度的总和。
虽然有方法解决这个问题。
但是目前最好的解决方案是回避这个问题。
也就是,不要给元素添加具有指定宽度的内边距,
而是尝试将内边距或外边距添加到元素的父元素和子元素。
术语翻译
element : 元素。
padding : 内边距,也有资料将其翻译为填充。
border : 边框。
margin : 外边距,也有资料将其翻译为空白或空白边。
把 padding 和 margin 统一地称为内边距和外边距。
3.一个非常关键的属性position
CSS中有不少属性是用来定位的,这也为我们采用DIV+CSS 布局,取代 古老的tabel布局提供了基础支持。
bottom: 定义了定位元素下外边距边界与其包含块下边界之间的偏移。
clip: 设置元素的形状。元素被剪入这个形状之中,然后显示出来。
left: 定义了定位元素左外边距边界与其包含块左边界之间的偏移。
overflow: 设置当元素的内容溢出其区域时发生的事情。
position: 把元素放置到一个静态的、相对的、绝对的、或固定的位置中。
right: 定义了定位元素右外边距边界与其包含块右边界之间的偏移。
top: 定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。
vertical-align: 设置元素的垂直对齐方式。
z-index: 设置元素的堆叠顺序。
而这其中非常关键和初学者容易搞混的概念就是 position 属性。
static 默认。
位置设置为 static 的元素,它始终会处于页面流给予的位置(static 元素会忽略任何 top、bottom、left 或 right 声明)。
relative
位置被设置为 relative 的元素,可将其移至相对于其正常位置的地方,因此 "left:20" 会将元素移至元素正常位置左边 20 个像素的位置。
absolute
位置设置为 absolute 的元素,可定位于相对于包含它的元素的指定坐标。此元素的位置可通过 "left"、"top"、"right" 以及"bottom" 属性来规定。
fixed
位置被设置为 fixed 的元素,可定位于相对于浏览器窗口的指定坐标。此元素的位置可通过 "left"、"top"、"right" 以及"bottom" 属性来规定。
不论窗口滚动与否,元素都会留在那个位置。工作于 IE7(strict 模式)。
这些属性是DIV布局的奠基石。由于浏览器的不同,盒模式中也有差异,比如说对于宽度盒高度,在不同浏览器中定义是不同的,IE6是包含边框 、内边距,而FF的只是指内容的宽度。
细节上的差异,往往是我们在日常工作中能总结出来的。所以也不必太在意。当你的CSS写的不兼容时候,你自然就会想起这些内容。
关于布局部分就没有总结,其实最常见就是clear 和 float属性 ,当然滚动条部分也属于这里。
4.对于javascript 操作 CSS属性
一般在手册或者前面提供的那个网址中,对应的CSS属性有对应的js方法。但是有一点是很多程序员都会犯的错误。
就是操作(特别是获取外联CSS文件中的相应属性)
外联特指
{
b 外部样式表
c 内部样式表(位于 <head> 标签内部)
}
往往有取不到值的情况发生:
外部CSS文件内容:.aa{width:100px;height:100px;background:#ccc;}
a.html:
2 <head>
3 <link rel="stylesheet" type="text/css" href="css.css">
4 </head>
5 <body>
6 <div class="aa" id="aa"></div>
7 <input type="button" value="获取" onclick="ddd()">
8 <script>
9 function ddd()
10 {
11
12 alert(document.getElementById('aa').style.width);
13 }
14 </script>
15 </body>
16 </html>
这样是取不到你想要的结果的。
这里就有两种方法避免问题:
1.CSS直接写在元素里:
<div class="aa" id="aa" style="width:100px;"></div>
2.js获取currentStyle
eg:样式表还是写在外部
2.html:
< head >
< link rel ="stylesheet" type ="text/css" href ="css.css" >
</ head >
< body >
< div class ="aa" id ="aa" ></ div >
< input type ="button" value ="获取" onclick ="ddd()" >
< script >
var getRuntimeStyle = function (obj, k)
{
var v = null ;
if (obj.currentStyle) v = obj.currentStyle[k];
else v = window.getComputedStyle(obj, null ).getPropertyValue(k);
return v;
}
var ddd = function ()
{
obj = document.getElementById('aa');
alert(getRuntimeStyle(obj,'width'));
alert(getRuntimeStyle(obj,'height'));
alert(getRuntimeStyle(obj,'backgroundColor')); // IE用 style 的 js 属性,和 FF有区别,FF应该写background-color,即CSS属性
alert(getRuntimeStyle(obj,'background - color'))
alert(getRuntimeStyle(obj,'zIndex'))
}
</ script >
</ body >
</ html >
发表评论
-
图象缓冲
2007-02-07 09:45 733图象缓冲的应用双缓冲绘图:<!--<br>& ... -
检验邮箱
2007-02-08 09:46 763<!--<br><br> ... -
批处理命令总结
2007-02-08 16:52 684批处理命令总结:@ 符号后 的命 ... -
学习UML笔记
2007-02-27 17:30 735学习 UML 笔记 前言 为了自己能快速将 UML ... -
blog加上一个同页面浏览者聊天室代码
2007-05-23 10:17 689都是用的别人提供的服务。哈哈。<script type= ... -
常见网页技巧
2007-06-10 16:32 5361.鼠标移动上去,图片变亮,移开又变成灰色。改变的是透明度。 ... -
javascript 数组排序
2007-07-01 03:16 707javascript 数组排序发现一个我原来不知道的事情: ... -
javascript 在客户端绘制图表系列三——xy坐标曲线图
2007-07-01 04:31 1274系列1、2中介绍过的内容在这里不会赘述。原理同面1、2基本一样 ... -
搭建php的运行环境
2007-07-31 18:50 859配置 php 环境 ... -
从网页导出excel
2007-08-09 21:36 691<?xml:namespace ... -
简单日期下拉框
2007-08-09 22:13 816项目中用到一个级联、动态下拉选择日期框。我以前也收集 ... -
php学习笔记1
2007-08-22 22:36 772前面总结过 ... -
php学习笔记2
2007-08-23 23:33 708主要内容:总结了第四章,主要关于字符串处理。参考书籍 ... -
分享一个表格排序程序
2007-08-23 23:46 627应广大网友要求特此分享一个表格排序的程序。有问题,欢迎留言(虽 ... -
AJAX愉快之旅——prototype.js篇
2007-08-24 09:53 581AJAX ... -
Javascript 事件转移
2007-09-19 08:52 711我遇到的Javascript 现 ... -
网页打印脚本
2007-09-19 08:55 1558<html><head><sty ... -
记录访问者IP
2007-09-19 10:46 819<?php //文件名字 $filename = &q ... -
JAVASCRIPT COOKIE初级指南
2007-12-23 23:43 6451、设置COOKIE数据: 最 ... -
PHP读取4种配置文件(php,ini,yaml,xml)
2007-12-23 23:49 809<?php/*** 读取4中配置的表信息,现支持php. ...
相关推荐
HTML+CSS总结.doc
我所学到的所有关于html和CSS的知识的总结,希望对大家有所帮助
dw cs6的css总结
CSS总结.xmind
Css总结,知识点一幕了然,能熟练的快速的掌握Css,帮助你快速的学习前端知识。。。!!!!!
前端jscss总结笔记.zip
前端jscss总结笔记.rar
liferay CSS总结,对liferay的theme可以了解点点
文档中有HTML+CSS的总结资料,有兴趣的可以看一下,从基础开始对开始学的人很有帮助。
学习的时候,闲来没事自己总结的一些html和css的知识,希望对初学者有些帮助吧
css总结很全,前端小白学习必备。后期还会发JS的。赚点积分
css大全,自己总结的css笔记,希望各位能喜欢!!
该资源是关于HTML和CSS的知识点总结,参考书籍主要为HTML&CSS设计与构建网站,总结有不足的地方请大胆斧正
NULL 博文链接:https://maoting.iteye.com/blog/1597765
css学习总结思维导图
高效的CSS、可维护的CSS、组件化的CSS、hack-free CSS 书写高效CSS: 1、使用外联样式替代行间样式或者内嵌样式 2、不推荐使用内嵌样式
前段时间自己学习整理的html5和css学习笔记,可以供大家参考下!大部分都带有学习截图以及口语式表达和举例。要是做的不好大家多包涵哈!
很实用的css样式和使用说明。里面包含了实际的例子和几个使用技巧。