css常用样式

标签：lin   parent   属性   ==   expr   单元格   auto   die   shadow   

box-shadow

Chrome和Safari 写成-webkit-box-shadow的形式。Firefox浏览器则需要写成-moz-box-shadow的形式。

.box-shadow-6{  
    box-shadow:-10px 0 10px red, /*左边阴影*/  
    10px 0 10px yellow, /*右边阴影*/  
    0 -10px 10px blue, /*顶部阴影*/  
    0 10px 10px green; /*底边阴影*/  
}

根据input的type来控制css样式

1.用css中的type选择器

input[type="text"]{ }

2.用css的expression判断表达式

input{ background-color:expression(this.type=="text"?‘#FFC‘:‘‘);}

 css强制性换行

div{
  word-break:break-all; /*支持IE，chrome，FF不支持*/
  word-wrap:break-word;/*支持IE，chrome，FF*/
}

 CSS :first-child 选择器,:last-child选择器,nth-child(IE7,8无效，不识别)

:nth-child(2)选取第几个标签，“2可以是你想要的数字”
:nth-child(2n)选取偶数标签，2n也可以是even
:nth-child(2n-1)选取奇数标签，2n-1可以是odd
:nth-child(3n+1)自定义选取标签，3n+1表示“隔二取一”

 css3实现背景颜色渐变

background:-webkit-linear-gradient(top,#FFF,#cb1919);
background:-o-linear-gradient(top,#FFF,#cb1919);
background:-ms-linear-gradient(top,#FFF,#cb1919);
background:-moz-linear-gradient(top,#FFF,#cb1919);
background:linear-gradient(top,#FFF,#cb1919);

第一个参数：设置渐变的起始位置。第二个参数：设置起始位置的颜色。第三个参数：设置终止位置的颜色

媒体查询功能

@media screen and (max-width: 960px){
    body{
        background: #000;
    }
}

实现三角形 

div{
  position:absolute;
  left:50%;
  bottom:0;
  margin-left:-10px;
  width:0;
  height:0; 
  border-width:10px;
  border-style:solid dashed dashed dashed;
  border-color:transparent transparent #71151c transparent;
}

 css3水平垂直居中

div{
  display: box; 
  display: -webkit-box; 
  display: -moz-box; 
  -webkit-box-pack:center; 
  -moz-box-pack:center; 
  -webkit-box-align:center; 
  -moz-box-align:center; 
}

样式改变单词的大小写

首字母大写：text-transform:capitalize

全部大写：text-transform:uppercase

全部小写：text-transform:lowercasecase

<span style="text-transform:capitalize;" >this is a test!!!</span>

首字母大写<inputtype="text"style="text-transform:capitalize;">

全部大写<inputtype="text"style="text-transform:uppercase;">

全部小写<inputtype="text"style="text-transform:lowercasecase;">

表格语法

<table aling=left>...</table>表格位置,置左

<table aling=center>...</table>表格位置,置中

<table background=图片路径>...</table>背景图片的URL=就是路径网址

<table border=边框大小>...</table>设定表格边框大小(使用数字)

<table bgcolor=颜色码>...</table>设定表格的背景颜色

<table borderclor=颜色码>...</table>设定表格边框的颜色

<table borderclordark=颜色码>...</table>设定表格暗边框的颜色

<table borderclorlight=颜色码>...</table>设定表格亮边框的颜色

<table cellpadding=参数>...</table>指定内容与格线之间的间距(使用数字)

<table cellspacing=参数>...</table>指定格线与格线之间的距离(使用数字)

<table cols=参数>...</table>指定表格的栏数

<table frame=参数>...</table>设定表格外框线的显示方式

<table width=宽度>...</table>指定表格的宽度大小(使用数字)

<table height=高度>...</table>指定表格的高度大小(使用数字)

<td colspan=参数>...</td>指定储存格合并栏的栏数(使用数字)

<td rowspan=参数>...</td>指定储存格合并列的列数(使用数字)

设置表格中的td宽度固定table-layout:fixed

语法：table-layout:automatic | fixed | inherit

 automatic：默认。列宽度由单元格内容设定。

fixed：列宽由表格宽度和列宽度设定。

inherit：规定应该从父元素继承 table-layout 属性的值。

合并表格边框border-collapse:collapse

语法：border-collapse:separate | collapse | inherit

 separate：默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性。

collapse：如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。

css常用样式

标签：lin   parent   属性   ==   expr   单元格   auto   die   shadow   

原文地址：http://www.cnblogs.com/yxcoding/p/7429506.html