首页 > 代码库 > CSS样式表

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顺序

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;(当鼠标悬停时 指针变为手形)

 

CSS样式表