css样式
常用属性
list-style : none ; 去掉ul和ol标签中自带的默认样式小圆点和数字的
outline : none ; 去掉input框自带的获取焦点时的蓝框
cursor : pointer ; 当鼠标移上去会变成小手
font - size : n px ; 设置字体的大小
font - family : " 字体 " ; 设置字体是楷体或者什么字体,多个字体用逗号隔开
font - weight : normal ; 设置字体重量,这是正常;
( bold , bolder )比正常字体粗一些,两个的效果一样,lighter 比正常字体细一些;也可400为正常字体,700加粗,数字越大,字体越粗;
font - style : normal ; 设置文字样式,正常; italic 字体为斜体, oblique 偏斜体
line - height : n px ; 设置字体的行高,一般用于字体垂直居中
text - align : center ; 设置字体水平居中, left 左 light 右
text - decoration : none ; 文本装饰效果为正常;underline 下划线 overline 上划线 line - through 删除线
text - index : n em/px ; 设置文本首行缩进
text - transform : capitalize ; 设置文字大小写转换为首字母大写
uppercase 全部大写 lowercase 全部小写
vertical - align : top ; 设置图片垂直为上 middle/center 居中 botton 下 *注:前提是文字要line-height 垂直居中
letter - spacing : n px ; 用在中文,英文上,字与字之间的间距
world - spacing : n px ; 当中英文混合时,字母与中文之间的间距
background : rgba( 0 , 0 , 0 , .4 ) ; 设置背景颜色透明度,前三个为颜色的rgb形式,后面为透明的深度0 ~ 1 之间取值
background - color : red ; 设置背景颜色为红色,也可以直接写成background : red ;
background - image : url ( 图片路径 ); 设置背景图片 也可以写成background : url ( 图片路径 ) ;
background : red url ( 图片路径 ) no - repeat left center ; 现在设置背景图片的简写,第一个为背景颜色,第二个为背景图片, 第三个为背景图片不重复,单一的, 后面的相当于定位,让图片位于左边,居中
background - size : n px , n px ; 设置背景图片的大小
background:linear-gradient(to right , #000 , #ccc ) ; 渐变色;从左到右开始,有黑色渐变到灰色
position : relative ; 父元素相对定位,left , top , right , bottom , width , height
position : absolute ; 子元素绝对定位 ,前提是父元素要有相对定位
position : fixed ; 固定定位
z - index : -1~1000 ; 用于定位,是图片显示或隐藏,有负值,也有正直
float : left ; 是元素左浮动(水平移动)right 右浮动
overflow : hidden ; 溢出,隐藏 ,可用于清除浮动,当div中没有高度时,当有高度时,就不能用了,他会把超出的高度都隐藏起来
clear : both ; 清除全部样式,一般用来清除浮动
text - shadow : n px , n px , n px , color ; 定义文本阴影 第一个参数是:阴影向右偏移的,可为负值(向左偏移) 第二个参数是:阴影向下偏移的,可为负值(向上偏移) 第三个参数是:阴影偏移的距离 第四个参数为:阴影的颜色 *注:可写多个阴影,不过要用逗号隔开
box-shadow : n px , n px , n px , color ; 盒阴影;同文本阴影用法一样
display: inline-block ; 转行内快标签 , none 为隐藏
block 显示,转块标签 inline 转行标签
border-radius :n %/px ; 设置边框的圆角
margin : 0 ; 设置外边距
margin : 0 0 0 0 ; 设置外边距 (顺时针): 一 :上外边距 ; 二 :右外边距 ; 三 :下外边距 ; 四 : 左外边距 ;
margin : 0 0 0 ; 设置外边距 (顺时针): 一 :上外边距 ; 二 :左右外边距 ; 三 : 下外边距 ;
margin : 0 0 ; 设置外边距 (顺时针): 一 :上下外边距 ; 二 :左右外边距 ;
margin - top : n px ; 设置上外边距
margin - bottom : n px ; 设置下外边距
margin - left : n px ; 设置左外边距
margin - right : n px ; 设置右外边距
padding : 0 ; 设置内边距(同上面的margin,用法一样)
以上是写的一些平常用到的样式,欢迎评论!!后续会继续添加完善的!!!