CSS的link和@import的区别

发表于 2011/08/04 由 Jacky

<style type="text/css">@import url(./stylesheet.css)</style>
<link rel="stylesheet" type="text/css" href="./stylesheet.css" />

从功能上来说，基本上没有区别，@import是css导入样式的机制，<link>是html导入样式的机制。

从性能上来说，<link>是有明显优势的。

Note:

1. 经实践发现@import必须写在文件头部，写在其他位置不生效
2. 经实践发现《精通CSS+DIV网页样式与布局》肯定是本烂书（不知道为啥还卖的那么好），原因如下
2.1 怀疑1.2.4导入样式的说法是以讹传讹，没搜到类似的英文描述
2.2 发现1.2.5CSS样式优先级得出的结论没有逻辑性
2.3 第二章CSS选择器写的太入门了，网上随便找篇blog都写得比这货详细
2.4 第四章直接上图片排版，CSS盒模型和元素定位基础都没讲呢，说明此书拼凑嫌疑巨大

3. 快速浏览剩余章节，发现我的CSS水平虽然菜，但是整体性把握肯定在此书之上。

参考:

CSS文字折行与省略号

发表于 2011/04/22 由 Jacky

相关的几个属性和w3schools的参考如下：

word-warp 属性设置如何处理单词的折行
http://www.w3schools.com/css3/css3_pr_word-wrap.asp
word-wrap: normal | break-word

word-break 属性设置如何处理单词折断，仅支持IE
http://www.w3schools.com/css3/css3_pr_word-break.asp
word-break: normal | break-all | hyphenate

overflow 属性设置如何处理内容超出元素边框的情况
http://www.w3schools.com/css/pr_pos_overflow.asp
overflow: visible | hidden | scroll | auto | inherit

text-overflow 是一个比较特殊的属性，对于超出元素边框用省略号显示总的来说目前没有完美的css的solution，需要借助javascript的帮助

text-overflow: clip | ellipsis | ellipsis-word
clip : 　不显示省略标记（…），而是简单的裁切
ellipsis : 　当对象内文本溢出时显示省略标记（…），省略标记插入的位置是最后一个字符。
ellipsis-word : 　当对象内文本溢出时显示省略标记（…），省略标记插入的位置是最后一个词（word）。

Opera -o-text-overflow
Firefox3 不支持可以用-moz-bing解决这个问题 (https://developer.mozilla.org/En/CSS/-moz-binding)

<title>文字折行与省略号</title>
<style type="text/css">
p.nowarp {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;/*Not working in FF*/
}
p.warp {
      overflow: hidden;
      white-space: normal;
      word-warp: break-word;
      word-break: break-all;/*Only work in IE*/
      text-overflow: ellipsis;/*Not working in FF*/
}
</style>
</head>

<body>

<div style="width: 300px; border: 1px solid red;">
      <p class="nowarp">
      禁止换行，且用省略号表示超出的部分，哈哈哈哈哈哈哈哈啊哈哈啊哈哈
      </p>
</div>

<div style="width: 300px; border: 1px solid red;">
      <p class="warp">
      自动换行，veryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryverylong
      </p>
</div>
</body>

IE和FF下的显示效果

link的地址以斜线开头完全没有道理啊

发表于 2010/08/25 由 Jacky

在内部搭一个类stackoverflow的系统，选了个基于django的开源的osqa，部署的时候陆陆续续发现源码里有点小问题，比如用户相关的很多link是这样写的:


<a href="/users/{{ user.id }}/{{ user.username|slugify }}/">{% gravatar user 32 %}</a>

这么搞的话link就指向了服务器的documentRoot，但是我不会把osqa这个应用直接挂在根域名下，这样的hard code我觉得挺愚蠢的。

其实同样的问题也存在我们的jsp里面，这个编程习惯不好，要改正其实也不难，手工做的话可以取得app的rootPath就行了，或者用url标签来帮我们自动搞定。（django&jsp都有的）

另一个Note：osqa第一次装的时候会把配置信息写到forum_keyvalue表里面，后面修改上传路径等的配置没有用，必须到数据库修改。


mysql> update forum_keyvalue set value="S'/upfiles/logo.png'
    "> p0
    "> ." where id=26;

	mysql> update forum_keyvalue set value="S'/var/lib/osqa/forum/upfiles'
    "> p0
    "> ." where id=33;
Query OK, 1 row affected (0.00 sec)
Rows matched: 1  Changed: 1  Warnings: 0

mysql> select * from forum_keyvalue where id=33;
+----+----------------+-------------------------------------+
| id | key            | value                               |
+----+----------------+-------------------------------------+
| 33 | UPFILES_FOLDER | S'/var/lib/osqa/forum/upfiles'
p0
. |
+----+----------------+-------------------------------------+

Something more:
Larry wrote 2 useful CSS related posts:
CSS – small tips (设置图像最大宽度，打印分页)

CSS – sprites, manage images (图像合并切割)

END

为iPhone优化网页的技巧

发表于 2010/02/07 由 Jacky

为了使得网页看上去更像native的程序，我们需要对网页进行一些优化

使用iPhone访问本文的测试页面

本文包含一些小的技巧：
1. 如何隐藏iPhone Safari的地址栏
2. 如何设置网页的桌面快捷方式图标
3. 如何为网页设置iPhone的样式
4. 如何在网页中检测屏幕的方向
5. 如何在网页中检测当前的位置

为iPhone优化网页，最需要了解的应该是下面这个属性
viewport: 可见窗口

可见窗口在iPhone Safari上和桌面Safari略有不同，iPhone上默认没有滚动条，默认的实际的可见大小在竖屏状态下，如下图是320*356，地址栏占据了60像素的高度，稍后我们有办法将其隐藏，得以使用这宝贵的60像素。

iPhone的Safari在显示传统的web网页时（未做优化的网页），viewport会被设置成显示网页宽度的980像素，即在320*356的大小内显示原网页980像素的内容，做了适当的缩放等调整。

所以我们做网页优化的时候，可以通过设置这个meta属性，更多细节可以参考： “Safari Web Content Guide.pdf”

<meta name="viewport" content="width=device-width,height=device-height, initial-scale=1.0, user-scalable=no"/>

width=device-width, //设备宽度

height=device-height, //设备高度

initial-scale=1.0, //初始的缩放比例

user-scalable=no //是否允许用户缩放

小技巧

1. 如何隐藏iPhone Safari的地址栏

设置这个属性(文档里面说有用，但是好像不太成功)

<meta name="apple-mobile-web-app-capable" content="yes" />

还有一种办法，页面加载完成之后滚动窗口，这个确实有效，唯一要注意的是页面高度必须够长，我一般设成device-height就没问题了:

<script type="text/javascript">
addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false);

