HTML 样式属性

时间:2022-06-27 08:06:18
 @charset "utf-8";
 /* CSS Document */
 <style>
 p{
     /*背景与前景*/
 background-color:#000;/*背景色,样式表优先级高*/
 background-image:none;/*设置背景图片(默认)*/
 background-attachment:fixed;/*背景是固定的,不随字体滚动*/
 background-repeat:no-repeat;/*不平铺,regeat 平铺,regeat-x-y横向平铺 纵向平铺*/
 background-position:center;/*背景图居中,设置背景图位置时,regeat必须为no-regeat*/
 background-position:right top;/*背景图放右上角(防卫可以自己更改)/
 background-position:left 100px top 200px;/*离左边100像素,离上边200像素(可以设为负值)*/
 /*字体*/
 font-family:"新宋体";/*字体,常用微软雅黑.宋体*/
 font-size:18px;/*字体大小.常用像素12px,14px,18px,还可以用"em","2.5em"即默认字体的2.5倍,还可以用百分比*/
 font-weight:bold;/*加粗,normal正常*/
 font-style:italic;/*倾斜,normal不倾斜*/
 color:#000;/*颜色*/
 text-decoration:underline;/*下划线,overline上划线,line-through删除线,none去下划线*/
 text-align:center;/*(水平对齐)居中对齐,left左对齐,right右对齐*/
 text-indent:28px;/*首行缩进量*/
 vertical-align:middle;/*(垂直对齐)居中对齐,top上对齐,bottom底部对齐,一般设置行高后使用*/
 line-height:24px;/*行高,一般为1.5-2倍字体大小*/
 display:none;/*不显示*/
 display:inline-block;/*,inline-block 显示为块,不自动换行,宽高可设*/
 display:block;/*显示为块,自动换行*/
 display:inline;/*效果同span标签,不自动换行,宽高不可设*/
 visibility:hidden;/*可视性,hidden隐藏但是占空间,visible 显示*/
 /*边界与边框*/
 /*border(表格边框,样式等)margin(表外间距)padding(内容与单元格间距)*/
 border:5px solid blue;/*四边框,5像素,实线,蓝色*/
 border-width::5px;/*边框5像素*/
 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;/*四边外边框宽度为10px,auto 居中*/
 margin-top:10px;/*上边外边框宽度为10px,其他三遍类似*/
 margin:20px 0px 20px 0px;/*上-右-下-左.内容与边框的四边距顺时针顺序*/
 padding:10px;/*内容与边框的四边间距为10px*/
 padding-top:10px;/*内容与边框的上间距为10px,其他三遍类似*/
 padding::20px 0px 20px 0px;/*上-右-下-左,内容与边框的四边间距顺时针顺序*/
 /*列表与方块*/
 /*width,height(top,bottom,left,right)只有在绝对坐标情况下才有用*/
 list-style:none;/*取消序号*/
 list-style:circle;/*序号变为圆圈,样式相当于无序*/
 list-style-image:url;/*图片做序号*/
 list-style-position:outside;/*序号在内容外*/
 list-style-position:inside;/*序号跟内容一起*/

 }
 </style>