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; /*序号跟内容在一起*/
随堂
<html> ???<head> ???????<meta charset="UTF-8"> ???????<title></title> ???????<style> ???????????.top-nav{ ???????????????border: 2px solid black; ???????????????width: 100px; ???????????????height: 100px; ???????????????/*background-color: rgba(255,0,0,0.5);*/ ???????????????background-image: url(1.jpg); ???????????????background-size: 100%; ???????????????/*background-repeat: round;*/ ???????????} ???????????.content{ ???????????????font-family: "楷体"; ???????????????font-size: 10px; ???????????????font-style: italic; ???????????????font-weight: bold; ???????????????text-decoration: line-through; ???????????????color: red; ???????????} ???????????.btn1{ ???????????????width: 100px; ???????????????height: 35px; ???????????????border: 1px solid black; ???????????????????????????????text-align: center; ???????????????/*vertical-align: middle;*/ ???????????????line-height: 35px; ???????????????background-color: rgba(255,0,0,0.5); ???????????????????????????????/*透明度*/ ???????????????/*opacity: 0.5;*/ ???????????????????????????????/*过渡效果*/ ???????????????transition: 6s; ???????????????????????????????/*圆角*/ ???????????????border-radius: 7px; ???????????} ???????????????????????.btn1:hover{ ???????????????cursor: pointer; ???????????????background-color: rgba(0,255,0,0.5); ???????????????????????????????/*转动角度*/ ???????????????/*transform: skew(360deg,360deg);*/ ???????????????????????????????/*阴影*/ ???????????????box-shadow:5px 5px 0px black; ???????????????/*文字阴影*/ ???????????????text-shadow: 2px 2px 2px red; ???????????} ???????</style> ???</head> ???<body> ???????<div class="btn1">按 钮</div> ???</body></html>
1 <html> 2 ????<head> 3 ????????<meta charset="UTF-8"> 4 ????????<title></title> 5 ????????<style> 6 ????????????*{ 7 ????????????????margin: 0px; 8 ????????????????padding: 0px; 9 ????????????}10 ????????????.div1,.div2{11 ????????????????width: 100px;12 ????????????????height: 100px;13 ????????????????border: 2px solid black;14 ????????????????position: relative;15 ????????????????background-color: blue;16 ????????????????z-index: 5;17 ????????????}18 ????????????.div2{19 ????????????????/*margin: 10px;*/20 ????????????????/*margin-top: 10px;*/21 ????????????????/*margin: 10px 0px 0px 10px;*/22 ????????????????/*margin: -50px;*/23 ????????????????padding: 10px;24 ????????????????z-index: 999;25 ????????????????background-color: red;26 ????????????????27 ????????????????/*display: none;*/28 ????????????????/*visibility: hidden;*/29 ????????????????30 ????????????????/*超出部分效果*/31 ????????????????overflow: scroll;32 ????????????????overflowstack33 ????????????}34 ????????????input{35 ????????????????padding-left: 20px;36 ????????????}37 ????????????ul{38 ????????????????margin: 50px;39 ????????????????/*list-style: none;*/40 ????????????????list-style-image: url(img/123.jpg);41 ????????????}42 ????????????43 ????????????ul li{44 ????????????????/*float: left;*/45 ????????????}46 ????????</style>47 ????</head>48 ????<body>49 ????????<div class="div1"></div>50 ????????<div class="div2">51 ????????????<p>123</p><p>123</p><p>123</p><p>123</p>52 ????????????<p>123</p><p>123</p><p>123</p><p>123</p>53 ????????????<p>123</p><p>123</p><p>123</p><p>123</p>54 ????????????<p>123</p><p>123</p><p>123</p><p>123</p>55 ????????????<p>123</p><p>123</p><p>123</p><p>123</p>56 ????????</div>57 ????????<input type="text" />58 ????????59 ????????<ul>60 ????????????<li>1</li>61 ????????????<li>2</li>62 ????????????<li>3</li>63 ????????</ul>64 ????</body>65 </html>
0908期 ?HTML 样式表属性
原文地址：http://www.cnblogs.com/1711643472qq/p/7524487.html