function hideURLbar(){
window.scrollTo(0,1);
}
</script>

2. 如何设置网页的桌面快捷方式图标

这个其实不算技巧，只是从Apple文档里找到这一项罢了

<link rel="apple-touch-icon" href="apple-touch-icon.png"/>
<link rel="apple-touch-startup-image" href="startup.png"/>

第一行就是设置桌面快捷方式图标的，图标必须是57*57像素的文件，不需要自己做圆角和高亮效果，系统会自动帮你搞定这个
放在网页根目录会作用于下面的全部网页，当然也可以为每个页面设置单独的图标

第二行是设置启动画面（没看到成功效果）

3. 如何为网页设置iPhone的样式

这个是CSS media selector的一点小技巧

<!--[if !IE]>-->
<link media="only screen and (max-device-width: 480px)"
  rel="stylesheet" type="text/css" href="iphone.css"/>
<!--<![endif]-->

4. 如何在网页中检测屏幕的方向

<script type="text/javascript">
function updateOrientation()
{
	var displayStr = "Orientation : ";
	switch(window.orientation)
	{
	case 0:
		displayStr += "Portrait";
		break;
	case -90:
		displayStr += "Landscape (right, screen turned clockwise)";
		break;
	case 90:
		displayStr += "Landscape (left, screen turned counterclockwise)";
		break;
	case 180:
		displayStr += "Portrait (upside-down portrait)";
		break;
	}
	document.getElementById("output").innerHTML = displayStr;
}
</script>
<body onorientationchange="updateOrientation();">

5. 如何在网页中检测当前的位置

<script type="text/javascript">
navigator.geolocation.getCurrentPosition(showMap);
function showMap(position) {
	latitude = position.coords.latitude;
	longitude = position.coords.longitude;
	document.getElementById("latitude").innerHTML = latitude;
	document.getElementById("longitude").innerHTML = longitude;
}

//Register for location changes
var watchId = navigator.geolocation.watchPosition(scrollMap,handleError);

function scrollMap(position) {
	latitude = position.coords.latitude;
	longitude = position.coords.longitude;
	document.getElementById("latitude").innerHTML = "scrollMap->"+latitude;
	document.getElementById("longitude").innerHTML = "scrollMap->"+longitude;
}
function handleError(error) {
	document.getElementById("error").innerHTML = error;
}

function buttonClickHandler() {
	// Unregister when the user clicks a button
	navigator.geolocation.clearWatch(watchId);
}

</script>
</head>
<body>
<div id="location">
	latitude:<p id="latitude">null</p>
	longitude:<p id="longitude">null</p>
</div>
<div>
	<input type="button" value="clearWatch" onclick="buttonClickHandler();"/>
</div>
<div id="error"></div>
</body>

炫酷CSS超链接按钮一

发表于 2010/01/27 由 Jacky

