CSS的选择器
什么是CSS的选择器，书中举了个地图的例子，比如河流用蓝色的线表示，公路用红色的线表示，城市用圆点来表示等等。这就是“内容”和“表现形式”的对应关系。同样，如同HTML里的<h1>标签里的内容用蓝色文字表示，<h2>标签里的内容用红色文字表示。为了使CSS规则与HTML元素对应一起来，就必须定义一套完整的规则，实现CSS对HTML的“选择”。我的理解就是说，靠这些规则能够让CSS更加灵活的去控制HTML的元素，或者说有选择性的控制，比如刚才说的地图，靠这些规则让我找到了河流，我可以改变所有河流的样式，都改成蓝色吧。毕竟是水嘛，过几天人家来反映了，中国国内的河流太多了，乍一看全是蓝色，眼都看花了，人家要说了能不能把小河改成淡蓝色，线条的粗细度都要分明。是的，我们又要靠这些规则从中选择几个特殊的元素去控制了，这也许就是所谓的“选择”吧。
首先呢，CSS的选择有几种，分2类：基本选择器和复合选择器。基本选择器有3种：标记选择器，类别选择器，ID选择器。复合选择器是同过基本选择器的组合而构成的。
1. 基本选择器
1.1 标记选择器
先来看看书中的例子吧：
<style>
h1{
color:red;
font-size:25px;
}
</style>
看到h1没，这不是HTML元素里的<h1>标记嘛，对，每一种HTML标记的名称都可以作为相应的标记选择器的名称。其中，h1就是选择器；color就是属性，冒号后面的就是属性的值;一个选择器里面可以声明多个属性。这个例子表示的是h1标题里的文字颜色是红色，并且字体大小是25px。
Demo
个人理解标记选择器就像固有的种类，就像地图上的城市标记一样，乡村，城镇，都市……等等，通过它们自身特有或者说固有的标记，进行全局性的设计控制，乡村就是一个点，城镇就是一个小小空心圆，都市就是空心圆中还有个圆……等等。
1.2 类别选择器
<style> .red{ color:red; /* 红色 */ font-size:18px; /* 文字大小 */ } .green{ color:green; /* 绿色 */ font-size:20px; /* 文字大小 */ } </style> </head> <body> <p class="red">class选择器1</p> <p class="green">class选择器2</p> <h3 class="green">h3同样适用</h3> </body>
Demo
这个Demo中，不同的标记由于我们的分类显示出了不同的效果。特别是<h3>标记，不仅仅显示了类别green的式样，本身<h3>自己的标记的默认特有粗体都有保留。当然，你可以增加font-weight:normal;的样式到.green类别中去，那么<h3>标记的粗体也就被刚才的式样所覆盖，显示的字体也就是正常粗细了。
我们来看看标记选择器的和类别选择器共同使用的例子：
很明显类别选择器的优先级要比标记选择器的高，
Posted in Uncategorized
1 Comment
CSS的引用
今天学习了如何导入CSS的引用，一共分为4种。行内式，嵌入式，导入式和链接式。下面就一一解说下吧。
1.行内式
<h1 style="color:White;background-color:Blue">This is a line of Text</h1>
这是书中的例子，这个大家肯定不陌生，我最初设计网页的时候经常使用style属性。不过这种方法过了不久就给我带来了麻烦，上篇文章有说假如有一个网站需要修改，用这种方式设置网页的话不得不一个一个重新设置，这也就失去了CSS的优点。所以不建议使用行内式。
2.嵌入式
<head>
<style type="text/css">
h1{
color:white;
background-color:blue
}
</style>
</head>
这种方式如过是对于单一网页来说是很方便，如果是多个网页那就和行内式一样了。所以还是不推荐用这个。是的，接下来推荐的就是导入式和链接式。
3.导入式和链接式
导入式：
<style type="text/css">
@import"mystyle.css";
</style>
链接式：
<link href="mystyle.css" type="text/css" rel="stylesheet" />
其中mystyle.css就是一个独立的CSS文件，这2个标签也就是将外部的CSS文件引入HTML，从而只要在外部控制css文件就可以达到对HTML文件的全局控制和更新，这也就是CSS的一个巨大的优点。
一般推荐使用链接式，而不是导入式，最大原因就是装载的顺序。导入式在整个页面装载完成后再装载css文件的,这样会导致如果页面文件体积过大，则会先显示无样式的页面，闪烁一下然后再恢复到设置式样后的效果。但是链接式是在装载页面主体部分之前装载css，这样显示出来一开始就是带有式样的,所以不会出现上面的情况。
这是摘自书中的话，具体的如何测试导入式的闪烁问题，我还真不知道怎么测。网上也问了，貌似没有能够中断css载入的事件。就先记在脑子里吧。
那么导入式就没用了？不，如果要倒入多个css样式，可以选在导入式，为什么？如果仅需要引入一个css文件，那就推荐用链接式，如果网站为了css文件分类，引用多个css样式，万一哪天分类改变了，假如分类少了2个多了3个新的分类，那么所有原来引用这些式样的页面都必须去一一逐一修改，也是很费劲的。这个时候导入式就派上用上了，可以先用链接式引入一个css文件，在这个css文件中通过导入式方法引入其他分类的css文件，要修改就只要修改这个css文件即可。
网上还有一些不建议使用导入式的文章，可以去看看：
don’t use @import
Posted in CSS
Leave a comment
CSS的简单介绍
对于CSS的具体介绍，我就不一一详细说了。在google,百度上一搜就有了，不过还是说些基础的吧。
CSS是 指层叠样式表 (Cascading Style Sheets)，用于控制Web页面的外观。是的，以前我在做web网页设计的时候，最常用的标签就是table，就是靠它来给整个网页描绘框架。可是毕竟这种设计是固定的，客户那要是稍微有点变动，那维护起来可真叫个吃力啊，页面不得不全部重新改过，很是恼人。正是由于这样，CSS的出现让这一切变的如此简单和有层次感。网页需要全局更新修改，只要修改css样式表，网页当中所有的元素都会跟着改变，也就是说提高了复用性和灵活性。
在书中介绍，在网站设计中，特别是在CSS设计领域中，有一个世界范围都非常著名的网站–CSS Zan Graden。中文名为“CSS禅意花园”。这个网站以最有效、最优美的方式展示了CSS的最高境界。网址是http://www.csszengarden.com。当中有趣的是，它们的HTML结构和内容是完全相同，通过不同的CSS设置，显示出不同的效果，让人耳目一新。
001号作品，也就是主页。
对了，主页是001号作品，也可以输入http://www.csszengarden.com/?cssfile=001/001.css是一样的，如果你要看002号的作品只要修改链接http://www.csszengarden.com/?cssfile=002/002.css，对，就是修改编号就可以了。
这是就是002号作品：http://www.csszengarden.com/?cssfile=002/002.css
恩，去好好看看人家代码是如何设计网页的，多学习人家的代码是很有好处的。 ok，就说到这吧。
Posted in CSS
Leave a comment
开始学习CSS
毕业可以说有3年多了，一直都在做开发，特别是近几年都在接触Web方面的开发，在页面上的设计和美工都是相关人员已经做完了，自己一直在研究编码时常也会很疲倦很枯燥。在这个绚丽的时代，如同现在的一些网站设计一样，CSS，JavaScript,Flash,Ajax,Slivlight等技术，让网页生动起来，让我视觉上的冲击是很震撼的。在自己累的时候学习一下这些是很让人轻松的，至少对我来说是这样的，这些视觉效果是马上能呈现的，颇有些成就感。况且在Web开发中，CSS、JavaScript也是必须要掌握的，所以闲暇的时候找一本书做参考，每天学习一点也是不错的。
听说《CSS设计彻底研究》这本书不错，乘回国买了本就准备开始学习系统的学习CSS了，以前在开发中虽然接触过CSS，只能说是略懂，并没有深入的学习CSS的精华所在。
《CSS设计彻底研究》
OK，万事俱备，我都已经迫不及待了，马上开始CSS之旅吧。
Posted in CSS
Leave a comment
google-code-prettify–代码高亮显示
最近开始学习CSS准备写点代码在自己的博客上，但是wordpress管理页面的code标签并不支持高亮显示，可是在一些博友的空间里经常能看到代码的高亮显示，感觉非常不错。
于是去经过了解(这里要谢谢www.17css.com的青色)，用google-code-prettify这个Javascript文件可以通过CSS文件对代码进行上色处理。下载地址是http://code.google.com/p/google-code-prettify/。
1.设置
下载压缩后会出现好多文件夹，你只需要src这个文件夹就可以了，其他的都是些测试文件。然后将src文件夹上传到你的空间里去。
在你要显示的页面的head标签中，调用src文件夹下的prettify.css和prettify.js文件，添加如下代码：
<link href="你的空间地址/src/prettify.css" type="text/css" rel="stylesheet" /> <script type="text/javascript" src="你的空间地址/src/prettify.js">
当然了,你也可以直接调用google-code的地址去用class=’prettyprint’，代码如下：
<link href="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css" type="text/css" rel="stylesheet" /> <script type="text/javascript" src="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js">
然后在将<body>标签修改如下：
<body onload="prettyPrint()">
简单的设置算OK了。
2.使用
将要显示的代码添加到<pre>标签中，并调用class=”prettyprint”，代码如下：
<pre class="prettyprint">这里写你的代码</pre>
3.自定义pre标签
代码过长，超出pre框的边线了！oh，是的我们需要改进下我们的pre标签了。是wordpress的就要修改style.css文件了，找到pre标签，修改如下。
pre {
width: 100%;
overflow: auto;
background-color: #f7f7f7;
padding-left: 6px;
}
overflow设置成auto，这个设置提供了自动显示滚动条的功能。当然你也可以增加点属性，比如背景色background-color，代码如果太靠边可以设置内边距padding-left等等，看你个人喜欢了。
就讲那么多了，希望能对你有些帮助。
Posted in tools
2 Comments
C#のインデクサー(indexer) 索引器
皆さん、お早うございます。
今日はC#のインデクサーについて発表させていただきます。
コーディングする時、複数のデータを一まとめにするために、配列よく使っています。しかし、配列を扱う時、不便のところがあると思います。
例えば、配列の実体を作成する場合、最初の長さを設定しなければならない、あるいは変数に格納する必要があります。もし要素を追加するとき、配列の長さが固定ですので、追加することはできません。
そして、複数データを配列に呼び出すとき、最も多く発生する例外が「インデックスが配列の範囲を超えている」という例外です。それに、整数値でインデックスを指定するしかないです。
C#で、インデクサーというものがあります。これを使うとオブジェクトを配列と同じ方法でインデックスを付けることができます。インデクサーでインデックスの範囲を内部に指定できるので、「インデックスが配列の範囲を超えている」という例外を制御することができます。
そして、インデクサーは、整数値でインデックスを指定するのみではなく、string、列挙型など自分定義するタイプを指定することができます。これだけではなく、複数のインデックスを指定でき、多次元配列のようにインデクサーを設計することも可能です。
Posted in Uncategorized
Leave a comment
Hello world!
Welcome to WordPress. This is your first post. Edit or delete it, then start blogging!
helo
Posted in CSS, Uncategorized
2 Comments