css中常用的标签
最常用的标签
left 左 top 上 right 右 bottom 下 font 字体 size 大小 width 宽度 height 高度 class 类 label 标签 form 表单 group 组
for 为 example 例子 email 邮箱 placeholder 占位符 checkbox 复选框 line 线 button 按钮 submit 提交 default 默认
margin 外边距 padding 内边距 weight 重量 normal 正常 display 显示 block 块 no-repeat 背景不重复 auto 自动居中
color 颜色 style 风格 clear:both 清除浮动 float 浮动 middle 中间 backround 背景 list 列表 conten 内容 letter 文字
spacing 间距 white 白色 yellow 黄色 blue 蓝色 red 红色 text 文本 position 位置 static 静态定位 relative 相对定位
absolute 绝对定位 fixed 固定定位 none 零,没有 id id选择器 :hover 伪类 normal 正常 !important权值最高写元素分号;内
placeholder 表单中提示输入
css声明
font-family:sans serif; 字体-类型:无衬线字体; 设置字体的类型,如有用户无此字体可在后面添加其他常用的字体用逗号隔开。
font:12px helvetica,arial,sans-serif; 字体:12px,后面都是字体的样式。比如宋体等,
font-size:20px; 字体-大小:20px; 设置字体的大小为20px.
font-style:italic; 字体-风格:斜体; 将包含快中的字体设置为斜体
font-weight:bold; 字体-重量(粗细):粗体; 设置字体的为粗体字
-webkit-font-smoothing: antialiased; 用于设置字体的抗锯齿(无滑度)的属性,(使用后字体看起来更加清晰)只有苹果ios系统才有影响
text-align:right; 文本-对齐:右边; 将文本向右对齐
text-align:center; 文本-对齐:中心; 将文本对齐中心、
text-indent:18px; 文本-缩进:18px; 将文本进行缩进18px,常用于表单的书写框。
-webkit-tap-highlight-color: transparent; 移动端,安卓与ios中有些点击时会有阴影,使用这行代码就ok.
vertical-align:middle; 垂直-对齐:中间; 将属性垂直对齐到中间
vertical-align:baseline; 垂直-对齐:基线; 将属性垂直对齐最高元素顶端
display:inline-block; 显示:行内-块. 意思是将块级元素转换成行内元素。
display: block; 显示:块级 这文本显示为块级元素
background-color:red; 背景-颜色:红色 将背景颜色设置为红色
background:no-repeat center center; 背景: 不重复 居中 使背景不重复并且居中
background-size: cover 背景-大小:平铺; 将背景图片铺面整个屏幕
zoom:1; zoom属性是lE浏览器专有属性。意思是缩小比例,1或100%都是正常。
float:right; 浮动:右边 将块级元素向右浮动
float:left; 浮动:左边 将块级元素向左浮动
line-height:28px; 排-高度:28 离上排的高度20px
box-shadow:0px 1px 2px 0px rgba(0,0,0,0.05)盒子-阴影:x轴,y轴,阴影模糊度,阴影大小,阴影颜色0,0,0,0.5最后一个0.5是颜色的透明度。
box-sizing: border-box 盒子模型 如border 1px 将其计算到整个容器大小内
padding-top:65px; 内边距-上:65px; 设置内边距离上面65px
list-style:none; 列表-样式:无。 没有任何其他乱七八糟的样式
outline: none; 轮廓: 无; 消除input,select点击时的默认框
overflow:hidden; 溢出:隐藏; 设置将溢出超出设置的部分进行隐藏
overflow:visible; 溢出:可见 将溢出的地方可进行可见往下
overflow:scroll; 溢出:滚动 将溢出的文本元素进行滚动有下拉条
text-overflow:ellipsis; 文本-溢出:省略; 将文本溢出的部分进行省略
text-transform:uppercase; 文本-转换:大写; 将所有转换大写;只有单词有效;
text-transform:lowercase; 文本-转换:小写; 只有单词有效
transform:translate 转换:旋转 css3属性将属性元素进行旋转
white-space:nowrap; 白色-空间:不换行; 设置这个空间超过的部分不会进行换行。
word-break: break-word 字体-超出:超出字体 字体超出的可继续超出
word-break:break-all; 字体-超出:超出所有 字体可以超出容器
word-wrap:break-word; 字包:断字 字体超出的地方进行断字处理
word-break:normal; 字体超出正常显示
white-space: normal;
font-weight:normal 字体-重量:正常; 将字体的粗细设置为正常包括默认字体
border:1px dotted #000; 将边框设置为:1px的边框大小,dotted边框类型为虚线(solid实线),边框颜色为黑色。
border-width:0; 框架-宽度:0; 设置边框的宽度等多少
border:none; 边框:无 将边框设置为零
border-radius:4px 边框-角:4px 将边框的角度设置为圆形,圆度会随着角度数字越大而越园。
line-height: 1; 文本-高度:1; 文本的高度设置为1,将行高设置为1;
:nth-of-type(2) 伪类选择器 选择父元素的地几个子元素
hyphens:auto 可以给没写完的单词加个横杆“-”让其接着往下书写
box-sizing:content-box; 盒子模型为内容内盒子 省略边框占有的像素;
-webkit-filter: brightness(120%); css3调整亮度标签
cursor: pointer; 鼠标:指针 鼠标移动到属性上将产生与类似a标签的指针样子;
css背景属性
background 在声明中可以设置所有的背景属性
color/设置背景颜色) image设置背景图像)attachment设置背景图像是否固定或随页面其余部分滚动) position设置背景图像的开始位置) repeat设置是否及任何重复背景图像。
css文本居中
text-align:center;将文本进行居中对齐
text-align:left; 将文本向左靠齐
text-align:right; 将文本向右靠齐
text-align:justify 将文本进行两端对齐
- 上一篇 »HTML常用标签总结
- 下一篇 »css3 :nth-child 常用用法