CSS笔记

#overflow用法

   hidden：需要设置宽度和高度才能将溢出部分隐藏；如果外部盒子没有设置宽度和高度，而里面元素是浮动元素，就会被撑开。

   scroll：滚动。

 #border设置

border:5px solid red;

#a标签的各种状态：

 a:hover{color:red;background:gray;}//鼠标放到上面

 a:visted{text-decoration: none;}//已经访问过的

 <a href="javascript:void(0)" onClick="window.open()">//取消链接自动跳转

#z-index

表示z面的高低。

段落<p>的常用style

          text-indent:20px;文本缩进

          text-decoration:line-through;文本划线(underline)

          letter-spacing:20px;文字距离

文字控制：

          color:red;    //文字颜色

          font-style: italic;   //italic斜体，

          font-weight: bold; //

          font-size:12px;      //

          line-height:44px;   //行高

          font-family:"SimHei"   //SimHei黑体

          一行控制完毕：

          font:italic bold 23px/46px "SimHei";  //必须按顺序

背景：

         

          background-image:url(user.png);

          background-repeat:no-repeat;  //水平铺repeat-x;    垂直铺repeat-y; 不填横竖都铺满;no-repeat;不平铺

          background-attachment:

          background-position: center right;// 前一个是水平，后一个是数值

         background-size:100px 20px;

显示一个图片的一部分：可以一个大图片中集成很多小图片

         height:30px;

         100px;

         background-image:url(lesson.sinaapp.com/images/float2.png);

         background-position:100px -200px;

背景连写：

        background:gray url(www.xx.com/p.png)  no-repeat  150px -200px

 

css初始化代码：

        初始化一些可能挑平台的特性：直接使用淘宝或者qq的初始化css

 

 

文字竖直居中：设置line-height和height一样即可

a{

      height:100px;

800px;
line-height: 100px;

}

 

注意，定位部分可能会影响子元素，用的时候小心

相对定位：相对于原本的位置，原来的空间依然存在

绝对定位：相对于父元素的位置，原来的空间不存在了（不影响其他元素）。父元素必须有position属性，如果没有依次往上找。

#p1 {

   position:relative;

   right:20px;

   left:20px;

}

#p2{

   postion:absolute;

   top:20px;

   left:20px;

}