导航
导航
文章目录󰁋
  1. 附录
NEW
🚀

前端系统进阶指南

系统化学习前端知识

关注公众号

公众号:前端进价之旅

梳理常见的CSS属性(二)


一、CSS 文字属性
语 言 功 能
color : #999999; 文字颜色
font-family:宋体,sans-serif; 文字字体
font-size:9pt; 文字大小
font-style:itelic; 文字斜体
font-variant:small-caps; 小字体
letter-spacing:1pt; 字间距离
line-height : 200%; 设置行高
font-weight:bold; 文字粗体
vertical-align:sub; 下标字
vertical-align:super; 上标字
text-decoration:line-through; 加删除线
text-decoration:overline; 加顶线
text-decoration:underline; 加下画线
text-decoration:none; 删除链接下画线
text-transform:capitalize; 首字大写
text-transform:uppercase; 英文大写
text-transform:lowercase; 英文小写
text-align:right; 文字右对齐
text-align:left; 文字左对齐
text-align:center; 文字居中对齐
text-align:justify; 文字两端对齐
vertical-align属性
vertical-align:top; 垂直向上对齐
vertical-align:bottom; 垂直向下对齐
vertical-align:middle; 垂直居中对齐
vertical-align:text-top; 文字垂直向上对齐
vertical-align:text-bottom; 文字垂直向下对齐
二、CSS 项目符号
list-style-type:none; 不编号
list-style-type:decimal; 阿拉伯数字
list-style-type:lower-roman; 小写罗马数字
list-style-type:upper-roman; 大写罗马数字
list-style-type:lower-alpha; 小写英文字母
list-style-type:upper-alpha; 大写英文字母
list-style-type:disc; 实心圆形符号
list-style-type:circle; 空心圆形符号
list-style-type:square; 实心方形符号
list-style-image:url(/dot.gif) 图片式符号
list-style-position:outside; 凸排
list-style-position:inside; 缩进
三、CSS 背景样式
background-color:#F5E2EC; 背景颜色
background:transparent; 透视背景
background-image:url(image/bg.gif); 背景图片
background-attachment:fixed; 浮水印固定背景
background-repeat:repeat; 重复排列-网页默认
background-repeat:no-repeat; 不重复排列
background-repeat:repeat-x; 在 X 轴重复排列
background-repeat:repeat-y; 在 Y 轴重复排列
background-position:90% 90%; 背景图片 X 与 Y 轴的位置
background-position:top; 向上对齐
background-position:buttom; 向下对齐
background-position:left; 向左对齐
background-position:right; 向右对齐
background-position:center; 居中对齐
四、CSS 链接属性
a 所有超链接
a:link 超链接文字格式
a:visited 浏览过的链接文字格式
a:active 按下链接的格式
a:hover 鼠标转到链接
cursor:crosshair 十字体
cursor:s-resize 箭头朝下
cursor:help 加一问号
cursor:w-resize 箭头朝左
cursor:n-resize 箭头朝上
cursor:ne-resize 箭头朝右上
cursor:nw-resize 箭头朝左上
cursor:text 文字 I 型
cursor:se-resize 箭头斜右下
cursor:sw-resize 箭头斜左下
cursor:wait 漏斗
|**五、CSS 边框属性**  | |
 | | |
 | border-top:1px solid #6699cc; |  上框线  |

|border-bottom:1px solid #6699cc; | 下框线 |
|border-left:1px solid #6699cc; | 左框线 |
|border-right:1px solid #6699cc; | 右框线 |
|solid | 实线框 2+6010 |
|47dotted | 虚线框 |
|double | 双线框 |
|groove |立体内凸框 |
|ridge |立体浮雕框 |
|inset |凹框 |
|outset | 凸框 |
| | |
|六、CSS 表单 | |
| | |
|<input type="text" name="T1" size="15"> | 文本域 |
| <input type="submit" value="submit" name ="B1"> | 按钮 |
|<input type="checkbox" name="C1"> | 复选框 |
|<input type="radio" value="V1" checked name="R1"> | 单选按钮|
|<select size="1" name="D1"><option>选项1</option>|
|<option>选项 2</option></select> | 列表菜单 |
|<textarea rows="1" name="1" cols="15"> |多行文本域 |
|||
|七、CSS 边界样式 ||
|||
|margin-top:10px;| 上边界 |
|margin-right:10px; |右边界值 |
|margin-bottom:10px; |下边界值 |
|margin-left:10px; |左边界值 |
|||
|八、CSS 边框空白||
|||
|padding-top:10px; | 上边框留空白 |
|padding-right:10px; | 右边框留空白 |
|padding-bottom:10px; | 下边框留空白 |
|padding-left:10px; | 左边框留空白 |


附录

css常用属性思维导图总结

支持一下
扫一扫,支持poetries
  • 微信扫一扫
  • 支付宝扫一扫