样式表注释/**/

      1、样式表分类:

1-1内联样式表      <div   style="font-size:15px;"></div>

1-2内嵌样式表       写在<head>标签里,

<style type="text/css">样式表内容</style>

1-3 外部样式表    一般写样式表都会先有对全局的样式

*

{}

<link rel="stylesheet" type="text/css" href="XXX.css"-->引入外部样式表

2、选择器:

标签选择器p{}

class选择器 class="main"   .main{}

id选择器   id="main"     #main{}

用”,“隔开表示并列     .main,#main表示两者具有同样的样式

用空格隔开,表示后代    .main p表示class为main的标签里p标签使用该格式

p.sp在p中class="sp"的标签执行以下样式

3、样式的属性

3-1:背景与前景

background-color:   背景色

background-image:url(路径)          设置背景图片

background-attachment:fixed       背景是固定的

background-attachment:scroll       背景随字体滚动

background-repeat:no-repeat       /*no-repeat不平铺;repeat平铺;repeat-x横向平铺;repeat-y纵向平铺*/

background-position:center           /*背景图居中,设置背景图位置时,repeat必须为“no-repeat"*/

background-position:right  top      /*背景图放到右上角,其他同理*/

background-position:left 100px top 200px;        /*离左边100像素,离上边200像素*/

font-famliy:"宋体”

font-size:12px;              /*还可以用em,2.5em,就是默认字体的2.5倍

font-weight:bold           /*加粗

font-style:italic;            /*倾斜,normal是不倾斜

color:           字体颜色

text-decoration:underline;      /*下划线,overline是上划线,line-through是删除线,none是去掉下划线

text-align:center;                 /*居中

vartical-align:middle;           /*居中,top顶对齐,bottom底

text-indent:px;           首行缩进

line-height:             /*行高

display:none;           /*不显示,inline-block。显示为块,不自动换行,宽高可设;block,显示为块,自动换行;inline,效果同span标签,不自动换行,宽高不可设。

visibility:hidden;        /*可视性,隐藏但是占空间,visible,显示

3-2 边界和边框

border-top:5px solid blue;          上边框。。。

margin:20px 0px 20px 0px;             /*上右下左

padding同理

3-3 列表和方块

list-style:none;       /*取消序号

list-circle;           /序号变为圆圈

list-style-image:url(图片地址)

list-style-position:outside;             /序号在内容外

list-style-position:inside;        /序号跟内容一起

3-4  格式与布局

position:fixed     锁定位置,一直处于页面的某个位置不变

absolute          外层没有absolute,则相对于浏览器定位,外层有,则相对于外层边框定位

relative            相对于默认位置移动

分层   z-index在z轴分层,用于内容的覆盖

overflow:hidden;    //超出部分隐藏,scroll,显示出滚动条

<div style="clear:both"></div>截断流     截断流之后不遵循流式布局

cursor:pointer     鼠标指上去显示小手

<div  class="box"></div>

.box{

opacity:0.5;-moz-opacity:0.5;filter:alpaha(opacity=50)

}                 /*调节透明度

 

posted on 2017-04-18 16:46  缘来狠狂  阅读(175)  评论(0编辑  收藏  举报