‘css’ 分类下的所有文章
2012十月11

Web设计框架UI库

css 评论关闭

1.基金会3 | Foundation 3 世界最先进的响应前端框架。
2.
bootstrap twitter
3.960 Grid System

2010十二月3

权重问题

css 评论关闭

1,内嵌样式 > 内部样式表 > 外联样式表,即:当样式相同时,以最近的为主。
2,id选择器的权重是大于类选择器的权重。即:#mystyle 大于.mystyle

2010十月27

一些工具

css 评论关闭

1,将excel数据自动转成网页形式:http://tableizer.journalistopia.com/

2,网站连接数测试:拟多用户同时访问你的站点,并出具报告以分析你的站点可以支撑的访问者数量。

http://loadimpact.com/index.php

3, Photoshop 插件,可以将你的 PSD 转换成 WordPress 主题。http://www.divine-project.com/

2010十月14

色彩理论

css 评论关闭

本地文件:enjoytools/ColorPicker/images/PrimaryColors.swf

色彩理论速成

2010九月30

png图片在IE6下的显示

css 评论关闭

利用过滤器解决:
<pre lang=”css”>#png
{background-image: url(images/logo.png)!important;
background-repeat: no-repeat;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’http://enjoyasp.net/logo.png’);
_background-image: none;
}</pre>

2010九月30

table 美观例子

css 评论关闭

?<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″utf-8″ />
</head>
<style type=”text/css”>
/* CSS Document */

body {
font: normal 11px auto “Trebuchet MS”, Verdana, Arial, Helvetica, sans-serif;
color: #4f6b72;
background: #E6EAE9;
}

a {
color: #c75f3e;
}

table {
width: 700px;
padding: 0;
margin: 0;
}

caption {
padding: 0 0 5px 0;
width: 700px;
font: italic 11px “Trebuchet MS”, Verdana, Arial, Helvetica, sans-serif;
text-align: right;
}

th {
font: bold 11px “Trebuchet MS”, Verdana, Arial, Helvetica, sans-serif;
color: #4f6b72;
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
border-top: 1px solid #C1DAD7;
letter-spacing: 2px;
text-transform: uppercase;
text-align: left;
padding: 6px 6px 6px 12px;
background: #CAE8EA? no-repeat;
}
th.nobg {
border-top: 0;
border-left: 0;
border-right: 1px solid #C1DAD7;
background: none;
}

td {
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
background: #fff;
font-size:11px;
padding: 6px 6px 6px 12px;
color: #4f6b72;
}

td.alt {
background: #F5FAFA;
color: #797268;
}

th.spec {
border-left: 1px solid #C1DAD7;
border-top: 0;
background: #fff no-repeat;
font: bold 10px “Trebuchet MS”, Verdana, Arial, Helvetica, sans-serif;
}

th.specalt {
border-left: 1px solid #C1DAD7;
border-top: 0;
background: #f5fafa no-repeat;
font: bold 10px “Trebuchet MS”, Verdana, Arial, Helvetica, sans-serif;
color: #797268;
}
/*———for IE 5.x bug*/
html>body td{ font-size:11px;}
body,td,th {
font-family: 宋体, Arial;
font-size: 12px;
}
</style>
<body>
<table cellspacing=”0″>
<caption> </caption>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>电话</th>
<th>居住地点</th>
</tr>
<tr>
<td>badwolf</td>
<td>100</td>
<td>010-110</td>
<td>中国北京</td>
</tr>
<tr>
<td>badwolf</td>
<td>100</td>
<td>010-110</td>
<td>中国北京</td>
</tr>
<tr>
<td>badwolf</td>
<td>100</td>
<td>010-110</td>
<td>中国北京</td>
</tr>
<tr>
<td>badwolf</td>
<td>100</td>
<td>010-110</td>
<td>中国北京</td>
</tr>
<tr>
<td>badwolf</td>
<td>100</td>
<td>010-110</td>
<td>中国北京</td>
</tr>
<tr>
<td>badwolf</td>
<td>100</td>
<td>010-110</td>
<td>中国北京</td>
</tr>
</table>

</body>
</html>

2010九月30

网站变灰色

css 评论关闭

?方法一
1::<head></head>中加入代码:
<style>
html { filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); }
</style>

2:在css文档种加入以下代码
html { filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); }
若 FLASH的颜色不能被CSS滤镜控制,可以在FLASH代码的<object …></object>之间插入:
<param =”false” name=”menu”/>
<param =”opaque” name=”wmode”/>

方法二、给body加个css滤镜(仅限IE)
body {filter:gray;}
flash变灰的方法:object 之间加入
<param value=’false’ name=’menu’/>
<param value=’opaque’ name=’wmode’/

2010九月30

filter滤镜:控制页面的透明度,颜色,灰度,波纹

