CSS常用标签.txt
//------------------------------------------------------------
//------------------------渐变颜色----------------------------
background:linear-gradient(渐变方向，起点颜色，终点颜色)
例：
background:linear-gradient(top,#fafafa,#eeeeee);
兼容添加
background:-webkit-linear-gradient(top,#fafafa,#eeeeee);
background:-webkit-gradient(top,#fafafa,#eeeeee);
//------------------------------------------------------------
//-------------------------三角形-----------------------------
border-top:10px solid transparent;
transparent 透明的
//------------------------------------------------------------
//-----------------------百分之百宽度问题--------------------
设置了百分之百宽度，最好再设置最小宽度，防止浏览器缩小
滑动时右边有空白。
//------------------------------------------------------------
//-------------------------流式布局---------------------------
控制图片宽度可使图片动态大小
用表格布局，让表格的宽度为100%，否则表格右边有空隙，
再让表格内的图片100%，这样图片就占满了表格。
//------------------------------------------------------------
//------------------------------------------------------------
@font-face {}这玩意导入字体用的
//-------------------------设置网站图标----------------------
//------------------------------------------------------------
<link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" media="screen" />
//------------------------------------------------------------
//------------------------opacity-----------------------------
让 DIV 元素半透明：
number规定不透明度。从 0.0 （完全透明）到 1.0（完全不透明）。
initial设置该属性为它的默认值。
inherit从父元素继承该属性。
document.getElementById("myDIV").style.opacity="0.5";
//------------------------------------------------------------
//-----------------------使div成为输入框---------------------
contenteditable="true"
在任何一个块级标签中加入此属性可变为输入框
//------------------------------------------------------------
//-------------------------position---------------------------
子级的 position 是相对于父级的 position 定位的
不写left等值则元素不动，可用z-index调整显示层顺序
js中的写法
xx.style.zIndex = '';
//------------------------------------------------------------
//------------------------不缓存------------------------------
<meta http-equiv="Pragma" content="no-cache">
禁止浏览器从本地机的缓存中调阅页面内容，设定后一旦离开网页
就无法从Cache中再调出；
<meta http-equiv="cache-control" content="no-cache">
常见值：private、no-cache、max-age、must-revalidate
在地址栏回车 值为private或must-revalidate则只有第一次访问时
会访问服务器，以后就不再访问。 值为no-cache，那么每次都会
访问。 值为max-age，则在过期之前不会重复访问。
按后退按扭 值为private、must-revalidate、max-age，则不会重
访问， 值为no-cache，则每次都重复访问
过期时间，0表示立即过期
<meta http-equiv="expires" content="0">
示例：
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-store, no-cache, must-revalidate, post-check=0, pre-check=0">
<meta http-equiv="Expires" content="0">
http://blog.sina.com.cn/s/blog_9c7ba64d01012vn2.html
//------------------------------------------------------------
//----------------------屏幕自适应设计-----------------------
加入如下代码使屏幕自适应
<meta name="viewport" content="width=device-width, initial-scale=1">
//检测屏幕切换样式表
//方法一：连接样式表
<link media="screen and (min-width:0px) and (max-width:300px)" rel="stylesheet" href="css2.css" />
//方法二：外部导入样式表
<style type="text/css">
@media all and (min-width:300px) and (max-width:600px){div{}}
@media all and (min-width:601px) and (max-width:900px){div{}}
</style>
//-------------------------清除浮动---------------------------
//------------------------------------------------------------
float:left;
clear:both;
当上一个元素使用浮动的情况下，下面的元素会挤掉上面元
素的空间，这时在下面的元素加上clear:both;元素就可让出
被下面挤掉的空间。
vertical-align:middle;不管用
cursor:pointer;将鼠标样式改变为手点击型
resize:none;文本域不可调整大小
outline:0;可去掉输入框输入时的阴影边框
word-break:break-all;自动换行，单词强行换行
word-wrap:break-word;自动换行，单词不换行
====================================================================
/*
@font-face{font-family:"楷体";src:url("simkai.ttf");}外部导入字体
font-family:Arial,Courier New,"楷体";
font-size:12px;
font-weight:bold;
font-style:italic;
font-variant:small-caps;小型的大写字母
font-stretch:wider; /*font crosswise wider*/
color:#AAAAAA;
letter-spacing:10px;
word-spacing:10px;
word-wrap:break-word;文字外围
white-space:nowrap;
text-overflow:ellipsis;
text-decoration:none;
text-align:center;
text-indent:18px;
letter-spacing:5px;/*文字间距*/
text-transform:capitalize;/* The first letter is big write*/
text-shadow:5px 5px 5px red;
text-fill-color:yellow;
-webkit-text-fill-color:yellow;
text-stroke:2px red;文字描边
-webkit-text-stroke:2px red;
line-height:30px;
list-style-type:none;
margin:5px 5px 5px 5px;
padding:5px 5px 5px 5px;
border:1px solid red;
border-radius:10px;
border-shadow:5px 2px 6px #111111;
box-shadow:3px 3px 3px 3px grey;
-webkit-box-shadow:3px 3px 3px 3px grey;
//倒影
-webkit-box-reflect:below 0 -webkit-linear-gradient(transparent,transparent 50%,rgba(255,255,255,.3));
position:absolute;
position:relative;
position:fixed;
overflow:hidden;
display:block;
visibility:hidden;/*all hidden*/
outline:red double 2px;
opacity:0.5;
background:rgba(120,120,120,0.5);
background:url("editor.gif") no-repeat -20px -40px;
background:url("") no-repeat,url('') no-repeat 400px 0px, url('') no-repeat 600px;
a:link
a:visited
a:hover
a:active
*/
■外部连接■:1. <link rel="stylesheet" href="css.css" type="text/css" />
2. <style type="text/css">
<!--
@import url(screen.css) screen;
@import url(print.css) print;
-->
</style>
■内部连接■:<STYLE type=text/css></STYLE>
====================================================================
=========================区块与内联的区别==========================
区块和内联的区别：
区块：区块占一整行
区块的共同属性：
width
heiht
最大宽度与最小宽度的用法：给区块指定最大宽度与
最小宽度时，区块的最大宽度与最小宽度是固定的，
不会随内容改变。用作自适应。
min-height区块最小宽度
max-height区块最大宽度
min-width区块最小宽度
max-width区块最大宽度
====================================================================
==========================字体属性=================================
■简写方式：
font:italic normal bold 12px/30px '黑体';
■字体：font-family:"宋体";
■字号：font-size:12px;
|smaller相对大小
|larger
■斜体显示：
font-style:
normal默认值
italic斜体
oblique倾斜
■粗体：font-weight:
|normal正常
|bolder特粗
bold粗体
■小型的大写：
font-variant:
normal默认
small-caps小型的大写
■字体横向拉伸变形
font-stretch:
narrower宽度变小
wider宽度更大
■字体颜色：color:#000000;
====================================================================
==========================文本属性=================================
■文本溢出：
text-overflow:
ellipsis显示 ...
clip不显示 ...
■字符间隔：letter-spacing:normal;
■文字线条修饰：
text-decoration:
text-decoration-color:
text-decoration-style:
|none不修饰去掉下划线
|underline添加下划线
|overline添加上划线
|line-through添加删除线
|blink文字闪烁效果（有限制）
■纵向排列：vertical-align:
|text-bottom元素和上级元素的字体对齐
|bottom使元素和行中最低的元素向下对齐
|middle纵向对齐元素基线加上上级元素的x高度的一半的中点，其中x高度是字母“X”的高度
|text-top使元素和上级元素的字体向上对齐
|top使元素和行中最高的元素向上对齐
|super为上标
|sub作为下标
|baseline使元素和上级元素的基线对齐
■文本转换：text-transform:
|capitalize第一个字母大写
|uppercase每个单词的所有字母大写
|lowercase每个字的所有字母小写
|none表示使用原始值
■文本排列：
text-align:
|left
|right
|center
|justify为两端对齐
■文本缩进：text-indent:18px;
■文本行高：line-height:18px;
■处理空白：white-space:
|pre换行和空白都显示
|nowrap不显示换行和空白
■文本反排：
unicode-bidi:
|normal
|bidi-override
|embed;
|bidi-override表示严格按照direction属性的值重排序，忽略隐式双向运算规则
|embed表示对象打开附加的嵌入direction属性的值重排序，忽略隐式双向运算规则指定给嵌入层，在对象内部进行隐式重排序。
■文字的描边：
text-stroke
text-stroke-width:
text-stroke-color:
-webkit-text-stroke:5px red;兼容写法
■文字填充颜色
text-fill-color
-webkit-text-fill-color:yellow;兼容写法两条同加
■垂直对其方式
vertical-align
■溢出边界处理，是否换行
word-wrap
normal默认值。允许内容顶开指定的容器边界
break-word内容将在边界内换行
■单词间隔
word-spacing:
2;单词之间空格数
10px像素个数
■文字之间的间隔
letter-spacing
■空格的处理
white-space
normal默认处理方式。文本自动处理换行
pre换行和其他空白字符都将受到保护
nowrap强制在同一行内显示所有文本
■文本流的方向
direction:
|ltr表示从左到右的阅读顺序
|rtl表示从右到左的阅读顺序
|inherit表示文本流的值不可继承
■文字阴影
text-shadow:5px 5px 5px red;
====================================================================
==========================边距与填充属性===========================
■边距：margin复合属性
margin-top:12px;
margin-bottom:12px;
margin-left:12px;
margin-right:12px;
■衬距,填充：padding复合属性
padding-bottom:12px;
padding-left:12px;
padding-right:12px;
padding-top:12px;
====================================================================
==========================边框属性=================================
■设置的颜色：
border-bottom-color:#000000;
border-top-color:#000000;
border-right-color:#000000;
border-left-color:#000000;
■设置边框宽度：
border-bottom-width:12px;
border-right-width:12px;
border-top-width:12px;
border-left-width:12px;
■设置边框高度：
border-bottom-style:
border-top-style:
border-right-style:
border-left-style:
共有属性
|outset整个方框凸陷，即在边框内嵌入一个立体边框
|inset整个方框凹陷，即在边框内嵌入一个立体边框
|ridge边框成脊形|groove边框带有立体感的沟槽
|double双实线
|solid实线
|dashed虚线，短线
|dotted点线
|none不显示边框
■边框圆角：
border-radius:4%;(4px)
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius
border-top-left-radius
■边框阴影：
box-shadow
5px 2px 6px #111111;
水平偏移值(正负) 垂直偏移值(正负) 阴影模糊值 阴影颜色
border-width设置或检索对象边框宽度
border-style设置或检索对象边框样式
border-color设置或检索对象边框颜色
border-radius边框圆角设置
box-shadow盒子阴影设置
border-image边框图像
box-reflect倒影
-webkit-box-reflect:below 0 -webkit-linear-gradient(transparent,transparent 50%,rgba(255,255,255,.3));
none：无倒影
above：指定倒影在对象的上边
below：指定倒影在对象的下边
left：指定倒影在对象的左边
right：指定倒影在对象的右边
====================================================================
==========================定位及尺寸属性===========================
■定位方式：
position:
|static默认值，无法定位
|absolute(绝对的)相对于父级元素的绝对定位
元素脱离文档流
|fixed(确定的)相对于浏览器窗口的绝对定位
|relative(相对的)*相对定位
文件仍在文档流中
|inherit(继承)继承父元素position属性的值
共有属性：
|top
|right
|left
|bottom
|z-index:3调解层顺序，数字越大越在最上层
====================================================================
====================================================================
■可视区域：clip: rect(auto, auto, auto, auto)|rect('top', 'right', 'bottom', 'left');
|auto对象不剪切
|rect(数值)
■设定大小：height:12px;|width:12px;
■图像符号：list-style-image:none|url(images/index_08.jpg);
|url则使用绝对或相对地址指定作为符号的图像
|none不指定图像
■列表缩进：list-style-position:
|inside列表默认属性，列表项目标记放置在文本以内，且环绕文本根据标记对齐
|outside表示列表项目标记放置在文本以外，且环绕文本不根据标记对齐
■列表符号：list-style-type:
■复合属性：列表
list-style给ul设置padding:0px;去除缩进
list-style-image:url();
list-style-position
outside内部
inside 外部
list-style-type列表点的样式
none没有符号
disc实心圆
circle空心圆
square实心方块
decimal数字
====================================================================
===============================尺寸=================================
height
max-height可设定div的最大高度，不让内容再撑大
min-height
width
max-width
min-width
解决高度为零问题(同时使用)
height:auto;
overflow:hidden;
====================================================================
==============================布局==================================
■清除浮动：
clear:
left
right
both
none
■浮动：
float:
left
right
none
■内容移除处理：
overflow:内容溢出时的设置
overflow-x:水平方向内容溢出时的设置
overflow-y:垂直方向内容溢出时的设置
visible(默认值)
scroll有滚动条
hidden没有滚动条
auto自动
■内联块转换：
display
block转换为块
inline 转换为内联
inline-block
none隐藏对象，脱离文档流
■可见性：
visibility:
inherit继承
visible 可见
hidden隐藏图片，但未脱离文档流
====================================================================
===========================轮廓=====================================
outline:颜色 风格 宽度;
outline-color轮廓颜色
invert使用背景色的反色
outline-width轮廓宽度
medium默认宽度
thin小于默认宽度
thick大于默认宽度
length数子不可为负值
outline-style轮廓样式
|none
|dotted点线外轮廓
|dashed虚线外轮廓
|solid实线外轮廓
|double双线外轮廓
|groove3D凹槽外轮廓
|ridge3D凸槽外轮廓
|inset3D凹边外轮廓
|outset3D凸边外轮廓
====================================================================
==========================光标属性=================================
■光标属性：cursor:url(images/wcj.ico);
====================================================================
==========================背景属性=================================
■简洁书写背景属性
background:颜色 图片 重复 图片移动 定位;
■背景颜色：
background-color:#FF0000;
同background:#FF0000;
同background:rgba(120,120,120,0.5);
■背景图片：
background-image:url(images/index_03.jpg);
■背景重复：
background-repeat:
|no-repeat不重复
|repeat重复
|repeat-xx轴重复
|repeat-yy轴重复
■添加多张背景：
background:url("") no-repeat,url('') no-repeat 400px 0px, url('') no-repeat 600px;
■背景图片大小：
background-size:100px 100px;固定和固定
background-size:100% 100%;百分比和百分比
background-size:auto auto;自动和自动
background-size:auto 100px;自动和固定
background-size:auto 150%;自动和百分比
■调整图片位置
background:url("") no-repeat -140px -60px;
background:url("") center top no-repeat;
■背景相对内容固定：
background-attachment:
|fixed固定在页面上静止不动
|scroll随背景滚动
■背景位置：background-position:50% 50%;50% 50%居中
background-position-x:
background-position-y:
|50% 50%
|-20px 20px;
|center： 背景图像横向和纵向居中。
|left： 背景图像在横向上填充从左边开始。
|right： 背景图像在横向上填充从右边开始。
|top： 背景图像在纵向上填充从顶部开始。
|bottom： 背景图像在纵向上填充从底部开始。
layer-background-color:transparent;
layer-background-image:
|none;
|url();
■背景相对框开始显示的位置：
background-origin:
border-box
padding-box
content-box
■裁剪背景
background-clip
border-box
padding-box
content-box
no-clip
====================================================================
==========================超链接属性===============================
a:link没访问
a:visited正在访问
a:hover鼠标滑过
a:active访问过
共有属性
|none无
|underline增加下划线
|overline增加上划线
|line-through增加删除线
|blink增加闪烁线
====================================================================
==========================滚动条样式===============================
scrollbar-arrow-color: #f4ae21; 三角箭头的颜色
scrollbar-face-color: #333; 立体滚动条的颜色
scrollbar-3dlight-color: #666; 立体滚动条亮边的颜色
scrollbar-highlight- color: #666; 滚动条空白部分的颜色
scrollbar-shadow-color: #999; 立体滚动条阴影的颜色
scrollbar-darkshadow-color: #666; 立体滚动条强阴影的颜色
scrollbar-track-color: #666; 立体滚动条背景颜色
scrollbar-base- color:#f8f8f8; 滚动条的基本颜色
====================================================================
==========================静态滤镜样式=============================
静态滤镜样式 （filter）（只有IE4.0以上支持）
filter:chroma(COLOR=#000000);
chroma对所选择的颜色进行透明处理 color (常用在透明滚动条的颜色)
alpha设置图片或文字的不透明度 opacity、finishOpacity、style、startX、startY、finishX、finishY、add、direction、strength
blur在指定的方向和位置上产生动感模糊效果 add、direction、strength
chroma对所选择的颜色进行透明处理 color
dropShadow在指定的方向和位置上产生阴影 color、offX、offY、positive
flipH沿水平方向翻转对象
flipV沿垂直方向翻转对象
glow在对象周围上发光 color、strength
gray将对象以灰度处理
invert逆转对象颜色
light对对象进行模拟光照
mask对对象生成掩膜 color
shadow沿对象边缘产生阴影 color、direction
wave在垂直方向产生正弦波形 add、freq、lightStrength、phase、strength
xray改变对象颜色深度，并绘制黑白图象
====================================================================
==========================CSS滤镜filter详解========================
语法：STYLE="filter:filtername(fparameter1, fparameter2...)"
（Filtername为滤镜的名称，fparameter1、fparameter2等是滤镜的参数）
滤镜说明：
alpha：设置透明层次
blur：创建高速度移动效果，即模糊效果
chroma：制作专用颜色透明
DropShadow：创建对象的固定影子
FlipH：创建水平镜像图片
FlipV：创建垂直镜像图片
glow：加光辉在附近对象的边外
gray：把图片灰度化
invert：反色
light：创建光源在对象上
mask：创建透明掩膜在对象上
shadow：创建偏移固定影子
wave：波纹效果
Xray：使对象变得像被x光照射一样
1、滤镜：Alpha
语 法：STYLE="filter:Alpha(Opacity=opacity,FinishOpacity=finishopacity，Style= style,StartX=startX，StartY=startY，FinishX=finishX，FinishY=finishY)"
说明：
Opacity：起始值，取值为0～100, 0为透明，100为原图。
FinishOpacity：目标值。
Style：1或2或3
StartX：任意值
StartY：任意值
例子：filter:Alpha(Opacity="0",FinishOpacity="75",Style="2")
2、滤镜：blur
语法：STYLE="filter:Blur(Add = add, Direction = direction, Strength = strength)"
说明：
Add：一般为1，或0。
Direction：角度，0～315度，步长为45度。
Strength：效果增长的数值，一般5即可。
例子：filter:Blur(Add="1",Direction="45",Strength="5")
3、滤镜：Chroma
语法：STYLE="filter:Chroma(Color = color)"
说明：color：#rrggbb格式，任意。
例子：filter:Chroma(Color="#FFFFFF")
4、滤镜：DropShadow
语法：STYLE="filter:DropShadow(Color=color, OffX=offX, OffY=offY, Positive=positive)"
说明：Color:#rrggbb格式，任意。
Offx：X轴偏离值。
Offy：Y轴偏离值。
Positive：1或0。
例子：filter:DropShadow(Color="#6699CC",OffX="5",OffY="5",Positive="1")
5、滤镜：FlipH
语法：STYLE="filter:FlipH"
例子：filter:FlipH
6、滤镜：FlipV
语法：STYLE="filter:FlipV"
例子：filter:FlipV
7、滤镜：glow
语法：STYLE="filter:Glow(Color=color, Strength=strength)"
说明：
Color：发光颜色。
Strength：强度(0－100)
例子：filter:Glow(Color="#6699CC",Strength="5")
8、滤镜：gray
语法：STYLE="filter:Gray"
例子：filter:Gray
9、滤镜：invert
语法：STYLE="filter:Invert"
例子：filter:Invert
10、滤镜：mask
语法：STYLE="filter:Mask(Color=color)"
例子：filter:Mask (Color="#FFFFE0")
11、滤镜：shadow
语法：filter:Shadow(Color=color, Direction=direction)
说明：
Color：#rrggbb格式。
Direction：角度，0－315度，步长为45度。
例子：filter:Shadow (Color="#6699CC", Direction="135")
12、滤镜：wave
语法：filter: Wave(Add=add，Freq=freq，LightStrength=strength，Phase=phase， Strength=strength)
说明：
Add：一般为1，或0。
Freq：变形值。
LightStrength：变形百分比。
Phase：角度变形百分比。
Strength：变形强度。
例子：filter: wave(Add="0", Phase="4", Freq="5", LightStrength="5", Stren