CSS 基础样式

p{
    font-family:Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";   /*字体*/
    font-size: 20px;   /*字号*/
    color: red;  /*字体颜色*/
    font-style: italic;  /*字体样式*/
    font-weight: bold  /*字体粗细*/    
}

p{
    text-align: left;   /*文本的对齐方式*/

    text-decoration-line:underline;  /*文本装饰*/
    /*也可以这样来设置  text-decoration: underline;  */
    text-decoration-style:solid;  /*默认就是单实线*/
    text-decoration-color: red; /*线颜色*/
    
    text-transform: capitalize;  /*大小写转换，每个单词的首字母都大写*/
    
    text-indent: 40px;   /*首行缩进*/
    
    letter-spacing: 2px;  /*字符间距*/
    word-spacing: 10px;  /*单词间距*/
    
    line-height: 150%;  /*行高（行间距）*/
    
    white-space: nowrap  /*空格、换行处理*/
}

body{
    background-color: red;  /*背景颜色*/

    background-image: url("bg.png"); /*背景图片，url()中的路径可引可不引。可以设置多个url()，用逗号隔开即可*/
    background-repeat:no-repeat;  /*背景填充*/
    background-position: left;  /*背景图片的位置，这个属性需要和background-repeat: no-repeat搭配使用*/
    background-attachment:fixed;  /*背景图片是否随内容的上下滚动而滚动*/
    background-size:80px 60px;  /*设置背景图片的尺寸，可使用百分比*/

    background-origin:content-box;  /*设置背景图片填充的范围，只能为背景图片，不能是背景颜色*/
    background-clip: content-box;   /*设置背景的填充范围，可以是背景图片或颜色*/
　　/*element=content+padding+border，content-box是填充content，padding-box是填充padding+content，border-box是填充border+padding+content*/

}

background: url("bg.png") no-repeat fixed left;

    /*同时设置4条边线*/
    border: 1px red solid;   


    /*同时设置4条边线的线宽|线型|线颜色*/
    border-width: 1px;
    border-style: sold;
    border-color: red;


    /*设置一条边线，默认是没有边线的，我们可以用此来实现分隔线*/
    border-bottom: 1px red solid; 


    /*分开设置某条边线的线宽、线型、线颜色*/
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: red;

ul>li{
    list-style-type: disc;   /*可通过此属性来指定列表项标记*/
    list-style-image: url("logo.jpg") /*以图片作为列表项标记*/
    /*这2个属性是矛盾的，一般只设置其中一个。如果同时设置，后设置的属性会覆盖前面设置的属性*/        
}

th,td{border: 1px red solid}
table{
    border-collapse: collapse   /*折叠边框（合并多余的边框线），因为给所有单元格设置border后，会出现多余的边框线*/
}

  th,td{border: 1px red solid}
  table{
  　　border-spacing: 10px 10px   /*设置单元格的间距，第一个参数设置水平间距，第二个设置垂直间距*/
  }

div{
    /*分别设置4个内边距*/
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 20px;
    padding-right: 20px;

    padding: 10px 20px 10px 20px;  /*一起设置，顶右底左*/
    padding:10px 20px;   /*参数不全时，默认取对边的值，顶=底，左=右*/
    padding: 10px;  /*4个内边距都是10px*/
}

div{
    display: none;  /*不显示元素，不再占据空间*/
    display: block;  /*作为块级元素显示，前后自动换行，可设置width、height*/
    display: inline;  /*作为行内元素显示，前后不自动换行，不能设置width、height（设置了无效）*/
    display: inline-block; /*行内块方式显示，前后不会自动换行，但可以设置width、height*/
}

div{
    visibility: hidden;  /*隐藏元素，元素不可见，但任然占据空间*/
    visibility: visible; /*默认值，元素可见*/
}

div{
    overflow: hidden;  /*隐藏|剪掉溢出的部分，可能会出现残缺文字*/
    overflow: scroll;  /*加滚动条，不管溢不溢出，都会出现滚动条*/
    overflow: auto;  /*这个用得最多，溢出时才出现滚动条*/
}

div{
    overflow-x: auto;  /*设置水平方向溢出的处理方式*/
    overflow-y: hidden;  /*设置竖直方向溢出的处理方式*/
}  

div{
    float:left; /*向左浮动*/
    float:right; /*向右浮动*/
 }

.clear{
     clear:left;  /*此元素的左边不能有相邻的浮动元素，如果有，会重起一行来显示此元素*/
     clear:right;  /*此元素的右边不能有相邻的浮动元素，如果有，会重起一行来显示右边的浮动元素*/
     clear:both;  /*left+right*/
 }

div {
    position: static;  /*默认值，正常的文档流显示方式*/
}

div {
    position:relative;  /*相对于正常位置定位,需配合left|right|top|bottom使用*/
    left:50px;  /*距原来位置左侧50px*/
    top:20px  /*距原来位置顶端20px*/
}

div {
    position:absolute;  /*需配合left|right|top|bottom使用*/
    left:50px;  
    top:20px
}

div {
    position:fixed;  /*需配合left|right|top|bottom使用*/
    left:50px;  
    top:20px
}

div {
    position:absolute;  /*需配合left|right|top|bottom使用*/
    left:50px;  
    top:20px;
    z-index:1   /*值为整数（支持负整数），默认为0，数值越大，优先级越高，堆叠在越上面。*/     
}

div{margin:auto}  

img{
    vertical-align: top;  /*与行中最高的元素的顶端对齐*/
    vertical-align: middle; /*与行的中间线对齐*/
    vertical-align: bottom; /*与行中最低的元素的底端对齐*/
    vertical-align: text-top;  /*与行中文本的顶端对齐*/
    vertical-align: text-bottom;/*与行中文本的底端对齐*/
}

p{
    text-align:left;  /*左对齐*/
    text-align: right;  /*右对齐*/
    text-align: center;  /*居中对齐*/
    text-align: justify;  /*两端对齐*/
}

img{opacity: 0.5}