css 评论关闭

语法:STYLE=”filter:filtername(fparameter1, fparameter2…)”
(Filtername为滤镜的名称,fparameter1、fparameter2等是滤镜的参数)
滤镜说明:
Alpha:设置透明层次 ?
blur:创建高速度移动效果,即模糊效果
Chroma:制作专用颜色透明
DropShadow:创建对象的固定影子
FlipH:创建水平镜像图片
FlipV:创建垂直镜像图片
glow:加光辉在附近对象的边外
gray:把图片灰度化
invert:反色
light:创建光源在对象上
mask:创建透明掩膜在对象上
shadow:创建偏移固定影子
wave:波纹效果
Xray:使对象变得像被x光照射一样

哀悼日期间设置网站页面为灰色:
<style>
body{
? ?? ???filter:gray;
}
</style>

2010九月30

页面中所有的控件形状,位置,大小

css 评论关闭

页面中所有的控件形状,位置,大小都可利用css来改变成所想要的效果。以前只是改td,div, 文字,要意识到input也是html元素,当然也能改变!!!

2010九月30

例子

css 评论关闭

1,<a href=”http://www.w3schools.com/css/tryit.asp?filename=trycss_float5“>导航条</a>

body{
font-family: “宋体”;
font-size: 12px;
//对于页面中出现的文字,如外部没有CSS,就用这个CSS,默认。即最外层的CSS影响它所包含的内部所有元素,若其没有自己的CSS,则外部的应用之,对应应用。因为如td之类没有字体之类的属性,这种对应指的是外部CSS属性与元素含有的属性的交。
如: td
{
font-size:12px;s
}
对页面中td内的文字应用。

background-color: #F8FDF8;
margin: 0px auto;
}

2, 连接:link:正常显示 visited: 点击过后 hover: 鼠标滑过 active: 鼠标按下时
a.link {
font-size: 12px;
line-height: 22px;
color: #333333;
text-decoration: none;
}
a:visited {
font-size: 12px;
line-height: 22px;
color: #333333;
text-decoration: none;
}
a:hover {
font-size: 12px;
line-height: 22px;
color: #009900;
text-decoration: none;
}
a:active {
font-size: 12px;
line-height: 22px;
color: #333333;
text-decoration: none;
}

注: visited要在a:link之后。 active要在hover之后才会有效果。
3, 当控件获得焦点时进行样式操作
&lt;html&gt;
&lt;head&gt;
&lt;style type=”text/css”&gt;
input:focus
{
background-color:yellow;
}
&lt;/style&gt;
&lt;/head&gt;

&lt;body&gt;
&lt;form action=”form_action.asp” method=”get”&gt;
First name: &lt;input type=”text” name=”fname” /&gt;&lt;br /&gt;
Last name: &lt;input type=”text” name=”lname” /&gt;&lt;br /&gt;
&lt;input type=”submit” value=”Submit” /&gt;
&lt;/form&gt;
&lt;/body&gt;
&lt;/html&gt;

3, 图片由半透明转为透明

&lt;html&gt;
&lt;head&gt;
&lt;style type=”text/css”&gt;
img
{
opacity:0.4; //firefox的用法,范围从0.0 – 1.0
filter:alpha(opacity=40) //ie的用法,范围从0 – 100
}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;h1&gt;Image Transparency&lt;/h1&gt;
&lt;img src=”klematis.jpg” width=”150″ height=”113″ alt=”klematis”
onmouseover=”this.style.opacity=1;this.filters.alpha.opacity=100″
onmouseout=”this.style.opacity=0.4;this.filters.alpha.opacity=40″ /&gt;

&lt;/body&gt;
&lt;/html&gt;

4, 改变html的表现形式: 如input text 这个文本框让其只有下线,改变其边框颜色
&lt;!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “<a href=”http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>”&gt;
&lt;html xmlns=”<a href=”http://www.w3.org/1999/xhtml”>http://www.w3.org/1999/xhtml</a>”&gt;
&lt;head&gt;
&lt;meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ /&gt;
&lt;title&gt;无标题文档&lt;/title&gt;
&lt;style&gt;
input {
border-color:red;
border-left-width:0px;
border-right-width:0px;
border-top-width:0px;}
&lt;/style&gt;
&lt;/head&gt;

&lt;body&gt;
sdf
&lt;input name=”" type=”text” /&gt;sfd
&lt;/body&gt;
&lt;/html&gt;

5, 百度输入栏:高度为28px, 而google为21px, 而中文高度比英文字母要繁,高度要高,显然百度的输入栏更符合输入中文。
&lt;input name=”" type=”text” autocomplete=”off”/&gt;
input[type="text"]{font:16px Verdana;height:28px;padding-top:2px} //改变html元素显示形状
注:页面要去掉头部的&lt;!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “<a href=”http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>”&gt;

