css概述

浏览数：25 / 时间：2015年06月09日

前言

1.CSS    cascading   stylesheet 级联样式表，外观显示(页面内容显示的方式)。CSS文档以.css作为后缀
2、w3c推荐页面文件定义
     数据和结构   html
     样式             css
     行为             javascript

正文

CSS(cascading style sheets,层叠式样式表)
作用：设置HTML页面的布局和样式
css的语法
选择器｛样式属性;样式属性｝

HTML中引入样式

a.外部样式（外部文件），link标签引入

b.内部样式，style标签引入

c.内联样式，通过style属性设置

注：样式优先级别

1.内联样式>内部样式>外部样式

2. 在新版浏览器中内部样式和外部样式
根据样式的引入先后顺序，后引入会覆盖前面的样式

选择器

1.标签选择器
     标签名称｛....｝
2.ID选择器
     #id ｛...｝
3.Class选择器
     .class ｛...｝
4.群组选择器
     标签名称1,标签名称2 ｛.....｝
5.包涵选择器
     父标签子标签｛...｝
     直接包涵
     父标签 > 子标签｛....｝ IE不支持

常用样式属性

1.字体相关属性

  1）字体颜色  color:颜色英文单词、#十六进制形式 RGB 如：color:#0099ff
2）字体大小  font-size
  3）字体样式  font-style
  4）字体  font-family
  5）单词间距  word-spacing
  6）字符间距  letter-spacing

2.文本相关属性

  1）文本对齐方式  text-align：left/center/right
  2）文本与左边界的距离  text-indent
  3）文本线条  text-decoration:underline 下划线 overline 上划线 line-through 删除线 none 去掉线条

3.背景相关属性

1）  背景色  background-color:red
2）  引入背景图片  background-image:url(...)
3）  图片平铺方式  background-repeat:no-repeat 不平铺 repeat-x 在水平方向上平铺 repeat-y 在垂直方向上平铺

4.边框相关的属性

1） border:线形粗细颜色
线形： solid实线、 dotted点线、 double双线和 dashed虚线

2） border-top:顶层边框
  3）border-bottom:底层边框
  4）border-left:左边框
  5）border-right:右边框

5.宽度高度属性

width:
height:

6.鼠标相关

cursor:wait 漏斗形 pointer(hand) 手指型

7.显示相关的样式

display:none 隐藏 inline 将div变成span block 将span转换成div

8.超链接

1）a:link{.....} 超链接点击之前的样式设置
  2）a:hover{....} 鼠标浮上的样式设置
  3）a:active{....} 鼠标点击的样式设置
  4）a:visited{....} 访问过后的样式设置

9.定位相关样式

1） position: absolute 绝对定位:相对父标签的左上角坐标进行定位 relative 相对定位：相对当前标签默认出现的位置进行偏移
2）top:设置上边距
3） left:设置左边距

10.内外边距

margin: 外边距
padding:内边距

总结

基本语法

      选择器{
         属性:属性值;
         .......
     }
    选择器
    a.标签选择器
       标签名{
         属性:属性值;
      }
    b.class 选择器
       .选择器的名字{
属性:属性值;
      }
     特殊
      标签名.选择器名字{//只对相对应标签有效果
        属性:属性值;
      }
    c.id 选择器
      #选择器名字{
         属性:属性值;
     }
    d.包含选择器
    标签名1 标签名2{
     属性:属性值；
   }
    对包含在标签1中的标签2有效果
   e.群组选择器
     标签名,标签名{
         属性:属性值；
     }