css概述

前言

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.群组选择器

     标签名,标签名{

         属性:属性值；

     }

样式的继承

子标记会继承父标记的样式