css常用样式
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 属性。
