样式表注释/**/
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)
} /*调节透明度