轻设计 / 轻生活 / 轻日记 / 轻梦想 === zhoumojianshe ===
© 优特良品&优特建站出品 | Powered by YOUTIY
苏ICP备13018047号-1
html常用属性标签大全及作用
TAGS: 前端设计

(1)  *block(区块)

行高 line-height:数值 | inherit | normal;
字间距 letter-spacing: 数值 | inherit | normal;
显示 display:
none: 不显示,使用的场景非常多
block: 把内联标签变成块级标签
inline: 把块级标签变成内联标签
inline-block:变为行间块元素

(2) *box(盒子)

宽度 width: 长度 | 百分比 | auto;
高度 height: 长度 | 百分比 | auto;
清除 clear: none | left | right | both;
外边距 margin: 上 右 下 左 ;
内边距 padding: 上 右 下 左 ;
定位 position: absolute | relative;
超出 overflow: visible | hidden | scroll auto;

(3)  float(浮动)

浮动 float: left | right | none; 在页面布局的时候用的最多

(4)  position(定位)

fixed 一般用来写网页顶端的固定导航条,或者两侧的菜单。
absolute与relative 这两者一般配合使用,用于调整div之间的相对位置

(5)  透明度

opacity 0-1 表示透明度

(6)  font(字体)

颜色 color: 数值;
大小 font-size: 数值;
字体 font-family: "Courier New", Courier, monospace, "Times New Roman", Times, serif, Arial, Helvetica, sans-serif, Verdana
样式 font-style: oblique;(偏斜体) italic;(斜体) normal;(正常)
粗细 font-weight: bold;(粗体) lighter;(细体) normal;(正常)

(7)  background(背景)

背景 background: transparent; /透视背景*/
颜色 background-color: 数值;
图片 background-image: url() | none;
重复 background-repeat: inherit | no-repeat | repeat | repeat-x | repeat-y;

(8)  text(文本)

大小写 text-transform: capitalize | uppercase | lowercase | none;
修饰 text-decoration: underline;(下划线) overline;(上划线) line-through;(删除线) blink;(闪烁)
排列 text-align: justify | left | right | center;
缩进 text-indent: 数值 | inherit;
阴影 text-shadow:数值;

(9)  border(边框)

边框样式 border-style: dotted;(点线) dashed;(虚线) solid; double;(双线) groove;(槽线) ridge;(脊状) inset;(凹陷) outset;
边框宽度 border-width: ;
边框颜色 border-color: top值 right值 bottom值 left值;

(10)  list-style(列表样式)

类型 list-style-type: disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none;
位置 list-style-position: outside | inside;
图像 list-style-image: URL;
简写 list-style:目录样式类型 | 目录样式位置 | url;

(11) margin(边界)

margin-top:10px; (上边界)
margin-right:10px; (右边界)
margin-bottom:10px; (下边界值)
margin-left:10px; (左边界值)
margin-inside:;
margin-outside:;

(12) padding(填充)

padding-top:10px; /上边框留空白/
padding-right:10px; /右边框留空白/
padding-bottom:10px; /下边框留空白/
padding-left:10px; /左边框留空白/

(13) vertical(垂直)

vertical-align:sub; /下标字/
vertical-align:super; /上标字/
vertical-align:top; /垂直向上对齐/
vertical-align:bottom; /垂直向下对齐/
vertical-align:middle; /垂直居中对齐/
vertical-align:text-top; /文字垂直向上对齐/
vertical-align:text-bottom; /文字垂直向下对齐/

(13) a(链接)

a /所有超链接/
a:link /超链接文字格式/
a:visited /浏览过的链接文字格式/
a:active /按下链接的格式/
a:hover /鼠标转到链接/

(14) cursor(光标)

光标形状 cursor:hand | crosshair | text | wait | move | help | e-resize | nw-resize | w-resize | s-resize | se-resize | sw-resize;
/也可以自定义/
cursor: hand; /链接手指/
cursor: crosshair /十字体 /
cursor: s-resize /
箭头朝下 /
cursor: move /
十字箭头, 朝右
/
cursor: help /加一问号 /
cursor: w-resize /
箭头朝左 /
cursor: n-resize /
箭头朝上 /
cursor: ne-resize /
箭头朝右上 /
cursor: nw-resize /
箭头朝左上 /
cursor: text /
文字型
/
cursor: se-resize /箭头斜右下 /
cursor: sw-resize /
箭头斜左下
/
cursor: wait /漏斗

周末
2022-06-17 16:06:50
标签云
网页设计 精致慢生活 感悟思语 我的旧年华
加偶微信