CSS样式表

1.内联样式表

<div style="background-color:#0F3; height:100px; width:200px;">125151678</div>
<span style="background-color:#F00">span不可以被更改大小，因为一开始就规定了，span使用多少就占用多少</span>

2.内嵌样式表

p
{ background-color:#FF9;
font-size:24px;
color:#0FF;
width:400px;
}

<p>21321231351</p>
<p>21321231351</p>
<p>21321231351</p>

3.外部样式表

新建一个CSS文件，用来放置样式表。如果要在HTML文件中调用样式表，需要在HTML文件中点右键→CSS样式表→附加样式表。一般用link连接方式。

    有些标签有默认的边距，一般写样式表代码的时候都会先去除（也可以设置其他的样式），如下：

选择器

标签选择器。用标签名做选择器。

<style type= "text/css">

p    //格式对p标签起作用

{

  样式;

}

</style>

class选择器。都是以“.”开头。   border边框线   solid实线   line-height改行高

<div class="aa">1516156156156156</div>


.aa
{ width:300px;
height:300px;
border:1px;
border:1px solid red;
}

ID选择器。以“#”开头

<div id="aa">156156165156</div>


#aa/*id选择器*/
{ height:100px;
width:100px;
background-color:#6FF;
border:1px solid #F00;
}

复合选择器

（1）用“，”隔开，表示并列。

（2）用空格隔开，表示后代。

（3）筛选“.”。

 

三、样式属性

1、背景与前景

 /*背景色，样式表优先级高*/

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-repreat”*/

background-position:right top;    /*背景图放到右上角（方位可以自己更改）*/

background-position:left 100px top 200px;    /*离左边100像素，离上边200像素（可以设为负值）*/

 

字体

font-family:"新宋体";    /*字体。常用微软雅黑、宋体。*/

font-size:12px;    /*字体大小。常用像素12px、14px、18px。还可以用“em”，“2.5em”即：默认字体的2.5倍。还可以用百分数*/

font-weight:bold;    /*bold是加粗，normal是正常*/

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

color:#03C;    /*颜色*/

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

text-align:center;    /*（水平对齐）居中对齐，left是左对齐，right是右对齐*/

vertical-align:middle;    /*（垂直对齐）居中对齐，top是顶部对齐，bottom是底部对齐。一般设置行高后使用。*/

text-indent:28px;    /*首行缩进量*/

line-height:24px;    /*行高。一般为1.5~2倍字体大小。*/

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

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

2、边界和边框

border（表格边框、样式等）、margin（表外间距）、padding（内容与单元格间距）

border:5px solid blue;    /*四边框：5像素宽、实线、蓝色（相当于以下三行）*/

border-width:5px;

border-style:solid;

border-color:blue;

border-top:5px solid blue;    /*上边框：5像素宽、实线、蓝色（分写同上）*/

border-bottom:5px solid blue;   /*下边框：5像素宽、实线、蓝色（分写同上）*/

border-left:5px solid blue;    /*左边框：5像素宽、实线、蓝色（分写同上）*

border-right:5px solid blue;    /*右边框：5像素宽、实线、蓝色（分写同上）*/

 

margin:10px;     /*四边外边框宽度为10像素。auto，居中。*/

margin-top:10px;    /*上边外边框宽度为10像素；其他三边边框类似*

margin:20px 0px 20px 0px;    /*上-右-下-左，四边外边框顺时针顺序*/

 

padding:10px;    /*内容与边框的四边间距为10像素*/

padding-top:10px;    /*内容与边框的上间距为10像素；其他三边间距类似*/

padding:20px 0px 20px 0px;   /*上-右-下-左，内容与边框的四边间距顺时针顺序*/

3、列表与方块

width、height、（top、bottom、left、right）只有在绝对坐标情况下才有用

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

list-style:circle;    /*序号变为圆圈，样式相当于无序*/

list-style-image:url(图片地址);    /*图片做序号*/

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

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

四、格式与布局

1、position：fixed

锁定位置（相对于浏览器的位置），例如有些网站的右下角弹窗

2、position：absolute

1）、外层没有position:absolute（或relative）;，那么div相对于浏览器定位

2）、外层有position:absolute（或relative）;，那么div相对于外层边框定位

3、position：relative

相对于默认位置的移动。

注：相对位置 其实际占用位置仍然是默认位置，仅仅从视觉上把某个标签进行挪动

4、分层（z-index）

在Z轴方向分层，可以理解为分成一摞纸，层数越高越靠上。

5、float：left，right

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

五、附

1、超链接样式

link     点击之前的状态

visited   点击之后的状态（与点击前一样 否则会出错）

hover   鼠标悬停时的状态

active  点击时的状态

lvha顺序

<style type="text/css">
a:link
{
    color:black;
    text-decoration:none;}
a:visited
{
    color:black;
    text-decoration:none;}
a:hover
{
    color:red;
    text-decoration:underline;}
a:active
{
    color:orange;
    text-decoration:underline;}
    
    
.a1:link
{
    color:#6F3;
    text-decoration:none;
    }
    .a1:visited
{
    color:#6F3;
    text-decoration:none;
    }
.a1:hover
{
    color:red;
    text-decoration:underline;
    }
.a1:active
{
    color:orange;
    text-decoration:underline;
    }
</style>
<a href="http://www.baidu.com" target="_blank">百度一下</a><br />
<a href="http://www.baidu.com" target="_blank">百度一下</a><br /><br />
<a class="a1" href="http://www.qq.com" target="_blank">腾讯官网</a><br />
<a class="a1" href="http://www.qq.com" target="_blank">腾讯官网</a><br />

2、半透明效果

<div class="box">透明区域</div>

//样式表中代码：

.box

{

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

}

3、阴影效果

box-shadow:2px 2px 3px gray;（分别表示right top 渐变 颜色）

4、过渡

transition:0.7s;（过渡时间0.7秒）

5、鼠标悬停

cursor:pointer;（当鼠标悬停时 指针变为手形）