css的几种选择器及浏览器支持

一、通配符选择器(*):所有浏览器支持通配符选择器。
*{margin:0px;padding:0px;}
二、元素选择器(E):所有浏览器支持元素选择器。
li {background-color: grey;color: orange;}
三、类选择器(.className):
.className{font-weight: bold; color: yellow;}
.first.last {color: blue;}
注:所有浏览器都支持类选择器,但多类选择器(.className1.className2)不被ie6支持。
四、id选择器(#ID):所有浏览器支持id选择器。
#last {background: #000;color: lime;}
注:具有唯一性使用id选择器;公用的,类似的使用类选择器。使用这两个选择器时,最好区别大小写。
五、后代选择器(E F):所有浏览器支持后代选择器。
.demo li {color: blue;}
六、子元素选择器(E > F):IE6不支持子元素选择器。
ul > li {background: green;color: yellow;}
七、相邻兄弟元素选择器(E + F):IE6不支持子元素选择器。
.active + li {background: green;color: yellow; border: 1px solid #ccc;}
八、通用兄弟选择器(E ~ F):IE6不支持子元素选择器。
.active ~ li {background: green;color: yellow; border: 1px solid #ccc;}
九、群组选择器(selector1,selector2,…,selectorN):所有浏览器支持群组选择器。
.first, .last {background: green;color: yellow; border: 1px solid #ccc;}

上面九种选择器是CSS3中的基本选择器,而我们最常用的是元素选择器、类选择器、ID选择器、后代选择器、群组选择器,至于具体用什么选择器根据各自的使用情况而定。

css文字竖排

<!DOCTYPE html>
<html>
<head>
<title>竖向排列的文字</title>
<style>
h1 {
width: 50px;
font-size: 30px;
word-wrap: break-word;
letter-spacing: 20px;
}
</style>
</head>
<body>
<h1>北京天安门广场红旗飘扬</h1>
</body>
</html>

css透明

<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ />
<title>半透明div</title>
<style>
#div1 { margin:0px auto; width:500px; height:370px ; text-align:center; background:url(/jscss/demoimg/wall3.jpg);}
#div2 { height:330px; filter:alpha(Opacity=80);-moz-opacity:0.5;opacity: 0.5;z-index:100; background-color:#ffffff; }
</style>
</head>
<body>
<div id=”div1″>
<div style=”padding:20px;”><div id=”div2″>这里是透明的DIV</div></div>
</div>
</body>
</html>

css画三角形

1、新建一个元素,随便什么元素,不过我习惯性的会用块元素来做。如果行内元素就display:block它。

 

<div></div>

 

2、把它的宽高设置为height:0px; width:0px;

 

3、设置边框border属性,用来实现三角形。

 

首先要了解border具体是怎么样的,我写了一个这样的样式:

 

border:50px solid #000; border-color:#f00 #000 #f0f #00f;

 

在FF下面显示效果如下:

 

用CSS画三角形

出现4个三角形合并成一个正方形。到这里就很清晰了,只要把想要的保留,其它的设置为透明就可以达到三角形的效果,那么:

 

border:50px solid #000; border-color:#f00 transparent transparent transparent;

 

在FF就可以看到一个红色三角形如下:

 

用CSS画三角形

但是IE呢,尤其是坑爹的IE6会怎样? 如图:

 

用CSS画三角形

这是因为它不支持transparent,所以不会透明,那么可以这样:

 

border:50px solid #000; border-color:#f00 transparent transparent transparent; border-style:solid dashed dashed dashed;

 

在你想它透明的地方对应的把border-style设置为dashed,IE6就可以达到跟FF一样的效果了。

 

那这样也就只是实现了4个方向的三角形,那如果要直角对着45斜线方向的呢?那么可以用两个正方向的三角形并在一起来实现,如下图:

 

用CSS画三角形

代码:

 

border:50px solid #000; border-color:#f00 #000 transparent transparent; border-style:solid solid dashed dashed;

 

只要把颜色统一,就形成一个45斜线方向三角形,而在IE6却会是这样一种显示:

 

用CSS画三角形

这是因为IE6有个行高撑开了,把行高设置为0就跟FF一样了:line-height:0px;

让你的ie浏览器支持box-shadow

方法一:

ie-css3.htc是一个可以让IE浏览器支持部份CSS3属性的htc文件,不只是box-shadow,它还可以让你的IE浏览器支持圆角属性border-radius和文字阴影属性text-shadow。

它的使用方法是:下载它并放到你的服务器目录

在你的<head></head>里面写入下面的代码:

<!--[if IE]> 
<style type="text/css"> img, #testdiv, .testbox{behavior: url(http://yourdomain.com/js/ie-css3.htc);} </style> 
<![endif]-->

蓝色部份输入要使用box-shadow属性的选择器,绿色部份输入ie-css3.htc的绝对路径,或相对路径,反正要保证能访问得到。

然后这样就OK了。但还是有几点需要注意的是:

  • 当你使用了这个htc文件后,你的CSS里面,只要写有box-shadow, -moz-box-shadow或-webkit-box-shadow的任何一种,IE就会渲染。
  • 当使用了这个htc文件后,你不能这样写box-shadow: 0 0 10px red; 而应该是box-shadow: 0px 0px 10px red; 否则IE中会失效。
  • 不支持RGBA值中的alpha透明度。
  • 不支持inset内阴影。
  • 不支持阴影扩展。
  • 阴影在IE中只会显示为黑色,不管你设置成其它什么颜色。

但是,这个脚本了仅仅是让IE支持了部份的box-shadow值。

方法二:
在<head></head>标签里加入如下代码:
<style type=”text/css”>
img{background: #fff;

-ms-filter:”progid:DXImageTransform.Microsoft.Shadow(color=#eeeeee,direction=0,strength=6) progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=90,strength=10) progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=180,strength=10) progid:DXImageTransform.Microsoft.Shadow(color=#eeeeee,direction=270,strength=6)”;

*filter: 
progid:DXImageTransform.Microsoft.Shadow(color=#eeeeee,direction=0,strength=6)
progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=90,strength=10)
progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=180,strength=10)
progid:DXImageTransform.Microsoft.Shadow(color=#eeeeee,direction=270,strength=6);
}
</style>
其中:color是投影的颜色,direction是顺时针的角度值,strength是投影的大小值。

前端开发必备技能之CSS布局方法

我们都知道一个网页或者是整个网站,肯定包含多个DIV或者其它HTML对象,如果你想让你网页看起来更美观,那么你就要对页面所有的对象进行布局。网页布局难么?新手该如何去布局?什么样的布局能够真正吸引用户的眼球?下面就带着这些问题开始今天的话题CSS布局方法。

从CSS参考手册可以看出,CSS布局(Layout)语法主要有display、float、clear、visibility、clip、overflow、overflow-x、overflow-y(其中后两个是CSS3新添加)8个属性,供开发者们在实际项目中使用。这些属性各自的作用范围都不同,因此,在布局的时候可以单独的使用某一个属性,也可以多个组合使用,具体要如何选,要看项目的需求和个人喜好。这8个属性的具体介绍和使用方法如下。

display(显示控制)

该属性主要作用是设置或检索指定对象是否以及如何显示,其取值主要有:none、inline block、list-item。none:隐藏对象,与visibility属性的hidden值不同,其不为被隐藏的对象保留其物理空间,inline: 指定对象为内联元素。block: 指定对象为块元素。 list-item: 指定对象为列表项目。inline-block: 指定对象为内联块元素。

float(浮动控制)

标准的HTML语法一般都是从上到下显示每一个对象,如果你想对此作出改变可以使用float属性,该属性主要是对对象进行浮动设置,何为浮动?以我的理解就是,让对象从左到右显示,或者是从右到左,而不是标准的文档结构从上到下显示。该属性有none、left、right3个属性值,none:设置对象不浮动、left:设置对象浮在左边、right:设置对象浮在右边,默认值为none。当float语法设置为left时,对象将从左向右显示,直到对象的大小超出显示范围时,从下一行开始从左到右显示对象,取值为right时则完全相反。

clear(清除浮动)

上面的float可以设置对象为浮动,但是如果我不想一个模块内的对象全部设置浮动的时候,就可以使用clear语句,该语句的作用就是使上一个对象设置的float语法不再生效。该语法有4个取值,分别为none、both、right、left,none就是没有的意思,也就是允许对象两边都可以有浮动对象,both意为二者都,选择该取值时也就是说该对象左右两边都不允许浮动。相应的right和left都是只允许左右某一边不能有浮动对象。

visibility(显示控制)

visibility属性主要是设置或检索是否显示对象。与display属性不同,此属性为隐藏的对象保留其占据的物理空间。也就是说,对象显示与否,对象占据的位置不会发生变化。该属性有visible、

hidden、collapse等3个取值。其中visible:设置对象可视,hidden:设置对象隐藏。collapse:主要用来隐藏表格的行或列,隐藏的行或列能够被其他内容使用,对于表格外的其他对象,其作用等同于hidden(IE6及以下不支持此参数值)。

clip(裁剪对象)

检索或设置对象的可视区域。区域外的部分是透明的。必须将position的值设为absolute,此属性方可使用。该属性有:auto和rect(|auto |auto |auto |auto)
两个属性值,auto表示对象无剪切,rect则依据上-右-下-左的顺序提供自对象左上角为(0,0)坐标计算的四个偏移数值,其中任一数值都可用auto替换,即此边不剪切。使用clip属性,可以裁剪对象大小。

具体示例:clip:rect(auto 50px 20px auto);

示例说明:对象上边不剪切,右边从第50个像素开始剪切直至最右边,下边从第20个像素开始剪切直至最底部,左边不剪切。

补充说明:IE7及以下浏览器只支持rect()的方式,其它浏览器还支持rect(,,,)加逗号的方式。

overflow(裁剪对象)

overflow属性主要是检索或设置当对象要显示的内容超过其指定高度及宽度时如何管理内容。该属性有visible、hidden、scroll、auto四属性值。

取值说明
visible:不剪切内容。
hidden:将超出对象尺寸的内容进行裁剪,将不出现滚动条。
scroll:将超出对象尺寸的内容进行裁剪,并以滚动条的方式显示超出的内容。
auto:在需要时剪切内容并添加滚动条,此为body对象和textarea的默认值。

overflow-x、overflow-y(裁剪超出宽度和高度)

这两个属性就是对overflow的分解,主是作用是检索或设置当对象的内容超过其指定宽度或高度时如何管理内容。这两个属性同样有visible、hidden、scroll、auto四属性值。

以上就是有关布局的所有CSS属性以及属性取值说明,网站开发或者网站改版的时候,可能会用到这些属性,没有学过用过,或者是不熟悉的朋友都来看看吧。

前端技术之如何网页中使用CSS样式表

CSS英文全称Cascading Style Sheet,中文翻译为:层叠样式表单。是用于增强控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。 是网站前端开发必备的技术。CSS/DIV布局设计已经完全替代过去的table布局,并被纳入W3C标准。作为一名前端开发人员或者即将踏入前端开发行业的你是否熟练掌握这一技能,能够熟练运用CSS进行网页设计呢?不管你熟练或者不熟练请先来看看下文,我将给大家简短的介绍如何在前端网页开发中使用CSS技术。

目前,你可以用以下三种方式将样式表加入您的网页。而最接近目标的样式定义优先权越高。高优先权样式将继承低优先权样式的未重叠定义但覆盖重叠的定义。

1、外部调用样式表文件

你可以先建立外部样式表文件(xxx.css),然后通过HTML的link方法,将其链接到要使用到的网页。示例如下:
<head>
<title>the title</title>
<link rel=stylesheet href=”xxx.css” type=”text/css”>
</head>

请记住,使用这种方法一定要注意引用路径问题,引用路径出错样式表文件就不会作用于当前网页。如果外部引入的CSS文件非常大,可能会影响到网页的加载速度,这时候如果你比较精通CSS的话,可以对样式文件进行精简瘦身,也可以使用压缩工具来压缩CSS文件。压缩工具网站上有,有兴趣的朋友可以上网上去搜一搜。

2、内部定义样式文件

你也可以在当前网页的头部文件<head></head>之间插入<style>…</style>块对象。定义方式请参阅样式表语法。示例如下:
<head>
<style type=”text/css”>
body {font:14px “Arial”}
h1{size:100%;color:#eee}
a{color:#333;text-decoration:none}
p{font:12px “宋体”;color: black}
</style>
</head>

请注意,这里将style对象的type属性设置为”text/css”,是允许不支持这类型的浏览器忽略样式表单。通常是都要写全的,如果不加上可能会发生意外错误。

3、HTML对象元素内部定义CSS样式

内部定义即是在对象的标记内使用对象的style属性定义适用其的样式表属性。内部定义样式表语法:<element style=”property: value”></element>。参数说明:element——HTML对象;property:value——样式表定义属性和属性值之间用冒号(:)隔开、定义之间用分号(;)隔开。示例文件如下:
<body>
<p style=”font-size:12px “Verdana”;color:red”>xxxooo</p>
</body>

以上三种样式表的优先级是:内嵌样式表>内部样式表>外部样式表。当然优先级高的并不一定代表是最好的,在实际开发过程中我们可以灵活来运用,如果你一定要问我哪种方法用得最多,我会告诉你是前面两种。

用css在容器之前或者之后添加内容

在a标签的容器之后添加逗号:

a:after { content:” ,”; }

在a标签的容器之前添加逗号:

a:before { content:” ,”; }