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改变优先级别
----------------------------------