css

css

1.css 概述

   css的作用:实现统一的定义页面元素的外观

   css(cascading style sheets)级联/层叠样式表

    1.实现了内容和表现的分离

    2.提高了代码的可重用性和可维护性

   

2.css的使用方式:

-------------------------

 内联方式表:

 

(把样式定义在元素里面,可重用性可维护性不好)

  

   <元素 style="样式1:值;样式2:值;...."> 

   例如:<h1 style="color:red;background-color:gray;" > xxx </h1>   

 --------------------- 

 内部样式表:  

   head里面:

    

   选择器{

     样式声明；

   }

   

   例如:

   <style>

    p{

      color:blue;

      font-size:20pt;

    

    }

   

    </style>

 ------------------------------   

 外部样式表:

 新建文件xxx.css  定义样式

 

 link:为当前页面引入多种文件

 <link type="text/css" rel="stylesheet" href="xxx.css" />

 --------------------------------------------------------------------

 总结语法:

 

 内联样式:   声明:<元素 style="样式1:值;样式2:值;...."> 

 

 

 内部/外部样式:

    选择器{样式声明；}

 -------------------

 css注释:/*  */  <style> 用css注释,不用html注释</style>

 ---------   

 外部样式表真正实现了 1.实现了内容和表现的分离 2.提高了代码的可重用性和可维护性 建议使用  

 ---------------------------

  优先级:就近优先,不用取并集

       内联(最高)>(内部=外部)(以最后定义的为准)

/*************************************************************************/   

3.选择器的定义:

  样式定义一个名称,便于元素使用它

  a.元素选择器:

 

以html中元素的名称定义(问题 :同一个元素细分做不到)

 

  b.类选择器

 

(跨元素随便使用)(自定义定义是时前面加个点)

    .mystyle{

      

    }

    引用: 例如:<div class="mystyle">   </div>

  c.分类选择器

 

(只能这个元素才能用的样式,同一种元素作细分)

    例如:   input.txt{

         border:1px solid red;

        }

        

        input.btn{

            border:2px dotted blue;

           }

    引用:   <input class="txt" type="text" />

      <input class="btn" type="submit" value="提交"/>

      

  d.元素id选择器

 

(只能某个元素特有--唯一性 id是唯一的)

    #pageTitle{

      

    }

    引用:例子:<h6 id="pageTitle">  </h6>

 

  e.分组选择器

 

(追加样式,或则,几个选择器需要相同样式)

   例子:  .mystyle,#pageTitle{

     border:1px solid black;

    }

  f.派生选择器(使用元素的层次位置定义选择器)

   例子:  div a {color:green}

    引用:例子:<div> <a herf="#"> xxx </a></div>

  g.伪类选择器

 

(定义某元素在不同状态下的状态)

  

   :link------超级链接没有访问过

   :active----激活

   :focus-----获得焦点

   :hover-----悬浮,鼠标移入

   :visited---超级连接访问过

   

   例子:   a:hover{font-size:100pt;}

    

/*********************************************************************************/

4.各种样式:

 (1).单位 

   %:百分比

   in:英寸

   cm:厘米

   mm:毫米

   pt:磅(1pt等于1／72英寸)(绝对单位)

   px:像素(计算机上的一个点)(相对单位)

   em:1em当前字体尺寸,2em两倍于当前字体尺寸

   

 (2).颜色

   RGB(,,) #ffffff(白色) #000000(黑色)

 (3).尺寸属性

   width,height

   处理溢出overflow

   overflow:visible/hidden/scroll/auto;  

 (4).边框属性

  简写方式:

  border:width style color;

  

  border:1px solid black;

  border:2px dotted blue;

  单边定义:

  border-left/right/top/bottom:width style color;

 (5).框模型box Model

  定义了元素框处理元素内容,内边距,边框,外边距的方式

   (width,height),padding,border,margin

   (width和height指内容区域的宽度和高度)

   (增加内边距,边框,外边距不会影响内容区域的尺寸)

   (但是会增加元素框的总尺寸)

  

 (6).内边距:和内容元素之间的距离

  padding:10px;一个值代表所有

  padding:10px 20px;两个值(上 下)

  padding:10px 20px 30px 40px;  四个值(顺时针,上右下左) 

 

 (7).外边距:与下一个元素之间的空间量

  margin:10px auto;居中

  

 border/padding/margin-top/right/bottom/left:value; 

  

