html各种样式整理


background-color:#ff0000;  //设置背景颜色   background-image: url(stars.gif); background-repeat: repeat-x 设置背景图片,设置重复方向,no-repeat为无,全屏  background-position:center;设置背景图片的位置上,可以设置为 横坐标?px,纵坐标?px

border-top:5px solid black;//设置边框宽度,样式,颜色,top可以设置方位,并且可以省略; border-style:solid;//设置边框样式,如实心,空心;border-color:black;//设置边框颜色;border-width:4px;//设置边框宽度  

border-radius:20px;  //设置边框圆角

border-collapse: collapse;  //为表格设置合并边框模型;将两条边框合并为一条边框

border-spacing:1px 50px;  //设置相邻单元格的边界间的距离(仅用于“边界分离”模式)。左右,上下

box-shadow: 10px 10px 5px #888888;  //设置盒子阴影,右偏移,下偏移,扩散,颜色

color:#00ff00;  //设置字体颜色

cursor:pointer;  //设置光标属性,光标图案

clip:rect(0px,100px,140px,0px);  //对图像进行裁剪,上,右,下,左

display:none;  //此元素不会被显示。block,此元素将显示为块级元素,此元素前后会带有换行符;等。

empty-cells:show;  //在table表格里面,可以设置空的单元格显示  empty-cells:hide;  //在table表格里面,可以设置空的单元格隐藏

float:left;  //左浮动,向左对齐;float:right;  //右浮动,向右对齐  clear:both  //清除浮动

font-style:normal;//字体样式正常,italic字体样式斜体,oblique字体样式斜体  

font-size:20px;  //设置字体大小

font-weight:bold  //设置文本粗细  font-weight:900

flex:1  //让所有弹性盒模型对象的子元素都有相同的长度,并且忽略其内部的内容;

flex-direction  //弹性盒对象,规定灵活项目的方向

<iframe src="//www.baidu.com" width="500px" height="500px">  //标记一个内联框架,内嵌一个网页

line-height:30%  //设置行间距

letter-spacing: 20px  //设置字母之间的间距

list-style:none;  //不显示ol图标  ul{list-style:square url("sqpurple.gif");}  //使用方形图片作为每列标题

minlength="2"  //最小输入长度为 2  

max-width:100px;  //定义元素的最大宽度

margin:10px 5px 15px 20px;  //设置所有外边距属性,可以缩小div区域  上,右,下, 左  margin: 0 auto;//上下为0,左右平分父空间,居中

min-height:100px;  //段落的最小间距

list-style:none; //不显示ol图标  ul{list-style:square url("sqpurple.gif");}  //使用方形图片作为每列标题

overflow: scroll;  //如果元素中的内容超出了给定的宽度和高度属性,overflow 属性可以确定是否显示滚动条等行为,默认值是 visible。

outline:#00FF00 dotted thick;  //border外面的线,可以设置的属性分别是(按顺序):轮廓颜色,轮廓样式,轮廓宽度

opacity: 0.5;  //设置透明度级别 0-1

padding:10px 5px 15px 20px;  //设置内边距,可以扩大div区域 上,右,下,左

text-align:left;center;right;  //文本左对齐,居中,右对齐

text-transform://文字转换属性  uppercase全部转换为大写,lowercase全部转换为小写,capitalize转换为首字母大写

text-decoration:none;  //overline:上划线,line-through:中划线,underline:下划线,none:无样式 text-decoration: underline overline dotted red;上划线加下划线红色虚线 text-decoration: underline overline dotted red;上划线加下划线蓝色波浪

text-indent: -99999px;  //将文字向左缩进,使用户看不到

transform:rotate(25deg);  //旋转元素

required="required" oninvalid="setCustomValidity('请输入')" oninput="setCustomValidity('')"  //必填,可更改提示信息

vertical-align:20px;  //设置向上偏移或者向下偏移

valign="top"   //表格里的内容常用对齐方式,top,与内容进行上对齐;middle,居中对齐;bottom,下对齐;baseline,与基线对齐

width:50px;  //height:100px;  设置宽度和高度

width:50px;  //height:100px;  设置宽度和高度

writing-mode:vertical-rl;  //书写模式属性,水平-TB,垂直-LR,垂直-RL,横盘-LR,横盘-RL

white-space:nowrap;  //文本不会换行,文本会在同一行上继续,直到遇到<br>标签为止。

z-index: 0;  //设置图像的层级,越大则越在顶层

!important;  //可以覆盖父级的样式,如果有同名称的两个样式,总是优先执行

-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;  //指定两个盒子接壤


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM