标签：
1、行内样式，直接在标签内写css控制命令
<div style='width:100px;height:100px;border:1px solid #ccc;'></div>
2、内部样式，在head中间插入
<style type='text/css'> /*这里写css控制命令*/ </style>3、引入样式，在head中间插入
<link rel='stylesheet' href='css路径'/>4、导入样式，一个css文件中导入另一个css，第一个css文件用link引入到页面
导入方法:
@import url(需要导入的css路径.css);
div{
width:100px; //宽
height:100px; //高
border:1px solid #ccc; //边框复合样式
}
/*
border-width: 3px; //边框宽度
border-style: solid; //边框样式 1、solid实线2、dashed虚线3、dotted点线(ie6不兼容)
border-color: #ccc; //边框颜色
//边框控制
border-top:1px solid #f00; //单独控制上边框样式
border-right: 1px solid #0f0; //单独控制右边框样式
border-bottom: 1px solid #00f; //单独控制下边框样式
border-left: 1px solid #000; //单独控制左边框样式
*/
div{
background-color: #aaa; //背景颜色
background-image: url(1.gif); //背景图片
background:url(1.gif)no-repeat center center #ccc; //背景的复合样式
}
/*
background-repeat //背景平铺
background-repeat:repeat; //平铺（默认就是平铺）
background-repeat:no-repeat; //不平铺
background-repeat:;repeat-x //水平方向平铺
background-repeat:repeat-y; //垂直方向平铺
background-position //背景图定位
background-position:center center;//第一个值是x轴，第二个值为y轴
方位词控制位置：
x轴
left 图的左侧和元素的左侧对齐
center 图的中间和元素的中间对齐
right 图的右侧和元素的右侧对齐
y轴
top 图的顶部和顶部的左侧对齐
center 图的中间和元素的中间对齐
bottom 图的底部和元素的底部对齐
百分比控制位置：
background-position:50% 50%;//第一个值是x轴，第二个值为y轴
具体值(像素)控制位置：
background-position:10px 20px; //第一个值是x轴，第二个值为y轴
//给body背景图片加上fixed，拖动滚动条也还是能看到背景
background: url(1.gif)no-repeat center 100px fixed;
*/
padding:内填充(padding在元素的边框以内，内容之外，padding同样显示元素的背景。相当于给一个盒子添加了厚度，影响盒子实际大小)
padding-top:上填充; padding-right:右填充; padding-bottom:下填充; padding-left:左填充; padding:10px; //上右下左padding都为10 padding:10px 20px; //第一个值代表上下padding为10，第二个值代表右左padding为20 padding:10px 20px 30px;//第一个值代表上padding为10，第二个值代表右左padding为20，第三个代表下padding为30 padding:10px 20px 30px 40px;//10为上，20为右，30为下，40为左 //可视宽(高):可视宽(高)=border+padding+width(height);
margin 外边距(margin元素的边框之外不显示元素背景) margin叠加相邻两个元素的上下margin是叠加在一起，取最大值，不是相加 margin传递，子元素的上margin会传递给父级 行内元素的margin值，只有左右，没有上下的值 //尽量使用内边距，来达到使用外边距所要达到的要求
盒子大小：border+padding+width/height 盒子宽度：左border+左padding+右border+右padding 盒子高度：上border+上padding+下border+下padding
//文字 font-size 文字大小 font-weight 文字着重(bold加粗/normal正常) font-style 文字倾斜(italic倾斜/normal正常) font-family 字体 line-height 行高 （文字在一行上下居中） color 文字颜色 //在网页中字体最小设置12px,设置字体大小用偶数，不要出现奇数。默认字体为宋体。 //文本 text-indent 首行缩进 (1em=1个文字大小) text-align 文本对齐方式(left/center/right) text-decoration 文本修饰(underline下划线/line-through 删除线/overline 上划线/none) letter-spacing 字母间距(字间距) word-spacing单词间距（两个字之间有空格就会解析为是单词）
<img src="图片路径" alt=“占位符” title="描述图片" /><!--插入图片--> //占位符:图片没能加载成功时候显示占位符 //描述图片:鼠标移动到图片上显示的内容
<a href='http://www.baidu.com'>百度</a> //href中是网址的话就实现跳转
<a href='1.pptx'>下载</a> //是文件的话就是下载
<a href='#box1'>跳转到box1的位置</a> //是id的话就是锚点
//锚点:在目标地址起个id名，点击那里想跳转到目标地址就在哪里添加a链接，链接地址为#加id名。（做回到顶部等等功能）
target="_blank" //新窗口打开
target="_self" //当前窗口打开
//head之间加入<base target="_blank" />定义页面中所有连接打开方式
伪类选择器:同一个html元素在不同状态下的不同样式
ie6不支持a以外任何标签的伪类;
ie6以上的浏览器支持所有标签的hover伪类;
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 当有鼠标悬停在链接上 */
a:active {color: #0000FF} /* 被选择的链接 */
h1-h6:标题 p:段落 ol有序列表 <ol> <li>有序列表</li> <li>有序列表</li> </ol> ul无序列表 <ul> <li>无序列表</li> <li>无序列表</li> </ul> dl定义列表 <dl> <dt>定义列表标题</dt> <dd>定义列表项</dd> </dl>
strong:文字加粗(称为强调标签) em:斜体（强调语气没strong重） span：区分样式
Id选择器
Class选择器
标签选择器
交叉选择器p.abc{} 表示控制class名为abc的p标签
子代选择器p span{} 表示控制p里面的span
群组选择器 用，分开比如 p,#aa,.cc{}表示控制p标签以及id为aa跟class为cc
通用选择器*{}
样式优先级：
默认<类型<class<id<style(行间)<!important
!important使用方法：
在需要提升优先级的样式后面添加
bakcground-color:#ccc!important;
body,p,h1,h2,h3,h4,h5,h6,dl,dd{margin:0;font-size:12px;}
ol,ul{list-style:none;padding:0;margin:0;}
a{text-decoration:none;}
img{border:none;}
input{outline:none} /* 去除焦点线 */
textarea{resize:none;} /* 不允许用户改变文本域大小 */
块级元素： 1、默认独占一行显示 2、宽度默认撑满一排 3、支持css所有设置 内联元素： 1、不支持宽高 2、内容撑开宽度 3、默认同行可以继续跟同类型标签 4、不支持上下的margin和padding 5、代码换行被解析 行内块级标签： 1、能待在一行 2、能设置宽高 3、没有宽度的时候内容撑开宽度 4、代码换行被解析 5、ie6 ie7不支持块属性标签的inline-block //常见的inline-block标签有img、表单标签 元素转换： display：inline(转为行内元素) display：block(转为块级元素) display:inline-block(转为行内块级元素)
Display:none隐藏 Display:block显示 Visibility:hidden;让元素隐藏，但是只隐藏内容，位置还被占着。 Visibility:visible让元素为显示状态
cursor 指针样式(规定要显示的光标类型) cursor:pointer(手型)、text(文本I)、move(拖动)、crosshair(十字形)、wait(加载转圈) cursor:url(1.cur),pointer; //自定义鼠标形状，后面跟一个手型的图标，自定义出错就能用后面的图标... 两张图片如果有距离，可能是代码中的空格字符照成的 编码： 分为两部分 1、代码指定的编码 2、页面文件内置的编码 两个需要编码一致才不会乱码 轮播图中间的圆圈是用ul写的，设置li宽高，然后定位浮动。 在加上border-radius：50%；就能变圆了 min-width:960px;最小宽度(设置在body中) 网址栏小图标制作：在head中引入<link rel="icon" href="2.ico"/> 图片格式.ico可在网上在线制作
1、所有书写均在英文半角状态下的小写； 2、id，class必须以字母开头； 3、所有标签必须闭合； 4、html标签用tab键缩进； 5、属性值必须带引号； 6、<!-- html注释 --> //需要注释的话前后需要加空格 7、/* css注释 */ //需要注释的话前后需要加空格 8、ul,li/ol,li/dl,dt,dd拥有父子级关系的标签； 9、p,dt,h标签 里面不能嵌套块属性标签； 10、a标签不能嵌套a； 11、内联元素不能嵌套块； //w3c规范，实际上不会出什么问题
标签：
原文地址：http://blog.csdn.net/qq847842730/article/details/51371430