------------------------------

---------------------------------------------------------

5.背景

  背景颜色 :background-color:颜色;

  背景图片:background-image:url(a.jpg);   url函数

  背景图片显示模式:background-repeat:repeat/no-repeat/repeat-x/repeat-y;

            (平铺   /不平铺     /x水平铺  /y垂直铺  )(做渐变的效果)

  背景图片的位置:background-position:5px 10px;(left top)

          :50% 50%;

----------

6.文本

  字体颜色:color:

  字体大小:font-size:

  文本的水平对齐:text-align:

  字型:font-family:

  粗题:font-weight:normal/bold;

  下划线:text-decoration:none/underline;

  行高 :line-height:40px;(经常用于实现垂直居中)

  鼠标:cursor:default/pointer/help/...

------------

7.表格样式: 表格所特有的属性

  垂直对齐:vertical-align:top/middle/bottom;  

  边框合并:border-collapse:separate/collapse;

  边框边距:bordr-spacing:value;

-----------

例子:

.tab1{
border:1px solid #AEDEF2;
border-collapse: collapse;
height:150px;
width:100%;
text-align:center;/*ie认这种居中*/
}
.td1{
border:1px solid #AEDEF2;
background:ghostwhite;
font-size:12px;
font-family: 黑体;
color: #65625d;
}
.td2{
border:1px solid #AEDEF2;
background:#DAF0F1;
font-size:12px;
font-family: 黑体;
color: #65625d;
}

8.浮动：做横着的导航栏

  元素脱离原有的布局，漂浮起来

  将元素所排除在普通流之外

  将元素放置在包含可框的左边或右边

  (放不下的时候放在下一行)

  float:none/left/right;

  清除其它浮动对本属性带来的影响:

  clear:none/left/right/both;

-----------

9.显示方式:

  设置元素的显示方式

  块级元素和(行内元素:weigth/height无效)

  可以使用display样式修改元素类型;

  display:none/block/inline;

    (不显示/块级/行内)

---------

10.列表样式:

   设置列表项的标识:

  list-style-type:none/disc/circle;

  list-style-image:url();

  

  

-------------------------

11.定位:

  

  普通定位:块级和行内(默认方式 :流模式 一个层上)

  实现多个层:

     方式一:float(居左或居右)

     方式二:position:static/relative/absolute/fixed  (灵活的定位) 

 

(static:元素没有定位,出现在因该出现的位置

relative:用定位属性可以相对原来的位置移动这个元素

absolute:元素脱离文档，可以用定位属性准确的定位

)

 -----------------

  相对定位:元素仍保持其未定位前的形状

    原本所占的空间仍保留

    元素框相对于它原来的位置偏移某个距离

  绝对定位:将元素的内容从普通流中完全移出

    并使用偏移属性来固定该元素的位置

    － 相对于最近已经定过位的祖先元素(设置过position为普通流以外的其它模式)

    － 如果没有定过位的祖先元素，按相对于最初的包含块偏移

 ----------------

  定位属性:

     偏移属性top/bottom/left/right:value;

     堆叠属性:z-index:value;

 -------------

  相对定位:

   例如:style="position:relative;top:-20px;left:-30px"

  

  绝对定位:

   例如:style="position:absolute;top:-20px;left:-30px";

   

-------------------------------------------------------------------- 

12.内容溢出和光标类型

设置内容溢出时的处理:

overflow:visible/hidden/scroll/auto;

设置光标类型:

cursor:pointer/crosshair/text/wait/help;

overflow:scroll;
overflow-x:hidden;

13.半透明颜色

opacity:0.5;  css标准)*(0-1)

filter:alpha(opacity=50); ie(0-100)

背景透明，字体不透明:

RGBA 颜色值是这样规定的：rgba(red, green, blue, alpha)。alpha 参数是介于 0.0（完全透明）与 1.0（完全不透明）的数字。
实例:

p
{
background-color:rgba(255,0,0,0.5);
}

-------------------------------------------------------------------- 

各个选择器的，优先级

!important   改变优先级别    

1.两种不同的样式

2.用!important改变优先级别

----------------------------------