2010九月30

属性高级指定

css 评论关闭

1,Dimension :尺寸,用来控制控件的高与宽

  • img.big {height:120px}
  • p{max-height:100px;}? 最大高度,同样有:max-width; min-heigh; min-width;
  • 左右为left, right

2, Classification: 指定控件的显示方式

  • p {display: inline} 追加到上一行显示,即在同一行显示
  • span{display:block;} 控件已块显示,即分行显示
  • div {display: none} :不显示
  • img {float:right;} 图片浮动在右方
  • h2.pos_left{position:relative;left:-20px;} position:relative相对定位 position:absolute; 绝对定位 fixed; 固定
  • h1.visible {visibility:visible}? h1.hidden {visibility:hidden}? 控制控件是否显示
  • <span style=”cursor:pointer”>pointer</span><br /> 手形鼠标,指定鼠标样式 cursor:wait 等待
  • 定位:relative:相对于原来的位置移动,absolute:相对于页面移动,即相对于(0,0)

2,p

  • p:first-letter {color: #ff0000;font-size:xx-large;}? //首字母特别
  • p:first-line {color:#ff0000;font-variant:small-caps;} //首行特别
  • h1:before {content:”sdf”}? //在文本之前插入文字,或图片h1:before {content:url(smiley.gif)}
  • h1:after {content:url(smiley.gif)} //之后, before, after在IE中没有作用

3,z-index 属性设置元素的堆叠顺序
该属性设置一个定位元素沿 z 轴的位置,z 轴定义为垂直延伸到显示区的轴。如果为正数,则离用户更近,为负数则表示离用户更远。
注:Z-index 仅能在定位元素上奏效(例如 position:absolute;)

2010九月30

属性指定

css 评论关闭

1, background
?? ???? body
?? ??? ?{
?? ??? ??? ?background: #00ff00 url(‘smiley.gif’) no-repeat fixed center;?? //当将css从文件中提取,放入一.css文件中时,图片路径注意调整
?? ??? ?}

  • background-color:yellow; 或者 background-color:#00ff00; 或者 background-color:rgb(255,0,255);
  • background-image:url(‘aaa.gif’) ? //默认:水平,垂直重复. 水平background-repeat:repeat-x; ? 垂直 background-repeat:repeat-y;? 不重复background-repeat:no-repeat;
  • background-attachment:fixed;? //指定背景图片是否固定,取值为scroll, fixed. 当为fixed时,图片永远在当前屏幕中显示,不会随滚动条的滑动而变化。
  • background-position:50% 20%;? 或者:background-position:center;???? 或者:background-position: 50px 100px;
  • 所有放在同一个;background: #00ff00 url(‘smiley.gif’) no-repeat fixed center;

2,text
?? ??? ?h1
?? ??? ?{
?? ??? ??? ?text-align:center;
?? ??? ??? ?text-transform:capitalize;
?? ??? ??? ?color:#800000;
?? ??? ?}

  • color:blue; color:#00ff00; color:rgb(255,0,0)
  • text-align:center
  • text-decoration:none 可用来去掉连接的下划线 , 其值可取:overline; line-through; underline; blink;
  • text-transform:uppercase :文本全部大写, 小写为:lowercase; 每个单词首字母大写为capitalize;
  • text-indent:50px;? 段落中指定首行缩进距离,为负时表示从右边开始缩进
  • letter-spacing:10px; 指定字母,汉字的间距
  • word-spacing:30px;; 指定单词,汉字的间距
  • line-height: 100%; 单倍行距
  • direction:rtl; 文本开始方向,默认从左开始。取值可为ltl, rtl
  • white-space:nowrap;设置如何处理元素内的空白。
    normal 默认。空白会被浏览器忽略。
    pre 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
    nowrap 文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。
    pre-wrap 保留空白符序列,但是正常地进行换行。
    pre-line 合并空白符序列,但是保留换行符。

3,font

  • font-family:”Times New Roman”,Georgia,Serif? 当第一个浏览器不支持时,会依次尝试后面的字体。
  • font-style:italic;指定字体为斜体,normal为正常
  • font-size:40px;指定字体大小,默认为16px;
  • font-weight:bold; 设置字体精细,也可用font-weight:500; 在为数字时范围从100-900, 其中400相当于normal, 700相当于bold

4, margin, border, padding, content:指示一个控件的显示位置,控件就是content

  • margin: 控件周边的空白,在最外部
  • border: 控件的边框
  • padding: 填充, 边框与控件之间的距离
  • content: 控件
  • 一个元素的宽度由控件内容content + 左右padding + 左右border + 左右margin 组成。 当设置控件的大小时,实际设置的是content的大小。
  • width:220px;? content宽度
    padding:10px;
    border:5px solid gray;
    margin:10px;??????????????????? 实际宽度为:220 + 10 *2 + 5 *2 + 10*2 = 270px
  • 注:在IE中content宽度包含了border, padding即元素的实际宽度= content + 左右margin 若想得到上面的效果,要在头部加入:
  • <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
    http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
    <html>……</html>

?
? 5,border

  • border-style:solid, 其值可为:solid 实线;none;dotted 点线;? dashed 虚线; double 双线; groove ridge inset outset hidden
  • 或每个边定义:border-top-style:dotted;
    border-right-style:solid;
    border-bottom-style:dotted;
    border-left-style:solid;
  • border-width:5px; 值为像素,或者: thin, medium, or thick.? border-left-width:15px;
  • border-color:red; border-right-color:#ff0000;

6, margin : 没有背景色,完全透明,填充空白

  • margin-top:100px; margin-top:2cm
    margin-right:50px;????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????? margin-bottom:100px; margin-bottom:25%??????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????? margin-left:50px;
  • margin:25px 50px 75px 100px;? 上,右,下,左
  • margin:25px; 上,右,下,左 都是 25px

7, padding : 边框与控件的距离

  • padding-top:25px;
    padding-bottom:25px;
    padding-right:50px;
    padding-left:50px;
  • padding:25px 50px 75px 100px; 上,右,下,左

8,list : 项目符号列表

  • ul.circle {list-style-type:circle}
    ul.square {list-style-type:square}
  • ul.inside {list-style-position:inside}
    ul.outside {list-style-position:outside}
  • ul
    {
    list-style-image:url(‘arrow.gif’);? //以图片代表序号
    }

9, table

  • table {border-collapse:collapse} 设置border为融合,默认为分开,双线
  • table {border-spacing:10px 50px;}
  • caption {caption-side:bottom} 设置table的caption属性显示的位置
  • table {empty-cells:hide} 设置当表格为空时是否显示,IE不支持。
  • table { table-layout:fixed; } 表格布局, auto, 或 fixed auto:随着内容大小的改变而改变
2010九月30

基本定义

css 评论关闭

1,定义方式:selector {property:value}

? selector可一次应用所有元素,或用class指定,或用ID,前者时selector名字为html自带,后者为自定义。
? (1)定义多个属性用;隔开。p {text-align:center;color:red}
? (2)多个同一样式:
?? ??? ??? ?h1,h2,h3,h4,h5,h6
?? ??? ??? ??? ?{
?? ??? ??? ??? ??? ?color:green
?? ??? ??? ??? ?}
?(3)应用多个样式:用空格分开 <p>This is a paragraph.</p>
?(4)内部样式,外部样式,在页面中应用:

?????????? <style>
p{ background-color:#006633}background-color:#006633}
</style>
?若有相同的css定义,相同的部分部分优先级为本页最高,其次是外部引用,本页覆盖外页,若不相同,则二者求并集。
优先级也可通过? !important 为调节,带它的优先级会最高,无论是内页还是外页。
.module ul{margin-left:-55px !important; } //直接加在分号前即可。

2,html自带:
??? (1)p {font-family:”sans serif”} ? ?? 页面中所有段落都会自动应用此样式。
??? (2)自带内部定义用 点 :p.right {text-align:right}? 应用于 ? <p>This paragraph will be right-aligned.</p>
??? (3)指定子类自动应用:input[type="text"] {background-color:blue}? 类型为text的所有控件都会被应用。

注:自定义的用. 如p.right, html的以空格隔开如:a:hover img {border: 1px solid #0000ff;width:500px;height:500px;} //以a 内的img应用
?<a target=”_blank” href=”klematis_big.htm”><img src=”klematis_small.jpg” alt=”Klematis” width=”110″ height=”90″ /></a>

3,自定义:以.开头,以class引用
???? .cc {text-align:center}
? ?? <p>This paragraph will also be center-aligned.</p>
????? 注:名称不能以数字开头,firefox不支持。

4,id指定,不用class
??? #username{color:green}? 则页面中ID为username的控件会自动应用此样式。

5,注释:/*This is a comment*/

6,总结:
?? ???? (1)自动应用的,即不用class指定的
?? ????????????? 1)名字以html元素开头,如body, h1, th, td,table
???????????????? 2)? 用[]指定子类型的。如:input[type="text"] {background-color:blue}
???????????????? 3)? 以#开头的ID,页面中有此ID的自动应用。
??????? (2)用class指定应用的。名字以 . 开头
??????????????? (1)页面元素前为元素名后为 .? 如:p.right {text-align:right}? 应用于 ? <p>This paragraph will be right-aligned.</p>
??????????????? (2)自定义,以 . 开头??? .cc {text-align:center} ? ?? <p>This paragraph will also be center-aligned.</p>

注:因一些浏览器不支持css, 要在<style></style>加上<!–????????????????????? –>