上一篇文章提到用CSS分割图片的技巧，例子中也展示了一个很漂亮的CSS按钮，今天在tutorialzine看到这篇教程 Sweet AJAX Tabs With jQuery 1.4 & CSS3的按钮也很漂亮，把demo代码下载下来之后，看了一下也是用CSS定位分割图片的技巧做出来的，和上一篇文章中按钮实现略有不同，下面就来解析怎么做出如下的效果:

Tab one

Tab two
Tab three
Tab four

首先按钮的HTML代码,

<a class="green" href="#">Tab two <span class="left"></span><span class="right"></span></a>

这个按钮的图片由左中右三部分构成，两边的图片是做好了边框效果的，中间的图片可以无限扩展。即下图显示的效果（注：图像来源于tutorialzine原教程）

源图像是这样的，其实还分成了亮度有区别的上下两部分，使用上文中已经介绍过的CSS技巧达到鼠标移上去高亮的效果。
->->->

让我们来看看实现一个按钮核心的CSS代码:

a.blue{background:url(img/blue_mid.png) repeat-x top center; color:#03426e;}
a.blue span.left{ background:url(img/blue_left.png) no-repeat left top;}
a.blue span.right{ background:url(img/blue_right.png) no-repeat right top;}

然后是定义按钮size、边框、边距等的CSS代码:

a,a:visited{
	/* Styling the hyperlinks of the tabs as colorful buttons */
	float:left;
	font-size:18px;
	/* display:block allows for additinal CSS rules to take effect, such as paddings: */
	display:block;
	padding:7px 16px 1px;
	margin:4px 5px;
	height:29px;
	/* Giving positioning */
	position:relative;
	/* CSS3 text-shadow */
	text-shadow:1px 1px 1px #CCCCCC;
}
.left{
	/* The left span in the hyperlink */
	height:37px;
	left:0;
	position:absolute;
	top:0;
	width:10px;
}
.right{
	/* The right span in the hyperlink */
	height:37px;
	right:0;
	position:absolute;
	top:0;
	width:10px;
}

CSS分割背景图片的技巧

发表于 2010/01/24 由 Jacky

因为我也不是CSS高手，所以本文的目的是写清楚如何弄明白CSS中分割图片的技巧，说到分割其实并不是真正意义上的剪裁图片，只是已经流行多年了的一种CSS best practise，用一个拼接起来的大的图片资源替代加载多个小图片的一种方法，优点是节约页面的加载速度，不会出现有的图片能显示有的还在加载的情况，这个效果或者性能用firebug可以测试出来。

当然用这个技巧也要选对地方用才行，要是经常需要改动的图像用这个技术还是有点折腾的。

核心的属性是这个：background-position 参数值从w3schools找出来的

Property Values

Value	Description
top left top center top right center left center center center right bottom left bottom center bottom right	If you only specify one keyword, the second value will be “center”. Default value is: 0% 0%
x% y%	The first value is the horizontal position and the second value is the vertical. The top left corner is 0% 0%. The right bottom corner is 100% 100%. If you only specify one value, the other value will be 50%.
xpos ypos	The first value is the horizontal position and the second value is the vertical. The top left corner is 0 0. Units can be pixels (0px 0px) or any other CSS units. If you only specify one value, the other value will be 50%. You can mix % and positions
inherit	Specifies that the setting of the background-position property should be inherited from the parent element

这里有篇不错的文章描述的是下面这个例子，将原图竖着的1234显示成横着的4个盒子
CSS: Using Percentages in Background-Image

.box1

.box2

.box3

.box4

下面这个例子也是常用到的：
鼠标移到按钮上，用稍微亮一点点的图片显示的悬停效果。
用到的green.png原图：

按钮的代码:

<a class="green" href="#">Green<span> </span></a>

按钮的CSS:

a {
	/* The section titles */
	display:block;
	font-size:21px;
	height:34px;
	overflow:hidden;
	padding:10px 20px 0;
	position:relative;
	width:200px;
}
a {
	text-decoration: none;
}
a:hover{
	/* Removing the inherited underline from the titles */
	text-decoration:none;
}
a span{
	/* This span acts as the right part of the section's background */
	height:44px;
	position:absolute;
	right:0;
	top:0;
	width:4px;
	display:block;
}
a.green{background:url(img/green.png) repeat-x top left; color:#436800;}
a.green span{ background:url(img/green.png) repeat-x top right;}
/* The hover effects */
a:hover{ background-position:bottom left;}

最重要的一行，鼠标移上去的时候设置图像的位置为bottom left，而下半部分的图像比上半部分亮一点。
效果如下:

最后一个按钮样式和第一个其实是一样的，只不过最后是从sprite.png加载过来的，我使用了CSS 图片拼合生成器将四张图拼接起来了，然后再用CSS去定位。
拼接完成之后的图：

haojii

一个专注于技术的IT男

标签归档：CSS