博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
css中常用的标签
阅读量:5942 次
发布时间:2019-06-19

本文共 3418 字,大约阅读时间需要 11 分钟。

最常用的标签

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  将文本进行两端对齐

转载于:https://www.cnblogs.com/liang1/p/4915178.html

你可能感兴趣的文章
CentOS使用chkconfig增加开机服务提示service xxx does not support chkconfig的问题解决
查看>>
微服务+:服务契约治理
查看>>
save
查看>>
Android DrawLayout + ListView 的使用(一)
查看>>
clear session on close of browser jsp
查看>>
asp.net mvc Post上传文件大小限制 (转载)
查看>>
关于吃掉物理的二次聚合无法实现的需要之旁门左道实现法
查看>>
mysql出现unblock with 'mysqladmin flush-hosts'
查看>>
oracle exp/imp命令详解
查看>>
开发安全的 API 所需要核对的清单
查看>>
Mycat源码中的单例模式
查看>>
WPF Dispatcher介绍
查看>>
fiddler展示serverIP方法
查看>>
C语言中的随意跳转
查看>>
WPF中如何将ListViewItem双击事件绑定到Command
查看>>
《聚散两依依》
查看>>
小tips:你不知道的 npm init
查看>>
Mac笔记本中是用Idea开发工具在Java项目中调用python脚本遇到的环境变量问题解决...
查看>>
Jmeter也能IP欺骗!
查看>>
Rust 阴阳谜题,及纯基于代码的分析与化简
查看>>