初学前端

css样式

2019-11-16  本文已影响0人  焚心123

常用属性

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,用法一样)


以上是写的一些平常用到的样式,欢迎评论!!后续会继续添加完善的!!!

上一篇 下一篇

猜你喜欢

热点阅读