本文主要记录一下HTML标签的常用属性和CSS样式。
1.一些特殊标签
标签 | 描述 |
---|---|
<b> | 粗体字 |
<strong> | 粗体字,强调 |
<i> | 斜体字 |
<em> | 斜体字,强调 |
<dfn> | 斜体定义 |
<u> | 底线 |
<ins> | 底线,插入文字 |
<strike> | 横线 |
<s> 、<del> | 删除线 |
<kbd> | 键盘文字 |
<tt> | 打字体,H5不支持 |
<xmp> | 固定宽度的字体,在文件中空白,换行 |
<pre> | 预格式化 |
<code> | 源代码 |
… | … |
2.常用属性及样式
2.1. 背景、颜色
- background:背景
- color:颜色,可用颜色名称、16进制、rgb元组表示
- opacity:透明度,也可用rgba()的第四参数指定,filter可添加可视效果
2.2. 形状边界
- width/height:宽/高,同时有最大/小值、比例等设置
- border-radius:圆角
- border-shadow:添加阴影
- border-image:边界图片,不支持IE
- resize:调整尺寸,由用户调整,IE不兼容,e.g.:resize:both;…
- box-sizing:方框大小调整,以确切方式定义适应某区域具体内容
- outline-offset:对轮廓进行偏移,并在超出边缘的位置绘制轮廓
2.3. 位置排布
- top/right/bottom/left:上/右/下/左
- position:位置布局,relative - 相对、absolute - 绝对
- float:浮动
- display:显示样式,如:none、block、inline、inherit、flex …
- align/text-align/vertical-align:位置显示设置
- margin/padding:外/内 边距
- transform:元素空间位置变换
2.4. 文本效果
- @font-face规则:可通过font-family指定字体类型,src指定字体url,font-weight指定字体粗细等等
- text-shadow:文本阴影
- box-shadow:盒子阴影
- text-overflow:定义如何显示溢出内容
- word-wrap:允许文本换行
- word-break:单词拆分换行属性,指定换行规则
2.5. 2/3D转换
-
2D:
- translate()方法:根据左(X)轴和顶(Y)轴位置参数,从当前位置移动
- rotate()方法:对于给定参数的元素,顺/逆时针旋转
- scale()方法:对给定参数(x,y)的元素增加或减少大小
- skew()方法:(x,y)对应两轴的倾斜角
- …
-
3D:
- matrix()方法:有六个参数,为合并方法,包含上述功能
- rotateX()方法:围绕一个给定度数的X轴旋转元素
- rotateY()方法:围绕一个给定度数的Y轴旋转元素
- …