xhtml+css基础知识1

样式

1. 行间样式：在标签里

   <div style="400px; height:200px; background:red;">块</div>

2. 内部样式：用<style></style>标签包裹

   <style>
   #box{width:400px; height:200px; background:red;}
   </style>

3. 外部样式：<link />标签

   <link href="style.css" rel="stylesheet"/>

常见样式：[属性:属性值;]

1. width 宽度
2. height 高度
3. background 背景
4. border 边框
5. padding 内边距
6. margin 外边距

复合属性：一个属性多个属性值。background,border,padding,margin

1. background

   <style>
   #bg{
       background:url(bg.jpg) center 0 no-repeat gray fixed;
       /*
       background-attachment: fixed; 背景是否滚动
       background-color: gray; 背景颜色
       background-image: url(bg.jpg);  背景图
       background-repeat: no-repeat; 背景图是否重复
       background-position: center 0px; 背景图位置
       */
   }
   /* 
   复合属性：一个属性多个属性值；
   
   background 背景
   repeat  重复
   10px(X轴)  50px(Y轴)
   fixed 固定
   */ 
   </style>
   

2. border

   <style>
   #box{
       border:1px dotted blue;
       /*
           宽度
       border-top- 1px;
       border-right- 1px;
       border-bottom- 1px;
       border-left- 1px;
       样式
       border-top-style: dotted;
       border-right-style: dotted;
       border-bottom-style: dotted;
       border-left-style: dotted;
       颜色
       border-top-color: blue;
       border-right-color: blue;
       border-bottom-color: blue;
       border-left-color: blue;
       */
   }
   /* 
   边框样式：
       solid      实线
       dashed  虚线
       dotted   点线（IE6不兼容）
   */ 
   </style>

3. padding

   <style>
   #box{padding:30px 30px 10px 30px;}
   /*
   padding: top right bottom left;
   
   padding-top:30px;
   padding-right:30px;
   padding-bottom:30px;
   padding-left:30px;
    
   padding:30px;上右下左都一样
   padding:30px 25px;上下一样，左右一样
   padding:30px 5px 25px;左右一样
   
   注意：内边距相当于给一个盒子加了填充厚度会影响盒子大小。
   */ 
   </style>

4. margin

   <style>
   #box1{ margin: 20px 20px 20px 20px;}
   /* 
   margin 外边距（跟padding一样）
   外边距复合：margin: top right bottom left;
   
   外边距的问题：
   1、上下外边距会叠压；
   2、父子级包含的时候子级的margin-top会传递给父级；（内边距替代外边距）
   */ 
   </style>

常见样式文本：

1. font-size 文字大小（一般均为偶数）

2. font-family 字体（中文默认宋体）
3. color 文字颜色（英文、rgb、十六位进制色彩值）
4. line-height 行高
5. text-align 文本对齐方式
6. text-indent 首行缩进（em缩进字符）
7. font-weight 文字着重
8. font-style 文字倾斜
9. text-decoration 文本修饰
10. letter-spacing 字母间距
11. word-spacing 单词间距（以空格为解析单位）

font:font-style | font-weight | font-size/line-height | font-family;