HTML-CSS
1.CSS背景
#box{width:300px;height:300px;background-color:#333; background-image:url(img/img.gif); background-repeat:no-repeat; background-position:-20px -30px; border:10px solid red;}
/*
background 背景
background-color 背景颜色
background-image 背景图片 url(图片路径)
background-repeat 背景平铺
repeat 平铺
no-repeat不平铺
repeat-x 水平平铺
repeat-y 垂直平铺
background-position 背景图定位
关键字
x: left 图的左侧和元素的左侧对齐
center 图的中间和元素的中间对齐
right 图的右侧和元素的右侧对齐
y: top 图的顶部和顶部的左侧对齐
center 图的中间和元素的中间对齐
bottom 图的底部和元素的底部对齐
具体值
x: 正值从左向右移动,负值从右向左移动
y: 正值从下向上移动,负值从上向下移动
*/
2.字体
#box{width:300px;border:1px solid #000; font:14px "宋体";}
/*
font
font-size 文字大小
font-weight 文字加粗(bold加粗/normal正常)
font-style 文字倾斜(italic倾斜/normal正常)
line-height 行高 （文字在一行上下居中）
font-family 字体
-------------------------------------
font:font-weight font-style font-size/line-height font-family;
font:font-size font-family(必须要写)
*/
#box{width:300px;border:1px solid #000; font:14px/30px Arial,"宋体"; color:red; word-spacing:10px;}
/*
color 文字颜色
text-indent 首行缩进 (1em=1个文字大小)
text-align 文本对齐方式(left/center/right)
text-decoration 文本修饰(underline下划线/line-through 删除线/overline 上划线/none)
letter-spacing 字母间距(字间距)
*/
3.填充
#box{width:100px;height:100px;background:red;border:10px solid #000; padding:20px 50px 80px 100px;}
#div{width:100px;height:100px;background:blue;}
/*
padding 内填充(padding在元素的边框以内，内容之外，padding同样显示元素的背景)
padding-top
padding-right
padding-bottom
padding-left
可视宽(高):可视宽(高)=border+padding+width(height);
*/
4.边距
#box{width:200px;height:200px;background:Red;border:10px solid #000; margin:30px;}
#div{width:200px;height:200px;background:blue;border:10px solid #ccc; margin:40px;}
/*
margin 外边距(margin元素的边框之外不显示元素背景)
margin:10px 20px;
margin:10px 20px 40px;
margin:10px 20px 40px 60px;
margin-top
margin-right
margin-bottom
margin-left
margin叠加相邻两个元素的上下margin是叠加在一起
*/
/*
margin传递，子元素的上下margin会传递给父级
*/
5.超链接
<a href="http://www.baidu.com">百度</a>
<!--
a 链接
href 页面地址的话 (跳转页面)
-->
<a href="1_标签.rar">百度</a>
<!--
a 链接
压缩包（下载）
-->
<a href="#div1">div1</a>
<a href="#div2">div2</a>
<a href="#div3">div3</a>
<a href="http://www.sohu.com/#sogou-search">搜狐</a>
<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</div>
<!--
href 写的是个id的话，点击之后会直接跳转到id所在的位置 锚点
-->
<a href="http://www.baidu.com" >百度</a>
<a href="http://www.qq.com" target="_blank">qq</a>
<!--
target="_blank" 新窗口打开
target="_self" 当前窗口打开
-->
6.标签
<body>
<h1>标题</h1>
<h2>标题</h2>
<h3>标题</h3>
<h4>标题</h4>
<h5>标题</h5>
<h6>标题</h6>
<nav>导航</nav>
<header></header>
<section>
<header></header>
<footer></footer>
</section>
<footer></footer>
</body>
<body>
<p>2015年3月24日，<strong>四川成都文殊院</strong>在玄奘法师圆寂日当天隆重举行2015年玄奘法师舍利瞻仰法会。法会于上午9时开始，恭请文殊院座元智海法师主法，常住法师、<em>空林佛学院</em>学僧及信众集体诵经，纪念玄奘法师的伟大一生。稍后，信众排队进入藏经楼，瞻仰玄奘法师舍利。</p>
</body>
/* strong变粗 em变斜 */
<ul>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ul>
<ol>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ol>
/* ul无序列表 ol有序列表 */
<body>
<dl>
<dt>计算机</dt>
<dd>用来计算的仪器 ... ...</dd>
<dt>显示器</dt>
<dd>以视觉方式显示信息的装置 ... ...</dd>
</dl>
<time>时间</time>
</body>
<body>
<img src="pAnw-cczmvun7159040.jpg" />
<img src="img/pic/img.jpg" />
<!--
绝对路径 (xx区xx路xx号)
-线上的绝对路径
-线下
相对路径
-->
</body>
7.选择器
<style>
#box{width:100px;height:100px;background:red;}
</style>
</head>
<body>
<div id="box"></div>
</body>
/* id */
<style>
div{width:100px;height:100px;background:Red;}
</style>
<div class="box">div1</div>
/*
类型选择
*/
<style>
.box{ border:10px solid #000;}
</style>
</head>
<body>
<div class="box">div1</div>
<p class="box box2">div2</p>
/* 可以有多个class */
<style>
#box p{width:100px;height:100px;background:red;}
/*
包含选择器
*/
</style>
</head>
<body>
<div id="box">
<p>p1</p>
</div>
<p>p2</p>
</body>
<style>
div,span{ font:30px/50px "宋体"; color:red;width:100px;height:100px;background:blue;}
/*
群组选择
*/
</style>
</head>
<body>
<div>div1</div>
<div>div2</div>
<span>span1</span>
<span>span2</span>
</body>
<style>
*{color:red; font:20px/30px "宋体";}
/*
* 通配符 代表所有的标签
*/
</style>
选择器都优先级
/*
选择器的优先级一致的情况下，后边的样式会覆盖前边的
行间样式>id>class>类型选择>通配符
*/