前后端开发中最常用到的CSS样式大全【干货分享】

前后端开发中最常用到的CSS样式大全【干货分享】

text-transform:uppercase  将字符显示为大写

text-transform:lowercase  将字符显示为小写

padding:内边距

margin:外边距

font-size:字体大小

*代表所有元素

text-align:center:字体居中

height:高度

ilne-height:行高

width: 宽度

display:显示方式(block块元素,inline行内元素,inline-block行内块元素)

dotted:点线

solid: 实线

dashed:虚线

red:

yellow:黄

opacity:0.8:设置透明色

blue:

green: 绿

position:relative;相对定位

top:10px;

cursor:pointer;鼠标变成一只手

white-space:nowrap;text-overflow:ellipsis;overflow:hidden; 文本溢出隐藏

text-shadow: 文字阴影  X轴偏移量 Y轴偏移量 阴影模糊偏移量 阴影颜色

box-shadow: 盒子阴影   X轴偏移量 Y轴偏移量 阴影模糊半径 阴影的放大值 阴影颜色 阴影方向(inset 阴影在内)

border-radius: 15px;设置圆角 设置的大小为宽高的一半时,会变成圆

text-indent: 2em 首行缩进

white-space: nowrap; 文字超出不换行

overflow: hidden,超出部分隐藏

text-overflow: ellipsis;超出部分变成省略号


    background-size: cover;设置背景图片自适应缩放

overflow-y: scroll;超出部分Y轴滚动条

cursor:url('文件路径'),auto;自定义鼠标样式 

<link rel="shortcut icon" type="image/x-icon" href="路径/favicon.ico"> 添加网站icon

:link:未被访问过的超链接

:visited:被访问过的超链接

:hover:当鼠标经过

:active:当鼠标左键按住

:focus:当得到鼠标焦点

:first-child:所有标签的第一个标签

:last-child:所有标签的最后一个标签

:nth-child(4):选择第4个特定元素

:nth-child(odd):选择奇数行的子级特定元素 even为偶数

font-style: 

italic  并非所有系统都支持 oblique  斜体

font-weight:

bold加粗   bolder更粗

font-variant: small-caps : 字体异型,以小型大写字母形式,表示小写英文字母

font-family:设置字体

@font-face{

font-family : 'abc';

src:url('字体路径');

}:导入自定义字体  使用为:font-family: "abc";

font: style weight variant size/line-height family  :font的简写

text-decoration: underline 下划线,none 没有线,line-through 删除线,overline 上划线

vertical-align: top 上对齐,bottom,下对齐,middle 中对齐。设置垂直对齐方式

清除浮动:

给浮动元素的直接父级添加 ::after{display:block; content:''; clear:both;}

clear: 清除浮动,both,清除两边,left,清除左边,right,清除右边

position: static 无定位  absolute  绝对定位    relative 相对定位   fixed  固定定位

visibility: hidden 隐藏  visible  出现

display: none 消失 ,inline 行内  , inline-block 行内块元素, block 块元素


最后编辑于:2019/10/16作者: 牛逼PHP

发表评论