CSS
1.内联样式表
<p style="color:red;size="12px"> Contents </>
2.嵌入式样式表
<style>
/* explaination */
p{
color:red;
Font-Size=4cm;
}
</style>
<body> </body>
3.外部样式表 适用于多个文档 .CSS
css file
p{
color:red;
Font-Size=4cm;
}
include it :
<link rel="stylesheet" type="text/css" href="css/login.css"/>
4.可以连接多种CSS表
A.CSS FILE 中 使用 @import url(css_file.css);
5.CSS样式选择器
.cls1{
color:red;//所有的cls1都设为red
}
<p class="cls1">aaaa</p>
<p class="cls2">bbbb</p>
<b class="cls1">bbb</p>
<c class="cls1">fjewi</p>
6.ID 选择器 //ID 只有一个唯一，的跟class不一样
#id1{
color:red;
}
<p id="id1">fjwejfoewi</p>
<p id="id2">fjwel</p>
7.关联选择器
<style>
div #one.two p{
color:red;
font-size:3cm;
}
</style>
<div>
<div id="one>
<div class="two">
<p> jfowejfowejfjweofjweoifjweoijf</p>
</div>
<div>
8.CSS 为元素选择器
指同一个元素在不同的状态下的一种定义方式：
a link 鼠标没有任何动作之前
a hover 鼠标放上去的之后
a active 鼠标选中的时候
a visited 鼠标访问过得时候
-------------------------------
<style>
a:link{colro:red;}
a:hover{color:green;}
a:active{color:blue;}
a.one:link{color:red;}
</style>
<body>
<a href="www.baidu.com" > Button </a>
<a class="one" href="www.baidu.com>Button</a>
</body>
9.CSS value
body{
background-color:green; //yes like itself
backgroung-image:url{image_filename.jpg};
background-repeat:no repeat;
background-repeat:attachment:
background-position:center
}
All pictures in one pic and you load one part of the pic
<style>
width:80px;
height:20px;
background:url(back.png) no-repeat 190px 200px;//add pic into one
border-style:sollid
</style>
10.<span> </span> 默认不换行，局部使用
<div></div>默认换行，定义一个大块
两者都是无意义的标签，非常有意思
11.Box Model
一个DIV标签就是代表一个BOX
12.
height:50%;
position:absolution;
-------------------
position:relative;
模拟动画的效果
z-index
float 浮动性
-----------------------------------
CSS Example
